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.

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.

view source

print?

01	import com.greensock.*;

02

03	const COLUMNS:uint=8;

04	const ROWS:uint=4;

05

06	var imagesGrid : Array = new Array();

07

08	var imageLoader:Loader = new Loader();

09	imageLoader.load(new URLRequest("img.jpg"));

10	imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

11

12	function onImageLoaded(e:Event):void {

13

14	var originalBitmapData:BitmapData = e.target.content.bitmapData;

15

16	var imageWidth : Number  = originalBitmapData.width / COLUMNS;

17	var imageHeight : Number = originalBitmapData.height / ROWS;

18

19	for (var i = 0; i < COLUMNS; i++) {

20

21	for (var j = 0; j < ROWS; j++) {

22

23	var imageHolder:MovieClip = new MovieClip();

24

25	var image:Bitmap = new Bitmap();

26	image.bitmapData=new BitmapData(imageWidth,imageHeight);

27	image.bitmapData.copyPixels(

28	originalBitmapData,

29	new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),

30	new Point(0,0));

31

32	image.smoothing = true;

33

34	imageHolder.addChild(image);

35

36	image.x = -imageWidth / 2;

37	image.y = -imageHeight / 2;

38

39	imageHolder.x= i*imageWidth + imageWidth/2;

40	imageHolder.y= j*imageHeight + imageHeight/2;

41

42	imageHolder.alpha=0;

43	imageHolder.delaytime = Math.random();

44

45	imagesGrid.push(imageHolder);

46	addChild(imageHolder);

47

48

}

49

}

50	revealImage();

51

}

52

53	function revealImage():void {

54	for (var i:int = 0; i < imagesGrid.length; i++){

55	var imageGrid:MovieClip = imagesGrid[i] as MovieClip;

56	TweenLite.to(imageGrid,.5,{rotationY: -360,alpha:1,delay:imageGrid.delaytime});

57

}

58

}

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