Making a Quarter Spin/Using Numeric Transform

This tutorial and graphics is from the Fireworks 4 f/x Design book by Joyce Evans. Open a new document with a size of 150 X 150 pixels with a transparent background. You will need the two graphics below. Open both graphics in Fireworks.

Quarter Front
Quarter Back

Select the quarter front by clicking on it with the Selection Tool Selection Tool and copy (Edit > Copy) the quarter then select the new document.

Open the Frames panel, click the right-pointing arrow Frames Menu, and choose Add Frames Add Frames.

In the Add Frames dialog box that opens, enter 10 for the number and the After Current Frame option checked:

Add Ten Frames

Choose Edit > Paste in each frame from 1 to 5 to add the Quarter Front to the first five frames. If prompted to Resample click No. In the Info panel you will see that the quarters x y coordinates are 0:

Info

Click Frame 2 in the Frames Panel and make sure the Quarter is selected on the canvas and choose Modify > Transform > Numeric Transform:

Numeric Transform

In the Numeric Transform dialog box uncheck the Constrain Proportions option and enter 75 for the height. Click OK to close the Numeric Transform dialog box.

Numeric Transform

Select Frame 3 (make sure the Quarter is selected on the canvas) and choose Modify > Transform > Numeric Transform. Make sure to uncheck the constrain Proportions option and enter 50 for the height this time. Click OK to close the Numeric Transform dialog box.

Select Frame 4 (make sure the Quarter is selected on the canvas) and choose Modify > Transform > Numeric Transform. Make sure to uncheck the constrain Proportions option and enter 25 for the height this time. Click OK to close the Numeric Transform dialog box.

Select Frame 5 (make sure the Quarter is selected on the canvas) and choose Modify > Transform > Numeric Transform. Make sure to uncheck the constrain Proportions option and enter 10 for the height this time. Click OK to close the Numeric Transform dialog box.

Click on the Quarter Back graphic. Copy (Edit > Copy) and paste (Edit > Paste) it into Frame 6. At the info panel make sure the x y coordinates are set to 0.

After the quarter is aligned, select it and copy and paste it into Frames 7 through 10. Select Frame 7 and repeat the steps above with the following Numeric Transform numbers:

Frame 7 75
Frame 8 50
Frame 9 25
Frame 10 10
Frame 11 Select Frame 1 and copy the quarter front and paste it into Frame 11.

To set the timing of the spin, double click the number 7 on each frame and type in the numbers below:

Quarter Frame Rate

At the Optimize panel select animated gif as the file format.

Animated Gif Format

Preview it in the preview window Preview Tab. If it is the way you want it export it and save it for use in future projects. Here is how my graphic turned out:

Spinning Quarter

Fireworks 8 Tutorials