How to Create and Test Animations in Fireworks CS5

Creating images is a simple process in Adobe Fireworks Creative Suite 5. Creating images for animations is also simple but slightly different, in that the images are created from several states that play one after another to create the illusion of movement.

Create an animation

To create an image for animation, follow these steps:

Create or open the object you want to animate.

For this example, create a circle with the Ellipse tool.

With the Pointer tool, select the circle.

Choose Window→States.

The States panel appears, listing one state.

From the panel menu in the upper right corner, choose Duplicate State.

The Duplicate State dialog box appears.

Use the Number slider to add three new states.

In the Insert New States section, select the After Current State radio button and then click OK.

Because all the states are identical, you see no change. The objects are positioned on top of one another.

Use onion skinning to get a good flow

Onion skinning can be a huge help when you’re trying to create a good flow for an animation. Onion skinning gives you the opportunity to edit the selected state but view (in a dimmed view) the states that come before and after the selected state.

To use onion skinning in an animation, follow these steps:

Select the State 2 row in the States panel.

Click the Onion Skinning button in the lower left corner of the panel.

A drop-down list appears.

Select Show All States to show one state before and one after the selected state.

Make the animation move

Creating the actual animation certainly isn’t rocket science, but you need to pay attention to the state you select before making your move.

To put your animation in motion, follow these steps:

Select State 2 in the States panel to view the state 2 circle.

Using the Pointer tool, drag the circle slightly up and to the right.

Select State 3 to view the state 3 circle.

Drag the circle below and to the right of the state 2 circle.

Select State 4 to view the state 4 circle.

Drag the circle above and to the right of the state 3 circle.

You should see a flow that — in a primitive way — represents a bouncing ball.

Test the animation

You can test an animation directly in the Fireworks artboard or on the web.

Test in Fireworks

Fireworks provides several playback controls on the right side of the artboard window. To use these controls to test an animation in Fireworks, follow these steps:

Click the Play button to start the animation.

Notice that the Play button changes to the Stop button.

After playing the animation, click the Stop button to stop the animation.

Test on the web

The Preview in Browser feature gives you a more accurate idea of how your animation will appear to the viewer. This procedure is so easy that no steps are necessary: Choose File→Preview in Browser and select the browser in which you want to preview the animation.

If the animation does not work in your browser, make sure that you have GIF selected as the Export File Format in the Optimize panel in Fireworks.