- Animated GIF Tutorial
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.
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!
Compatible Versions of Fireworks for this Tutorial
Fireworks 4-8 | Fireworks CS3
Note: The instructions in this tutorial are same across all Fireworks versions listed above; Screenshot images (if any) may differ. Recommended Version: Fireworks CS5.5Web-site Design GuideWeb Design with Dreamweaver & Fireworks Navigation Design Ideas for Beginners Navigation Design Ideas for Advanced Users Drop Down Menu Navigation Web Site Navigation Tips Web Design Ideas Graphic Design Ideas Fireworks Tips Fast Loading Web Site TipsAdobe Fireworks CS4 New Features Photo Blur Effect Photo Montage, Fade Image Effect Extract Image Effect Line Art, Pencil Drawing Effect Blend Mode Effect Paste Inside Effect Rollover Images Effect Swap Images Effect
