Fireworks Article

Creating a Spinning Graphic

Note: This article first appeared on Community MX.

Macromedia Fireworks has a very nifty animation utility that will help you move, scale, or rotate a selected object or instance. But what if you want the 3-D impression of spinning, rather than rotating? You can get this "flipping over" effect through a bit of visual trickery and some reliance on how the eye and the brain register movement.

To clarify, you can think of the Fireworks rotation effect as a "rolling" effect like the wheel on a bicycle. This tutorial will show you how to make an object appear to "flip" in three dimensions. You're going to create a beveled rectangle for this project, but can be apply the same technique to a standard bitmap object too.

Requirements

To complete this tutorial you will need to install the following software and files:

Fireworks MX 2004

• Try
• Buy

Tutorials and sample files:

• spinning_graphic_samples.zip (ZIP, 84K)

Prerequisite Knowledge:

Basic familiarity with Fireworks MX 2004

Let's get started. Open Fireworks and follow the steps below.

1. Create a new document with a height and width of 200 pixels. Set the Canvas color to white.
2. Create your rectangle by selecting the Vector Shape (Rectangle) tool, and drawing a rectangular shape on the canvas.

3. For the Fill, use a pattern. Select the Jeans pattern.

   

   Figure 1. Selecting the Jeans pattern

4. Using the Live Effects controls in the Property inspector to set an Inner Bevel. Leave the bevel settings at their defaults. You can always experiment with them later.

   

   Figure 2. Applying an Inner Bevel Live Effect

5. Convert the rectangle to a Symbol by pressing F8. Select Graphic (not Animation) for the type of Symbol. Give the Symbol a name. While naming isn't too important for an exercise like this, it becomes very handy when you have several Symbols to pick from. Now on screen you have a copy, or Instance, of the symbol.

6. Clone the instance by pressing Control/Command+Shift+D. Now you have two instances on the canvas, right on top of each other. You'll see in your Layers panel that you now have two objects.

   

   Figure 3. Two instances of the symbol in the Layers panel

7. With the top instance still selected, go to Modify > Transform > Numeric Transform...

8. Select Resize, and deselect the constrain proportions box. This is very important.

   

   Figure 4. Setting the height attribute in the Numeric Transform dialog box

9. Set your height to 5 pixels. Leave everything else as is and click OK.
10. Your transformed Instance now looks like a sliver of the original shape.

11. Select both instances by one of these methods:

    • Shift+Click with the Pointer tool on each of the two objects
    • Click and drag the cursor over both objects
    • Shift+Click the objects inside the Layer Panel

12. Select Modify > Symbol > Tween Instances and select the Distribute to Frames option. Set the number of frames to 6. Click OK. This will give you 6 new frames, plus your starting object and your ending object for a total of 8 frames. Take a look at the Frame Panel. This is the first half of the rotation. Press the play button (at the bottom of the document window on the PC) to see the result. Cool, huh? In reality, you've just squished (that's a hi-tech Fireworks term by the way) the object almost flat. But your eyes and brain will see this differently.

    

    Figure 5. Distributing to frames

Completing the Spin

1. Now you need to complete the spin. Select Frames 2 through 7 in the Frames Panel.Do this by first clicking on Frame 2. Then move your cursor to Frame 7, and Shift-click. All the intermediate frames are now selected.

   

   Figure 6. Selecting the second through seventh frames

2. Click on the Frame Panel Options, and choose Duplicate Frames. Those 6 selected frames are added again to the end of your animation. If you run your animation right now, it won't look so hot; the new frames make the rectangle appear to snap back to its tallest size and then start squishing again.

   

   Figure 7. Duplicating the second through seventh frames

3. You now need to reverse the order of these duplicated frames. Select Commands > Documents > Reverse Frames. This command will allow you to pick a sequence of frames and reverse the order in which they play.

   

   Figure 8. Reversing the order of the frames

4. Select Frame 9 in the Starting Frame pop-up menu, and Frame 14 in the Ending Frame list. Click OK.
5. Play your animation again. You should see that now the spin is complete.

Some Final Steps

1. Trim the canvas so that you only have the necessary space for the graphic, by selecting Modify > Canvas > Trim Canvas.
2. Choose Animated GIF as the File format in the Optimize Panel.
3. Preview the image in 2-Up or 4-Up view
4. Remove as many colors as possible while still maintaining acceptable quality. This will help keep the file size down.
5. Export as an Animated GIF.

If you are working with my sample PNG, here is what the final result looks like, optimized as a 16-color GIF image.

Figure 9. The resulting spinning graphic

About the author