Image Appearance Effect : Fall Down

In this Image Appearance Effect tutorial, see how to reveal an image piece by piece with a fall down effect.

1. Here’s the code to achieve the Fall Down effect.
The code is the same as previous tutorials except for the highlighted lines.
To make the image’s pieces appear horizontally, we loop through the rows and through the columns (instead of columns and rows).
In the revealImage() function, we use the Tweenlite.from (instead of Tweenlite.to) method to animate the y property of each image’s piece.

import com.greensock.*;
import com.greensock.easing.*;

const COLUMNS:uint=5;
const ROWS:uint=5;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("image.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 < ROWS; i++) {
 
		for (var j = 0; j < COLUMNS; j++) {
 
			var imageHolder:MovieClip = new MovieClip();
 			
			var image:Bitmap = new Bitmap();
			image.bitmapData=new BitmapData(imageWidth,imageHeight);
 			image.bitmapData.copyPixels(
								originalBitmapData,
			  					new Rectangle(j * imageWidth, i * imageHeight,imageWidth, imageHeight),
			  					new Point(0,0));
 
			imageHolder.addChild(image);
 			
			imageHolder.x= j*imageWidth ;
			imageHolder.y= i*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;
		imageGrid.alpha = 1;
		TweenLite.from(imageGrid,.8,{alpha:0,y:-200,delay:i*.1,ease:Back.easeOut});
	}
 }

2. That’s it, test your movie to see it in action.