By Mariko Ogawa
 
Mariko Ogawa
Modified
23 March 2009
 
Prerequisite knowledge
A basic understanding of the Flash authoring interface, working with symbols, and the ability to create simple timeline animations is recommended.
 
User level
Beginning
 
Required products
Adobe Animate CC
 
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.
 
 
 

 
Working with the 3D Rotation and 3D Translation tools

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).
 
 Figure 1. 3D Rotation tool from the Tools panel
Figure 1. 3D Rotation tool from the Tools panel
2. 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).
 
Figure 2. Interface of the 3D Rotation tool on top of the selected movie clip instance
Figure 2. Interface of the 3D Rotation tool on top of the selected movie clip instance
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).
 
Figure 3. Default 3D setting: Global Transform mode
Figure 3. Default 3D setting: Global Transform mode
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).
 
Figure 4. Global transform mode currently off
Figure 4. Global transform mode currently off
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)
 
Figure 5. 3D Rotation tool in Local Transform mode
Figure 5. 3D Rotation tool in Local Transform mode
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).
 
Figure 6. 3D Translation tool from the Tools panel
Figure 6. 3D Translation tool from the Tools panel
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).
 
Figure 7. Interface of the 3D Translation tool
Figure 7. Interface of the 3D Translation tool
Just like the 3D Rotation tool, the red handle represents the x axis, the green handle represents the y axis, and the bluecircle 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.
 
Figure 8. 3D Translation tool in Local Transform mode
Figure 8. 3D Translation tool in Local Transform mode

 
Setting 3D values in the Property inspector

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. 3D Position and View section of the Property inspector
Figure 9. 3D Position and View section of the Property inspector
currentStar.x = (stage.stageWidth / 2);
 
Figure 9 shows that the x, y, and z fields correspond to the selected object's xyz positions. The settings indicate that the zaxis 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).
 
 
3. At the end of the star creation loop, add the following lines to save and increment the angle:
 
//Store the angle of this star. Each star and it's angle can be
//referenced using the same array index
(stars[i] and angles[i]).angles.push(angle);

//Update the angle for the next star
angle += ANGLEDIFFERENCE;
The star creation loop should now look like the following:
 
//Star creation loop
//Create and position the stars, starting with the farthest one
for (var i:int=0; i < NUMBER_OF_STARS; i++)
{
//Create a new star
currentStar = new Star();

//x and y coordinates are the same for all stars: middle of the
//stage, a little up from the bottom.
currentStar.x = (stage.stageWidth / 2) - Math.sin(angle)*radius;
currentStar.y = stage.stageHeight - ORIGINAL_YBORDER;

//Set the depth, or z-value, representing how far away the box is
//from the viewer
currentStar.z = starDepth;

//Set the object alpha so that stars further away appear fainter
currentStar.alpha = Math.min(1.0, 0.25 + ((INITIAL_STAR_DEPTH - starDepth) /

(INITIAL_STAR_DEPTH - MINIMUM_STAR_DEPTH) * 0.8));
//Add star to the array
stars.push(currentStar);

//Add star to the stage
addChild(currentStar);

//Update the starting depth for the next star, which will be closer
starDepth -= ZDISTANCE;

//Store the angle of this star. Each star and it's angle can be
//referenced using the same array index (stars[i] and angles[i]).
angles.push(angle);

//Update the angle for the next star
angle += ANGLEDIFFERENCE;
}
 
4. Change the timer function in several places to use the values from the sliders for the z speed and for calculating the new x position. The new timer function is:
 
//This function is called each time the timer goes off
function timerHandler(e:TimerEvent):void
{
//First get the dynamic speeds from the user interface sliders
angleSpeed =angleSpeedSlider.value*0.01;
zSpeed = zSpeedSlider.value;
radius = radiusSlider.value * 20;

//Loop through the array of stars
for (var i=0; i < NUMBER_OF_STARS; i++)
{
//Access the star via a local variable.
currentStar = stars[i];

//Get the Star's angle
angle = angles[i];

//Bring the star closer by decreasing its y value
currentStar.z -= zSpeed;

//When the z value is less than the minimum star depth, we know the
//star has "passed" us, and can be placed at the end of the line
//by setting both the z order and putting it first in the display
//list (if z is less than zero, then the star is "really close", but
//still may be on screen.)
if (currentStar.z < MINIMUM_STAR_DEPTH)
{
//Set to end of line, farthest from the viewer
currentStar.z = INITIAL_STAR_DEPTH;
// reset the angle to follow the previous star, by
// getting the angle of the previous star
if (i != NUMBER_OF_STARS - 1)
{
//Set behind the last star, by the angle difference
angle = angles[i+1] - ANGLEDIFFERENCE;
}
else
{
//Angles[0] has already been incremented,
//so also subtract the anglespeed we'll be adding
//after this if block, to maintain just the angledifference.
angle = angles[0] - ANGLEDIFFERENCE - angleSpeed;
}

//Move this star to the end (behind others in the display list)
setChildIndex(currentStar,0);
}

//Increment and save the star's new angle
angle += angleSpeed;
angles[i] = angle;

//Calculate the new x position for this star
currentStar.x = (stage.stageWidth/2) - Math.sin(angle) * radius;

//Set the object alpha so that stars further away appear fainter
currentStar.alpha = Math.min(1.0, 0.25 + ((INITIAL_STAR_DEPTH - currentStar.z) /
(INITIAL_STAR_DEPTH - MINIMUM_STAR_DEPTH) * 0.8));
}
}
You now have given the user the ability to control the speed and the amount of oscillation of the stream of stars. The sample file Moving-Stars-2.fla shows the star parade with user controls hooked up.
 

 
Bonus: Adding a twist

You can perform multiple movements at the same time, both 2D and 3D. Adding a z-axis rotation to the stars is the same as a 2D rotation. Add this line of code to the star creation loop (which assumes a five-pointed star):
 
//Set rotation, each star rotated a litle bit more than the other
currentStar.rotationZ = i*360/(NUMBER_OF_STARS*5);
The multiplication by the variable i subtlely rotates each star slightly more than the previous star. Add this in the timer function to start the slow clockwise rotation:
 
//Slow clockwise rotation
currentStar.rotationZ += 2;

 
Where to go from here

This tutorial used the z-property of display objects and animated objects with a timer-based function. For another tutorial about 3D in Flash and ActionScript 3, read my companion article, 3D view controller in Flash using ActionScript 3.
 
Also see the following sections in the online documentation which discuss 3D: