In this exercise, we will again take advantage of Auto Shapes and the Auto Shape Properties panel. This time, we will create a combined object of circular arrows using only the Donut and Arrow auto shapes.

Overview

The tutorial is comprised of five steps:

1. Creating the Doughnut segments
2. Formatting the Arrow Auto Shape
   
3. The final shape and finishing touches
4. Where to go from here
5. Recommended reading 
   

1. Creating the Doughnut Segments

1. Start with a 300x300 white canvas.
2. Select the Donut Autoshape and draw a 200x200 donut.
3. Open the AutoShape Properties Panel (Window >> Auto Shape Properties) and set the Donut's properties as follows:
   
   • Segments: 0, 120
   • Outer Radius: 88
   • Inner Radius: 70
   In Fireworks CS4, the Auto Shapes Properties panel became a tab in the Property Inspector.
4. Make a copy of the Autoshape and change its segment values to 120, 240
5. Make a copy of the Autoshape again and change its segment values to 240, 360
6. Give each segment a distinctive solid color fill, like on the image below.

2. Formatting the Arrow Auto Shape

1. Select the Arrow Autoshape and draw an arrow, any size.
2. While the object is selected, check the AutoShape Properties Panel and set every value to 0, except Arrow Width and Tip Length; this will get rid of everything except the arrowhead. Then those two values are set as follows:
   
   • Arrow Width: 51
   • Tip Lenght: 24
This gives you a basic arrowhead that can be copied, flipped and rotated to fit the arrow bodies.

When rotating, it's useful to snap the rotation point to the base center of the triangle.

3. The final shape and finishing touches

1. Once all the arrowheads are fitted to the bodies, group each arrowhead with its respective donut segment (Ctrl+G).
   
2. Open the Path panel (Window >> Others >> Path), and with a group selected, click on the Union Paths icon. Repeat this with the remaining two groups.
3. Click on one of the resulting curved arrow paths and change the fill type from "Solid" to "Linear", in the Property Inspector.
4. Position the gradient's starting and end nodes to the beginning and end of the curved arrow path, respectively.

5. Set the gradient's end node color to be white. (If you wish to use a different background, make the end node transparent)
6. Copy the shape (Ctrl+C) and while another shape is selected, paste the copied attributes: Edit >> Paste Attributes (Ctrl+Alt+Shift+V). This will transfer your gradient and fill settings to the other shape.
7. Unfortunately, it also changes the fill color, so click on the gradient and set the starting node's color to your desired choice.
8. Another problem that now became apparent is that the bottom of one arrow overlaps the tip of another arrow, and moving the layers doesn't solve the problem. We will need to make a small cut.
9. Make a copy of the topmost arrow object and hide it. Select the underlying two arrows and click on the Punch Path button in the Path panel. Unhide the topmost arrow. If done correctly, all three of your curved arrows are now seamlessly fit into another to form a circular shape.

4. Where to go from here

You have seen an example of the versatile nature of Auto Shapes. Their numeric property adjustment is not only a great time-saver, but also a valuable tool that offers unprecedented accuracy and control over the final outcome. 

For another example of Auto Shape manipulation, see my Watermark Logo tutorial.  

5. Recommended Reading (Adobe LiveDocs)

• Changing the properties of Auto Shapes
• Adjusting doughnut Auto Shapes