Home / Articles / Adobe Flash / An Introduction to 3D in Flash

An Introduction to 3D in Flash

Article Description

One of the main reasons that the Flash platform has remained as popular as it has for so long is that Flash has continuously evolved to meet the demands of its audience. In the first of a series of articles on using 3D in Flash applications, Chris Florio, contributor to ActionScript 3.0 for Flash Professional CS5 Classroom in a Book, shows how to use 3D features (and limitations) that currently exist in Flash Professional CS5 and in Flash Player 10 using both the Flash interface and ActionScript.
Understanding the Code

Understanding the Code

If you are new to ActionScript 3.0, the code may be a little daunting (there are plenty of good references for learning ActionScript, including the Adobe ActionScript 3.0 Classroom in a Book for Flash CS5); however, a quick tour through this code should make it clear for experienced ActionScript developers and at least intuitively understandable for beginners.

The first section of the code sets some initial variables. A new array named stars is created. This will be used to store and keep track of a number of instances of the Star movieclip that will be placed on stage in the coming lines. A variable named numStars will be used to determine the number of stars that will be placed on stage. After this, six more variables are created that store numeric values for the imaginary walls within which the stars will be constrained. The code to follow will cause all of the stars to bounce off of these imaginary walls (see Figure 8).

The next block of code contains a long for loop that repeats for the value of the numStars variable. Each time the code loops, a new instance of the Star symbol is created named star. The new star is then added to the stars array using the push() method. Next, each star instance is given properties named velX, velY, and velZ containing random values. These will be used to determine each star’s velocity on the x, y, and z axis.

Lines 18-20 place each star onstage randomly on the x and y axis, and all of the stars will start off 700 pixels from the front of the stage. The addChild() method is then used to add the stars to the stage, and finally lines 23-25 use the ColorTransform class to give each star a different random color (see Figure 9).

The next section of code contains an ENTER_FRAME event handler, which means that the onEnter() function will repeat at the rate of the flash timeline—in this case, 24 times per second. The onEnter() function contains another for loop that will run for each of the stars that are now on stage. Each time the for loop runs, a function named move() will be called with the current star as its parameter, and a function named sortZ() will also be called, which is what will apply the z-sorting referred to earlier (see Figure 10).

The move() function is long, but it only does two things. First, it moves each star on all three axes by the value that was stored in each star’s velX, velY, and velZ properties.

Next, a long conditional statement on lines 44-74 checks to see if the star being checked has collided with our imaginary walls. If it has, then its velocity is reversed on that axis by multiplying its velocity by -1 to make the star appear to bounce off of that wall (see Figure 11).

Finally, the sortZ() function is applied. Each time a star is moved, this function sorts the stars array in the order of each star’s z axis. In other words, the stars are sorted from the back of the stage to the front. Then another for loop redraws the stars onstage in the order of their depth. This assures that closer stars appear in front of the further stars (see Figure 12).

Test the movie again, and watch the motion of all of the stars. Again notice how they continuously sort themselves back to front.

4. Final Thoughts | Next Section Previous Section