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. Open up Adobe Fireworks and click “create new FireWorks document (PNG)”
2. For this example lets make the canvas size 300 pixels by 250 pixels and the canvas color white.
3. Click the "OK" button.
4. Open the "STATES" tab on the right side window.(FRAMES tab for older version)
5. At the bottom of that tab click “New/ Duplicate State” button.(“New/ Duplicate frame” for older version)
6. Under "STATES" tab click on State 1.(FRAME 1 for older version)
7. For this example place a simple circle in State 1.
8. Select the circle and copy it.
9. Under "STATES" tab click on State 2. (FRAME 2 for older version)
10. Paste the circle you copied from State 1 and paste it onto State 2.
11. Move the circle to a different location on the canvas.
12. Under the canvas click on the white play/pause button and view what you have created.
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.

Related Articles

• Feather Pictures in Macromedia Fireworks
• Use Adobe After Effects
• Use Adobe Photoshop Tools
• Draw a Hamburger In Adobe Illustrator

See also

• Rotate a Video in Adobe Premiere Pro
• Print Multiple Pages Per Sheet in Adobe Reader
• Open Multiple Images As Layers in Photoshop Using Bridge
• Add Transitions in Adobe Premiere Pro
• Crop a Video in Adobe Premiere Pro
• Use Adobe After Effects
• Install Adobe Fonts
• Upgrade Adobe Flash Player on Linux Mint
• Add a Signature in Adobe Reader
• Remove the Adobe CS4 License Agreement Pop Up

What links here

• Use Adobe Acrobat 9 Pro to Merge PDF Files