Join Jim Babbage for an in-depth discussion in this video Creating a tweened animation, part of Fireworks CS5 Essential Training.
- View Offline
One last animation technique we are going to look at is Tweening. Now Tweening is a term that comes from the art of traditional animation. Essentially Tweens are the frames in between a starting and stopping animation sequence. We can do the same kind of thing with Fireworks. Creating an animation that seems to follow a curve or deform slightly, basically you're only limited by your own imagination and what happens during the animation. Now the first step with this though is you do need to convert your object into a symbol. I've got my little Snowboard silhouette here.
I am just going to press F8 and convert this to a Symbol. So I am just going to call him Snowboarder and click OK. So now that I have got an instance on my canvas, I can hold down my Alt key or my Option key on the Mac, and drag another copy. I am going to bring it down at the bottom corner here, something like that. So I have two of them in two different locations. Now the trick with this is make sure that you select both of your instances. So Shift+Click to select both of them. And then if I go up to my Modify menu and choose Symbol, I can choose to Tween Instances.
Here I get to choose how many Frames or States this animation is going to have And I also have the option here of distributing to States. Now this is an important distinction. If we choose just to create 10 Steps, we will have 10 versions of our snowboarder on the same layer. By choosing Distribute to States, we are setting ourselves up for an animation. So make sure you choose Distribute to States and click OK. Now at this point, you're going to see just the one State. Again, you can click through the individual States, and you will see things are moving in a pretty basic manner here, just from one point to the other.
This is just the beginning. We can actually play around with this quite a bit. Here's what I am going to do. I am going to go into my States panel, and I just want to see a bit more of my States panel. Let's see all the different States. I am going to show you a neat little technique in here. So we actually have 12 States. We have our starting point, our ending point, and then it added 10 more States in the middle. So I am going to go up to my State 1. You'll notice over on the left-hand side of the State, you'll see this little marker, and this is my Onion Skinning Marker. What Onion Skinning means is I can actually see all the different States of my animation at the same time by working with this little marker.
So I have got my State number 1 selected. I am going to go down to the bottom State, State number 12. I am going to click in that little left-hand box. Now I can see all the different States of my final animation. You can see they are following in one straight line right now. The nice thing about this is now that I can see them, I can actually edit them. So what I am going to do is I am going to make adjustments to each one of these different ghosted versions of my animation. So I can just click on them, and I can change their position. So I can see, in relationship to my original, where things are at.
So it's a pretty cool way to do this kind of thing. So I am just going to make him dropdown. Then I'm going to do a couple of little fancy things here. I am going to rotate a couple of these States. So he is going to do a somersault during the animation. Now, I have got my snowboarder doing some tricks as well as just going downhill. So I can space things out a little bit as well. Again, I've got the option to reposition things anywhere I like. So I am just going to move him off the screen and so.
Now I've got a whole series of performing snowboarder. Now, I am going to go back to my single State in my Onion Skinning, so I only see my first version. Let's watch what happens when I actually run this from my first State. Pretty cool! Frame-by-frame animation here. So doing these little somersault and heading on down the hill, so again, another way to create a really simple animation. And again, just a reminder, if you want this to become an animation, you'll have to export it out as an animated GIF or as an SWF file.
Creating and animation in this manner gives you a lot more control over the animation path and effects than if you chose to create an animation symbol.
- Customizing the workspace
- Working with pages, layers, and states
- Importing content
- Comparing bitmaps and vectors
- Creating and editing vector shapes
- Converting artwork into graphic, button, and animation symbols
- Animating in Fireworks
- Maintaining crisp text in web images
- Sharing content between pages
- Optimizing images for export
- Integrating with Device Central, Dreamweaver, Flash, and Flash Catalyst