Mouse Over Image Animation
February 6, 2009 by: smonteThis 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! The comments should explain with enough detail what we’re doing. If you have any questions, feel free to visit the forum.
Related tutorials:
Comments
15 Responses to “Mouse Over Image Animation”Leave a Reply
You must be logged in to post a comment.
nice animattion, some times it’s comeing an error….
plz send the .fla file….. plz…. plz….
i want some of flash basic animaiton actionscript tutorials….
if u ‘ve plz send my mail id…
thn’u sir…..
If I want the pieces to copy a different image so that when all pieces are moused over, there is essentially an image swap…how would I go about this? I am new to as3/ flash and am a student trying to learn (this is not for school/ a school assignment though).
i’m getting an error that the image was not loaded from the URL. i changed the path to match the path of the picture from my computer but nothing. then i gave the link of another picture from the web and again nothing!!
Any help ?
hi this is a really great tutorial! works perfectly on mine!
thank you so much!! i just have a question…
i added a button on my FLA that supposedly will remove the “Mouse Over Image Animation”
and show the FLA’s background…
and another button that will show the “Mouse Over Image Animation” again…
would you know the code to remove the animation?!
please reply!! THANKS!!
pls sent this animation ( “Mouse Over Image Animation” ) .fla file
wow thats fantastic.
Hello i was wondering how would i got about using this code on a Background image thats already in my swf without having to load it?
I keep getting errors on line 2 like this:
Scene=Scene 1, Layer=Layer 2, Frame=1: Line 2: ‘;’ expected
import gs.*;
what is wrong with it? I can’t figure it out.
Nice animation..good tutorial..
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 6: Syntax error.
const IMAGE_PIECE_WIDTH:uint= 570;
Total ActionScript Errors: 1 Reported Errors: 1
i got error like above when i run ur code. What should i do now? I’m just a bginner.
Pls kindly reply me.
what do you exactly do with tweenlite?
very excellent
pls sent this animation ( “Mouse Over Image Animation” ) .fla file
Pls kindly reply me. Email :
Unfortunately I don’t have the .fla file anymore. But if you have some problems implementing this tutorial, I’m happy to help. But please use the http://tutorials.flashmymind.com/forum/ for techical assistance. Thanks!