Tommy Logic™

How to make an image appear to rotate using Fireworks CS3

Using the simple tools available in Fireworks CS3 we'll create an animate image in minutes with 9 easy steps.

If you need to download Adobe Fireworks CS3 they have a trial version available.

Download | Fireworks CS3 Trial Version

Download | Example Files (17kb | zip)

In this demonstration we'll be using the popular "Digg" logo as our base image to create the "spinning" effect.

1. Open the "original digg logo " in Fireworks CS3.

2. With the image open we need to first convert the image to a " symbol "

Select the image and press F8. Name the symbol digg and choose Graphic for the type.

3. We need to Clone the instance so we have two identical symbols in the layer.

Press Ctrl (Command)+Shift+D
In your Layers Panel you will see two identical objects.

4. We are going to resize the object using Numeric Transform.
Be sure the top of the two objects is selected.

Go to Modify--> Transform--> Numeric Transform
Enter 5 pixels as the width.
Be sure to Uncheck "Constrain Proportions" and choose OK

5. This is where the animation begins to take place. We use Fireworks handy "Tween Instances" tool.

Select both objects using Shift+select (both objects are now selected in the Frames Panel)
Enter 6 steps and check Distribute to frames. Press OK

6. The first half of the spin is now completed, we need to Duplicate the Frames to complete the spin .

From the Frames Panel press Shift and select frames 2 and 7.
With Frames 2 through 7 highlighted choose Duplicate Frame from the options menu.

7. In order to achieve the spinning effect, we need to Reverse the order of the duplicated frames.

From the File menu, choose Commands--> Document--> Reverse Frames.
Enter Start Frame 9 and End Frame 14. Click OK

8. The spinning effect is now completed. You need to Export the image as an Animation.
You may want to Trim your canvas to fit only the animated image, first.

From the File menu, choose File--> Image Preview ( Ctrl+Shift+X )
Choose Animated GIF from the format options. Click OK and name your file.

9. That's it.. your DONE !!! You now have now completed an animated, spinning image.

Congratulations !!!

If you have any questions, feel free to leave a comment & I'll be glad to help you more.

Best of Luck,

Tommy Logic