Revealing an Image with ActionScript 3
February 6, 2009 by: smonteIn this tutorial, I will teach you how to reveal an image as seen in the Flash movie. Go ahead and move your mouse over the stage to see the effect! All this is done with ActionScript 3 and a little help from TweenLite.
Setting up the environment
1. Download a picture that you want to use. Make the Flash stage exactly the same size as your picture.
Moving to ActionScript 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=30; const IMAGE_PIECE_HEIGHT:uint=30; //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 var imageLoader:Loader = new Loader(); imageLoader.load(new URLRequest("insert_your_filepath_here")); 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. //An image piece will be invisible before the user hovers over the piece. 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(); //We want the image holder to be invisible at the beginning imagePieceHolder.alpha=0; //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 into our image piece. imagePiece.bitmapData.copyPixels(imageTextureMap, new Rectangle(i * IMAGE_PIECE_WIDTH, j * IMAGE_PIECE_HEIGHT, IMAGE_PIECE_WIDTH, IMAGE_PIECE_HEIGHT), new Point(0,0)); //Add the image piece to an image holder imagePieceHolder.addChild(imagePiece); //Set the image piece onto the holder so that the image's center //is at the top left corner of the holder. This way the rotation //will look natural. imagePiece.x = -(IMAGE_PIECE_WIDTH / 2); imagePiece.y = -(IMAGE_PIECE_HEIGHT / 2); //Position the image holder to the stage. //We position the holders so that it looks like one single image. imagePieceHolder.x=i*IMAGE_PIECE_WIDTH+IMAGE_PIECE_WIDTH/2; imagePieceHolder.y=j*IMAGE_PIECE_HEIGHT+IMAGE_PIECE_HEIGHT/2; //Listen when the mouse hovers over an image piece holder imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); //Update the image pieces counter imagePieces++; //Add the imagePiece holder to the stage addChild(imagePieceHolder); } } } //This function is called when the user hovers over an image piece holder function mouseOverHandler(e:Event):void { //Save the holder to a local variable var imagePieceHolder = (MovieClip)(e.target); //Add the holder to the top of the display list. //This way the boxes will overlap each others correctly. setChildIndex(imagePieceHolder,imagePieces - 1); //Set the alpha to one so the holder is visible imagePieceHolder.alpha=1; //Calculate a random rotation value var randomRotation=Math.random()*1024-512; //Tween the holder (rotate, scale & alpha) TweenLite.from(imagePieceHolder, 1, {rotation: randomRotation, scaleX: 2, scaleY: 2, alpha: 0}); //We don't want to receive any more mouse events for this holder imagePieceHolder.mouseEnabled = false; //Remove the MOUSE_OVER event listener imagePieceHolder.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); }
That’s all, test your movie! If you have any questions concerning this tutorial, feel free to post them in the forum.
Related tutorials:
Comments
One Response to “Revealing an Image with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
good one smonte , i am trying to custmize this code from some other effect , like zooming in to stage like 3D