Creating Snake Loading Animations

Posted: August 01 2007

Following cold on the heels of my article, Creating Ajax loading animations in Fireworks, comes a new tutorial on how to create the "Snake" style loading animations. The results of which are far better than what can be created at (insert bias here) www.ajaxload.info.

Create a new 300x300 document with the background colour of your choice (#B63C33 in this example).
Draw a 300x300 anti-aliased circle and position it at 0,0.
Draw a 250x250 anti-aliased circle and position it at 25,25.
Select both circles and Modify -> Combine Paths -> Punch.

You should now have a doughnut shape Composite Path.

Note: You could also use the Doughnut Autoshape tool, however, without physically measuring, you have no way of knowing the exact dimensions of the inner radius.

Select the shape and add a vertical linear gradient in the middle If you are using FW8 or below, you will need to rotate the default linear gradient 90 degrees CW.
Set the first gradient node's colour to that of the background colour (#B63C33) and its opacity to 0.
Set the second node's colour to the brightest colour in your scheme (#FFEB76 in this example).
Zoom in to around 600% at the bottom of the circle, and bring in the bottom gradient handle up to the inner radius of the shape The bottom of your shape is now the correct colour.

Draw a 150x300 rectangle and position it at 0,0.
Select both objects and Modify -> Combine Paths -> Punch.

You should now have a semi-circle path.

Select the object and copy and paste.
Modify -> Transform -> Flip Horizontal.
Move it to 0,0.
Change its fill to solid as the lightest colour (#FFEB76).
Zoom in to around 600% at the bottom of the circle.
Draw a 2x25 rectangle (with a fill of #FFEB76) and position it at 150,275.
Select the rectangle and the left semi-circle and Modify -> Combine Paths -> Union.

This rectangle union is to rectify an issue later on where the "seam" would be visible in the animation.

With the left path selected, select the Knife tool.
Position the cursor at 0,0, hold Shift, and drag the mouse to make a cut at 135 degrees.
Select the top-most cut path and delete.

We're now going to close the path and create our snake's head.

Select the left path and select the Pen tool.
Select the top-left path node and then the other node The line will join.
Select the Sub-select tool.
While holding Shift+Alt, click the top bezier node and drag a small distance back at 225 degrees.
Select the top-left path node again.
While holding Shift+Alt, drag a small distance at 45 degrees until a smooth, even curve is visible.
Zoom out to 100%.

You now have you ouroborous snake loader shape!

Select both paths and Modify -> Symbol -> Convert to Symbol.
Name it Snake and press OK.

In the Frames panel, select Frame 1 and set its Frame Delay to 7 (if it isn't already).
Click the Frames panel context menu and then Duplicate Frame.
Enter 9 in the 'Number' box Ensure 'After current frame' is selected and press OK. Frame 2 should now be selected.

Select the Snake on the canvas and Modify -> Transform -> Numeric Transform (Ctrl+Shift+T).
Select Rotate and enter 36 in the degrees box.
Press OK.

Now go through each frame and rotate the snake by an extra 36 degrees each time. Thus, you should rotate with the following: 72, 108, 144, 180, 216, 252, 288 and 324.

Your snake is now fully animated!

Note: It would have been possible to convert the Snake to an Animation Symbol or duplicate and rotate each frame progressively, however, the results would not have been as good FW vectors have issues when they are rotated multiple times.

You can then resize animation to your desired size with Modify -> Canvas -> Image Size. 50px × 50px is pretty good.

When exporting the snake, use Animated GIF with an Exact palette and set the transparent colour to be that of the background and voila, you have one awesome snake!

Snake Loading Animation

And with a little imagination, you can achieve this…

Coloured Snake Loading Animation

Download the original Fireworks PNG