Animating in three-dimensional space

One of the cool new features of Flash CS4 Professional is the ability to animate two-dimensional objects in three-dimensional space (see Figure 5). New tools in the authortime environment and new properties in the DisplayObject class and geom package allow for projecting objects into perspective.

Figure 5. Rectangular shape rotated in three-dimensional space using the 3D Rotation tool

Updated properties in the DisplayObject class

The rotation effect seen in Figure 5 can be achieved in ActionScript using the new properties of the DisplayObject class. All sprites and movie clips are display objects in ActionScript 3.0. You're probably familiar with using the x and y property of the MovieClip object in older versions of the language. In Flash CS4 Professional, the x and y properties are joined by the z property, representing depth.

Movie clips and sprites have access to the following transformational properties:

Notice that the rotation property has been split into three separate properties in addition to the transitional rotation property. The transform property accepts a matrix for more advanced multi-property transformations.

As you can see, the updates come in the form of the new z properties. The z property deals with distance from a point of view. An object whose z property is 100 is further away from your viewpoint than an object whose z property is 50. As seen in Figure 5, if the z coordinates of the top of the rectangle are greater than the z coordinates of the bottom of the rectangle, the shape appears to lean back, creating a rotational effect. Using the rotation properties, you can easily create these type of effects on your two-dimensional graphics.

Building a simple three-dimensional animation

It's easy to use the rotation properties to create some interesting animation effects. The following example uses an enterFrame loop to generate the continuous animation of a two-dimensional object in three-dimensional space:

1. Select File > New and create a new ActionScript 3.0 document called 3dRotation.fla.
2. Name the default layer Image.
3. Import an image (File > Import > Import to Stage) or draw a rectangle on the Stage using the Rectangle tool.
4. Select the image or shape and convert it to a movie clip symbol (F8) named img.
5. Name the instance sq_mc on the Stage.
6. Add a new layer above the Image layer named Actions.
7. Select the keyframe on the Actions layer and open the Actions panel (F9).

8. Copy and paste the following code into the Actions panel:

   function enterFrameHandler(event:Event):void
   
   {
   
      sq_mc.rotationY += 5;
   
   }
   
   addEventListener(Event.ENTER_FRAME, enterFrameHandler);

9. Test the movie (Control > Test Movie) to see the animation run. Notice that img clip rotates along its y axis. You may visually expect a different result, but it makes sense if you think that it's rotating (spinning) around the (vertical) y axis.

10. Return to the code and change the rotationY value to a rotationZ value:

    function enterFrameHandler(event:Event):void
    {
       sq_mc.rotationZ += 5;
    }
    addEventListener(Event.ENTER_FRAME,
    enterFrameHandler);

11. Test the movie to see the results. Notice that the image clip spins along its z axis, which is a line from our point of view through the center of the object back into space.

12. Return to the code and combine the rotationX and rotationZ property to see the z axis appear in perspective:

    function enterFrameHandler(event:Event):void
    {
       sq_mc.rotationY += 5;
       sq_mc.rotationZ += 5;
    }
    addEventListener(Event.ENTER_FRAME,
    enterFrameHandler);

13. Test the movie to see the results. Notice that your two-dimensional object is now twisting through three-dimensional space.

Note: The ENTER_FRAME event is a part of all sprites and movie clips. When an event handler is added to the timeline of either of these types of objects, the related event handler function is called repeatedly at the frame rate. You can speed the animation up or slow it down by changing the frame rate of the movie in the Property inspector.

Advanced approaches to 3D animation

Updates to the geom package in ActionScript 3.0 include a number of classes devoted to working with 3D transformations:

• Matrix3D
• Orientation3D
• PerspectiveProjection
• Utils3D
• Vector3D

The Matrix3D class allows you to perform transformations to all three axes at the same time, which can yield greater performance and code efficiency. The PerspectiveProjection class provides an easy way to apply a 3D transformation to an object or view without explicitly building a Matrix3D instance. The Orientation3D class, Utils3D class, and Vector3D class provide supporting utilities and objects to aid in creating the transformation.

It's easy to use the rotation properties to create some interesting animation effects. The following example uses an enterFrame loop to generate the continuous animation of a two-dimensional object in three-dimensional space:

1. Select File > New and create a new ActionScript 3.0 document called projectionCenter.fla.
2. Name the default layer Assets.
3. Draw a rectangle on the Stage approximately 150 pixels wide and 150 pixels tall using the Rectangle tool.
4. Select the rectangle and use the Align panel to center the object on the Stage.
5. Select the shape and convert it to a movie clip symbol (F8) named square.
6. Name the instance square1 on the Stage.
7. Select the instance, copy it, and press Control+Shift+V to paste a second square above the first. Name the new instance square2.
8. Draw a circle approximately 15 pixels wide and 15 pixels tall using the Oval tool.
9. Select the circle and convert it to a movie clip symbol named circle. Make sure the circle symbol uses a centered registration point.
10. Name the circle instance focalPt.
11. Add a new layer above the Assets layer named Actions.
12. Select the keyframe on the Actions layer and open the Actions panel (F9).

13. Copy and paste the following code into the Actions panel:

    // Set position in the z axis
    square1.z = 200;
    square2.z = 500;
     
    // Flag while dragging circle
    var isDragging:Boolean = false;
     
    // Change the projection center in relation to the
    // circle while it's being dragged...
    function dragPressHandler(event:Event) 
    { 
       isDragging = true;
       focalPt.startDrag();
    }
    function dragMoveHandler(event:Event) 
    { 
       if( isDragging ){
             root.transform.perspectiveProjection.projectionCenter = new Point(focalPt.x, focalPt.y);
       }
    }
    function dragReleaseHandler(e:Event)
    {
       focalPt.stopDrag();
       isDragging = false;
       root.transform.perspectiveProjection.projectionCenter = new Point(focalPt.x, focalPt.y);
    }
    focalPt.addEventListener(MouseEvent.MOUSE_DOWN, dragPressHandler);
    focalPt.addEventListener(MouseEvent.MOUSE_MOVE, dragMoveHandler);
    focalPt.addEventListener(MouseEvent.MOUSE_UP, dragReleaseHandler);

    Notice that the first thing the script does is place the two-square back in space (z axis) in relation to the focalPt instance, which has no adjustment to its z axis.

14. Test the movie (Control > Test Movie) to see the animation run. Slowly drag the circle around the screen to see the projection of objects on the root timeline change in relation to the position of the focal point.

For more information on working with the PerspectiveProjection class, see Projecting 3D objects onto a 2D view in the Flash documentation.

Page 5 of 8

Previous Page

Next Page