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. 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
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
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
[as]stop();
[/as]
[as]//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();
[/as]
On the actions layer of line2_mc place
on frame 1
[as]stop();
[/as]
on frame 11
[as]//this stops the line2_mc's timeline
stop();
//this starts line3_mc playing on the main timeline
_root.line3_mc.play()
[/as]
[as]// this starts line1_mc playing from the label marker "mend" on the main timeline
_root.line1_mc.gotoAndPlay("mend");
[/as]
On the actions layer of line3_mc place
on frame 1
[as]stop();
[/as]
[as]//this stops the line3_mc's timeline
stop();
//this starts line4_mc playing on the main timeline
_root.line4_mc.play();
[/as]
[as]//this starts line2_mc playing from the label marker "mend" on the main timeline
_root.line2_mc.gotoAndPlay("mend");
[/as]
on frame 1
[as]stop();
[/as]
[as]stop();
[/as]
[as]//this starts line3_mc playing from the label marker "mend" on the main timeline
_root.line3_mc.gotoAndPlay("mend");
[/as]
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.
[as]//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");
}
[/as]
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
[as]//this disables out egg mend button to begin with
mend_btn.enabled=false;
[/as]
[as]stop();
//this enables the egg crack button on the main timeline
_root.crack_btn.enabled=true;
[/as]
[as]//this disables out egg mend button on the main timeline
mend_btn.enabled=false;
[/as]
[as]stop();
//this enables our egg mend button on the main timeline
_root.mend_btn.enabled=true;
[/as]
[as]//this disables our egg mend button on the main timeline
_root.mend_btn.enabled=false;
[/as]
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
[as]stop();
[/as]
[as]//this disables the egg open button on the main timeline
_root.open_btn.enabled=false;
[/as]
[as]//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);
[/as]
[as]stop();
[/as]
[as]//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();
[/as]
[as]stop();
[/as]
[as]//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();
[/as]
On the first frame of the actions layer in scene one add these actions below those already existing.
[as]//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;
}
[/as]
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
[as]//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;
}
[/as]
[as]//this enable our egg open button on the main timeline
_root.open_btn.enabled=true;
[/as]
Should you find any errors in this exercise or some of the instructions difficult to understand please send me an email at [email:enatalie@unite.com.au]