Sometime it is necessary to change the order of objects in an animation as the animation progresses becasue you want to use that object as a link also. A simple case involves 4 objects you can draw with the shape tool as below:
Let’s say I want to make an animation where each shape moves to the left and I want the one that was clicked to start the animation, wind up on the top of the stack. You could imagine this would be a flash intro segment or it could be a website where as each shape moves to the left, a page appears. Each shape would then represent one page of the site. Of course once they are stacked up, you would click the one on top to un-stack them to go back to the original position so that your user can access the other pages, right?
There’s a simple way to do this. First draw the shapes or create your pages or movie clips. If you have further animation in each movie clips, no problem, we can handle that too. In this case I have drawn these shapes and converted them each to a movie clip symbol named red_mc, blue_mc, green_mc and yellow_mc. Now put each one in a layer of its own. You know how to do this. Select all of them, right click and select “distribute to layers”.
OK, so far so good. Now you should have 5 layers where the top one should be blank. Re-name this layer “action” then press f9 on your keyboard to open the action panel. Type the following, or copy and paste:
stop();
import gs.TweenMax;
import gs.easing.*;
var myTween:TweenMax
var maxIndex:Number = this.numChildren -1;
red_mc.addEventListener(MouseEvent.CLICK, Move);
green_mc.addEventListener(MouseEvent.CLICK, Move);
blue_mc.addEventListener(MouseEvent.CLICK, Move);
yellow_mc.addEventListener(MouseEvent.CLICK, Move);
function Move(e:MouseEvent):void
{
this.setChildIndex(e.currentTarget as MovieClip, maxIndex);
myTween = TweenMax.to (red_mc, .5, {x:90, ease:Circ.easeOut});
myTween = TweenMax.to (green_mc, .5, {x:90, ease:Circ.easeOut});
myTween = TweenMax.to (blue_mc, .5, {x:90, ease:Circ.easeOut});
myTween = TweenMax.to (yellow_mc, .5, {x:90, ease:Circ.easeOut});
red_mc.addEventListener(MouseEvent.CLICK, MoveBack);
green_mc.addEventListener(MouseEvent.CLICK, MoveBack);
blue_mc.addEventListener(MouseEvent.CLICK, MoveBack);
yellow_mc.addEventListener(MouseEvent.CLICK, MoveBack);
}
function MoveBack(e:MouseEvent):void
{
myTween = TweenMax.to (red_mc, .5, {x:90, ease:Circ.easeOut});
myTween = TweenMax.to (green_mc, .5, {x:230, ease:Circ.easeOut});
myTween = TweenMax.to (blue_mc, .5, {x:360, ease:Circ.easeOut});
myTween = TweenMax.to (yellow_mc, .5, {x:540, ease:Circ.easeOut});
red_mc.removeEventListener(MouseEvent.CLICK, MoveBack);
green_mc.removeEventListener(MouseEvent.CLICK, MoveBack);
blue_mc.removeEventListener(MouseEvent.CLICK, MoveBack);
yellow_mc.removeEventListener(MouseEvent.CLICK, MoveBack);
}
trace(numChildren);
trace(getChildAt(0).name);
trace(getChildAt(1).name);
trace(getChildAt(2).name);
trace(getChildAt(3).name);
Here I am using TweenMax but you could also use the native Flash tweening engine. If you don’t know how to setup and use external classes, you could download TweenMax , follow the instructions and set it up.
Now, press cntr-enter or cmd-enter to view the animation. You can click on any of the objects and see how that object will move to the top of the stack as the animation takes place. This is particularly useful if you have different movie clips instead of drawing objects and want each movie clip to be a link also to a page or a different part of your website because if the movie clip is not on top of the stack, the link won’t work.
Here’s the results: stacking swf
