Animated GIFs contain multiple images that can play back sequentially to provide flip-book-style animation. When create an animation you can control the delay between frames, the disposal method and the number of times the animation will loop. For all their advantages, animated GIFs aren't perfect. Because animated GIFs are GIFs, they're limited to 256 colors. They're far from ideal for photographic images. They're best for moving banners, buttons, or animated line art.

Step One - Open Fireworks. When first opened Fireworks never gives you a blank page. Go to "File," select "Open," select a 500 X 500 pixel page, select "transparent radio button," and "OK."

Step Two - Set up all needed palettes "Window" menu, select Tools, Properties, Optimize, Layers, and Styles. Move the toolbars to the left of your document, and place the others on the right. The "Property Inspector " contains all options for changing text. If the Property Inspector is minimized click the bottom, right arrow to expand. Through the Property Inspector you can change size, font, spacing, alignment, leading, stroke, fill, and live effects A style contains built-in styles for text and graphics. A style can include attributes such as font, point size, color, fills, stroke or effect.tes such as font, point size, color, fills, stroke or effect.

Step Three ­ To create a star select the polygon tool, double click on the tool to bring up the options menu and select star. Click and drag on the canvas to make a star.

Step Four - With the star still selected add stroke, fill and effect attributes or add an already defined style from the style palette.

Step Five - To duplicate the star, select it, hold down the Option key and drag the new star to a new position. Repeat the step to duplicate more stars and place the them in a curve.

Step Six ­ Select all the stars on the canvas by choosing "Edit Select All."

Step Seven ­ With all the stars still selected, go to Window menu, select "Frames," to open the frames palette. Click on the "Distribute to Frames" icon on the bottom of the palette. This places each individual star on a separate frame.

Step Eight ­ To preview the animation click on the Play/Stop VCR control button at the bottom of the document window.

Step Nine - To save the graphic as a PNG, go to the "File" menu and select "Save," find the RAW folder inside of your site folder, retain the PNG extension and type a name, (e.g. animation.png) select "OK."

StepTen - To export the graphic as GIF or JPG, go to the "File" menu and select "Export Preview." In the Export Preview dialogue box, select the Animated GIF in the Format pop-up menu. Use the preview window to preview up to four previews comparing the file size and download estimated times for each preview.

Step Eleven ­ To specify the frame delay, looping and disposal method for each frame select the Animation tab. Frame delay determines the amount of time each frame displays, the lower the number the faster the animation. Select all the frames using Shift-click, type a number in the "Frame Delay Field." Select the "Looping Button" on the bottom left of the animation panel and enter the number of loops in the "loop number field." Select OK. You can preview the new animation setting by returning to the document window.

Step Twelve ­ After all the settings have been made and the preview of the animation is to your liking, click on the "Next" button in the "Export Preview" window. Name your file retaining the GIF extension. (e.g. animation.GIF). Select OK.

Content and site design created by Carol Siwinski, Curricular Technology Specialist for Germantown Academy.

July, 2002