Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
The Fireworks Animation symbol is a little bit like a wizard-driven animation tool for creating simple animations. Let's have a look at this feature. I've got a snowboard here onscreen, and what I'd like to do is animate the snowboard so that it runs across the canvas and ends up standing vertical at the end of my canvas area. So in order to do this, we're going to create an Animation symbol. I'm going to select my snowboard. I'm going to go up to Modify, and I'm going to choose Symbol > Convert to Symbol.
Same process as we used for the Button and Graphic symbols. In this case here, I'm just going to call this snowboard_animate, and I'm going to make sure that the Type is set to Animation symbol. I'm going to click OK. Now, as soon as you do this, this is where things are a little bit different with the animation symbol. You get another dialog box. You get to tell Fireworks how many states you want to use for the animation, whether you want the object to move across the canvas, whether you want it to rotate, or scale, or change in opacity.
So I'm going to set this up for, I think, 10 states. And we're going to move this across the canvas. So I'm going to set a Move value here of about 700. And we'll able to change this later on if we want to stretch things out. I also want to rotate the snowboard. So we're going to go and choose a rotation here of 90 degrees, and we want it to rotate counterclockwise. Everything else can pretty much stay the way it is.
Now, with those settings in place, when we click the OK button, you'll notice a few changes happen on the screen. First of all, before we even finish things, Fireworks says, you need to add more states to your design in order for this animation to work. We have a basic image here that has one single state. So we've told Fireworks to add another 10 states to the design. Fireworks want to know do you want to add the states. And the answer? Yeah. It should be yes. So we're going to click OK. And once we're back to the canvas, you'll notice that the snowboard still looks pretty much the same right now, but you'll see this vertical line that's got a whole bunch of little diamond shapes running through it.
These represent where the snowboard is going to be as it moves through the animation. If we take a look down below in the Properties panel, you'll see a lot of the controls we saw on that dialog box are also available right here: number of states, whether we're going to scale or not, whether we're going to change opacity, and if we're going to rotate and if so in what direction? But before we do any of that, let's just see what happens when we click on the Play button. Right down at the bottom of the Document Window, you've got playback controls for running animations. So if I click on the Play button, check that out, not too shabby.
Now over 10 states, well, right to the end there. We go from a horizontal board at the beginning to a vertical board at the end. And we didn't have to do very much to get it done. And that's the nice thing about the Animation symbol is it's really easy to use. There's not a lot of flexibility in it. You can't add curves to your animation or anything like that. So you won't get a wavy animation. But for doing a basic, straightforward, simple animation, it does a pretty good job pretty quickly.
I'm going to go back to my first state, and I'm just going to select my snowboard here. And if we take a look in the Layers panel, down at the bottom left corner, you'll click on State 1, you'll see all the different states that are part of this animation. So I can literally select each state in this manner. But I'll tell you, it's a lot easier if I go to the States panel where I can see the states much easier to select, and I can actually watch the animation in action. And you might have noticed when we ran the animation, it runs pretty quickly.
We can change that. Inside the States panel, we also have the ability to change what's called the State delay or Frame delay for each state of the animation. So right now, it's set at a value of 7, and that's 7/100 of a second. So if I select the State # 1 and then hold-down my Shift key and click on State # 10, I can select all the states at once and all I need to do is double-click on any of those number 7s, and I can change the value. So I'm going to slow things down. I'm going to go to 20/100 of a second, and that will update the animation for all ten frames.
So now when we play it back, it runs a little slower. And that may be a little too slow. But you can determine for yourself whether you want to increase or decrease that speed. So there you have the Animation symbol. Pretty easy to create. Pretty easy to edit. There are some limitations though. For example, you can't use this method to animate an object on a curve. It's got to be straight-line. Now, when you're all said and done, you've set up your animation the way you want, set the Frame delay and set the rotation or whatever other options you want to adjust, your final steps would be to export this out as either an animated GIF for use on a Web page, or you can even export it out as an SWF file for use in Flash.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.