Creating reusable, flexible, custom Ajax loading animations in Fireworks 8

Animate the loader

Now we’ll animate the loader:

1. In the Layers panel, unlock the Swatches layer and double-click it.
2. Select the Share Across Frames option, click an empty area around the canvas, and then lock the layer again.
3. Open the Frames panel (Window > Frames).
4. Double-click the number to the right of “Frame 1” and enter 8 in the Frame Delay box. The Frame Delay value determines how many milliseconds the frame is visible in the animation.
5. With Frame 1 selected, drag it onto the New/Duplicate Frame button at the bottom of the panel. You’ve just created Frame 2.
6. Repeat steps steps 28 and 29 in the previous section five times to use all of the color swatches, but this time start the initial change at “1 hour” on from the darkest arm.
7. Duplicate this frame.
8. Continue duplicating the frames and changing the colors of the arms of the shape until you have 12 frames of animation and have done a complete circle.
9. Hide the group in the Swatches layer by clicking the Visibility Toggle Eye in the Layers panel. Because you shared the layer in step 2, it now becomes invisible throughout the entire animation.
10. Zoom out to 100% and hide the guides by pressing Control or Command + ;.
11. Press the Play button on the animation controls at the bottom of the document window.

You should have an animation that resembles this:

Because the shape is vector-based, you can resize it as you wish by choosing Modify > Canvas > Image Size. Here's the same image, reduced by 50%:

Page 3 of 4

Previous Page

Next Page