The Trick and Comments

We present a new, cute card trick and a much improved version of our custom PlayingCard AS3 class. The class tweens movements and flips of cards. The depth sorting works perfectly for every card regardless of its position. Click the screen shot below or this link to open the effect in a new window:


  • Download all source files corresponding to this effect:

How the Trick Works

In this trick, you will be presented with ten face-down cards. As in any good card trick, you will pick a card and you should try to remember it. In turn, the computer picks a second card and turns it face up in the packet.

Your challenge is to get the face-up card to the top of the packet using a particular way of mixing the cards: You deal two piles face down and then choose one to put on top of the other when they are restacked. If you are careful in how you choose which pile to place on top each time, you should be able to get the face-up card to the top of the stack after just a few deals.

The big suprise is where your original chosen card ends up.... every time!

Note: The card images used in this trick were created by Jesse Fuchs and Tom Hart from free SVG images created by David Bellot, and are themselves available for use under a Creative Commons License.

Commentary on the Custom Classes

The code begins with the following three lines that load the custom classes used in this application. We will comment below on some of the properties and methods of these classes.




The CardLoader Class

The constructor for a CardLoader object (say cardLdr) requires two arguments: the first is an array of URLs (strings) for the card faces and the second is a single URL (string) for the card backs. The class also has two custom events, one to signal a loading error and the other to signal the completion of loading. (We note that this new class uses our ImageLoader class, which has been used many times on this site and is included among the downloaded files.)

For example, in the code for this application the following lines of code create the cards from the image files:

cardLdr = new CardLoader(arrURLsToLoad,"cards-150/blueback1-150.png");

cardLdr.addEventListener(CardLoader.CARDS_LOADED, loadComplete);

cardLdr.addEventListener(CardLoader.LOAD_ERROR, loadError);

Here the functions loadComplete and loadError are the handlers for the custom class events. The one additional method in the CardLoader class that we use is getCardArray, which returns the array of PlayingCard objects that is created by the CardLoader.

The CardDeck Class

The CardDeck constructor requires a single argument, a Vector of PlayingCard objects. In addition to methods that allow one to add or remove cards from the deck, our CardDeck class includes the method moveCard which moves a card from one position in the deck to another. The most important feature of the CardDeck class is the automatic re-layering (by appropriately adjusting display indices) of PlayingCards after each change to the deck.

The PlayingCard Class

The constructor for the PlayingCard requires two arguments, both BitmapData objects, one for the face and one for the back. Each card has properties for value and suit, which can be used to keep track of the identity of the card if you wish, but these must be set independently of the PlayingCard constructor.

The two main methods are those that actually move the card. For example, let's suppose that we have created a PlayingCard object called pc. Then the following line of code moves this card from coordinates (sx, sy, sz) to coordinates (fx, fy, fz) over a period of s seconds.

pc.tweenMotion(sx, sy, sz, fx, fy, fz, s);

In addition, we can use handlers for the custom events, PlayingCard.MOTION_DONE (in order to respond to the completion of the motion) and PlayingCard.MOTION (in order to manage other changes while the motion tween is playing). The following line of code rotates PlayingCard object by d degrees from the initial position about the vertical (y) axis.

pc.rotateView(d, "vertical");

The next line of code rotates PlayingCard object by an increment a degrees about the vertical (y) axis.

pc.addRotation(a, "vertical");

Note that these methods simply rotate the card -- they do not animate the rotation of the card. In the given example, the rotation animation for all of the cards is managed by a single Timer object which uses the addRotation method. The methods depth-sort the faces of the card corresponding to the angle of rotation.

The depth-sorting, which is much changed in this version of the PlayingCard class, uses the dot product of the normal vector to the face of the card and the vector pointing to the observer. This vector and the position of the observer are dictated by the perspectiveProjection settings of root. Thus, your instance of the PlayingCard class must be added to the Display List before the methods are evoked.

That method of depth-sorting is used in our tutorials:

You will find other of our playing cards tutorials at:

Back to Flash CS4 Tutorials              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.