Revealing an Image with a Grid Effect Animation

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