Natalie Ebenreuter

This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.

View all articles by Natalie Ebenreuter
This exercise will cover

How to create animated masks
How to use graphics from another .fla file
Use multiple instances of a movie clip
How to duplicate movie clips
Targeting movie clips

This is an example of what we will be making. Scroll down to begin.

Part Two


Open the MovieClips.fla document you created in Part One. In the property inspector click on the size button or go to Modify/Document on the menu bar to make you movie 480 pixels wide and 250 pixels high.



Save your document and call it MovieClips_02.fla

Select egg_mc and double click or right click to edit in place. Rename the layer with the egg shape on it to eggopen_mc. Select the shape including the outline and hit F8 to convert it to a movie clip. Call it eggopen_mc and be sure that movie clip is selected and hit ok.




To save a little time in creating graphics download graphics.fla

When you open this file you will see that in the library there is an openegg_mc. Double click on it and you will see a rather interesting animation. I say rather interesting as it could be a lot better, but as it is to be used as an example it should serve its purpose well enough for now. In the graphics.fla library I would like you to drag the eggopen_mc into your MovieClips_02.fla library.



In doing this you will receive a Resolve Llibrary Conflict warning. Select "Replace existing items" and click ok.



Select the eggopen_mc and give it the instance name of eggopen_mc.



Now we would like our egg to crack just as it does when we click other egg crack button before the egg open animation begins. Still in Scene 1 of egg_mc create a new layer and call it crack_mc. On this layer use the line tool to draw a crack down the center of the egg. Select the jagged line you just drew and hit F8 to convert it to a movie clip and call it crack_mc and hit ok.



Select crack_mc and give it the instance name crack_mc


Double click or right click to edit the movie clip. Inside crack_mc create two layers and name the top layer actions (which we will add to later) and the second layer mask. Name the layer your lines are on to lines.


Move the first keyframe on the lines layer to the second keyframe so that the first keyframe is empty and the second has your lines in it. Select frame twenty and hit F5to insert a frame. Now it is time to create and animated mask that makes use of a simple shape tween. Select frame two on the mask layer and hit F7 to insert a blank keyframe. With the square shape tool draw a long square that covers the area of your lines.


Select frame twenty and hit F6 to insert a keyframe. Return to frame two and scale the square shape to look more like a thin line above your egg shape.


Select frame 2 in the time line and select Shape Tween in the Property Inspector.

To create a mask double click on the mask layer, almost on top of the layer icon to open the layer properties window. Next to type click mask and click ok.


Double click on the lines layer to bring up the layer properties again, select maskedand hit ok. If you lock the mask and lines layers you will be able to view the animated mask you just made. Hit return or enter to watch it play.


Now that our egg is cracking and opening we need some little ducklings to hatch when our egg opens. Take another look at the library in the graphics.fla and you will see an orange_duck_mc, drag this movie clip into the MovieClips_02.fla

We will use this movie clip for something else later but for now we need lost of excited ducklings to jump about. Select orange_duck_mc in the library window and right click and select duplicate to do just that. Call it ducklingsduplicate_mc or something shorter if you like.




Double click on ducklingsduplicate_mc in the library to edit it and delete the top layer that says actons.

Return to the egg_mcon scene one and double click or right click to edit in place. Add a new layer and call it ducklings. On this layer place a few instances of the ducklingsduplicate_mc by dragging them out of the library. When you have a few lined up, select all of them and hit F8 to convert them to a movie clip. Call it ducklings_mc and hit ok.



With the ducklings_mc still selected give it an instance name of ducklings_mc.


Double click duclings_mcor right click to edit in place. Name the layer where your ducklings are, to manyducklings and create an new layer called actions. Move your ducklings from keyframe one to two so the the first keyframe remains blank. Don't worry about the actions for now we will come back to them later.


Now that we have finished our egg_mc it is time to return to scene one. Create a new layer and call it duck_mc. On this layer drag an instance of orange_duck_mc from the library on to the stage and give in the instance name of duck_mc.


You may want to make this duck a little larger with the scale tool. If you hold down the shift key while you scale an object is will scale in proportion, otherwise your duck may become tall and thin or short and fat.

So now that all our graphics are finished it is time to make some buttons. Back on the main timeline on the buttons layer use the text tool to type "duck flap", "egg open" and "reset egg". Select "duck flap" and hit F8 to convert it to a button. Make sure you have button selected and call it flap_btn and hit okay. Select "egg open" and hit F8 to convert it to a button. Call it open_btn and hit okay. Then select "reset egg" and hit F8 to convert it to a button. Call it reset_btn and hit okay.

Double click on flap_btn to edit the button in place. Hit F6to create keyframes for the over, down and hit states. Make sure you draw a square shape on the hit state frame to cover the height and width of the text. Simple text isn't always recognised as a true hit area in flash so it is always a good idea to add a shape to the hit area when using text buttons. Remember to do the same to the open_btn and reset_btn


As we have done with our other movie clips we must add an instance to each button so that our actionscript can refer to them. Select flap_btn and in the property inspector where you see <instance> type flap_btn. Select open_btn and in the property inspector where you see <instance> type open_btn. Select reset_btn and in the property inspector where you see <instance> type reset _btn.


Time to add some actions to our buttons.

We will add all the actions we need to allow our individual movie clips to function.

On frame 1 of crack_mc

stop();

On frame 2 of crack_mc

//this disables the egg open button on the main timeline
_root.open_btn.enabled=false;

On frame 20 of crack_mc 

//go back to frame one of the egg_mc timeline
gotoAndStop(1);
//this will play the open egg movie clip
//we use _parent because we are referring to a nested movie clip (eggopen_mc) that exists within the egg_mc
_parent.eggopen_mc.gotoAndPlay(2);

On frame 1 of eggopen_mc you already have the actions 

stop();

On frame 15 of eggopen_mc you already have the actions 

//this stops the eggopen_mc's timeline
stop();
//this will play the ducklings movie clip
//we use _parent because we are referring to a nested movie clip (ducklings_mc) that exists within the egg_mc
_parent.ducklings_mc.play();

On frame 1 of ducklings_mc 

stop();

On frame 2 of ducklings_mc 

//this stops ducklings_mc timeline
stop();

//this playes the duck_mc on the main timeline
// we use _root because it refers to duck_mc that exists on the maintimeline _root.duck_mc.play();

For frame 2 of the ducklings_mc we could also use _parent._parent.duck_mc.play(); to reach the maintimeline because this clip ducklings is nested within two movie clips and is reffering to duck_mc that exists on the maintimeline.

On the first frame of the actions layer in scene one add these actions below those already existing. 

//two different ways to create the same effect

//option one, when we click on the duck flap button
flap_btn.onRelease=function(){
        //this tells the duck_mc to play duck_mc.play();
}

//option two, when we click on the duck movie clip
duck_mc.onRelease=function(){
        //we can use this.play() because it is referring to itself this.play();
}

//when we click on the egg open button
open_btn.onRelease=function(){
        //this starts the crack_mc which is nested inside egg_mc to play
        egg_mc.crack_mc.play();
        //disable the egg crack button
        crack_btn.enabled=false;
}

//when we click on the reset egg button
reset_btn.onRelease=function(){
        //this returns the following movie clips to the first frames of their timelines
        egg_mc.eggopen_mc.gotoAndStop(1);
        egg_mc.ducklings_mc.gotoAndStop(1);
        line1_mc.gotoAndStop(1);
        line2_mc.gotoAndStop(1);
        line3_mc.gotoAndStop(1);
        line4_mc.gotoAndStop(1);
        //enable the egg open button
        open_btn.enabled=true;
        //enable the egg crack button
        crack_btn.enabled=true;
}

The comments should be pretty self-explanatory. To test your movie, go to Control/Test Movie at the menu above.

Wait we are not finished yet. We really need to make sure that no one presses the egg crack button and then the egg open button. Test this out for yourself and see what happens. The easiest way to continue with out movie clip control functions is to make the line1_mc and disable our buttons.

On frame 2 of line1_mc 

//this disables the egg crack button on the main timeline
_root.crack_btn.enabled=false;
//this disables the egg open button on the main timeline
_root.open_btn.enabled=false;

//when we click on the reset egg button
reset_btn.onRelease=function(){
        //this returns the following movie clips to the first frames of their timelines
        egg_mc.eggopen_mc.gotoAndStop(1);
        egg_mc.ducklings_mc.gotoAndStop(1);
        line1_mc.gotoAndStop(1);
        line2_mc.gotoAndStop(1);
        line3_mc.gotoAndStop(1);
        line4_mc.gotoAndStop(1);
        //enable the egg open button
        open_btn.enabled=true;
        //enable the egg crack button
        crack_btn.enabled=true;
}

On frame 12 of line1_mc 

//this enable our egg open button on the main timeline
_root.open_btn.enabled=true;

Now if you test your movie you will only be able to crack the egg and then mend it before hitting the egg open button. Click to download fla Part Two

Should you find any errors in this exercise or some of the instructions difficult to understand please send me an email at