Adobe Fireworks CS3 Tutorials
Creating Slideshows & Animations / Modifying Animation Symbols
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Creating Slideshows & Animations / Modifying Animation Symbols)
In this movie, I describe in more detail the inner workings of animation symbols and how to modify them once you've set their initial animation properties. Animation symbols perform the actions in your Fireworks files, much like actors in a movie. For example, in an animation of three balls that are bouncing up and down on your canvas, each ball will be a separate cast member, or separate symbol. You can also create duplicates of those actors or symbols so that the two balls, for example, on the left, maybe they'll bounce in unison. They're actually the same object, or the same symbol. An animation symbol can be any object that you create or import into Fireworks CS3. You can also have many symbols in one file, each symbol will have it's own properties and will animate independently. For example, in this file I have two animation symbols. This line animation and a text animation. If I play this animation, you'll see that they behave differently. The text stays there and simply fades out while the line animation tumbles down and to the right. Now, you don't need to use symbols for every aspect of your animation. However, using symbols in instances for graphics that appear in multiple frames keeps your animation file size smaller. You'll also get other advantages that I'll discuss later in this movie, by using animation symbols. Let's go ahead and stop my animation. Now, after you've set up your animation properties, you can change them at any time using the Animate dialog box, or the Properties Inspector. It's a little bit confusing, however, because you'll want to leave your Frames panel open, because unless you're on Frame 1, it's very difficult, if not impossible, to make changes to these animations. Notice that I'm clicking on my symbols and nothing's changing here in the Properties Inspector in frame 7, but if I click on Frame 1, sure enough I can now select the symbol and then make changes to the animation properties down here in the Properties Inspector, including frames, slicing, opacity, rotation, in the clockwise or counterclockwise movement of that rotation. Likewise with the animation menu, if you go up to modify animation, notice that the settings option is grayed out unless you're in Frame 1, right there. As long as you're in Frame 1, and you've selected, by the way, a symbol on the canvas you can then choose Modify Animation settings, and that'll bring you back to this animation dialog that I demonstrated in the previous movie, when you first set up your animation. So you can go ahead and modify each of the properties here. Let me review in more detail each of the settings here. The Frames Value is the number of frames you want to include in the animation. The Move Slider is the distance in pixels that you want each object to move. By the way, this option is only available in the Animate dialog box right here. The default is 72, but you can enter any number you wish in the Move textbox. The direction gives you an orientation slider here, or knob that will tell you in which direction the animation will move. The scale, this 2 value here, is the percent change in the size from start to finish. The default is 100 percent, but you can enter in any value here you want. Opacity is the degree of fading in or out from start to finish. Values range from zero to 100. And the Rotation is the amount in degrees that the symbol rotates from start to finish. Values range from zero to 360 degrees, and you can set the direction to clockwise or counterclockwise. Once you're done changing your properties click OK. Now, after you set up the symbols and frames that make up your animation you now need to export the file as an animation. Before you export the file you'll need to enter a few settings to make your animation load more easily and play more smoothly. You can set playback settings like looping and transparency, and then use Optimization to make your exported files smaller and easier to download. I'll be talking about optimization and exporting in more detail in the next section of the tutorial. But let me say a few words here about animation export formats. Animated GIFs will give you the best results for clipart and cartoon-like graphics, but you can also export the animation as a Flash SWF file, and then import the work into Flash itself, or you can skip the export step, save your file as a PNG file, and then import your PNG source file directly into Flash. This option gives you the most control over how your animation will be imported. You can import all the layers and frames of your animation if desired, and then further edit each frame within Flash itself. You can also export frames or layers from your animations as multiple files. This can be useful when you have many symbols on different layers for the same object. So there you have a more thorough discussion of the inner workings of animation symbols including how to modify your initial animation settings. Let me now move on to the next movie and demonstrate another animation technique in Fireworks CS3, and that is Frame Tweening.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
