Animated Banner

This is the first in a short series on basic animation in Fireworks. It should serve to answer one of the more commonly asked Animation questions I've seen in the Macromedia Fireworks Forums:

"Why does my background only blink ONCE in my animation?"

(See last paragraph of tutorial if you don't even get that!!!).

O.K., let's start with a background image I prepared earlier:

This is a simple banner image with a text label and a horizontal fill texture. Oh, and I've added a "Radial Fill" to add a little highlight interest! This will be the "constant" background to our animation and MUST be ALL on one frame!

So, having created/opened the required banner image, open the Layers panel and double-click the Layer title (e.g. "Layer 1" as shown here):

In the dialogue box which opens, you MUST click the "Share Across Frames" box! This will instruct Fireworks to show this image across ALL subsequently created frames in your animation. Your layer panel should now change to show this:

Notice the "Share Across Frames" ladder icon?

Now, to create our animated "logo" (Heh! For want of a better description!):

Select the "Polygon" tool from the toolbox by click/holding on the "Rectangle" tool and select from the menu which opens, as here:

Once you have done this, double-click the Polygon icon to open the "Options" dialogue box, as shown here:

Click the drop-down arrow to open the "Shape" menu and select "Star". Click the "Sides" drop-down and adjust the slider to 5 (or just overtype! It's up to you!). And you should have something like this:

Now, click/drag on your canvas to draw your star on your banner image, until you get something like this:

You can obviously now nudge the star around until it is positioned correctly before moving on to the animation procedure!

So, while the star is still "selected" (i.e. highlighted in blue, as above), let's get it spinning by clicking MODIFY>ANIMATE>ANIMATE SELECTION. This opens the Animation Dialogue Box as shown below:

Adjust the settings to those shown (they'll do for a start!). I've set "Move" and "Direction" to ZERO, as I want the animation to spin on the spot. I've also set the "Opacity" to run from ZERO to 100% to give a fade-in effect (now THERE'S a big clue for anyone looking for fade-in text effects!!!).

The last point worth noting is the "Rotate" setting. You may wonder why I haven't set the animation to rotate 360 degrees? I mean, I want it to spin completely around, don't I??? Well, work it out!

O.K., it goes like this: The animation takes 10 frames, yeah? That's a 36 degree spin each frame that flicks by, right? Well, if you do the math, that will mean that Frame 1 and Frame 10 will look exactly the same!!! Giving a bit of a "glitch" in the animation - it will seem to stop for a moment as it flicks through those two frames, then spin again when it gets to Frame 2! Try it out... you'll see what I mean!

So, once you've clicked O.K., you should now see something like this on your canvas:

An animation "symbol". You're now ready to "publish and be damned!" Set your "Optimization" panel to "Animated Gif". This will save you having to ask:

"Why do I only get a static image when I export my animated gif which took me 5 hours to create???"

Now, save and export your file!

Of course, if you can't wait that long, you can always preview with F12!

Pretty cool, eh???