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

To create an Ajax loader:

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

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.
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.
Starting with the second square, reduce the opacity of each square by 20% of the previous one.
Now select all the objects (Select > Select All) and Group them (Modify > Group).
Rename this layer Swatches and lock it.

You should now have something similar to this:

resulting image

Now we’ll start to create the loader.

Create a new layer named Loader and drag it below the Swatches layer.
Select the Rounded Rectangle tool and set its fill color as the lightest of the swatches (in my example, #CCD6EB).
Draw a rectangle from top to bottom, 8 x 64 pixels in size, and align it to the middle of the canvas.
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.

start building loader

Copy and paste the rounded rectangle, and then select the Scale tool (Q).
Position the mouse at the top right of the rectangle so the cursor turns into the Rotate tool.
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.

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

complete the basic shape

Now select all of the objects (Select > Select All) and Group them (Modify > Group).
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.

Select the original shape and then choose Modify > Combine Paths > Join to create a composite path of the shape.
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.
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.
Hold Shift while you select the composite path in the Layers panel so both the circle and path are selected.
Choose Modify > Combine Paths > Punch to create a hole in the middle of the shape.
With the new shape still selected, choose Modify > Combine Paths > Split.
Select all of the objects (Select > Select All) and Group them (Modify > Group).

group all objects

With the Subselection tool (A), select the “12 o'clock arm” of the shape.
In the Property inspector, click the fill color box and sample the color of the darkest swatch to change its fill.
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:

resulting image