Using the 3D Rotate command in Fireworks CS3

Additional Requirements

3D Rotate command

3d_rotate_fw_cs3.zip (ZIP, 64K)

If you have experience working with Macromedia FreeHand or Adobe Illustrator, or if you have a background in 3D modeling and animation, you'll be excited to hear about the 3D Rotate command, an extension I created using the powerful JavaScript API included with Fireworks CS3, in conjunction with Adobe Flash CS3 Professional. It is not a panel that ships with Fireworks CS3.

The 3D Rotate command provides an interface that allows you to move and rotate any group of selected elements in 3D space (see Figure 1).

The 3D Rotate command is a modal command that you apply to a selection of elements in your PNG file. Because the 3D Rotate command is not a native Fireworks CS3 command, it has some limitations, which I will discuss later in this article. However, you can achieve many interesting effects using this command that are brand new to experienced Fireworks users. Let's proceed with a tour of the command interface and describe how you can rotate Fireworks elements in 3D.

Note: Unlike a command panel, which you select from the Window menu—and which stays persistent in a little panel window while you work on your document—a command is run from the Commands menu and basically pauses the application while it performs the specified command on your selection. 3D Rotate may look like a command panel but it's pretty much just one very complicated command.

Using the 3D Rotate command

The 3D Rotate command is very straightforward. First, select any number of elements on the Canvas. Your selections can include paths, groups, text, bitmaps, and symbols. Once you have selected the items that you wish to rotate as 3D objects, select Commands > Modify > 3D Rotate to run the command (see Figure 2).

When you invoke the 3D Rotate command, the first thing you'll notice is that the command window is huge! There are two main reasons for the enlarged display window. First, as I was designing the command, I wanted to provide a preview window that offers interactive control, rather than fumbling with a wireframe representation of the graphics, or seeing only periodic image updates on the Canvas. Second, I found that it is not currently possible to always update the Canvas with a preview while the 3D Rotate command is running. The large command preview window makes it possible to preview the effect before the command is applied.

I find the large preview screen helpful as I determine the desired effect settings, but if you do not like the large preview window to cover the Canvas, resize the command window to make it smaller.

Let's review the options available in the command. If you look at the interface in the right column, you'll see three types of controls: Camera, Rotation, and View.

Camera

The Camera controls allow you position the relative rotation center point. You can also adjust the amount of camera perspective. If you have experimented with this setting, you may have noticed the camera does not start out at 0,0. The camera is not at zero coordinates because the graphic elements on the Canvas are not at 0,0—instead they are likely somewhere in the middle of the Canvas space.

The camera automatically centers the elements. By changing the camera's x and y values, you are changing the rotation center, and thus changing the distortion effect. As you decide on the best settings for your project, you can hold down the Spacebar and then click and drag on the preview area to pan around—the same way you can on the Fireworks Canvas.

The perspective setting allows you to increase the intensity of 3D distortions. By decreasing the number, you can make more dramatic distortion effects, similar to using a wide-angle lens. Be careful as you define your settings, though, because excessively narrow perspectives can cause unreasonable amounts of distortion.

Rotation

The rotation settings are at the heart of the 3D Rotate command. There are three axes to rotate around: x, y, and z. Drag the elements in the preview window to rotate around the x and y axes. If your selection contains gradients or patterns, the handles will be rotated with the elements as expected.

If you do not wish to rotate the fill handles for your project, you can keep the fills fixed in their original locations by unchecking the Rotate Fill Handles option. If this checkbox is unavailable (disabled), that simply means that the elements you've selected do not contain gradients or pattern fills.

Use the Transform Each option when you have multiple elements selected. If you check this option, each of the selected elements in the preview window will rotate around their own relative centers. Moving the camera while this option is selected makes the camera move the relative center of each individual element.

View

The View options are provided so that you can quickly determine the types of visual elements in your selection. This feature also allows you to disable the preview of various elements in order to make the preview display faster.

Pay particular attention to the Curves option; this option is enabled and can be selected whenever your elements include a path with Bézier curves. As you apply the 3D Rotate command, you'll notice that rendering rotated Bézier curves can decrease the performance of the preview window. If you find the preview running slowly and your element includes Bézier curves, try unselecting the Curves checkbox to improve preview performance and increase rendering speed.

The background color of the command's preview window matches your document background color by default. Depending on the location of the selected elements on the Canvas, however, you may find it helpful to change the background color of the preview window to increase the contrast and make it easier to see the effect you are creating.

Note: The remaining buttons—Cancel, Accept, Preview on Canvas, and Help—are self-explanatory. The Preview on Canvas option may be disabled. This option works only if your element selection is comprised completely of paths.

Suggested usage for the 3D Rotate command

The 3D Rotate command may not be useful to all Fireworks designers, depending on your style and project goals, but I hope that many of you will agree that it can be useful—if used sparingly—to add an extra dimension to your artwork.

Give it a try. You might find that 3D rotations can make your graphic design projects stand out by the use of perspective. Although some designers have found workarounds to give the illusion of 3D effects, the 3D Rotate command makes the process easier and faster. Try rotating a logo slightly, creating background elements that have some perspective, or experiment with creating an animation that has a unique little twist (see Figure 3).

Limitations of the 3D Rotate command

As you work with the 3D Rotate command, the most obvious limitation you'll encounter is that not all elements you work with in your design are made up of vector points. Because text, symbols, and bitmap graphics are not defined by vector points, they cannot be displayed in the command preview area. And since the actual graphic representation cannot be rendered, a bounding box is used instead and nonvector elements are displayed as a red box with an X (see Figure 4). Fortunately, these nonvector elements are still transformed into the desired 3D rotation settings by the command when you click the Accept button.

The Preview on Canvas checkbox is also limited because it applies only to vector elements that are defined by vector points. If your selection before invoking the command contains any elements that are not vectors, the Preview on Canvas option will be disabled.

Another limitation of the 3D Rotate command relates to the algorithm used to create the 3D transformation. You can see this occur when you define a very narrow perspective using large objects and then select a sharp angle of rotation. In this scenario, the points are sometimes transformed to unexpected locations, which can create undesirable results (see Figure 5). I describe this display issue as a partial mirroring or jumbled effect of the elements.

You may have seen a similar rendering effect in FreeHand or Illustrator. This is a result of a mathematical issue in the command that might be resolved with some programming revisions in the future. As a workaround for now, if you experience this unexpected rotation, try changing the perspective to a higher number to eliminate the unwanted behavior.

As you use the 3D Rotate command, you may notice that some visual settings in Fireworks are not rendered in the preview window. Items that are not rendered include filters, blend modes, pattern fills, some gradient types, feathered/hard edges (only anti-aliased edges), special strokes, grayscale masking, rectangle primitives' rounded corners, and gradient opacity nodes that do not match the color nodes' positions.

Another thing to keep in mind when using the 3D Rotate command is overall performance. The command does not have any issues rotating simple objects in 3D space. However, you may notice performance issues if you select a large number of elements to rotate. The same performance issues can occur if the selected elements for rotation include a great number of vector points.

If you have some experience working with Fireworks, you may have experienced slower performance when using the Transform tool on a large collection of elements. Similarly, attempting to apply 3D rotation to many elements simultaneously can reduce the overall performance speed. If you are working with the 3D Rotate command and you notice performance issues, try unchecking the Curves option (if the option is available); doing so often increases performance and reduces rendering time.

Where to go from here

I created this particular command on my own. It is worth noting that any developer with some Flash and JavaScript knowledge (and a steady supply of coffee) could make a similar command to extend Fireworks CS3. It really is not difficult to extend Fireworks. This command is a good demonstration of the power of the Fireworks CS3 extension API, as well as the strength of the Fireworks community.

As I was developing this command, I implemented the 3D rotation math that's described in one of Trevor McCauley's excellent online tutorials, Scripting 3D in Flash. Also included in this command is the ability to render Fireworks curves as Flash curves, which I discovered in Approximating Cubic Bézier Curves in Flash MX by Timothée Groleau. I'd like to send a shout out to both Trevor and Timothée for their groundbreaking work, and also encourage you to develop your own Fireworks commands to share new functionality with the Fireworks community.

This command is brand new and has just been released as version 1.0. If you have ideas for other features and Fireworks commands, please forward them my way. Send your feedback to contact@abeall.com. I'd love to hear from you!