FLASH TUTORIAL

Revealing an Image with a Grid Effect Animation

 Revealing an Image with a Grid Effect Animation
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*.2});
}
}

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

You can download this source code from here: View Demo
You can view the live demo: Download

Screenshot:

Prepared By : Md. Moshiur Rahman Khan

Email: mehedi.cse@gmail.com