Request a quote: click here!
   
Customer service line: +44 1.582.614.522
   
Home What we do   Domain & Hosting   News Portfolio Support   Login  
April
25
2009
Creating Animated Gifs in Fireworks

gif AnimationGraphic 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. Animated Gifs In this tutorial you will learn how make the template animation seen on the right. Let's get started right away.

step1Step 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.

Step2: Open the Frames panel from Windows/Frames and start inserting your images on different frames. A screen shot 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).
step2

Step 3: step3The 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!

Last Updated on Saturday, 04 July 2009 17:27