Written by: Natalie Ebenreuter www.nee.id.au
Difficulty Level: beginner

This exercise will cover

The creation of graphics, buttons and movie clips.
Simple shape tweening.
The use of frame labels.
Creating instances of movie clips and buttons.
Controlling different timelines.
How you can use movie clips to control an animated sequence.
How to enable and disable buttons

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

Part One
Create a new document, File/Newfrom the above menu that is 300 pixels wide and 250 pixels high. You can do this via the property inspector by clicking on the size button or by going to Modify/Document on the menu bar. Set the frame rate to 25 frames per second, as we will be animating.



Save your document and call it MovieClips.fla

Using the circle shape tool draw an egg shape on the main timeline. Select the egg and hit F8 to convert it to a movie clip. Check to see that you have Movie Clip selected and name your movie clip egg_mc and hit ok.

Name the layer that your egg is on to egg_mc. We want to refer to this movie clip when we add some actionscript to our file so we much give it an instance name. It is very important to name your movie clips to match your actionscript. Be sure to recognise if you have used uppercase or lowercase letters and avoid using numbers at the beginning of an instance name. For now we will give our egg_mc the instance name of egg_mc. Select egg_mc and in the property inspector where you see <instance> type egg_mc.




Add new layer above the egg_mc layer and call line_mcs.

Lock the egg_mc layer and on the line_mcs layer use the line tool to draw four joining lines to create a crack down the middle of your egg.

One at a time carefully select each individual line and convert them into movie clips. Name them line1_mc, line2_mc, line3_mc and line4_mc.

Now that we have four movie clips that join to create our egg crack we will need to give them an instance name. Give them all the same instance name as their movie clip names to avoid confusion. Notice that I have used numbers in the naming of these instances. That is acceptable but if I were to use 1line_mc you would not be able to reference this in your actionscript.

When you click on the egg crack button I would like the lines to animate to create the effect of the egg splitting. So double click on line1_mc and add two layers, and call them actions and labels. Name the layer that your line is on to line1. Your line1_mc timeline should look something like this.


On line1 layer insert a keyframe F6at frame 10. On the first frame, grab the end of the lower part of the line (you will see a little black arrow appear) and move it up to make the line a few pixels in length.


Select frame one and add a shape tween to your line. If your shape tween doesn't work try making the first line a little longer.

Copy these frames and paste them in frames 12-22. With these frames selected (12-22) right click and Reverse Frames. Select frames 1-22 and move them across one frame so that you have a blank keyframe at the start of the line layer.

On the labels layer insert a blank keyframe F7 at frame 12 .In the property inspector type mend.


Follow the steps above and create a shape animation for your line, the labels layer with the mend frame and an actions layer for line2_mc, line3_mc and line_4mc. Each line_mc should look something like this


Time for some actions.

On the actions layer of line1_mc place.

on frame 1

stop();

on frame 11

//this stops the line1_mc's timeline
stop();
//this starts line2_mc playing from the label marker "mend" on the main timeline
_root.line2_mc.play();


On the actions layer of line2_mc place

on frame 1

stop();

on frame 11

//this stops the line2_mc's timeline
stop();
//this starts line3_mc playing on the main timeline
_root.line3_mc.play()

on frame 22

// this starts line1_mc playing from the label marker "mend" on the main timeline
_root.line1_mc.gotoAndPlay("mend");


On the actions layer of line3_mc place

on frame 1

stop();

on frame 11

//this stops the line3_mc's timeline
stop();
//this starts line4_mc playing on the main timeline
_root.line4_mc.play();

on frame 22

//this starts line2_mc playing from the label marker "mend" on the main timeline
_root.line2_mc.gotoAndPlay("mend");

On the actions layer of line4_mc place

on frame 1

stop();

on frame 11

stop();

on frame 22

//this starts line3_mc playing from the label marker "mend" on the main timeline
_root.line3_mc.gotoAndPlay("mend");

What does that do?
Well frame 1of each line_mc is stoped until it is instructed to play by a button action (we will get to these in a minute) or by another movie clip. The first shape tween finishes on frame 11 where the actionscript tells the connecting line_mc on the main timeline to play. _root.line4_mc.play();

Because we are referring to another movie clip within a movie clip we use _root to refer to anything on the main timeline.

There is also an egg mend button that we will create shortly, to tell line4_mc on the main timeline to play the reversed shape tween where we put the frame lable "mend" _root.line4_mc.gotoAndPlay("mend");  

Once that is finished it instructs the connecting line on the main timeline to play the reversed shape tween _root.line3_mc.gotoAndPlay("mend");

This can be useful for animation on the web if you are concerned with download times and connection speeds. It means that each part of your animated sequence is dependant on another and you can ensure that you sequence will run the way you intended it to be, especially if your audience is watching it from a dial up modem.

Now for some buttons.
Back on the main timeline create a layer called buttons. On this layer use the text tool to type "egg crack" and "egg mend". Select "egg crack" and hit F8to convert it to a button. Make sure you have button selected and call it crack_btn and hit okay. Then select "egg mend" and hit F8 to convert it to a button. Call it mend_btn and hit okay.

Double click on crack_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 mend_btn


As we have done with our egg and our lines we must add an instance to each button so that our actionscript can refer to them. Select crack_btn and in the property inspector where you see <instance> type crack_btn. Select mend_btn and in the property inspector where you see <instance> type mend_btn.


Now that we have created all our graphics and have named our layers the main timeline should look something like this.


Time to add some actions to our buttons.
Add a layer to main timeline and call it actions . I usually place the actions as the top layer out of habit, so that you can always find them easily amongst all those graphics. Insert a blank key frame F7 and add the following code to the first frame of the actions layer.

//this stops our movie from showing at fullscreen
fscommand("fullscreen", "false");

//this stops our movie from scaling
fscommand("allowscale", "false");

//this stops the main timeline of the movie
stop();

//when we click on the egg crack button
crack_btn.onRelease=function(){
        //this starts line1_mc playing from the next frame in the movie clip
        line1_mc.gotoAndPlay(line1_mc._currentframe+1);
        //or you could just use line1_mc.play();
}

//when we click on the egg mend button
mend_btn.onRelease=function(){
        //this starts line4_mc playing from the label marker "mend"
        line4_mc.play("mend");
}

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

To gain a better understanding of the sequence of events you are triggering see what happens when you click the mend egg button first. This is just a way to get a better understanding of how you can use movie clips to control an animated sequence.

This is all well and good as an example but it is not finished yet. We really need to make sure that no one else presses the wrong button and the wrong time. The easiest way to continue with out movie clip control functions is to make a few movie clips enable and disable our buttons.

Time to add some more actions.

On frame 1 of the Main timeline on the actions layer

//this disables out egg mend button to begin with
mend_btn.enabled=false;

On frame 1 of line1_mc

stop();
//this enables the egg crack button on the main timeline
_root.crack_btn.enabled=true;

On frame 2 of line1_mc

//this disables out egg mend button on the main timeline
mend_btn.enabled=false;

On frame 11 of line4_mc

stop();
//this enables our egg mend button on the main timeline
_root.mend_btn.enabled=true;

On frame 12 of line4_mc

//this disables our egg mend button on the main timeline
_root.mend_btn.enabled=false;

Now if you test your movie you will only be able to crack the egg and then mend it before cracking it again. Click to download fla Part One or continue on to Part Two