Animated Colour Shift

Creating an animated colour-shift in Fireworks is a simple matter of "tweening" symbols and it's done like this!

On a new canvas, draw the starting image, then convert it to a "graphic" symbol by clicking INSERT>CONVERT TO SYMBOL and selecting "Graphic" from the options. You should now see something like this:

Once you have done this, clone the symbol by clicking EDIT>CLONE. If you now open the "Layers" panel, you will see the two symbols listed in the window. The top entry will be highlighted - this is your clone! I like to name each symbol instance (by double-clicking the "Graphic Symbol" name and overtyping), like so:

I name the original (bottom) entry "Start", and the clone... Well, it ain't hard to guess! This is purely so I can keep track of where I am, 'coz I'm a bit dim!!!

Anyway, click in the panel to select the Start symbol, then open the "Effects" panel. Click EFFECTS>ADJUST COLOUR>HUE AND SATURATION. Adjust the "Hue" setting as seen here:

This is the trick to managing the animation "tween" when animating a Fireworks4 "Live Effect". You MUST apply the same effect to BOTH instances of the symbol for the animation to work. However, you will probably have an idea of what colour you wish to start from, so you don't want to adjust it to any really noticeable degree. Hence the "1" setting!

So, next thing to do is to click the second ("Finish"???) symbol in the Layers panel and repeat the above steps, but this time set the hue adjustment to a higher setting. The higher the setting, the more hues your object will cycle through when animated (as with my animated logo at the top of the page). It's a matter of experimentation for you! This symbol below, for example, was set at 179:

When you're done, click EDIT>SELECT ALL, then click MODIFY>SYMBOL>TWEEN INSTANCES. The tween dialogue box will open, as shown here:

It's up to you how many "steps" you set (but remember - the more steps, the bigger the file size! 10 is a good starting point), but don't forget to check the "Distribute to Frames" box. Click O.K. when you've done this and preview your animation! You can do this by clicking the "Play" button on the VHS-type controls you now see at the bottom of your canvas.

But don't rush off, just yet! There's a couple of other important points to note!

Firstly, when Exporting your creation, don't forget to set the file-type in the "Optimization" panel to "Animated Gif", as shown here:

Otherwise, all your hard work will have been in vain!

And lastly- check out the "looping" options at the bottom-left of the "Frames" panel:

These buttons control the looping of your animation on the web-page. Anything from "Once only" to "Forever and a day!".

Now... Go play!!! Enjoy!