home / tutorials / Creating a basic animation (page1 of 2)

Tutorial details:
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.

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.

stop();

//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();

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()

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

stop();

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

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

stop();

stop();

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

//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;

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

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

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

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