First time here? First time here? Newsletter Signup Newsletter
Search tutorials

Step 3: Ready to animate

Now that we can make our cards do what we want, it's time to make the necessary movieclips and animations that will make the game eyecandy.

First make a movieclip that will be called "cardFront". This will consist of all the pictures that will be the card's fronts. Also, we'll need a mc/graphic called "cardBack" which will be the backs of the cards that we will see.

Card Front:
I suggest you resize all the images you will be using to the card height and width. Then have them numbered and placed in a special directory. This makes importation very simple. Now create the appropriate movieclip and import all the images of that directory. Each image will import to it's own frame. The number of frames you have should be your picCount variable.
Here is what mine looked like:

The Playing Card:
The actual playing card we will use, will actually be able to go to and play several phases. What we will do, so that we can level our code to work for us on a modular level, is that we'll create a movieclip called "card", and we'll do all the animation in there. We'll then stuff the card movieclip inside of the playingCard movieclip, so that we have an outer shell layer to drop our code in.

The "card" mc should have several animations. You should animate the card back flipping over, and then the card front flipping open, as if the card has been turned over. You can also animate the card flipping back over, and animate how you'd like the card to go away when the person gets a match. Here's how mine looks.

Click To Enlarge

As you might notice, I have 3 layers. One for actions and frame titles, one for the card back and one for the card front. Here's a further analysis of how I have partitioned this mc.

Frame 1: has the action"stop()" and the Framename "cardTurn". The stop is there to make the cards only flip when they're told to do so.
Frame 2-29: Animatinon of the card flipping over to show the card front. As of frame 2, I have the action

  // increase number of cards in play

This is to tell the root that this card is animating. We have to do so because we only allow someone to turn 2 cards at a time. We have to keep track of how many cards are in play right? Otherwise we'll be able to turn over several cards at once.

Frame 30: Simply named the frame "holdDown" for holding the card in that position.
Frame 31-50: At frame 31 I have the code placed to check if there is a match. Basically, there are two possibilities. Either this is the first card turned over, or the second. If it's the first, then hold the card down, if the second card is in play then do the check. Here is the code.

// if one card is in play then hold
// if 2 are in play then check for correctness
if (_root.cardsInPlay == 1) {
} else if (_root.cardsInPlay == 2) {
	// check for correctness race condition here
	if (_root.card2Match == cardFace._currentframe) {
	} else {
		_root.card2Match = "";

Here, _root.card2Match is the card that we are looking to match with. When they are the same, we have got what we want.
The reason this is a race condition, as stated above in the comments, is because when a card is turned over, it will always match itself, so it's important for this card to do all it's figuring out before the other card catches up. We're safe with this race condition, because the code is evaluated on a frame by frame basis. This coding paradigm shouldn't leave Actionscript, and is not a corner that normal programs can cut.

Frame 50-77: We animate the card flipping back over.
Frame 78: We finish the flip and now go to the beginning, we also have the code to remove this card from play.

// remove this card from being in play.
// return to the beginning.

Frame 79-110: On frame 79 we name it "correctMatch" so when a match is made, it will go there. We do whatever ending animation we want. I simply spin the card off.
On frame 110, the card is removed and we have the code in the action layer

// remove this card from being in play.
// one less number of total cards

// check if game is over
if (_root.totalCardsNum == 0) {
} else {

This code removes the card from being in play, remember we need to do that since we would have jumped here. And also we check if the game is done. If so we jump to the ending, otherwise stay where we are with the card missing. The root movieclip will continue on, the stop will only affect the movieclip it is containing, and thus only affecting this card.

This code also requires that we initialize the totalCardsNum variable, with the total number of cards we'll have.

WHEW! Seemed like a lot didn't it? But it's all common sense and simple. You have to teach a computer to do everything you want it to do, that's just game programming. GIGO.

» Level Intermediate

Added: 2005-04-06
Rating: 4.43 Votes: 44
» Author
I'm the admin for BEF
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.