How To Create An Animated GIF In Fireworks

I’ve been using HTML Marquee Codes to create scrolling images the past few years and have also used them for flashing images. The problem is the code does not validate for correct HTML . Your web page might validate for everything else except the Marquee Code. This is annoying, and not good practice for a professional web designer.

How To Create An Animated GIF In Fireworks

Benefits of Creating An Animated GIF In Fireworks

  • Validates for correct HTML
  • Easy to create
  • Make text stand out
  • Attract attention e.g. sales, etc

How To Create An Animated GIF In Fireworks

In this example I wanted to create animated text called: How To Create An Animated GIF In Fireworks so it would stand out from the rest of the web page (see video)

Requirements

Adobe Fireworks (I’m using Macromedia Fireworks MX 2004 to create this graphic)

1. Create your graphics

Open Fireworks and use the rectangle tool to create a 324px × 44px graphic. Make the background color red and the text white. On the right side of the window you”ll see it’s automatically called Frame 1.

2. Create a second frame

  • Open the frames panel (window-frames). You’ll already see Frame 1
  • Click on the bottom-right icon where it says new/duplicate to create Frame 2
  • Make the background color blue and the text white

3. Adjust the frame rate

This alters the time delay between the 2 frames. Double click on the default frame delay (7) and enter 70/100 seconds or adjust it to whatever delay you want.

4. Adjust the loop setting

Below the frames panel, select “loop setting” and select “forever” if you want your animation to blink continuously.

5. Optimize your GIF

Open the Optimize panel (Window-Optimize), select “Animated GIF” from the drop down list. Select “web adaptive” from the second drop down list. Select “256” from the Colors drop down.

6. Export your animation

  • Go to file-export wizard-continue-animated gif-continue-export
  • Name your file and save it to your desktop.

Congratulations!

You now have learned how to create an animated GIF in Fireworks.

Related articles

Create Animation with Fireworks
HTML Marquee Codes to create scrolling images
How to Create a Flash Slide Show

And now I’d like to invite you to download my FREE 28 Page Report:
Mining Your Opt-In List: “3 Ways To Make More Money From Any List”

From Herman Drost – Web Design, Hosting, SEO

Speak Your Mind

*