Please note: This page bridges you to our recently released Fireworks Web Design Tutorials as this page's content has been overhauled to give way to our new Animated GIF Graphics Tutorial. A short synopsis of what the new tutorials teaches is given below and is followed by the old tutorial.

In this tutorial you are going to learn how to create a custom animated graphic GIF file. A custom animation is broken down into frames, which contains the sequential images and objects that make up each step of the animation. The image below shows how we have created animated graphic.

Continue to our Animated GIF Graphics Tutorial.

Animated GIF using Fireworks 4 onwards

[Old Tutorial]

It is very easy to create animated GIF files in Macromedia Fireworks. Follow these 5 simple steps and your Animated GIF will be ready in a jiffy!

Step 1: Create all the graphics your animation will need and decide on how many steps it should have.

Step 2: Place graphics that should appear simultaneously together in each layer and give the layer a relevant name. Graphics that should appear in more than one layer needs to be shared across frames by ticking the "share across frames" property.

Step 3: Create as many frames as the number of steps the animation should have.

Step 4: Starting from the first frame, construct each of the steps by keeping only required layers open and the rest invisible (do this by clicking the eye icons of the different layers).

Step 5: Now insert a slice over the animated area and give it the property of being an "Animated GIF". You can preview the animation in the Preview panel by clicking the play arrow. Also check out the size of the animation by selecting the slice and then previewing. Once you are satisfied with what you see you can export the slice and your animation is ready.

Don't miss our popular article on Fireworks Tips and Tricks!

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!

Bookmark & Share

Bookmark and Share this web page.