Mouse Over Image Animation

This tutorial is all about ActionScript 3.0. I will show you how to load an image, slice it into pieces and then animate the pieces. So start your Flash IDE and let’s get started straight away.

Note: You will need TweenLite to complete this tutorial. Don’t worry, TweenLite is very easy to use. It will make ActionScript 3 tweening even more easier!

Setting up the environment

1. Download a picture that you want to use. Make the stage exactly the same size as your picture.

Moving into Actionsctipt 3

2. Type the following code in the first frame of your Flash movie

//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);

}

You are done, test your movie!