The Playing Card Effect

The simple applet shown below requires a few interesting techniques. Observe that it is in essence a 3D applet: the card is distorted for perspective as it flips. Fortunately, the 3D part is very simple bacuase all we do is rotate about the vertical axis. Distorting the images to accomplish the perspective effect is a more interesting part. It requires some not obvious bitmap manipulation tricks.

Download

The fla file contains very detailed and simple instructions on how to replace the images by your own, of a different size, and customize the applet.

We imported to the Library two 166 by 240 images and linked them to AS3 via the Linkage item in the Library menu. The code follows the 3D object rotation methods that we developed in 'Simple 3D Drawing in Flash CS3'. However, with the simple rotation about the z axis as our only rotation, the formulas simplify so much that we managed to use the final projection formulas and skip the whole 3D engine part. (We explain on the next two pages the math behind the formulas.) In order to achive the perspective effect, we had to slice both images into thin vertical slices. We used for that bitmap.bitmapData.copyPixels method. On the next two pages, we explain why slicing the images was necessary.

The method of distorting bitmaps for perspective that we use in this tutorial is suitable for vertical filps and can easily be adapted to horizontal flips. When a bitmap rotates in 3D both vertically and horizontally a different method - triangulation of an image instead of slicing - can be used. See our tutorial: 'Cube in Bloom: Distorting Images in ActionScript 3' to see the latter method in action.

Back to Advanced and Experimental              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.