[stowball]

Hey Guys

I've just created this ouroborous snake loading animation for a friend, and thought it may make for a good tutorial.



Would anyone be interested in reading it? It would demonstrate using symbols, path operations, the pen tool, find and replace and frames.

Cheers

[Alan]

How to create animations in Fireworks is an often asked question. I think it would benefit all of us. I know Ive picked up some techniques from ya already!

[stowball]

Here you go...

1. Create a new 300x300 document with the background colour of your choice (#2A2A2A in this example).
2. Draw a 300x300 anti-aliased circle and position it at 0,0.
3. Draw a 250x250 anti-aliased circle and position it at 25,25.
4. 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.

5. 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.
6. Set the first gradient node's colour to that of the background colour (#2A2A2A) and its opacity to 0.
7. Set the second node's colour to the brightest colour in your scheme (#CCFFFF in this example).
8. 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.

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

You should now have a semi-circle path.

11. Select the object and copy and paste.
12. Modify -> Transform -> Flip Horizontal.
13. Move it to 0,0.
14. Change its fill to solid as the lightest colour (#CCFFFF).
15. Zoom in to around 600% at the bottom of the circle.
16. Draw a 2x25 rectangle (with a fill of #CCFFFF) and position it at 150,275.
17. 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.

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

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

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

You now have you ouroborous snake loader shape!

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

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

Frame 2 should now be selected.

33. Select the Snake on the canvas and Modify -> Transform -> Numeric Transform (Ctrl+Shift+T).
34. Select Rotate and enter 36 in the degrees box.
35. 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.

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



And here's the original PNG...



You can see a slightly more stylised version at my friend Philtrated's website: http://www.philtrated.com.

[blue2x]

hey, how bout, every second, u change the color, or the hue saturation, how would that look like? awesome tut!

[Alan]

blue2x, on Jul 31 2007, 06:39 AM, said:

hey, how bout, every second, u change the color, or the hue saturation, how would that look like? awesome tut!

Dang dude, Im going to give this a shot when i get home tonight. Thanks!

[Tom]

Hey stowball! nice tut! thanks a lot, its something fun to do

[stowball]

blue2x, on Jul 31 2007, 11:39 PM, said:

hey, how bout, every second, u change the color, or the hue saturation, how would that look like?

It would look awesome! Great idea blue...



For this, I used the same 36 principle as with rotating. I set the main colour of the symbol to be white, and for each frame applied a Hue/Saturation (Colorize) live filter of H: +=36, S: 50, L: -50. Which went through the 360 of Hue equally over the ten frames making a smooth transition.

[Adam!]

Extremely cool.
Nice step-by-step too

[raja]

very nice tutorial .Tks a lot for the share.

[so1980==MikeTaylor]

stowball, on Jul 31 2007, 06:36 PM, said:

It would look awesome! Great idea blue...

ouroboro...coloured.gif

For this, I used the same 36 principle as with rotating. I set the main colour of the symbol to be white, and for each frame applied a Hue/Saturation (Colorize) live filter of H: +=36, S: 50, L: -50. Which went through the 360 of Hue equally over the ten frames making a smooth transition.

psychedelic.

[stompwampa]

stowball, on Jul 31 2007, 05:36 PM, said:

It would look awesome! Great idea blue...

ouroboro...coloured.gif

For this, I used the same 36 principle as with rotating. I set the main colour of the symbol to be white, and for each frame applied a Hue/Saturation (Colorize) live filter of H: +=36, S: 50, L: -50. Which went through the 360 of Hue equally over the ten frames making a smooth transition.

It would be really cool to port that over to Flash and write some action scripting to change the color at random intervals and with random hue/saturation changes. The user would never see the same color or pattern twice.