3D Methods of Display Objects in Flash Player 10
Testing the code at this point will give produce a card (the two of spades) that when clicked upon rotates 180 degrees about the y axis. You will note that when this happens, we simply see the card from the other side. This is clearly undesirable for playing cards – when we flip a card, we expect to see its back! The second version of this application, provided in the file CardFlip2.fla in the download folder, accomplishes this. To create this behavior yourself, we have to make two additions to the code for the previous example. First, the code below should follow line 9 in the previous example:
the card flip look more realistic. Specifically, rather than just have the card spin on its y- axis, we can lift it up and over as we turn it by moving the center of the card in the direction of the x and z axis while it is rotating. To accomplish this, just add the following lines after line 19 in the definition of the onTimer function. In this block of code, the absSin variable uses some mathematics to oscillate
from 0 to 1 and back to 0 over the 180 degree change in card.rotationY . Hence, the card will go from its original position to 60 pixels to the right and then back again, and similarly the card will rise to 10 pixels closer to the viewer before returning to its original position. The reader is encouraged to adjust the 60 and -10 values to see the changes in motion.
Listing 1. Setting up the card Sprite and first side MovieClip
1. var cardPos:Point = new Point(225, 160); 2. var card:Sprite = new Sprite(); 3. addChild(card);
card.addChild(mcSecond); mcSecond.x=0; mcSecond.y=0; mcSecond.rotationY = 180; mcSecond.visible=false;
4. card.x=cardPos.x; 5. card.y=cardPos.y; 6. card.z = 0;
7. card.addChild(mcFirst); 8. mcFirst.x=0; 9. mcFirst.y=0; Listing 2. Setting up the Timer and the mouse click to start it 10. var tm:Timer = new Timer(40, 10); 11. tm.addEventListener(TimerEvent.TIMER,onTimer); 12. tm.addEventListener(TimerEvent.TIMER_COMPLETE,doneTimer);
The fourth line in the previous block is relevant to the issue we saw when we viewed the card face from behind . Comment this line out to see the effect. Second, we must add the following code to the definition of the onTimer function, following line 19 of the previous example, see (Listing 4) This latter block of code begins to address a critical issue for 3D drawing in Flash. (To get a sense for what is accomplishes, you may try testing the code with this block commented out). Remember that the order of objects added to the display list dictates which object appears on top of which. However, this is not checked for consistency with the placement of the objects in 3D. In other words, if object A is added to the display list after object B, then object A will appear in front of object B regardless of their relative z coordinates! For this reason, our program must keep track of the depth order relative to the coordinate system and make sure that we are displaying things correctly. For the card-flipping example, we do this by making only one face visible at any given time. We will do this differently in our other example, where the issue is slightly more complicated. The final addition to our card flipping example is some simple mathematics to make
13. card.addEventListener(MouseEvent.CLICK, doFlip);
14. function doFlip(mevt:MouseEvent):void { 15. card.removeEventListener(MouseEvent.CLICK, doFlip); 16. tm.start(); 17. }
Listing 3. Handlers for the TIMER and TIMER_COMPLETE events
18. function onTimer(e:Event):void { 19. card.rotationY = (Math.round(card.rotationY + 180/tm.repeatCount)) % 360; 20. }
21. function doneTimer(e:Event):void { 22. card.addEventListener(MouseEvent.CLICK, doFlip); 23. tm.reset(); 24. } Listing 4. Code to insert to ensure the „top” face is visible
… if ((card.rotationY > 90) && ( card.rotationY < 270)) {
mcFirst.visible= false ; mcSecond.visible= true ;
} else {
mcFirst.visible= true ; mcSecond.visible= false ;
} …
Figure 2. Card Flip Example
03/2009 (5)
79
Made with FlippingBook HTML5