Page 1 of 2 Last week we introduced you to the Ribbon Auto Shape and showed you how to make a phone cord with it. This week we will use this Auto Shape to create a great looking graphic of a spiral binding. This Auto Shape was created by Hiroshi Miyazawa, who works for Macromedia on the Fireworks QA team. The Auto Shape and supporting files for this tutorial can be downloaded at the bottom of this page. After you download the file, unzip it and double click on the Ribbon.mxp file. The Extension Manager should open and present you with a message that the extension was successfully installed.
As a refresher, here is the Ribbon Auto Shape quick start guide from last week:
In Fireworks open the spiralNoteStart.png file that is contained in the zip file you can download at the bottom of this page. If you want to learn how to create this starting graphic yourself, refer to last weeks introduction to the Ribbon Auto Shape. As seen in the graphic below, using the Rectangle tool, draw a rectangle to represent one of the holes in the notebook paper. Notice how I'm using the edge of the spiral to properly size the hole.
Next, clone the rectangle by selecting Edit >Clone from the menu or pressing Ctrl+Shift+D. Move the cloned rectangle down to the last curve in the ribbon as shown below. Now you need to make a clone of this rectangle for each curve on the ribbon between the top and the bottom rectangle. For our example you will need to clone the rectangle four times. Next, with all the rectangles selected, open the Align panel (Window>Align) and click on the Distribute Vertical Center button as indicated by the cursor in the screen shot below.
Now that we have the holes, we need the paper. Using the Rectangle tool, draw a rectangle to represent the size of page you want. Refer to the image below for help in proper placement of this rectangle around the holes. Then select the paper and the holes and join them by choosing Modify>Combine Paths>Join from the menu or pressing Ctrl+J.
Tip: An easy way to select the paper and the holes is to choose Select>Select All from the menu (or press Ctrl+A) and then Shift click on the Ribbon to deselected it.
If your paper isn't solid, fill it with a solid color so that what you have looks like the image below.
Keywords
Ribbon, Auto Shape, Fireworks, Tutorial
