Creating Reusable, Flexible, Custom Ajax Loading Animations in Adobe Fireworks

Table of Contents

Introduction
Create an Ajax Loader
Animate the Loader
Change the colour scheme of the loader

Introduction

Everybody's seen them. The nice swirly loading animations that accompany many Ajax web applications. But just how easy is it to create your own? With this technique, you'll be creating one for every project in a matter of minutes using Fireworks® 8.

Create an Ajax loader

To create an Ajax loader:

1. Create a new document that is 64 x 64 pixels and has a white background.
2. Zoom in to 600%.
3. Draw horizontal and vertical guides 32 pixels from the edges.

Now you need to set up your color swatches to match your color scheme:

1. Select the Rectangle tool and draw a 5 x 5 pixel square with no stroke. Fill the square with the darkest color of your color scheme (for my example, I used #003399). Position the square near the center.
2. Duplicate this square four times (using either copy and paste or by pressing the Alt or Option key while dragging) and line them up around the center point.
3. Starting with the second square, reduce the opacity of each square by 20% of the previous one.
4. Now select all the objects (Select > Select All) and Group them (Modify > Group).
5. Rename this layer Swatches and lock it.

You should now have something similar to this:

Now we'll start to create the loader.

1. Create a new layer named Loader and drag it below the Swatches layer.
2. Select the Rounded Rectangle tool and set its fill color as the lightest of the swatches (in my example, #CCD6EB).
3. Draw a rectangle from top to bottom, 8 x 64 pixels in size, and align it to the middle of the canvas.
4. Open the Auto Shape Properties panel (Window > Auto Shape Properties) and change the corner radius to 4. With the lock on, all of the corners will change.

1. Copy and paste the rounded rectangle, and then select the Scale tool (Q).
2. Position the mouse at the top right of the rectangle so the cursor turns into the Rotate tool.
3. Press Shift while dragging downwards until the object snaps to a 30° angle.

Note: The Info Panel (Window > Info) shows the current angle as you rotate the object.

1. Repeat the above steps twice, but rotate the object to 60° and 90°, respectively.
2. Press Shift while selecting the second and third rectangles, and then copy and paste them into the document.
3. Choose Modify > Transform > Flip Horizontal to mirror the objects and complete the basic shape.

1. Now select all of the objects (Select > Select All) and Group them (Modify > Group).
2. Use copy and paste to duplicate this group, and then lock and hide the selection.

Note: Keep this copy as a backup; you can easily make modifications to it should you wish to change the widths or the curves on the shape.

1. Select the original shape and then choose Modify > Combine Paths > Join to create a composite path of the shape.
2. Deselect the shape and then select the Ellipse tool. You may wish to change the fill color to one that will be clearly visible against your loader shape.
3. With the cursor at the center point of the canvas (where the guides intersect), hold the Shift and Alt or Option key while you drag outwards, to draw a perfect 34-pixel circle.
4. Hold Shift while you select the composite path in the Layers panel so both the circle and path are selected.
5. Choose Modify > Combine Paths > Punch to create a hole in the middle of the shape.
6. With the new shape still selected, choose Modify > Combine Paths > Split .
7. Select all of the objects (Select > Select All) and Group them (Modify > Group).

1. With the Subselection tool (A), select the "12 o'clock arm" of the shape.
2. In the Property inspector, click the fill color box and sample the color of the darkest swatch to change its fill.
3. Repeat step 28 and 29 three times, but each time select the "arm" to the left of the previous one and sample the next color in your series of swatches.

Your shape should now resemble this:

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%:

Change the color scheme of the loader

Now that you've created a loader, you can quickly change the color scheme to suit other projects.

1. Select any frame in the document.
2. Unlock the Swatches layer and make its group visible.
3. Choose Edit > Find and Replace to open the Find panel.
4. Choose Search Document, Find Color, and Apply to: Fills from the three pop-up menus.
5. Click the Find color well and pick the darkest color swatch.
6. Click the Change To color well and enter the darkest color in the new scheme. For this example, I will use #FF0000.
7. Click Replace All. You should be prompted with "Search Complete. 17 Changes."

Notice that as the original swatches created earlier were just varying opacities on the same color, the find and replace has created the entire complementary color range for the new scheme.

1. Repeat steps 5-7 for all of the other colors in the scheme.
2. Hide the group in the Swatches layer and you now have a completely new, customized loading animation.