23 March 2009
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.
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.
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
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).
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).
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
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:
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).
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.
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.
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.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:
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.
DisplayObject.rotationZproperties and assembled to display a cube.
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:
(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:0location, 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.
focalLengthproperties are interdependent: In ActionScript 3.0, if you use the
flash.geom.PerspectiveProjection.fieldofViewproperty, Flash Player automatically modifies the value of the
flash.geom.PerspectiveProjection.focalLengthproperty. This goes both ways (if you modify the
fieldofViewproperty is automatically adjusted in Flash Player).
flash.display.DisplayObject.transformproperty 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:
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.
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:
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.