Activity 10

Character Animation


In this tutorial you are going to learn how to animate a character, using Fireworks.  You will begin by drawing a character, step-by-step using the vector tools, duplicate states, play your animation, and export it for the web.

Activity adatped from:  ttp://

Animation symbols You can create an animation symbol from scratch or by converting an object to a symbol. You can then set properties that determine the number of states in the animation and the type of action, such as scaling or rotation. By default, a new animation symbol has five states, each with a delay time of 0.07 seconds.
Edit animation symbols You can change a variety of symbol properties, such as animation opacity and rotation. You can make a symbol appear to rotate, speed up, fade in and out, or any combination of these properties.
A key property is number of states. When you set this property, Fireworks automatically adds to the document the number of states required to complete the action. If the symbol requires more states than currently exist in the animation, Fireworks asks whether to add extra states.

You change animation properties using either the Animate dialog box or the Property Inspector

Animation symbol properties

  • States The number of states in the animation. You can specify up to 250 with the slider or enter any number in the States box. The default is 5.
  • Move (Animate dialog box only) The distance, in pixels, that the object moves. The default is 72, but it has no limit. Movement is linear, and there are no key states (unlike in Flash and Adobe Director).
  • Direction (Animate dialog box only) The direction, in degrees from 0 to 360º, in which the object moves. You can also change Movement and Direction values by dragging the animation handles of the object.
  • Scaling The change in symbol size, as a percentage, from start to finish. The default is 100%, but it has no limit. To scale an object from 0% to 100%, the original object must be small; vector objects are recommended.
  • Opacity The degree of fade in or out from start to finish. Values range from 0 to 100, and the default is 100%. Creating a fade in/fade out requires two instances of the same symbol — one to play the fade in, and the other to play the fade out.
  • Rotation The degree of rotation from start to finish. Values range from 0 to 360º. You can enter higher values for more than one rotation. The default is 0º.
  • CW and CCW The direction in which the object rotates, either clockwise (CW) or counterclockwise (CCW).

 need more help?  visit:


Part One: 

Step 1

Open up Fireworks and create a new file size of 100 x 100 pixels.  Save as:  firstlastname_activity10 in your Graphics Unit /Activity 10 subfolder.

Step 2

  • Draw a parrot, in stages, using the Pen Tool  and/or the Ellipse Tool .  The illustration below demonstrates the stages to draw your parrot in.
  • In order to make his feet look like they’re sitting on the bird stand, you will need to move the stand layer above the feet layer. 

Step 3

Custom animation needed to be created in separate states, each state creating a different stage of movement.  State 1 of our animation should appear the same/close to the animation below:

State 1


Create State 2 by following the directions below:

  • Open States panel (Window >> States or press (Shift+F2)), by default state 1 appears.
  • Click on the options icon in the top right of states panel and select duplicate state. A Duplicate state dialog box will appear, select the number of states you need and the after current state option and click ok. Your additional state are now created. The image below shows how the States Panel will appears after we added just 2 state for our animation.

  •  Now click on State 2 to select it and adjust the mouth of the parrot using the subselection tool.
  • The image below describes the steps to change the first state graphic to our modified parrot graphic for the second state.

State 2 of our animation will appear as below:

State 2


Create State 3 by following the directions below:

  • The image below describes the steps to change the second state graphic to our modified parrot graphic for the third state.

State 3


Step 4

We will now need to prep our animation before we export it.  Follow the directions below before exporting your animation for the web.

  •  We now need to set the state rate, by default 7 per 100 delays appears. If you want to slow the rate, select all the states by pressing shift tab and double click the state, state rate delay box will appear, set it to say 35. See the picture below that will show that how the state rate will appears.


  • And below the states panel, select loop setting , and select forever if you want your animation to be continuous. See the picture below that will show how to select forever option from the drop down list.



  • 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). See the picture below that will show you the play button.


  • On the Optimize panel (Window >> Optimize or press F6), 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) and select the number of Colors as 256. The Optimize panel will look as below:

  • Export your file as an Animated GIF (firstlastname_activity10.gif), in preparation for the web.  Save your work the original file as:  firstname_activity10.png

Part Two:

  • Create your own animated character, applying the same skills/techniques that have been collected from the creation of your Animated Parrot!
  • A minimum of 12 states,
  • Recommended Canvas Size:  400 pixels X 200 pixels,
  • Export and Save your file as:  firstlastname_Activity10_part2.gif

Part Three:

  • Create your own animated version logo,
  • A minimum of 36 states,
  • Recommended Canvas Size:  600 pixels X 600 pixels,
  • Export and Save your file as: firstlastname_Activity10_part3.gif

Part Four:

  •  Create an Activity 10 sub-page on your website under the Web Graphics parent page,
  • Upload and insert all animated gif and include a caption for each animation.
  • Upload your work to SkyDrive