Animating GIF

What is it? Think of how a flip book works. Each page is a different picture and when flipped through quickly, it looks as though objects are moving. Animated GIFs are much the same. A custom animation is broken down into states, which contains the sequential images and objects that make up each step of the animation. 1 state = 1 flip book page

Making an Animated GIF 1. Open Fireworks and start a new file 400 pixels wide & 400 pixels tall Click OK 2. Open the “States” Window located in the Window Menu 3. With “State 1” selected, use the toolbar to draw an ellipse (circle) that fills the canvas 4. On a new layer, Draw a line from the center of the circle to the very top of the circle

Making an Animated GIF 5. Label the sides of the circles with “12”, “3”, “6”, & “9” like a clock 6. Right click on the “Stage 1” listing and click “Duplicate State…” 7. Make sure “1” is listed in the Number section and “After current state” is selected, click OK

Making an Animated GIF 8. You should now have Stage 1 & Stage 2 listed 9. With “Stage 2” selected, use the sub- selector to move the line on the circle to the 3 o’clock position as below 10. Repeat step 9 for the 6 (stage 3) & 9 o’clock (stage 4) position

Making an Animated GIF 11. With 4 stages created, you need to now set the state rate, by default 7 per 100 delays appears. 12. If you want to slow the rate, select all the states by pressing shift & selecting all the states 13. Double click the state, state rate delay box will appear, set it to 50.

Making an Animated GIF 14. Below the states panel, select loop setting, and select forever to make your animation to be continuous. 15. You can preview the animation in the Preview panel. To do this, click the white arrow which is displayed in the bottom right of the document window (above the properties panel).

Making an Animated GIF 16. Open the Optimize panel in the Window Menu & select Animated GIF from drop down list (either the first or second drop down), check if the third drop down is set to Web Adaptive (if not select it) & select the number of Colors as To export: File > Export Wizard > Click “Continue” > select “Animated GIF” > Click Export” and save to your images folder.

Completed Animated GIF The end result should work like this: