Animated GIFs

There is more than one way to create animations in Fireworks MX®. There is an easy process for banner ads and a more complicated process for advanced animations. I'll present the easiest process so you can hit the ground running.

Animation Basics

Traditional animation involves a series of still images, usually painted or sketched, displayed in rapid sequence. Each image is blurred into the other, creating the illusion of motion.

With film, each image is called a frame. As a result, the rate at which each frame is displayed is measured in frames per second (fps).. With Fireworks MX®, you can set the frame rate. Higher frame rates result in smoother animation, but also require more processing power.

Here's what we will create:

First you need to create your graphic to animate.

1. Create a file 300 X 200 pixels.
2. Draw a simple black circle. in the left hand side of your file.

3. Select it with the SELECT TOOL (arrow).
4. Press CTRL + C to copy the circle to the clipboard.

An animated banner ad is a series of frames. So the second step is to add a frame to your drawing.

1. In the lower right hand corner of Fireworks MX® you will find the FRAMES PANEL. Select the small icon in the upper right hand corner of the frames panel to launch the drop down menu.

   2. Select ADD FRAMES.

   3. Select the defaults in the following dialog box of 1 FRAME after the current frame.

4. Your frames menu should look similar to the one here.
5. With your cursor clicked in empty frame 2 select CTRL + V to paste your original circle in frame 2.
6. Move the circle placed in frame 2 forty pixels to the right.
   Select the circle to make it the active element, hold down the shift key on the keyboard and simultaneously press the right ARROW KEY 4 times. When you hold down the shift key the object is moved 10 pixels at a time.
   
   
7. Now test your animation by clicking the play button at the bottom of your file window.
   
   
8. Does your animation work? If not review the above steps to make sure you haven't missed a step.
9. To control the speed that your animation plays select the default frame rate of 7 by double clicking it.
10. Enter the rate that you would like your animation to play. Higher numbers mean a slower rate. A rate of 100 means a full second.