Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Animated Gifs  

 

Featured Fireworks & Dreamweaver Template

Christian Template 3
Christian
$39.95

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.

Animated GifsIn 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.

Creating Animated Gifs

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.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 45000 templates!

create a free html5 website

Featured Template
Template # 39255
Type: WordPress
Price: $68