Revealing an Image with a Grid Effect Animation
August 5th, 2010 in Flash | 14 CommentsIn this tutorial, we’ll see how to reveal an image piece by piece using AS3.
1. Create a new flash file (Actionscript 3.0) and save it as grid.fla.
2. All will happen in the code so open the actions panel. As often, we’ll use the Tweenlite engine.
First import the Tweenlite engine.
import com.greensock.*;
3. Declare 2 constants to store the number of columns and rows that you like the image to be sliced into, and an Array variable to stores later all the sliced images.
const COLUMNS:uint=10; const ROWS:uint=10; var gridImages : Array = new Array();
4. Next load the image. When the image is loaded, it will call the onImageLoaded function.
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("myImage.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
5. In the onImageLoaded function, we want to slice the images into COLUMNS*ROWS pieces.
First we retrieve the bitmap data of the loaded image. Store the width and the height of a piece.
Then we loop through the columns and through the rows. Inside this double loop, we create for each iteration a movie clip (imageHolder) that will contain a piece of the original image. The small piece is created by using the copyPixels() method that copies a rectangular area from the original image into the small piece. We set the imageHolder’s x and y properties and set its alpha property to 0 to make it invisible.
We add the imageHolder to the gridImages array and add it to the display list.
Finally when all our sliced images have been created we call the revealImage() function that we’re going to create right now.
function onImageLoaded(e:Event):void {
var originalBitmapData:BitmapData = e.target.content.bitmapData;
var imageWidth : Number = originalBitmapData.width / COLUMNS;
var imageHeight : Number = originalBitmapData.height / ROWS;
for (var i = 0; i < COLUMNS; i++) {
for (var j = 0; j < ROWS; j++) {
var imageHolder:MovieClip = new MovieClip();
var image:Bitmap = new Bitmap();
image.bitmapData=new BitmapData(imageWidth,imageHeight);
image.bitmapData.copyPixels(
originalBitmapData,
new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
new Point(1,1));
imageHolder.addChild(image);
imageHolder.x=i*imageWidth;
imageHolder.y=j*imageHeight;
imageHolder.alpha=0;
imagesGrid.push(imageHolder);
addChild(imageHolder);
}
}
revealImage();
}
6. The revealImage() function loop through the imagesGrid array and for each image uses the Tweenlite engine to animate its alpha property. We specify the delay parameter to make the pieces of the original image appear one after another.
function revealImage():void{
for (var i:int = 0; i < imagesGrid.length; i++){
var imageGrid:MovieClip = imagesGrid[i] as MovieClip;
TweenLite.to(imageGrid, .5, { alpha: 1,delay:i*.15});
}
}
7. Here’s the final code. Test your movie to see it in action.
import com.greensock.*;
const COLUMNS:uint=10;
const ROWS:uint=10;
var imagesGrid : Array = new Array();
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("myImage.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
function onImageLoaded(e:Event):void {
var originalBitmapData:BitmapData = e.target.content.bitmapData;
var imageWidth : Number = originalBitmapData.width / COLUMNS;
var imageHeight : Number = originalBitmapData.height / ROWS;
for (var i = 0; i < COLUMNS; i++) {
for (var j = 0; j < ROWS; j++) {
var imageHolder:MovieClip = new MovieClip();
var image:Bitmap = new Bitmap();
image.bitmapData=new BitmapData(imageWidth,imageHeight);
image.bitmapData.copyPixels(
originalBitmapData,
new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
new Point(1,1));
imageHolder.addChild(image);
imageHolder.x=i*imageWidth;
imageHolder.y=j*imageHeight;
imageHolder.alpha=0;
imagesGrid.push(imageHolder);
addChild(imageHolder);
}
}
revealImage();
}
function revealImage():void{
for (var i:int = 0; i < imagesGrid.length; i++){
var imageGrid:MovieClip = imagesGrid[i] as MovieClip;
TweenLite.to(imageGrid, .3, { alpha: 1,delay:i*.15});
}
}
Aug 5th, 2010
Wow! thats what I say every time when i visit this site and see new tutorials!
I like this stuff here realy nice effect by the way
Aug 6th, 2010
It’s really great tutorial. Thank for that. i want to ask a question. if i want to make a puzzle i need some puzzle pieces. How can i cut the image like a puzzle piece? Can you help me please?
Aug 9th, 2010
excellent, it just need some other animation, like a slide of images or a revealing image when you hover a piece of the picture.
Aug 19th, 2010
Nice one! how can we do this with multiple images, say 6 different images.
Sep 1st, 2010
[...] Revealing an Image with a Grid Effect Animation [...]
Sep 22nd, 2010
I got lost on step 4
“4. Next load the image. When the image is loaded, it will call the onImageLoaded function.”
what do you mean by the onImageLoaded function?
Sep 24th, 2010
That is very cool but I have one question : How can you change the color of the point when you copy pixels?
I wanna set its color to transparent.
Thanks for your tutorial anyway
Oct 16th, 2010
wow this tuts is awesome
Nov 6th, 2010
[...] 原文链接：http://www.riacodes.com/flash/revealing-an-image-with-a-grid-effect-animation/ [...]
Dec 12th, 2010
how can I add one more image together with this one and add an external url link to the final movieclip?
Dec 13th, 2010
How can i put 3 or 4 images ? , Help
Jan 31st, 2011
tutorial looks very good but i am unable to open grid file in flash. any help pls.
Mar 12th, 2011
Please i ‘m french.i would this tutorial in french pleassssssssssssssssssse…..
Jul 4th, 2011
How can i put 3 or 4 images ? , Help