Sound and Animation
vecMidPts that describes the positions of the centers (a.k.a., the registration points, if you set up your faces correctly) of the faces initially. In addition to placement, we must decide how each face should be rotated in our cube. The left and right faces (2 and 5) must be rotated 90 degrees about the y- axis and the top and bottom faces (3 and 4) must be rotated 90 degrees about the x- axis. It seems that the front and back faces (1 and 6) need not be rotated at all, but we must not forget the lesson of the card face viewed from behind. We recognize that each die face might include oriented graphics (such as numbers or words) so we will be vigilant with our rotation values so they are still appropriate when you care about the orientation of the faces, see (Listing 8). In order to sort the faces, our sortFaces function will use the Matrix3D class. For each rotated state of the cube we retrieve its current transform.matrix3D property as curMatrix , apply this matrix to the original locations of the midpoints to calculate their current locations (using the deltaTransformVector method), and then sort the faces by the z-coordinates so we can replace them as children of spCube in order function boardDown(e:MouseEvent):void { prevX=spBoard.mouseX; prevY=spBoard.mouseY; isRotating= true ; } function boardUp(e:MouseEvent):void { isRotating= false ; } function boardOut(e:MouseEvent):void { isRotating= false ; } Listing 12. Handler for the MOUSE_MOVE event function boardMove(e:MouseEvent):void { var locX:Number=prevX; var locY:Number=prevY; if (isRotating){ Listing 11. Handlers for the easy mouse events
from furthest away to nearest, making them render correctly. To do the actual z-sorting, we will fill an array arrDist with generic Objects of the form {distance:value, which:value} , where the distance field is the z-coordinate of the side and the which field is the index of the side in the vecSides Vector object. When we subsequently invoke arrDist.sortOn("distance",…) , the arrDist elements will be sorted according to the values in the distance field and so arrDist[i].which will represent the original index of the side that is now in position i in the sorted list, see (Listing 9). The function setUpListeners is unremarkable, but we will comment on each of the event handlers below, see (Listing 10). We manage the rotation by setting the isRotating property to true when the mouse is pressed down on spBoard . This in turn makes the handler for the MOUSE_MOVE event actually start to do something. Changing isRotating back to false similarly stops the motion, see (Listing 11). When the mouse is moving with isRotating = true , we get a new value of prevX and prevY (the x and y coordinates of the mouse) and subtract from these
the old values saved as locX and locY . We use these differences (in pixels) as degree measures for angles to rotate the cube about the Y_AXIS and X_AXIS , respectively. This gives pretty good results for no good reason – multiplying prevY-locY and locX-PrevX by a scaling factor before the rotations can speed up or slow down the rotation speed, if desired. Each time these two small rotations are done, we must call the sortFaces function to destroy the cube and redraw it in case there has been a change in the z-sorting order, see (Listing 12). We note that this article is excerpted from Chapter 16 of the book, Flash and Math Applets: Learn by Example, by Doug Ensley and Barbara Kaskosz, available from www.flashandmath.com . The article has discussed the basics of the new methods available, but there is much more that can be done. In particular, we have not discussed how perspective is automatically being applied to the 3D objects. The book provides more detail on this feature. The book also addresses a different method for creating 3D graphics by literally redrawing the 3D object on the fly instead of piecing it together from prefabricated pieces as we have done in this article. We have also omitted from this discussion the drawTriangles method that is extremely useful for producing advanced texture and bitmap effects. There are free tutorials for using this method given at the flashandmath.com website in the section titled, Flash CS4 Tutorials and Effects . Other 3D methods for Flash Player 10
prevX=spBoard.mouseX; prevY=spBoard.mouseY; spCube.transform.matrix3D.appendRotation(prevY-locY,Vector3D.X_ AXIS); spCube.transform.matrix3D.appendRotation(locX-prevX,Vector3D.Y_ AXIS); sortFaces(); e.updateAfterEvent();
DOUG ENSLEY BARBARA KASKOSZ
Doug Ensley and Barbara Kaskosz are mathematics professors who launched the Flashandmath.com website to share tips and resources for applet development, especially as it relates to mathematics and science educational applications. Since its inception it has become a popular resource for many developers who want to learn how cool visual effects are accomplished.
}
}
03/2009 (5)
82
Made with FlippingBook HTML5