Adobe Fireworks CS3 Tutorials
Creating Slideshows & Animations / Working with 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 / Working with Animation Symbols)
Fireworks is a great tool for creating simple animations. You can create animations by adding frames to a document and then creating images or artwork for each of those frames. You can also create animations by using animation symbols. Symbol animations are also composed of frames that contain the images and objects that make up each step of the animation. The difference is that with animation symbols, Fireworks creates the artwork for each frame automatically for you. Notice that in this example, I've created an animation symbol, and although I created the artwork in frame 1, Fireworks created all the additional frames and the artwork for those frames, in this case it's spinning the line, and it's fading out the text. It looks like the line spins all the way out after Frame 20, but the text continues to fade after Frame 24. Notice that you can even have more than one symbol in an animation, as I do here. Different symbols can also contain a different number of frames as I have here. My text animation looks like it extends over 30 frames, and the line animation extends over 20. So in this section of the tutorial, I focus on building animations using animation symbols. To start with, let me create a new document. Let's make this 600 pixels wide and 400 pixels tall. We want lots of space, canvas space, to see our animations and then modify those animations. Now, you can create an animation symbol either by creating a symbol from scratch, or by converting an existing object to a symbol. Let's take my Rectangle tool and draw out a black rectangle, and let's convert this existing object to a symbol by selecting it, making sure it's selected here, and then choosing from the Main menu, Modify, Symbol, Convert to Symbol. You can also press the F8 key on your keyboard. Let's name this Rectangle 1, and let's make sure for Type, I choose Animation. click OK. Notice as soon as you click OK you'll get the Animate dialog. This is really the key technique for learning how to use animation symbols in Fireworks CS3. You have a variety of properties that you can modify and customize your animation, including the number of frames. Let's set up a 10-frame animation that moves 250 pixels. Let's set a direction, down and to the right, or 316 degrees. Let's scale from 100 percent to 5 percent. Notice that I can also select the value and just type a new number in there. Let's change the opacity from 100 to zero, and let's rotate this rectangle 360 degrees in a clockwise direction, and then click OK. Fireworks warns me that this animation extends beyond the last frame of the document. I only have one frame in the document, so it will automatically add new frames if I choose. Let's click OK and it does. It goes ahead and creates the 10 frames that I set up in the dialog. Now, you'll notice here, in Frame 1, that there is a little icon here. I call that the rubber band icon, and it's a visual representation of my animation. It tells me the distance that this rectangle will move, and also the direction, so it's going to move to this location, in the lower right-hand corner. I can play back this animation by clicking on the Play buttons here at the bottom of the canvas. And there, notice that it's spinning clockwise, 360 degrees, and fading out from 100 opacity to zero. And it's also scaling down to 5 percent of its original size. Now, I can go back to Frame 1, click on my symbol, and adjust the direction and distance of this animation. Let's go ahead and move it up and to the right and then play it back, and notice that it sure enough goes up and to the right. Now, to change the animation speed of all aspects of this animation, you'll want to use the Frames Layer here. In the last column there's something called the Frame Delay controls. The default number is 7. If you click on that column, or double-click on that column, I should say, you'll get a frame delay setting in hundredths of a second. In other words if I put 100 here, that will delay Frame 1, one second. Let's change this to one one-hundredth of a second to really speed this up. Let's delay this at the end one second by typing in 100 here, and now let's play this animation back. It starts off very fast and then in frame 10 it stays there for one second. You can also, let's go ahead and double-click Frame 5, and let's type 300 in this value here. That will [00:05:12 delay Frame 5 right here for three seconds. Let's play this back to check my setting here. There's the three-second delay in Frame 5. You can see that it actually shows you which frame it's currently previewing over here. And sure enough, it is delaying in frame 5 for three seconds. Now, before exporting this file, you'll want to optimize this as an animated GIF to maintain the animation. In this way you can export the document as an animated GIF, or as an SWF file. You can even save it as a Fireworks PNG file and then import it into Flash for further editing. Now, symbols, including animation symbols, behave a little bit differently in Fireworks CS3 than other objects. So, let me now move on to the movie and talk a little bit more about working with symbols, in particular working with animation symbols and how they differ from other types of objects in Fireworks CS3.
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
