Animated Gifs in Fireworks

Written by Rachna

Learn how to create simple animated gifs with macromedia Fireworks 4.0 and above.

Graphic animation adds movement and interactivity to your site. Learn how to easy it is to create animated gifs for the web in this tutorial. Click here to check out some cool graphic animations. Also, don't forget to read our Fireworks tips and tricks to find out new and exciting features of Fireworks.

In this tutorial you will learn how make the template animation seen on the right. Let's get started right away.

Step 1: The first step is to design your animation. Decide how you would like your animation and place each object in a different frame. Let me explain that. In the template animation seen on top you will notice that first one template appears then the next and then the next. So what I do, is place each template image in a different frame. I place template 1 in a frame called Template1, template 2 in a Frame called Frame 2 etc. etc. Open the Frames panel from Windows/Frames and start inserting your images on different frames. A screenshot of the different frames is shown below.

You can now preview your animation by using the play button found on the bottom left side of the screen. You will find that the animation is quite fast. You can change this by double-clicking on the default value '7' near the frame name. You can change this to 100 or a higher number suitable for the animation (100 is one sec).

Step 3: The last step is to optimize and export the image. Open the Optimize panel and choose Animated Gif from the drop down options. Next Export the animated gif by clicking File/Export. Export the image to the appropriate folder. Open Internet Explorer and browse to find the image you have exported. The animation should work fine.

You have successfully created an animated gif. Congratulations!

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