home tutorials downloads links
guestbook
contact


Animated Numbers


Here's another simple animation technique that you may enjoy! It's a straightforward "frame-by-frame" job and goes like this:

Open a new canvas in FW and click to select the "Text" tool. Click on your canvas and, when the Text Editor has opened, choose your desired settings for font/weight etc. Type your first number, like so:

Next, open the "Frames" panel and click the black arrow at the top-right of the panel to open up the fly-out menu. Select "Duplicate Frames" like so:

In the new dialogue box which opens, choose the following settings:

I've chosen to add 9 new frames, because the animation will include the numbers 0 - 9 (which equals 10 frames in total, yeah?). I guess the settings you choose will depend on how ambitious you are! Heh!

The "Frames" panel will now change to show this:

HINT: The right-hand column shows the default "Frame Delay" rate of 7/100ths of a second. If your animation is a little rapid for your liking, you can edit this rate to your heart's content! Simply click the top entry, then SHIFT/CLICK the bottom entry to select them all. Next, double-click any frame and set a higher number in the dialogue box which opens. The higher the number you set, the slower the animation will appear!

All of these frames will obviously be identical to the first one you created. Your job is to click on each Frame and double-click the number appearing on your canvas. The Text Editor will then re-open and you can individually edit the number appearing in each frame of your animation. I've edited the numbers to give a random-number effect, as you can see at the top of the page.

Last step is to open the "Optimize" panel and set the file option to "Animated Gif", as shown here:

You may also wish to explore the "Looping" options offered at the bottom of the Frames panel, shown here in it's default setting of "Forever":

O.K., preview your work with F12, then export away!

For some more Animation techniques in Fireworks, check out my "Animated Banner" , "Wipe Text", "Animated Colour Shift", and "Fade Text" tutorials!

Have fun!

Take me to the top!