1 / 9

Animating GIF

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 .

nuwa
Download Presentation

Animating GIF

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Animating GIF

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

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

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

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

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

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

  8. Making an Animated GIF 16. Open the Optimize panelin the Window Menu & select Animated GIF fromdrop down list (either thefirst 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 256. 17. To export: File > Export Wizard > Click “Continue” > select “Animated GIF” > Click Export” and save to your images folder.

  9. Completed Animated GIF The end result should work like this:

More Related