Revealing an Image with a Grid Effect Animation

Revealing an Image with a Grid Effect Animation

In this tutorial, we’ll see how to reveal an image piece by piece using AS3.

View DemoDownload Source

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

16 thoughts on “Revealing an Image with a Grid Effect Animation

  1. Alex

    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 :-)

  2. ismail şimşek

    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?

  3. arnold

    excellent, it just need some other animation, like a slide of images or a revealing image when you hover a piece of the picture.

  4. Pingback: ZhiOne: Read More! » Blog Archive » 7 Impressive Flash and Actionscript 3.0 tutorials - everything about IT…

  5. sam

    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?

  6. Mathieu

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

  7. Pingback: 通过一个网格来显示图片的动画效果 - ActionScript - Learning-AS

  8. Banabhai

    how can I add one more image together with this one and add an external url link to the final movieclip?

  9. Mark

    How can this effect be done without the horizontal/vertical lines, borders, padding, or whatever you would like to call it? I was able to successfully adjust the number of boxes, the alpha effect, and speed, but I would like only my original image to be revealed without any white grid lines.

    Thanks!

  10. Mark

    I figured it out, in case anyone wants to know. In the onImageLoaded function, you will see “New Point (1,1).” Earlier, I tried changing that to “(0,0)” which helped some. It did get rid of some of the lines, but there were some thin lines remaining. Later, I realized that setting those numbers to “0,0″ actually was the correct thing to do to remove all lines. HOWEVER, you need to do some math. You know the number of COLUMNS and ROWS at the top of the actionscript? Your original JPEG image dimensions need to be divisible by that number. I had changed the number of COLUMNS and ROWS to 7, which cannot be divided into my images height and width. For example, my image is 300×250. I changed the number of ROWS and COLUMNS back to 10, which can be divided into 300 and 250. That fixed it! You’re welcome!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>