Image Appearance Effect : Random Vertical Rotation

The following code is one of a serie of codes that we will publish on Image Appearance Effect. This one proposes to reveal an image piece by piece randomly, each piece appears by rotating vertically.

View DemoDownload Source

1. To get started, go check our previous tutorial entitled “Move the Mouse to Reveal the Poster”.

2. With Flash CS4 or Flash CS5, create a new flash file (Actionscript 3.0).
Open the actions panel.

3. Paste the following code. It’s almost the same as the previous tutorial except for the highlighted lines.
To make each piece of the image to appear randomly, we create a delayTime property and set it to a random value.
In the revealImage() function, we loop through the imagesGrid array and for each piece use the Tweenlite engine to animate its alpha and rotationY property. We specify the delay parameter to the delayTime property that we’ve set before.

import com.greensock.*;

const COLUMNS:uint=8;
const ROWS:uint=4;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("img.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(0,0));
			
			image.smoothing = true;
 
			imageHolder.addChild(image);
 			
			image.x = -imageWidth / 2;
			image.y = -imageHeight / 2;
 
			imageHolder.x= i*imageWidth + imageWidth/2;
			imageHolder.y= j*imageHeight + imageHeight/2;
			
			imageHolder.alpha=0;
			imageHolder.delaytime = Math.random();
			
  			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,.5,{rotationY: -360,alpha:1,delay:imageGrid.delaytime});
	}
}

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

11 thoughts on “Image Appearance Effect : Random Vertical Rotation

  1. Larry

    I take it the source file cannot be opened with Flash CS3. Every time I try to open the scr.fla file I get an error, “Unexpected file format”. Any ideas why this would be happening.

  2. tom

    2. With Flash CS4 or Flash CS5, create a new flash file (Actionscript 3.0).
    Open the actions panel.
    based on the above statement, i guess the file is in CS4 and above version

  3. Pingback: 通过一个网格来显示图片的动画效果—随机垂直旋转 - ActionScript - Learning-AS

  4. breignert

    I’ve used the code for a class project. I’ve placed it in a scene, after the image is revealed in that scene it remains visible in my other scenes! How do I contain the image to one scene and not be visible throughou the rest of the site?

  5. Gaspar

    Hello,
    Great tutorial, very helpful. I need some help tough.
    The animation won’t dissapear on my second frame. I used this thing as an intro, made a next button, and in the next frame the image is still there.
    How can i make it dissapear in the next frame?
    Thank you

Leave a Reply

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