Flash Tutorial – Mouse Over Image Animation

//Import TweenLite
import gs.*;
import gs.easing.*;

//Image piece's width and height
const IMAGE_PIECE_WIDTH:uint = 20;
const IMAGE_PIECE_HEIGHT:uint = 13;

//We want to know how many image pieces there are on the stage
var imagePieces:Number = 0;

//Load an image and listen when the loading is complete.
//For the "URLRequest", specify the path of your image.
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("your_image_path"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);

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

	//Get the bitmap data of the loaded image
	var imageTextureMap:BitmapData = event.target.content.bitmapData;

	//Calculate how many colums and rows we will have
	var columns:Number = Math.ceil(imageTextureMap.width / IMAGE_PIECE_WIDTH);
	var rows:Number = Math.ceil(imageTextureMap.height / IMAGE_PIECE_HEIGHT);

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

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

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

			//Create a new image piece, to which we will copy bitmap data
			//from the original image.
			var imagePiece:Bitmap = new Bitmap();
			imagePiece.bitmapData = new BitmapData(IMAGE_PIECE_WIDTH,IMAGE_PIECE_HEIGHT);

			//Copy a rectangular area from the original image to our image piece.
			//We set the rectangle's point to (1,1) so we get white borders around
			//the image pieces. We will copy the areas column by column (you can
			//change this in the for loops).
			imagePiece.bitmapData.copyPixels(imageTextureMap,
			  new Rectangle(i * IMAGE_PIECE_WIDTH, j * IMAGE_PIECE_HEIGHT,
			IMAGE_PIECE_WIDTH, IMAGE_PIECE_HEIGHT),
			  new Point(1,1));

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

			//Position the image holder to the stage.
			//We position the holders so that it looks like the original image.
			imagePieceHolder.x = i * IMAGE_PIECE_WIDTH;
			imagePieceHolder.y = j * IMAGE_PIECE_HEIGHT;

			//Store the original position of the holder (we need this later on in the animation)
			imagePieceHolder.origX = imagePieceHolder.x;
			imagePieceHolder.origY = imagePieceHolder.y;

			//Listen when the mouse hovers over an image piece
			imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

			//Add the imagePiece holder to the stage
			addChild(imagePieceHolder);

			//Update the image pieces counter
			imagePieces++;
		}
	}
}

//This function is called when the mouse hovers over an image piece holder
function mouseOverHandler(e:Event):void {

	//Save the holder to a local variable
	var imagePieceHolder = (MovieClip)(e.target);

	//Calculate random target coordinates for the holder
	var randomX = Math.random() * 1000 - 500;
	var randomY = Math.random() * 1000 - 500;
	var targetX = imagePieceHolder.x + randomX;
	var targetY = imagePieceHolder.y + randomY;

	//Tween the holder to the random coordinates using TweenLite.
	//We will call the function "outTweenFinished()" when the animation is finished.
	TweenLite.to(imagePieceHolder, 1, {x:targetX, y:targetY, onComplete:outTweenFinished, onCompleteParams:[imagePieceHolder]});

	//Add the holder to the top of the display list.
	//This way the boxes will overlap each others correctly.
	setChildIndex(imagePieceHolder,imagePieces - 1);

	//Remove the MOUSE_OVER event listener
	imagePieceHolder.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
}

//This function is called when the holder has finished the out tween
function outTweenFinished(imagePieceHolder:MovieClip):void {

	//Get the original coordinates of the holder
	var origX = imagePieceHolder.origX;
	var origY = imagePieceHolder.origY;

	//Tween the holder to the original position
	TweenLite.to(imagePieceHolder, 1, {x:origX, y:origY, onComplete:inTweenFinished, onCompleteParams:[imagePieceHolder]});
}

//This function is called when the holder is back in the original position
function inTweenFinished(imagePieceHolder:MovieClip):void {

	//We can start to listen for the MOUSE_OVER event again
	imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

}