Whoa that’s a long title. This is the source file zip for the “Featured Work” slideshow on my homepage. All the images (thumbs and fullsize) are pre-loaded with bulkloader, so there’s no delay as they transition between images. They are set to automatically play through, but will stop upon thumbnail click. All the data comes from a multi-dimensional array inside the fla, but could easily be externalized in xml. Enjoy!

Download the source

Here is a lil project I’ve been meaning to complete for awhile. It’s a photo booth built in Flash CS4 that can take multiple pictures per session, and has the ability to save as a jpg. I also built in a timer that can delay the picture taking if needed. I used various code (scrollbar, php img save) found elsewhere, I can’t find the original links, but credit where due!

NOTE – You may have to right-click the Flash and select your webcam in your Flash settings. I haven’t found a work-around to this yet.

View the project

Download the source

Here’s a really easy way to do password validation in Flash with AS3 using a few text fields and button component.

Here’s the code:

//password
var pass:String = "pass123";

//submit label
btn_submit.label = "Submit";

//event listeners
btn_submit.addEventListener(MouseEvent.CLICK, checkPassword);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownListener);

//set focus to input field
password_txt.stage.focus = password_txt;

//check input text field to pass string
function checkPassword(event:MouseEvent):void{
	if(password_txt.text == pass){
		feedback_txt.text = "Correct.";
		stage.removeEventListener(KeyboardEvent.KEY_DOWN, keyDownListener);
	}else{
		feedback_txt.text = "Incorrect.";
	}
}

//enables keyboard enter key
function keyDownListener(e:KeyboardEvent) {
    if (e.keyCode == Keyboard.ENTER){
		checkPassword(null);
	}
}

Download Source

5-27-09 Update: Thanks to Winkyboy in the comments below, added smoothing to the resizing bitmaps.

Updates to my imageLoad class similar to the thumbnail class updates. Now it uses the UILoader component as well.  This makes the image scale to fit the image area defined in the default parameters, instead of using the exact dimensions. Also fixed the way the outline around the image works.

To instantiate in fla:

import com.marianomike.imageLoad;
var image1:imageLoad;
var image:String = "http://farm4.static.flickr.com/3181/3076099910_ac5b2b8a2f.jpg?v=0";//path to image
//imageLoad(img_image:String, img_width:uint, img_height:uint, bgColor:uint, outlineColor:uint, outlineSize:uint, txtColor:uint, showDrop:Boolean, scale:Boolean)
image1 = new imageLoad(image, 400, 266, 0x000000, 0x333333, 2, 0xFFFFFF, false, true);
addChild(image1);

Download Source

I’ve made a number of updates to my thumbnail class, mainly the following:

• images no longer need to be a fixed width, they can either scale to fit size or thumb size will mask the full size image
• getters and setters to indicate clicked state
• more control over default parameters, like drop shadow and colors

Here is how I use it in a fla with a grid layout and enabling the clicked state, source file link is below the swf example:

//custom imports
import com.marianomike.thumbnail;
import caurina.transitions.*;

//flash imports
import flash.display.Stage;

var imagePath:String = "http://marianomike.com/source/thumbnail/1_1/images/"
var images:Array = new Array();
images[0] = {img:"image1.jpg", title:"Image 1"};
images[1] = {img:"image2.jpg", title:"Image 2"};
images[2] = {img:"image3.jpg", title:"Image 3"};
images[3] = {img:"image4.jpg", title:"Image 4"};
images[4] = {img:"image5.jpg", title:"Image 5"};
images[5] = {img:"image6.jpg", title:"Image 6"};
images[6] = {img:"image7.jpg", title:"Image 7"};
images[7] = {img:"image8.jpg", title:"Image 8"};

//for grid layout
var columns:Number = 4;
var columnSpace:Number = 10;
var rowSpace:Number = 10;

//variables used in setup
var container:MovieClip;
var slideTimer:Timer;
var fadeImages:Array;

function centerContainer():void{
	Tweener.addTween(container, {x:(stage.stageWidth/2 - (container.width/2)), time:.5,transition:"easeOut"});
	Tweener.addTween(container, {y:(stage.stageHeight/2 - (container.height/2)), time:.5,transition:"easeOut"});
}

function drawItems():void{
	fadeImages = new Array();

	var totalImages:Number = images.length;
	slideTimer = new Timer(150, totalImages);//new Timer(speed, #of times function fires);
	var x_counter:Number = 0;
	var y_counter:Number = 0;

	container = new MovieClip();//movieclip to hold thumbnails

	for (var i:Number = 0; i < totalImages; i++) {

		/*function thumbnail(thumbText:String,
						   id:uint,
						   image:String,
						   thumb_height:Number,
						   thumb_width:Number,
						   bgColor:uint,
						   outlineColor:uint,
						   rolloverColor:uint,
						   outlineSize:uint,
						   txtColor:uint,
						   showText:Boolean,
						   showDrop:Boolean,
						   scale:Boolean):void {*/

		var thumb_mc:thumbnail = new thumbnail(images[i].title, i, imagePath+images[i].img, 67, 100, 0x000000, 0x006699, 0xFFFFFF, 3, 0xFFFFFF, true, true, true);

		//give thumb a name
		thumb_mc.name = "thumb"+i;

		//lay out thumbs based on column number
		thumb_mc.x = (thumb_mc.width+columnSpace)*x_counter;
		thumb_mc.y = (thumb_mc.height+rowSpace)*y_counter;

		if (x_counter+1 < columns) {
			x_counter++;
		} else {
			x_counter = 0;
			y_counter++;
		}

		//add click event
		thumb_mc.addEventListener(MouseEvent.CLICK, onClick)

		container.addChild(thumb_mc);
		centerContainer();
		fadeImages.push(thumb_mc);//pushes to array for fading in
	}
	addChild(container);

	//scale thumbs down for initial load animation
	for (var z:uint = 0; z < totalImages; z++) {
		container.getChildByName("thumb"+z).alpha = 0;
		container.getChildByName("thumb"+z).scaleX = 0;
		container.getChildByName("thumb"+z).scaleY = 0;
	}

	//start transition in
	slideTimer.start();
   	slideTimer.addEventListener("timer", fadeNextImageIn);
}

//transition in function
function fadeNextImageIn(e:Event):void{
	e.target.removeEventListener(Event.COMPLETE, fadeNextImageIn);
	Tweener.addTween(fadeImages[e.target.currentCount - 1],{alpha:.9, scaleX:1, scaleY:1, time:.4,transition:"easeOut"});
}

function resetThumbs(id):void{
	for(var i:uint = 0; i < images.length; i++){
		var thmb:Object = new Object()
		thmb = container.getChildByName("thumb"+i);
		if(thmb.clicked == true && i != id){
			thmb.clicked = false;
		}
	}
}

//thumbnail click events
function onClick(e:MouseEvent):void {
	var my_thumb = e.target;
	resetThumbs(my_thumb.num);
	my_thumb.clicked = true;
}

drawItems();

Download Source

This is an edited version of the thumbnail class that I used in the CreativeARM Showcase. It’s a pretty basic thumbnail with a rollover state and options to set the height, width, background color, text on/off, and text color. Click event is controlled in the .fla. Grid layout credit goes here. The zip download also shows how to transition all the thumbs in one after another using the Tweener classes.

You can populate the thumbnail any way you want. I used XML for the CreativeARM showcase, but here’s how to use in an .fla with data coming from a multidimensional array:

[code lang="actionscript"]
//custom imports
import com.marianomike.thumbnail;
import caurina.transitions.

var images:Array = new Array();
images[0] = {img:"http://marianomike.com/source/thumbnail/images/image1.jpg", title:"Image 1"};
images[1] = {img:"http://marianomike.com/source/thumbnail/images/image2.jpg", title:"Image 2"};
images[2] = {img:"http://marianomike.com/source/thumbnail/images/image3.jpg", title:"Image 3"};
images[3] = {img:"http://marianomike.com/source/thumbnail/images/image4.jpg", title:"Image 4"};
images[4] = {img:"http://marianomike.com/source/thumbnail/images/image5.jpg", title:"Image 5"};
images[5] = {img:"http://marianomike.com/source/thumbnail/images/image6.jpg", title:"Image 6"};
images[6] = {img:"http://marianomike.com/source/thumbnail/images/image7.jpg", title:"Image 7"};
images[7] = {img:"http://marianomike.com/source/thumbnail/images/image8.jpg", title:"Image 8"};

var columns:Number = 4;
var columnSpace:Number = 10;
var rowSpace:Number = 10;
var container:MovieClip;

function drawItems():void{
	var totalImages:Number = images.length;
	var x_counter:Number = 0;
	var y_counter:Number = 0;

	container = new MovieClip();//movieclip to hold thumbnails

	for (var i:Number = 0; i < totalImages; i++) {

		//thumbnail(thumbText:String, id:uint, image:String, thumb_height:Number, thumb_width:Number, bgColor:uint, txtColor:uint, showText:Boolean)
		var thumb_mc:thumbnail = new thumbnail(images[i].title, i, images[i].img, 100, 100, 0x000000, 0xFFFFFF, true);

		//lay out thumbs based on column number
		thumb_mc.x = (thumb_mc.width+columnSpace)*x_counter;
		thumb_mc.y = (thumb_mc.height+rowSpace)*y_counter;

		if (x_counter+1 < columns) {
			x_counter++;
		} else {
			x_counter = 0;
			y_counter++;
		}

		//add click event
		thumb_mc.addEventListener(MouseEvent.CLICK, onClick)
		container.addChild(thumb_mc);
	}
	addChild(container);
}

//thumbnail mouse events
function onClick(e:MouseEvent):void {
	var my_thumb = e.target;
	trace(my_thumb.name);
}

drawItems();
[/code]

Download Source

Update: I’ve created an update to this class that uses the UILoader component, if you want to see that version go here: http://marianomike.com/2009/03/13/as3-image-load-class-11/

Here’s another one. This is an image loading class using the Flash UI preloader component. The image fades in when loaded. Source contains class .as file.

To instantiate in fla:

import com.marianomike.imageLoad;
var image1:imageLoad;
var image:String = "http://farm3.static.flickr.com/2235/2319247093_e3f51ecca8.jpg?v=0";//path to image
//new imageLoad(path, fade time, background color, width, height, line thickness, line color, show drop shadow);
image1 = new imageLoad(image, 1, 0x000000, 500, 333, 2, 0x333333, false);
addChild(image1);

Download Source

I’m in the midst of creating a flash showcase site for work, and wanted to post some knowledge during my foray into the world of Actionscript 3. I’ve been working in AS1/AS2 since c.1999, so AS3 has been a bit of a learning curve. But I’m finally starting to get the hang of it.

Here’s a really basic XML Slideshow Class that fades images in and out. Once it gets to the end, it loops to show the first image. Pretty simple stuff.

You can use it however you like, but here’s how to instantiate in an .fla:

import com.marianomike.basicSlideshow;
//basicSlideshow(xml, time image shows in milliseconds, fade time, width, height, background color, text color, outline width, outline color, show drop shadow)
var slideshow:basicSlideshow = new basicSlideshow("slideshow.xml", 1000, 2, 500, 334, 0x000000, 0xFFFFFF, 2, 0x333333, false);
addChild(slideshow);

Image paths are pulled from slideshow.xml.

You’ll also need the Tweener classes which I’ve included in the zip. I have some other stuff, which I’ll post later too.

Download the Source