An Introduction to 3D in Flash
- Working with the 3D Tools in the Flash Interface
- Z-Sorting
- Understanding the Code
- Final Thoughts
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
As users have grown more sophisticated, bandwidth has increased and technology gotten more advanced, Flash has grown from a program for creating vector animations for the browser into a powerful tool for developing applications for multiple platforms that can include all types of graphics, animation, video and sound, all controlled by ActionScript 3.0, a very powerful object-oriented programming language. Lately, Flash has also added the third dimension to its capabilities.
This article will introduce the 3D features (and limitations) that currently exist in Flash Professional CS5 and in Flash Player 10 using both the Flash interface and ActionScript. In future articles, we will look at ways of expanding Flash’s 3D capabilities using third-party 3D engines, and then finally we will look at the very exciting new features coming in the 3D engine code-named “MoleHill” that will be available in a coming version of the Flash Player. You can see a preview of MoleHill on Adobe Labs.
Although individual developers have found ways to create (or simulate) 3D capabilities in Flash projects for a long time, Flash Professional CS4 was the first version of the program to integrate the third dimension. As of Flash CS4, all movie clips can be manipulated in three dimensions using the tools in the Flash interface or by using ActionScript. In addition to an object’s “x” or horizontal property and “y” or vertical property, you can now manipulate an object’s “z” property to create the illusion of depth. You can also rotate objects in three dimensions. The objects that are used are still two-dimensional objects but they can now be manipulated in 3D space. As of this writing, to use true 3D objects in Flash you will need to use a third-party 3D engine, which is something we will cover in a future article.
First we will look at the ways 3D manipulation is accomplished in the Flash IDE and then we look at creating 3D animation using ActionScript. We will also look at an ActionScript technique for overcoming one of the main limitations of 3D in Flash. You can download the examples.zip file that accompanies this article if you wish to follow along in Flash CS5.
Working with the 3D Tools in the Flash Interface
By default, all visual objects that are placed on the Flash stage are treated as 2D objects, and it is not until their z axis is manipulated that Flash considers them 3D objects. There are two tools in the Flash tool palette that let you control an object in 3D space: the 3D translation tool and the 3D rotation tool (see Figure 1).
)
If you are using the example file, open it in Flash CS5. In this file, you will find a movieclip named “star” in the library. Drag an instance of this onto the Flash stage (see Figure 2).
)
From the toolbar, select the 3D Rotation Tool and select the star instance onstage (see Figure 3). Notice that a set of lines and circles appears over the movieclip. Selecting and moving the red line allows you to rotate the star on the x axis. The green line allows rotation on the y axis, and the blue circle allows rotation of the z axis. The orange circle is for free rotation on all three axes.
)
Now select the 3D Translation tool. The same color coding (red-green-blue representing x-y-z, respectively) allows you to move the star on all three axes (see Figure 4). With the star still selected, if you make the Properties Inspector visible (Window > Properties), you will see that you can also set the x, y, and z properties of the star numerically using the 3D position and view settings.
)
Below the x, y, and z properties, you will see controls for perspective angle and vanishing point settings that affect all 3D objects in the scene (see Figure 5). Try experimenting with these settings and notice the results. Add a few more instances of the star to the stage and manipulate these 3D properties.
)
You will find that motion tweening works the same for 3D properties as for all 2D properties, and you can use the timeline or the motion editing to do many types of animation in 3D space with any movie clip.