On this page, we show a couple of applets in which we animate and flip a playing card in 3D. Again, the code is very simple. All we use are rotationX and rotationY properties. We use these properties to do both: rotate the card and determine which side of the card should be displayed. That is, which of the two bitmaps should be displayed. One depicts the front and the other the back of the card.
Download
- A zip file t1player10.zip
The zip file linked above contains all the 'as' and 'jpg' files related to examples in this tutorial.
To open the appplets, click on the appropriate link below each picture. If you have Flash Player 10 Beta 1 (relased May 15), click on the first link. If you have Flash Player 10 Beta 2 (released July 2), click on the second link.
Flash Player 10 Beta 1 version of the applet. Flash Player 10 Beta 2 version of the applet.
In the second applet, we flip a card about the horizontal axis when the user clicks.
Flash Player 10 Beta 1 version of the applet. Flash Player 10 Beta 2 version of the applet.
Let's have a look at the portion of the code in the first applet. The animation happens in response to the ENTER_FRAME event. The listener, 'onEnter' is attached to the instance of the CardAnim class; that is, to the MainTimeline. 'bmFirst' represents the bitmap depicting the front of the card, bmSecond the back of the card. Note that the value of the variable 'curNormal' which determines which of the two images is visible is determined based on the current value of the 'rotationY' property. So it is both reading the property and writing into it that is instrumental. (We use 0.1 and -0.1 instead of 0 for a smoother animation effect.)
private function onEnter(e:Event):void {
var picRot:Number=card.rotationY;
var curNormal:Number;
card.rotationY=(picRot+4)%360;
curNormal=Math.cos(card.rotationY*Math.PI/180);
if(curNormal>0.1){
bmFirst.visible=true;
bmSecond.visible=false;
}
else if(curNormal<-0.1){
bmFirst.visible=false;
bmSecond.visible=true;
}
else {
bmFirst.visible=false;
bmSecond.visible=false;
}
}
Note: The values of the 'rotationY' property (as well as other two rotation properties), does not behave exactly as the documentation states. The values are not adjusted to fall between -180 and 180 degrees. Instead, the values of the property are allowed to incease unboundedly. If this behavior changes in the official release of Flash Player 10, the code above will have to be slightly changed.
On next page, we take a look at the xyz-coordinate system as Player 10 sees it, the fieldOfView angle, and the relationship between the value of the z coordinate and the depth of a Display Object.
