Exploring the new 3D features in Flash CS4 Professional

Adobe Flash CS4 Professional includes new 3D transformation functionality that is supported by Adobe Flash Player 10 and later. Flash Player 10 allows xyz translation and xyz rotation of 2D surfaces on the x, y, and z axes. Flash Player 10 also displays the perspective and camera angles you set to create 3D-like effects.

Flash CS4 Professional contains two new tools you can use to add 3D content to your projects: the 3D Rotation tool and the 3D Translation tool. The Property inspector has also been updated to add new fields so that you can set 3D positioning. You can also use the new 3D view settings to adjust xyz positions numerically, as well as control the perspective angle andfor objects on the Stage.

Finally, the Transform panel has been enhanced with new settings for xyz rotation and controlling the 3D center point.

This article highlights these cool new features and provides examples of workflows that you can apply to your own Flash application development process.

In the past, many developers submitted feedback requesting 3D functionality in Flash Professional. With the new features available in Flash CS4 Professional, it is now a simple process to create stunning 3D effects.

To get started, select a vector shape or a bitmap graphic and convert it to a movie clip symbol. When you are working within the authoring environment, only movie clip instances can be transformed using the new 3D tools in Flash.

Note: When you write code in ActionScript 3.0 for Flash Player 10, 3D properties are not limited to movie clip symbols. I will explain this in more detail later in this article. For now, just keep in mind that the 3D Rotation tool and 3D Translation tool can be applied only to movie clips.

3D Rotation tool

Drag a movie clip instance to the Stage from the Library. Then select the 3D Rotation tool from the Tools panel (see Figure 1).

After selecting the tool, you'll see the 3D Rotation tool interface displayed on top of the movie clip on the Stage (see Figure 2).

Experiment with dragging the handles of the 3D Rotation tool. The red handle represents the x axis, the green handle represents the y axis, and blue inner ring represents the z axis. Additionally, you can drag on the orange outer ring to access free transform functionality. The orange ring allows you rotate an object around both the x and y axes simultaneously.

The default state of this tool (accessed in the options area of the Tools panel) represents Global Transform mode. When you work in this mode, it means that any xyz rotations you make will move in relationship to the xyz coordinates of the Stage (see Figure 3).

Select the other transform mode setting for the 3D Rotation tool by deselecting the Global Transform button in the options area of the Tools panel. This state is called Local Transform mode. When you are in this mode, the Tools panel displays an "off state" message next to the Global Transform button (see Figure 4).

When you use the 3D Rotation tool in Local Transform mode, you can rotate any movie clip instance on the Stage around the object's center point (see Figure 5).

Try using the 3D Rotation tool in both the default (Global Transform mode) and alternate setting (Local Transform mode). Notice the differences in the 3D Rotation tool and its ability to rotate the movie clip when both Global Transform mode and Local Transform mode are enabled.

3D Translation tool

Let's move on to the 3D Translation tool to see how it works. Select the 3D Translation tool from the Tools panel (see Figure 6).

While the movie clip and 3D Translation tool are selected, you'll see the interface of the 3D Translation tool displayed on top of the movie clip on the Stage (see Figure 7).

Just like the 3D Rotation tool, the red handle represents the x axis, the green handle represents the y axis, and the blue circle represents the z axis. Click and drag one of the arrows to move the object to the x and y axes, and drag the blue circle upward or downward to translate the object on the z axis.

By default, the 3D Translation tool uses the Global Transform mode. This means that the 3D transformations move in relationship to the Stage's coordinates. The direction of the x, y, and z axes will not change unless you choose to turn the Global Transform mode off. Similar to the 3D Rotation tool, you can change modes by toggling the Global Transform button in the Options section of the Tools panel.

If you deselect the Global Transform button, you can use the 3D Translation tool to move an object around the xyz axes relative to the selected object's coordinates.

To see the 3D Translation tool axes as they appear in Figure 8, use the 3D Rotation tool to rotate the object first and then switch to the 3D Translation tool to transform the object using the object's coordinates.

To learn more about working with the 3D transformation tools, watch the following video by "Flash Downunder" host Paul Burnett on doing 3D rotations and translations in Flash CS4:

In Flash CS4 Professional, the Property inspector contains a new section for setting 3D properties called 3D Position and View. When you use the 3D Rotation tool or the 3D Translation tool to adjust the 3D properties of movie clip instances on the Stage, this section reflects the changes by displaying the corresponding xyz numerical values. In this section, I take a closer look at these properties to understand what each value represents (see Figure 9).

Figure 9 shows that the x, y, and z fields correspond to the selected object's xyz positions. The settings indicate that the z axis is currently set at 0.0. However, once you enter a new number (or add to the value of the z axis by using the 3D transform tools), Flash identifies the object as a 3D object and displays a color overlay showing the xyz axeswhenever the object is selected (see Figure 10).

Once the instance is perceived as a 3D object (either because the xyz values are changed in the Property inspector or by using the 3D Rotation tool and 3D Translation tool), the section named Position and Size becomes grayed out. This occurs because the information in the Position and Size sections displays only the values when the selected object is a 2D object.

The 3D object indicator is designed to display local coordinates, which shows the xyz orientations relative to its own. For example, if you've previously rotated a 3D object on the Stage, the 3D object indicator may look skewed, as shown in Figure 11.

If you refer back to Figure 9, you'll notice that directly below the x, y, and z values there is a line displaying the numeric values that correspond to the width and the height of the selected object: W: 55.0 and H: 39.0.

Unlike the other numbers in the Property inspector, these numbers are grayed out. This is because the width and height values displayed here are designed to show the perspective size of the selected 3D transformed object.

For example, imagine that there's a square movie clip on the Stage that has both its width and height values set to 100 × 100. Then imagine that you add 150 pixels to the z value. As soon as you adjust the z axis, the object on the Stage looks smaller because it is pushed back in the z axis. When you look in the Property inspector, the width and height properties show W: 78.0 and H: 78.0. These are the values of the appearance of the object's dimensions on the Stage, rather than reflecting the real size of the selected object's width and height. The actual dimensions are also displayed in gray in the Position and Size section. A camera icon is displayed directly below the width and height values, along with the current value of the perspective angle (see Figure 12).

Perspective angle

The perspective angle property controls the field of view (camera angle) of the Stage, measured in degrees. The default value of the perspective angle is 55 degrees—which displays the objects on the Stage in a normal perspective.

If you set the perspective angle value to 180 degrees (the maximum value), it means that the camera is placed right in front of the Stage and any 3D transformed objects will look much closer to you.

The perspective angle is controlled by Flash; any adjustments you make to the camera angle do not affect the 2D objects that exist in your project. If you change the perspective angle settings in your Flash file, you can see how the perspective angle property causes a 3D object to become distorted. For example, if you've rotated a 3D object and kept the default perspective angle setting of 55, the viewing angle appears normal (see Figure 13).

Now try setting the perspective angle to 1 degree. Without making any changes to the 3D object, the viewing angle has changed radically (see Figure 14).

Finally, to take it to the other extreme, try setting the perspective angle to 179 degrees. With this maximum setting, the 3D object is completely distorted beyond recognition (see Figure 15).

Vanishing point

Directly below the perspective angle settings, the Property inspector displays the values for the vanishing point. The trapezoid icon appears next to the two values for the vanishing point (see Figure 16).

The vanishing point is described by the values of the x and y positions. The vanishing point property of a FLA file controls the orientation of the x axis of 3D movie clips on the Stage. When you change the x and y values of the vanishing point, two gray lines appear across the Stage to indicate where you've set the vanishing point (see Figure 17).

By default, the vanishing point is set to the center of the Stage. If you use the default Stage size (550 × 400), the vanishing point is set to X: 275 and Y: 200. Similar to the perspective angle, this property is a base control for the entire Flash file. Any changes made to the vanishing point only affect the display of 3D-enabled objects. In Figure 18, the vanishing point was changed to X: 26.0 and Y: 34.0.

In the next section, I'll describe how to use the settings in the Transform panel to adjust the center point of a 3D object and how to adjust 3D rotations.

Flash CS4 Professional includes an updated Transform panel that provides new 3D functionality. This section highlights how you can use these new features to control the location of the 3D center point and make adjustments to the rotation of a 3D object (see Figure 19).

The Transform panel now includes controls for specifying the 3D Rotation and 3D Center point that allow you to transform a 3D-enabled movie clip with more precision. You can rotate a movie clip by setting the x, y, and z degrees in Global Transform mode or Local Transform mode without using the 3D Rotation tool. The transform mode is based on the state of the Global/Local Transform option button in the Tools panel for the 3D Rotation tool or 3D Translation tool (see Figure 20).

If you need to check whether you are using the Global Transform mode or not, select the 3D Rotation tool or 3D Translation tool and change the numeric values in the Transform panel by dragging the blue text. This will cause the xyz axes to appear on the Stage.

The 3D Center Point control displays very unique xyz properties. This control represents the location where the center point is set. When you rotate a movie clip, you can manipulate the 3D center point to make precise adjustments regarding how the rotation will occur. For example, if you select all the tile movie clips while the 3D Rotation tool is active, the set of tiles will rotate by the single 3D center point (see Figure 21).

If you are following along with the sample files available for download on the first page of this article, open the file named tiles_test.fla. Try rotating all of the selected tiles with the 3D Rotation tool. If you change the y rotation value in the Transform panel, you'll see the objects appear as shown in Figure 22.

Next, try changing the x rotation value to 392 and change the y rotation value to 218 to set the Rotation tool to the same location as the red circle. Then update the z value for the 3D Center point to 0 (see Figure 23).

Change the y rotation value to 150. At this point, when you use the 3D Rotation tool to swivel the tiles, you'll notice that the rotation becomes more dynamic because the set of movie clips now rotate around the red circle object.

Now that you have a good understanding of how the 3D Rotation tool and the 3D center point can be set to control the rotation of an object or a set of objects, let's discuss how you can animate these rotations. The next section describes the process for using motion tweens to animate 3D objects.

In the previous sections of this article I explained how to use the new 3D tools, as well as how to set values in the Transform panel and the Property inspector to turn a 2D object into a 3D transformed object. So far, all of these adjustments and settings have resulted in a static transformation of the selected object(s). This section describes how to animate 3D transformations using the new Motion Tween model.

Note: 3D tweens are supported only in the CS4 object-based tweening model. You therefore cannot animate 3D objects using the classic tween model. To learn more about working with motion tweens in Flash CS4 Professional, see the following video by "Flash Downunder" host Paul Burnett on motion tweening:

Follow these steps to create a 3D object animation using a motion tween:

1. Open the file named tiles_test.fla from the provided sample files folder.
2. Review the Timeline and notice that the set of tile movie clips all exist on Layer 1.
3. Select all the tile movie clips and then right-click (or Control-click) on the objects on the Stage and choose the option to Distribute to Layers. This option copies each movie clip to its own individual layer in the Timeline.
4. Shift-click to select Frame 1 of each layer that contains a tile movie clip. Right-click (Control-click) to access the context menu. Select the option to Create Motion Tween. This selection adds tweened keyframes to all of the layers you've selected (see Figure 24).

Note: After choosing to create a motion tween in Step 4, the keyframes of the selected layers in the Timeline are colored blue to indicate that they are tween layers (see Figure 25).

5. Select Frame 24 of Layer 12 and press F5. This adds frames from Frame 1 to Frame 24 of Layer 12, to match the length of the tweened layers. This ensures that the red ball object remains visible when the playhead runs through the frames.
6. Move the playhead to the last frame, as shown in Figure 26. This is the frame where you apply the 3D transformation. Save the file.
7. Select the tile movie located in the top left corner. Select the 3D Rotation tool. Make sure you've set the transform mode to Local Transform mode. The Options area of the Tools panel will display the OFF message.
8. Select the red ring of the 3D Rotation tool interface to apply rotation around the x axis (see Figure 26).

Note: When you've released the mouse and finished applying the rotation to the tile movie clip, a keyframe is automatically added to the last frame of the layer named Layer 12.

9. Open the Transform panel. Select the rotated tile movie clip in order to see the numeric value of the rotation you applied on the x axis. I applied –249 degrees to x axis, as displayed in the Transform panel.
10. Select the tile directly below the rotated tile (the middle left tile). Use the Transform panel to set the rotation of the x axis to –249 (or whatever value was displayed in Step 9). Make sure the playhead is still located on Frame 24 (see Figure 27).

11. Select the tile on the lower left side. Repeat Step 10 to rotate the x axis of the bottom left tile to the same value that you used before (–249). After making this change to all of the tiles in the left column of the grid, the Stage should look like Figure 28 when the playhead is located on Frame 24.

12. Press Enter (or Return) to see a live preview of the motion tween.
13. Right-click (Control-click) on one of the tween layers to access the context menu. Notice that the menu displays a check mark next to 3D Tween (see Figure 29).

This menu item automatically becomes checked whenever a selected layer contains a tweened object with 3D properties. If you manually deselect this option in the context menu, all of the 3D properties that you applied to the tween are discarded.

14. In this next step, we'll use a technique known as multiple layer editing. Select the three tiles in the right column. Make sure that the playhead is located on Frame 24. Select the 3D Translation tool (press G to use the keyboard shortcut) while all three tiles are still selected. This time, make sure that the transform mode should be set to the Global Transform mode.
15. Press the D key to toggle between Global Transform mode and Local Transform mode. The Stage should look similar to Figure 30.

16. Select the center blue circle and move it upward to add a z translation to the three tiles simultaneously (see Figure 31).

17. Press Enter (or Return) to preview the motion tween on the Stage.

ActionScript 3.0 includes new methods and properties in the DisplayObject class to support working in three dimensions. The new properties and methods include the following:

• DisplayObject.z
• DisplayObject.rotationX
• DisplayObject.rotationY
• DisplayObject.rotationZ

The DisplayObject.local3DtoGlobal() method allows you to use 2D drawing commands to create 3D renderings.

Additionally, ActionScript 3.0 now includes classes and methods in the flash.geom package to support working with matrixes and perspective properties. Notably, the flash.geom.PerspectiveProjection class contains properties for setting the field of view, focal length, and vanishing point of the 3D space. The flash.geom.Matrix3D class supports complex transformations of 3D geometry, such as rotation, scaling, and translation of matrixes. And you can use the flash.display.Graphics.drawTriangles() method to implement 3D geometry and textures. See the ActionScript 3.0 online documentation in the section titled Working in three dimensions (3D) for more information.

If you are following along with the sample files, open each of the FLA files listed below and examine how the ActionScript is used to apply 3D properties to objects in Flash:

• rotationY.fla: The green square is rotated around the y axis using ActionScript.
• translateX.fla: The square has 50% alpha, rotationX, and rotationY applied using ActionScript. The square is translated along the x axis.
• perspective.fla: The Perspective projection (field of view and projection center) is applied to each display object individually.
• local3DtoGlobalCube.fla: The DisplayObject.local3DtoGlobal() method is applied to a set of 3D coordinates to render a cube. Click the Stage to see the cube and then move the mouse to move the cube toward the vanishing point.
• graphicscube.fla: The Advanced Drawing API is used to draw several squares on different Sprite instances. The Sprite instances are then rotated using the DisplayObject.rotationX, DisplayObject.rotationY, and DisplayObject.rotationZ properties and assembled to display a cube.
• bitmapcube.fla: A series of bitmaps are imported and assembled into a cube using DisplayObject.rotationX, DisplayObject.rotationY, and DisplayObject.rotationZ. Then a movie clip animation from the library is added to the display list and set to move along the z axis to create a 3D effect.

Open each the FLA file described above and review them in Flash CS4 Professional. Open the Actions panel and examine the code in the Script window for each of the projects.

The following is a list of things to keep in mind when working with 3D objects in Flash CS4 Professional:

• Flash Player 10 and ActionScript 3.0: The ability to transform 3D objects is available only when you use the default publish settings to choose Flash Player 10 and ActionScript 3.0. If you change the publish settings to Flash Player 9 (or earlier) or select ActionScript 2.0, then neither the 3D Rotation tool, 3D Translation tool, or 3D Tween is enabled.
• Movie clips: Currently in Flash CS4 Professional, you can apply 3D transformations only to movie clip instances. However, you can create any object, wrap it inside a movie clip, and then apply 3D transformations to the movie clip instance wrapper. For example, you can create some text and copy it inside the Timeline of a movie clip, and then apply 3D transformations to add a 3D effect to text.
• No masking support: 3D objects cannot be set as a mask, but you can mask 3D objects using regular 2D objects. Currently, Flash does not support masking of 3D objects. This means that if the layer contains a 3D object, the option to convert that layer to a mask layer will be disabled.
• Classic tween model: You cannot use the classic tween model to animate instances that have 3D transformations applied to them. Always use motion tweens to animate 3D objects.
• Edit in place is disabled: If you edit a movie clip that contains objects with 3D transformations, double-clicking the 3D transformed object on the Stage opens the symbol in Edit mode, which means that you can't see the symbol's instance in relation to the other objects on the Stage.
• Perspective in Edit mode: You'll notice a difference in perspective between the Stage and Edit mode when you edit a nested movie clip. To see this in action, create several 3D movie clips and wrap them into a single movie clip. Double-click the movie clip and attempt to edit the nested movie clip in Edit mode (because Edit in Place mode is not available). You'll notice a difference in the perspective of the nested elements. This perspective difference occurs because the (x: 0, y:0) value in Edit mode is based on the registration point of the nested movie clip. This differs from the Stage's x:0, y:0 location, which is set to the upper left corner. This discrepancy causes the vanishing point to be positioned differently when viewed in both modes. If you adjust the vanishing point while working in Edit mode, the change will affect the entire document.
• Setting fieldofView and focalLength properties are interdependent: In ActionScript 3.0, if you use the flash.geom.PerspectiveProjection.fieldofView property, Flash Player automatically modifies the value of the flash.geom.PerspectiveProjection.focalLength property. This goes both ways (if you modify the focalLength property, the fieldofView property is automatically adjusted in Flash Player).
• Perspective angle and vanishing point are document-based properties: In ActionScript 3.0, you can use the properties of the flash.geom.PerspectiveProjection class on any individual display object. However, when you set the perspective angle and vanishing point in Flash CS4 Professional, the changes affect the entire document.
• Orientation of the axes: The z axis is a positive value as it moves away from the person viewing the Stage. The y axis is a positive value as it moves down, and the x axis is a positive value as it moves to the right. The axes are described in detail in the overview of the flash.geom.Vector3D class.
• The flash.display.DisplayObject.transform property associates 3D properties with display objects: In ActionScript 3.0, use the DisplayObject.transform property to associate properties from the flash.geom.PerspectiveProjection and flash.geom.Matrix3D classes with display objects.

This final section of the article highlights common tips and tricks that you can use to make the most out of the new 3D transformation tools:

• Double-click to center items: Double-click the center point of the interface of the 3D Rotation tool to set the tool back to the center of the object. As you apply 3D transformations, you might encounter situations where the 3D Rotation tool has moved away from the object you are working on. When this happens, simply double-click the center point of the tool to set it back to the object's center.

  The same trick works when you select multiple objects and rotate them all at once. Select all instances while the 3D Rotation tool is active. Then double-click the center point of the 3D Rotation tool. The 3D Rotation tool jumps to the center of all the selected objects.

  When you create a motion path for an animated 3D object, you may discover that the 3D Rotation tool has moved off the object (and the motion path has moved off the center, too). Double-click the center point of the 3D Rotation tool to move it and the motion path back to the center of the object.

• Check the registration point before creating a movie clip: If you plan on using ActionScript 3.0 to manipulate the rotation of a movie clip instance, make sure to make a note of the location of the registration point for that movie clip. By default, when you create a movie clip symbol, the registration point is automatically set to the top left corner. If you apply a 3D rotation to the movie clip instance using ActionScript 3.0, the object will rotate around that registration point. Make sure to set the registration point carefully if you want to apply rotation to the object using ActionScript 3.0.
• Link multiple 3D instances using the Bone tool: If you wish to link two or more movie clips that contain 3D objects, you can use the Bone tool. Nest each 3D instance inside another movie clip, and then link the parent 2D instances together using the Bone tool.
• Learn the D keyboard shortcut: Press the D key to toggle between Global Transform mode and Local Transform mode. You'll find this button displayed in the options area of the Tools panel when either the 3D Rotation tool or the 3D translation tool is active.
• Press and hold the Shift key: The Shift key constrains the 3D Rotation tool to rotate around the axes in 45-degree increments.
• Use snapping: When you wish to move the center point of the 3D Rotation tool, remember that the center point snaps to the movie clip's bounding box.
• Remove 3D properties: You can remove 3D transformations from any selection by choosing Modify > Transform > Remove Transform. Alternatively, you can simply click the tiny button at the bottom right of the Transform panel. Right-click (or Control-click) a tween in the Layers of the Timeline and manually deselect the 3D Tween option to remove the 3D transformations from the selected motion tween.

To learn more about working with 3D objects and using the tools and techniques available in Flash CS4 Professional, see the following screen presentation and article:

• Working with 3D art

Be sure to visit the Flash Developer Center to find helpful articles and tutorials to get you up to speed quickly. Also check out the ActionScript Technology Center to find ActionScript 3.0 language references and programming guides.