Animating an Object by Distributing it to Frames

The car I am using for this tutorial is from the Microsoft Clipart Gallery.

Race Car

Open the car up in Fireworks. We will need to make the canvas size wider so the car appears to be moving across the screen. Modify > Canvas > Canvas Size:

Modify Canvas Size

I increased the canvas size width to 750.

I want the car to go from left to right so I need to flip the car horizontally. Click on the graphic and select Modify > Transform > Flip Horizontal:

Flip Horizontal

Drag the car to the far left hand side of the canvas.

The first thing you need to do is to convert the car to a symbol. Click on the car and select Modify > Symbol > Convert to Symbol:

Convert to Symbol

Name it car and assign graphic as the type.

We need to make a copy of the car so press Alt/Opt and drag a copy of the car to the right hand size of the screen.


Shift click both instances of the car on the canvas. Select Modify > Symbol > Tween Instances.

Tween Instances

At the Tween Instance dialog box give it 6 steps with Distribute to Frames. Click OK to close the Tween Instances dialog box.

Tween Instance Steps

Click the Preview Tab Preview Tab at the top of the canvas and click the play button Play Button to preview your animation.

Click the Optimize Palette and select animated gif as your file format:

Animated Gif Format

To slow down the frame rate, click on the Frame palette and change the default rate of 7 to a larger number. Just double click the number 7 and type in a new number.

Export your file and it is now ready to use. This is my finished product:

Animated Race Car

Fireworks 8 Tutorials