1. This tutorial is a variation of our previous tutorial entitled “Revealing an Image with a Grid Effect Animation”, so first go check it to get the main explanations as we’ll go quickly here.
2. Create a new flash file (Actionscript 3.0) and set its dimensions to the dimensions of your poster.
Open the actions panel.
3. Paste the following code. It’s the same as the previous tutorial except for the highlighted lines. The difference here is the way we position the elements so that the tween scale animation on each piece will start from the center of the piece.
Also we add a MOUSE_OVER event listener to each piece of the poster.view source

print?

01	import com.greensock.*;

02

03	const COLUMNS:uint=10;

04	const ROWS:uint=10;

05

06	var imagesGrid : Array = new Array();

07

08	var imageLoader:Loader = new Loader();

09	imageLoader.load(new URLRequest("theamerican.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	imageHolder.addChild(image);

33

34	image.x = -imageWidth / 2;

35	image.y = -imageHeight / 2;

36

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

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

39

40	imageHolder.alpha=0;

41	imageHolder.addEventListener(MouseEvent.MOUSE_OVER, overHandler);

42

43	imagesGrid.push(imageHolder);

44	addChild(imageHolder);

45

}

46

}

47

}

4. The overHandler() function gets the piece of the poster which has triggered the event and uses the Tweenlite engine to animate its alpha and scales properties. Then we prevent the piece that has been revealed from receiving mouse messages and remove its event listener.view source

print?

1	function overHandler(e:MouseEvent):void {

2	var imageGrid = e.target as MovieClip;

3	imageGrid.scaleX = imageGrid.scaleY = 0;

4	TweenLite.to(imageGrid, .5, {alpha: 1,scaleX:1,scaleY:1});

5	imageGrid.mouseEnabled = false;

6	imageGrid.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);

7

}

5. Here’s the final code. Test your movie to see it in action.view source

print?

01	import com.greensock.*;

02

03	const COLUMNS:uint=10;

04	const ROWS:uint=10;

05

06	var imagesGrid : Array = new Array();

07

08	var imageLoader:Loader = new Loader();

09	imageLoader.load(new URLRequest("theamerican.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	imageHolder.addChild(image);

33

34	image.x = -imageWidth / 2;

35	image.y = -imageHeight / 2;

36

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

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

39

40	imageHolder.alpha=0;

41	imageHolder.addEventListener(MouseEvent.MOUSE_OVER, overHandler);

42

43	imagesGrid.push(imageHolder);

44	addChild(imageHolder);

45

}

46

}

47

}

48

49	function overHandler(e:MouseEvent):void {

50	var imageGrid = e.target as MovieClip;

51	imageGrid.scaleX = imageGrid.scaleY = 0;

52	TweenLite.to(imageGrid, .5, {alpha: 1,scaleX:1,scaleY:1});

53	imageGrid.mouseEnabled = false;

54	imageGrid.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);

55

}

]