Web Design Tutorials

Creating an Animated GIF using Fireworks

Learn how to design Animated GIFs using Fireworks MX onwards

Creating an Animated GIF using Fireworks

Learn how to design Animated GIFs using Fireworks MX onwards

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.

Animated GIF GraphicsContinue 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!

Compatible Versions of Adobe Fireworks for this Tutorial

Fireworks CS3 Fireworks 4-8 | Fireworks CS3
Adobe Fireworks CS4 & above users: If you are using Fireworks CS4+ please note that some features, steps and screenshot images may differ for the above tutorial. Recommended Version: Fireworks CS6
Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!