Image Animation via Actionscript 3

Click the stage to see what happens, then click it again :) I bet that you are wondering how the above flash movie is done. We'll, that's what we are here to find out!

Setting up the environment

1. Get yourself a nice image. The only restriction is, that it must be the size of 300x300.

2. Save the image to the same folder where you will save your FLA file.

Moving into Actionscript

3. Type the following Actionscript 3 code in the first frame.

import fl.transitions.Tween;
import fl.transitions.easing.*;

//This array will hold all the image pieces
var imagePieceHolders:Array = new Array();

//We add our tweens to this array, so they don't
//get garbage collected
var tweens:Array = new Array();

//Create a loader that loads the image
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("http://flashmymind.com/SWF/myImage.gif"));

//Listen when the loading is done
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);

//This function is called when the image is loaded.
//Then we slice the image into 30x30 pieces
//and add the pieces to the stage.
function completeHandler(event:Event):void {

	//Get the image from the loader
	var imageTextureMap:BitmapData = event.target.content.bitmapData;

	//Loop through the colums
	for (var i = 0; i < 10; i++) {

		//Loop through the rows
		for (var j = 0; j < 10; j++) {

			//Create a new movieclip that holds an image piece
			var imagePieceHolder:MovieClip = new MovieClip();

			//Create a new bitmap of size 30x30
			var imagePiece:Bitmap = new Bitmap();
			imagePiece.bitmapData = new BitmapData(30, 30);

			//Copy pixels (30x30 rectangular area) from the orginal image
			imagePiece.bitmapData.copyPixels(imageTextureMap,
			  new Rectangle(i * 30, j * 30, 30, 30),
			  new Point(0, 0));

			//Add the image piece to the movie clip holder
			imagePieceHolder.addChild(imagePiece);

			//Position the image holder to the stage
			imagePieceHolder.x = i * 30;
			imagePieceHolder.y = j * 30;

			//Store the original position (we need this later in the animation)
			imagePieceHolder.origX = imagePieceHolder.x;
			imagePieceHolder.origY = imagePieceHolder.y;
		
			//Add the imagePiece holder to the stage
			addChild(imagePieceHolder);

			//Add the imagePiece holder to the array
			imagePieceHolders.push(imagePieceHolder);
		}
	}
}

//Listen for the user's click
stage.addEventListener(MouseEvent.CLICK, clicked);

//This is called when the user clicks the stage
function clicked(e:MouseEvent):void {
	
	//Call the function that animates the image pieces
	animateAway();
	
	//Remove this function listener
	stage.removeEventListener(MouseEvent.CLICK, clicked);
}

//This function animates the image pieces to random positions
function animateAway():void {

	//Loop through the array of images
	for (var i = 0; i < imagePieceHolders.length; i++) {

		//Get the image from the array
		var imagePiece:MovieClip = (MovieClip)(imagePieceHolders[i]);

		//Tween to random x position with random time
		var tweenX:Tween = new Tween(imagePiece, "x", Regular.easeOut, 
		  imagePiece.x, Math.random() * 300, 
		  Math.random(), true);

		//Tween to random y position with random time
		var tweenY:Tween = new Tween(imagePiece, "y", Regular.easeOut, 
		  imagePiece.y, Math.random() * 300, 
		  Math.random(), true);

		//Push the tweens into an array
		tweens.push(tweenX);
		tweens.push(tweenY);

		//Listen when the user clicks the stage
		stage.addEventListener(MouseEvent.CLICK, clickedAnimateBack);
	}
}

//This is called when the user clicks the stage (when
//the images have already animated)
function clickedAnimateBack(e:MouseEvent):void {
	
	//Call the function that animates the images back
	animateBack();
	
	//Don't listen this function anymore
	stage.removeEventListener(MouseEvent.CLICK, clickedAnimateBack);
}

//This function animates the images to original positions
function animateBack():void {

	//Loop thorugh the images
	for (var i = 0; i < imagePieceHolders.length; i++) {

		//Get the image from the array
		var imagePiece:MovieClip = (MovieClip)(imagePieceHolders[i]);

		//Move to the original x position
		var tweenX:Tween = new Tween(imagePiece, "x", Regular.easeOut, 
		  imagePiece.x, imagePiece.origX, 
		  Math.random(), true);

		//Move to the original y position
		var tweenY:Tween = new Tween(imagePiece, "y", Regular.easeOut, 
		  imagePiece.y, imagePiece.origY, 
		  Math.random(), true);

		//Add the tweens into the array
		tweens.push(tweenX);
		tweens.push(tweenY);
	}
	
	//Listen for the user's click
	stage.addEventListener(MouseEvent.CLICK, clicked);
}

You can test your movie now! The comments should be informative enough to let you know what we are doing in each step. Here is the BIG IDEA if you still have some doubts:

1. Load the whole image.

2. Once the image is loaded, slice the image into 30x30 pieces. Add each piece to a holder movie clip.

3. Position the holder mc's so that it looks like a whole image.

4. Listen for the user click.

5. When the user clicks, animate the holders to random positions.

6. When the user clicks again, animate the holders back to the original positions.

Remember, if you have any questions, don't hesitate to ask in the forum.

Home of Flash and Actionscript 3 Tutorials