How to Create an Animation in Adobe Fireworks

Adobe Fireworks can be a very useful tool for anyone designing banners or editing pictures, but fireworks can also do much more than that. This includes animation which can very cleverly be added to ones website to add a nice effect. The program "Fireworks" is available for both PC and Mac, but for this example I am using the PC version CS3. For this "how to" I'll guide you through the steps to make a simple animation.

Steps

  1. Image titled Create an Animation in Adobe Fireworks Step 1
    1
    Open up Adobe Fireworks and click “create new FireWorks document (PNG)”
  2. Image titled Create an Animation in Adobe Fireworks Step 2
    2
    For this example lets make the canvas size 300 pixels by 250 pixels and the canvas color white.
  3. Image titled Create an Animation in Adobe Fireworks Step 3
    3
    Click the "OK" button.
  4. Image titled Create an Animation in Adobe Fireworks Step 4
    4
    Open the "STATES" tab on the right side window.(FRAMES tab for older version)
  5. Image titled Create an Animation in Adobe Fireworks Step 5
    5
    At the bottom of that tab click “New/ Duplicate State” button.(“New/ Duplicate frame” for older version)
  6. Image titled Create an Animation in Adobe Fireworks Step 6
    6
    Under "STATES" tab click on State 1.(FRAME 1 for older version)
  7. Image titled Create an Animation in Adobe Fireworks Step 7
    7
    For this example place a simple circle in State 1.
  8. Image titled Create an Animation in Adobe Fireworks Step 8
    8
    Select the circle and copy it.
  9. Image titled Create an Animation in Adobe Fireworks Step 9
    9
    Under "STATES" tab click on State 2. (FRAME 2 for older version)
  10. Image titled Create an Animation in Adobe Fireworks Step 10
    10
    Paste the circle you copied from State 1 and paste it onto State 2.
  11. Image titled Create an Animation in Adobe Fireworks Step 11
    11
    Move the circle to a different location on the canvas.
  12. Image titled Create an Animation in Adobe Fireworks Step 12
    12
    Under the canvas click on the white play/pause button and view what you have created.
  13. Image titled Create an Animation in Adobe Fireworks Step 13
    13
    You have now created a short two frame animation. This is a very simple example just to let you understand the concept of creating animations in Fireworks. Now get creative and create anything your mind can think of!

Tips

  • You can change the speed of each frame by increasing or decreasing the frame delay which is located on the right side of the name of the frame.
  • You can add more frames and make the changes from frame to frame smaller so when the animation is played the movement looks smoother.
  • The onion skinning button allows you to see what is in the different frames other than the one you are currently on.

Article Info

Categories: Adobe Software