Image Appearance Effect : Fall Down

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.

View DemoDownload Source

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.

12 thoughts on “Image Appearance Effect : Fall Down

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

  2. Ahmad

    I dont have knowledge about tweenlite

    Can you guide How I can add a function call when Tween finished or complete ?

  3. admin Post author

    @AHMAD :
    With Tweenlite, to call a function when the Tween is completed , simply specify the onComplete property like this:

    TweenLite.to(mc, 5, { alpha: 0.5 , onComplete:onFinishTween});

    function onFinishTween():void {
    /* your function */
    }

    Check the tweenlite documentation (http://www.greensock.com/tweenlite/) for more infos.

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>