Adobe Fireworks CS3 Tutorials
Creating Slideshows & Animations / Creating Frame Tweening Animations
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 / Creating Frame Tweening Animations)
In this movie, I demonstrate yet another Fireworks animation technique, and that is creating animations using Frame Tweening. Tweening is a traditional animation term that describes the process in which a lead animator draws only the key frames, or the major frames containing the major changes, or the original artwork, while assistants draw the frames in between. So, tweening refers to this in between graphics creation. In terms of computer software, the computer software takes on the task of creating all the in between frames, so, in short, this is called Frame Tweening, this type of animation. The way that it works is you use symbols, in this case I have two instances of the same symbol, dragged onto my canvas. If I open up my Library you can see there in the Library I have an octagon symbol and I've dragged out some instances. To this symbol instance I've added a drop shadow down and to the right. To this second instance, I've added another drop shadow, up and to the left. I've also changed the color of the drop shadow to dark blue and added some noise. There's a Noise filter. So the way the Tweening works is if I select both of these symbols by holding down the Shift key and clicking on both, and then choosing from the Main menu, Modify, Symbol, Tween Instances. Fireworks will ask me how many steps to you want it to use to create all of the in between steps of those graphics, and do you want me to distribute these to frames? Let's turn off the Distribute to Frames option and click OK. And you can see very clearly what Fireworks has done. It's created all of the in between stages, or steps, or frames. If I go to my Frames panel, you can see these frames. If I distribute all of these images to frames, in this case I added them all to one frame, but I can always go up here to the upper right-hand corner and choose Distribute to Frames, and that will convert each of those independent graphics that Fireworks CS3 created into frames. Now I can also play back the animation so you can see that there are three things change: the location, the drop shadow orientation, and the noise, it's added some noise. Fireworks has added a noise filter to the intermediate, or in between frames here. This is called Onion skinning, so you can see all of the previous frames in my animation. It's kind of a nice little technique there. Now, I'm not limited to just tweening between two similar instances. I can also tween between three symbol instances. Let me go ahead and undo, if I can, my application of the animation. I may not be able to. I think I've run out of memory there. But let's go ahead and delete all of my frames here. Frames 2 through 12. I'm holding down the Shift key and then click on the Delete Frame button. So all of my symbols are gone. Also open up the Library again, and this time, let's drag three symbol instances onto the stage. Let's select all three of them and then choose from the Main menu, Modify, Symbol, Tween Instances. Let's do 10 steps and let's, this time, Distribute to Frames, and now notice this time I have a compound animation, so in this way you can create non-linear looking animations by tweening more than just two symbol instances. Now, it's very easy to preview your animations using the various controls here at the base of the canvas, including the Play Stop, the Last Frame, First Frame, as well as the Step command, to step through each frame of the animation. But to actually use your animations on a Web site, or in Flash, you'll need to export this file. So let me now move on to the next movie and review in more detail the various export options you have when exporting your animations out of 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
