Sound and Animation
New 3D Methods of Display Objects in Flash Player 10
by Doug Ensley and Barbara Kaskosz
In the expanded version of AS3 that ships with Flash CS4, every Display Object is embedded in 3D space, with x, y and z coordinates as well as properties that allow rotation about any of the three coordinate axes and more advanced manipulations.
rotated 180 degrees and we will see it from behind. The code below is the complete script for the Flash CS4 file CardFlip1.fla included in the download folder, see (Listing 1). For the animation in this application, we use the Timer class. The functions that handle the TIMER event and the TIMER_COMPLETE event follow below. With the Timer object in place, it is simple to trigger the animation with a simple mouse click that starts the timer, as we do in the doFlip function on lines 5-7 in, see (Listing 2). The animation is managed by the execution of the onTimer function each timer the TIMER event fires. Recall that tm.repeatCount is the number of times the event will fire, so adding 180/tm.repeatCount this number of times effectively adds a total of 180 degrees each time the animation runs. We use the Math.round(… ) function to ensure that the total rotation is an exact multiple of 180 degrees in the end, and we use mod 360 arithmetic so the value of card.rotationY stays between 0 and 360. This latter point will be important when we make the card have a back, in a moment, (see (Listing 3).
What you will learn… • How to use 3D properties and methods new for Flash Player 10 • How to use the new Vector and Vector3D classes for Flash Player 10 • How to deal with z-sorting in 3D graphics
What you should know… • How to import graphics and create graphics in the Flash IDE • How to write ActionScript code on the timeline
degrees about the y-axis. We have done this to illustrate the fact that when you look at the back of a MovieClip (the card), the result is actually what you would expect – the graphics appear backward. Setting up the stage For the CardFlip1.fla example, there is nothing interactive on the stage until run time, but since we are working with imported graphics for our card, we will need to import these external files and convert them to MovieClips before our code will work: • Choose File > Import > Import to Stage for the two files SpadesTwo.png and CardBack.gif that are included in the download folder. Convert each of these to a MovieClip ( Modify > Convert to Symbol ) with registration point in the center. Call them FrontClip and BackClip, respectively. Give your two new clips instance names mcFirst and mcSecond , respectively. Position them on the stage roughly as shown. Adding the code We are now ready to discuss the code behind the card flipping applet. The strategy is simple enough. We will create a Sprite object called card that has the mcFirst MovieClip as a child. When the card is clicked, we start a timer tm that animates the flipping of the card by incrementing the value of card.rotationY a small amount each time the TIMER event fires. When the timer finishes, the card will have
Level of difficulty
T he new features are recognized when building a swf file for Flash Player 10. The file http://www.flashandmath.com/ ffdm/3DMethods.zip can be downloaded and unzipped. All files mentioned in this article are included in this folder. The 3D coordinate system In Flash CS4, Display Object has the usual x and y-coordinates as well as a z-coordinate along the direction that is perpendicular to the computer screen, as shown in (Figure 1). It is easiest to think of a z-coordinate of 0 as being on the stage , while the viewer’s eye has a negative z-coordinate and the positive z-axis extends beyond the stage . We will see right away that the rotation property for Display Objects has been usurped by three different properties, rotationX , rotationY , and rotationZ , which dictate rotation in degrees about x, y and z axes, respectively. Hence, the old rotation property corresponds now to the rotationZ property. This is all we need to know to flip a card. Card Flip Example This example is illustrated in the screen shot shown in (Figure 2). In the file CardFlip1.fla , the card back is not used, and clicking the card face flips it over in place by rotating it 180
�������
����������
Figure 1. 3D Coordinate System
03/2009 (5)
78
Made with FlippingBook HTML5