Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Slim Down Your Flash MX Animations with Graphic Symbols and Movie Clips  : Page 3

One huge benefit of using Flash MX is the small size of complex animation files. In this third Flash tutorial, you'll see how to use Symbols and Movie Clips to make your Flash animations more efficient.


advertisement
Creating Movie Clips and Placing Symbols Within Symbols
Now you need to create the three Movie Clips that will feature the Flash movie's animation. Movie Clips are symbols that have their own timeline that functions independently of the main timeline. In other words, they are self-contained looping animations of graphic symbols that you can place on the stage as a simple object. For this example, you will place three Movie Clips on stage, each on its own layer.
Figure 7: A red circle on the stage, ready to be converted to a symbol.
Add another layer to the Timeline. Name it "Tint Circle Clip" and draw a red circle with no stroke in place of the missing "O" in the first "Symbols!" instance on the stage. Figure 7 shows you how it should look.

Select the red circle, then click the Insert menu and choose the Convert To Symbol option. In the dialog box that appears, label this new symbol "Circle" and click on the Graphic option. After setting these properties, click OK. (See Figure 8 for an example of how the Convert to Symbol dialog box should look after you set all the options.) The new Symbol appears in the Library. Save the file

Figure 8: Create a new graphic symbol from the red circle.
The next step is to create the actual Movie Clips using the "Circle" symbol. Placing a symbol inside another symbol is a common method for controlling the structure and file size of Flash movies. Start by deleting the red circle on the stage, and then deselect everything by clicking outside the active stage area with the Arrow. From the Insert menu choose the Create New Symbol option. In the dialog box that appears, name the new symbol "Tint Circle" and choose the Movie Clip option. Click OK. Figure 9 shows how the dialog box should look.

Figure 9: Use the Create New Symbol dialog to create a Movie Clip symbol.
After you click OK, you will see the stage and timeline for the "Tint circle" movie clip. The stage and timeline here are independent of the timeline and stage for the main movie, so don't panic when all the work you've done thus far disappears from the screen. After you build this movie clip, you will return to the stage of the main scene, and your previous work will reappear. Drag the "Circle" symbol from the library to the center of the stage. Insert a keyframe at frame 12 and a keyframe at frame 24 in the timeline. Select keyframe 12 in the timeline and then select the circle on the stage. Change the circle's tint to another color, as you did with the two instances of the "SYMB LS!" text on the main stage. At this point, on keyframe 1, the circle should be red, at keyframe 12, the circle should have a new tint, and at keyframe 24 it should again be the original shade of red. Go back to the timeline and create a Motion Tween from the Tween pull-down menu at keyframes 1 and 12 in the Properties panel (see Figure 10). Press the "Enter" key to preview the color shift animation.


Figure 10: Usw the timeline to create a Motion Tween at keyframes 1 and 12 in the Movie Clip.
Now that the "Tint Circle" movie clip is complete, you need to return to the main timeline of Scene 1 to place it on the stage. Click on the "Scene 1" link in the dark gray toolbar between the stage and the timeline to return to the main movie (see Figure 11).
Figure 11: Click the "Scene1" link to return to the main Scene from the Movie Clip timeline and stage.
Once back in the main stage and timeline of Scene 1, select the "Tint Circle" Movie Clip from the Library window and drag it in place of the "O" in the first "Symbol!" at the top of the stage. Save the file (see Figure 12).

Figure 12: Drag the new Movie Clip from the Library to the stage.
Next up is the Movie Clip that fades the red circle out and in again. You'll refer to this as the "Alpha Circle" movie clip, because in Flash MX, the word "Alpha" refers to an object's transparency. In other words, when an object has an Alpha state of 100%, it is completely opaque, and when it has an Alpha state of 0% it's transparent, or invisible. Start by adding another layer to the timeline. Name it "Alpha Circle clip" and deselect all objects on the stage. Choose Create New Symbol from the Insert menu and in the dialog box that appears, name it "Alpha Circle" and choose the Movie Clip option. As when creating the "Tint Circle" Movie Clip, once you click OK you will be taken to the stage and Timeline for the "Alpha circle" movie clip. Drag the "Circle" symbol from the library to the center of the stage. Insert a keyframe at frame 18 and a keyframe at frame 36 in the timeline. Select keyframe 18 in the timeline and then select the circle on the stage. Select the "Alpha" option from the Color pull-down menu in the Properties panel and set the circle's Alpha state to 0% (see Figure 13.) Create a Motion tween at frame 1 and another Motion Tween at frame 18. Press "Enter" to preview the circle's alpha shift.

Figure 13: Use the Color pull-down menu to set the Alpha state of the circle at keyframe 18.
Go back to Scene 1 of the main movie. From the Library window, select the "Alpha Circle" Movie Clip from the Library and drag it in place of the "O" in the second "Symbol!" at the center of the stage. Save the file (see Figure 14.)
Figure 14: Drag the "Alpha circle" Movie Clip from the Library to the stage.
Finally, you'll create the last Movie Clip—an animation in which the circle first doubles in size and then shrinks back to its original dimensions. Add another layer to the timeline. Name it "Scale Circle clip" and deselect all objects on the stage. Choose Create New Symbol from the Insert menu and in the dialog box that appears, name it "Scale Circle". Choose the Movie Clip option and click OK. You will find again that Flash has opened the stage and timeline for the new Movie Clip that you are about to create. Drag the "Circle" symbol from the library to the center of the stage. Insert a keyframe at frame 10 and a keyframe at frame 20 in the timeline. Select keyframe 10 in the timeline and then select the circle on the stage. From the Modify menu at the top of the screen, select the Transform option and then choose Scale and Rotate. In the dialog box that appears, enter 200% for scale and click OK (see Figure 15). When you return to the stage, you will see that the circle at keyframe 10 has doubled in size. Create a Motion tween at frame 1 and another Motion Tween at frame 10. Press "Enter" to preview the circle's scale animation.

Figure 15: Double the size of the circle at keyframe 10.
Go back to Scene 1 of the main movie. From the Library window, select the "Scale Circle" symbol and drag it in place of the "O" in the third "Symbol!" at the bottom of the stage. (See Figure 16.) Your Flash movie is complete. Note that the main timeline only has one frame. Because all the animation takes place within timelines in the Movie Clips, the main timeline merely holds animated objects. You should also note that Movie Clips loop by default, so you don't have to write any ActionScript to force the animations to repeat (see Figure 16).

Publishing Your Work

Figure 16: Drag the "Scale circle" Movie Clip from the Library to the stage.
If you wish to preview your movie as it will appear in a stand alone Flash file, go up to the Control menu and select the Test Movie option. When you are finished previewing the movie, simply close the window. To create a final Flash file and embed it in an HTML page click on the Arrow tool and go down to the Properties panel and click on the button labeled Flash Player 6. In the dialog box that appears, simply click the "Publish" button. Clicking the Publish button creates an HTML file with your animated movie embedded in it, located in the directory where you saved your .fla file. To see the completed image, load that HTML file into your browser.

With this tutorial, you can begin to see the possibilities inherent in Flash's powerful animation and interactive capabilities. The movie you just created uses only a handful of letters and a single circle, but Flash refers to those objects multiple times, which keeps the final file size under 2K. Try creating a movie using many different movie clips that contain the same graphic symbol to see how far you can push and test the Library's capabilities.



John Lee holds a B.F.A. in Graphic Design and is the sole proprietor of John Lee Studios in Louisville, KY where he is a freelance writer, illustrator and Web designer. Samples of his work can be seen at www.johnleestudio.net. Reach him by e-mail at johnleeart@alltel.net.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date