Objects in 3D Space

In 3D Space there are used three directions, or axes: X (horizontal), Y (vertical), and Z (for depth or perspective).
When you move or rotate an object by the Z axis, it becomes a 3D object.
Flash has two special tools for working with objects in 3D space: "3D Rotation Tool", and "3D Translation Tool".

3D Rotation Tool - is used to rotate an object in 3D space, on the X-axis, Y-axis, and Z-axis.
3D Translation Tool - is used to move an Movie Clip in 3D space, along the X-axis, Y-axis, and Z-axis. Moving an object in 3D space is called translation.

- Only the Text and Movie Clip Symbols can be used to create 3D effect.

Flash provides two different 3D space: global and local. The default mode is Global. This can be enabled /disabled from the "Global Transform" button (shown in the image below), located in the options area of the "Tools panel" (appears when you select one of the "3D Rotation" or "3D Translation" tools).
3D Tools

- Global 3D space is the Stage space, while local 3D space is the movie clip space.

When you move a Movie Clip in Z-axis, with the "3D Translation tool", three arrows appear in the 3D object: the X-axis is read, the Y-axis is green, and the Z-axis is blue.
When you select the "3D Rotation Tool", these axes appears inside an orange circle.
3D Axes

To rotate the object on one of the axes, hold the cursor over one of the colored axes, and move it (a tooltip appears indicating the axis). The object is rotated around a point in the center of the circle. You can drag and move this center point.
To rotate in all three dimensions at once, use the orange circle.
To move the object in 3D space along the same three axes, use the "3D Translation Tool" and drag the arrowhead of the axes. When the Local mode is set (the "Global Transform" button is disabled), the object is moved in perspective.

Try the next example:

Open a new Flash document and draw a rectangle on the Stage (with the "Rectangle tool"), with a yellow or orange fill color, to distinguish clearly the axes
Convert the rectangle into Movie Clip Symbol (from Modify -> Convert to Symbol, and select "Movie clip" for the Type option).
Select the "3D Rotation Tool" and rotate the shape in different directions, by dragging each axis.
- Try also to move the center point, then rotate again the shape in all directions to see the effect.
Select the "3D Translation Tool" and drag the arrowhead of each axis.
Disable the Global Transform mode (in the option area of the Tools panel) and drag the arrows again.

When you select an Movie Clip instance on the Stage, 3D Position and View section of the Properties panel appears, as shown in the image below. This section contains options to move and place more exactly the Movie Clip in 3D space.
Properties 3D

- The Perspective Angle affects the size and view of 3D movie clips on the Stage. It's like zooming in and out with a camera lens, making the object appear closer to the viewer, or further away. The default angle is 55 degrees. You can set values between 1 and 180.
- The Vanishing Point is the point way off in the distance where an object disappears out of sight. As objects approach the vanishing point, they get smaller (as is shown in the picture below).
To move the vanishing point, change the X and Y values on the Properties panel next to the Vanishing Point.
The Reset button moves the Vanishing Point to the default position in center of the Stage.

When you select multiple Movie Clips, and move one of them, all are moved in the same way, such as a single object.

<<-Creating Mask Layers in ..

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Objects in 3D Space

Flash Course

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month