home /
tutorials / Creating a basic animation (page1 of 2) This exercise will cover Part One Create a new document, File/New from 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. 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 F6 at 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();
//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() // 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();
//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"); on frame 1 stop();
stop();
//this starts line3_mc playing from the label marker "mend" on the main timeline _root.line3_mc.gotoAndPlay("mend"); Well frame 1 of 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 F8 to 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 F6 to 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. //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; Should you find any errors in this exercise or some of the instructions difficult to understand please send me an email at |
||
home forums tutorials library movies press books software about us join our mailing list |
© 2000-2004 actionscript.org! All Rights Reserved. Read our Privacy Statement and Terms of Use... Our dedicated server is hosted and managed by WebScorpion Webhosting. 153 users online. |