Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

« Return

ActionScript 3

Deck of Playing Cards

In this example I created a deck of playing cards (artwork for Jack, Queen, King, and Joker will be added later). I started by obtaining a free font that simulates the font used in most playing cards, and I obtained another free font that has the symbols of a club, a spade, a diamond and a heart. I created one main "card" movie clip that has one frame for each of the 54 cards in the deck. Since all cards use the same white rounded rectangle as a background, I have one instance of the background on a layer that is used in all frames. Each suit uses the same symbol (club, spade, diamond or heart) in each of two corners, so that is reused within each suit. But it took a lot of manual alignment of the clubs, spades, diamonds and hearts in the center of the card, so that things lined up and looked good. For one thing, the bounding box for the font I used was not symmetrical, such that flipping a heart upside down puts the upside down hearts out of alignment with the rightside up hearts. Probably better to have all artwork in place this way -- dynamically generated and formatted could well cause unexpected results.

This example is not yet a card game, but it has "next card" and "last card" buttons so that you can view each of the cards in the deck.

Download the FLA file

nextCard_btn.addEventListener(MouseEvent.CLICK, showNextCard);
lastCard_btn.addEventListener(MouseEvent.CLICK, showLastCard);

// For the currentLabel property to work correctly, it's not sufficient to have
// the first frame of card_mc labeled "firstcard" and
// the final frame of card_mc labeled "finalcard".

// You also need for the frame after "firstcard" to have a frame label, it 
// doesn't really matter what it's called -- I call this frame "neitherFirstNorLast".
// Giving this second frame a label ensures that for frames after the first frame,
// that the following test will be false:
//    if (card_mc.currentLabel == "firstcard")
// We want it to be true ONLY for frame one.

function showNextCard(myEvent:MouseEvent)
	if (card_mc.currentLabel == "finalcard")
	{ card_mc.gotoAndStop("firstcard"); }
	{ card_mc.nextFrame(); }

function showLastCard(myEvent:MouseEvent)
	if (card_mc.currentLabel == "firstcard")
	{ card_mc.gotoAndStop("finalcard"); }
	{ card_mc.prevFrame(); }

« Return

©2012 Kroll Design    781.910.3694
Last modified: 12/31/1969 7:00 PM