Advertisement

Create a Three Shell Game in Flash

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

In this tutorial, you'll learn how to design and code a Flash version of the classic street-side shell game. The main difference is, ours won't cheat!


Step 1: Brief Overview

In this tutorial we'll use a series of ActionScript classes to create a classic three shell game. The objective of the game is to follow the shell that has the hidden ball inside it, and then click it after they have been shuffled. You will be able to configure the speed and movements performed by the shells.


Step 2: Flash Document Settings

Open Flash and create a 480 pixels wide, 320 pixels tall document. Set the Frame rate to 24fps.


Step 3: Interface

A simple brown and gold interface will be used, featuring several shapes, buttons and MovieClips; continue to the next steps to build this GUI.


Step 4: Background

This background was created in Photoshop using a simple Radial Gradient from #3F2C1D to #2E180D and applying a Water Paper filter followed by a Sprayed Strokes filter. If you don't have Photoshop, you can right-click the above image and download it.


Step 5: Title


To create the Title, select the Text Tool (T) and change the color to #EAAA0C, write your title text and apply the Gold effect of my Exclusive Text FX Freebie.


Step 6: Buttons

Use again the Text Tool to create two buttons as shown in the image above. Convert them to buttons and give them descriptive instance names to easily use them later in the code. Convert the graphics in stage to a single MovieClip and name it TitleView, remember to check the Export for ActionScript box.


Step 7: Game Screen


This is the Game Screen, simple shapes are used for the Shells and Ball MovieClips, and Dynamic TextFields for the text elements. You can see the instance names in the image above.


Step 8: Credits Screen


The Credits screen will appear in front of the Title Screen, use the graphics and fonts used before to create it. Name it CreditsView and remember to check the Export for ActionScript box.


Step 9: Alert


An alert will be shown when all the bank credits are gone, it will display the game over message and instructions. Use the Rectangle Tool to create it and set its instance name to AlertView, mark the Export for ActionScript box.


Step 10: TweenMax

We'll use a different tween engine from the default included in Flash, this time it will be TweenMax as we'll need Bezier curves to perform the shells' movement animations.

You can download TweenMax from its official website.


Step 11: Set Document Class


We'll make our application interactive by using an external class called Main; add its name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.


Step 12: Create a New ActionScript Class


Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.


Step 13: Class Structure

Create your basic class structure to begin writing your code.

 
package  
{ 
	import flash.display.Sprite; 
	 
	public class Main extends Sprite 
	{ 
		public function Main():void 
		{ 
			// constructor code 
		} 
	} 
}

Step 14: Required Classes

These are the classes we'll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

 
import flash.display.Sprite; 
import flash.events.MouseEvent; 
import com.greensock.*; 
import com.greensock.easing.Strong; 
import flash.net.navigateToURL; 
import flash.net.URLRequest;

Step 15: Variables

These are the variables we'll use - all pretty self-explanatory:

 
private var titleView:TitleView = new TitleView(); 
private var credits:CreditsView; 
private var shells:Vector.<Sprite> = new Vector.<Sprite>(); 
private var moveSpeed:int = 1; 
private var totalMoves:int = 5;

Step 16: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object, or runs when the SWF is loaded, if belonging to the Document Class.

It calls the necessary functions to start the game. Check those functions in the next steps.

 
public final function Main():void 
{ 
	//Code 
}

Step 17: Add Title View

We start by adding the TitleView from the Library to the stage.

 
addChild(titleView);

Step 18: Add Shells Sprites to Vector

The shells in the stage are then added to the shells vector to use them later in the code.

 
shells.push(s1, s2, s3); 
startButtonListeners(); //call next function

Step 19: Start Buttons Listeners

This will add the mouse listeners to the buttons in the title view, which in turn will take us to the game or credits screen.

 
private final function startButtonListeners(action:String = 'add'):void 
{ 
	if(action == 'add') 
	{ 
		titleView.creditsBtn.addEventListener(MouseEvent.MOUSE_UP, showCredits); 
		titleView.playBtn.addEventListener(MouseEvent.MOUSE_UP, showGameView); 
	} 
	else 
	{ 
		titleView.creditsBtn.removeEventListener(MouseEvent.MOUSE_UP, showCredits); 
		titleView.playBtn.removeEventListener(MouseEvent.MOUSE_UP, showGameView); 
	} 
}

Step 20: Show Credits

The Credits screen is shown when the user clicks the credits button; a mouse listener is added to the full MovieClip to remove it.

 
private final function showCredits(e:MouseEvent):void 
{ 
	titleView.creditsBtn.visible = false; 
	titleView.playBtn.visible = false; 
	credits = new CreditsView(); 
	addChild(credits); 
	TweenNano.from(credits, 0.3, {x:-credits.width, onComplete:function():void{credits.addEventListener(MouseEvent.MOUSE_UP, hideCredits);}}); 
}

Step 21: Hide Credits

When the Credits screen is clicked it will be tweened back and removed from the stage.

 
private final function hideCredits(e:MouseEvent):void 
{ 
	TweenNano.to(credits, 0.3, {x:-credits.width, onComplete:function():void{titleView.creditsBtn.visible = true; titleView.playBtn.visible = true; credits.removeEventListener(MouseEvent.MOUSE_UP, hideCredits); removeChild(credits); credits = null;}}); 
}

Step 22: Show Game View

The following lines remove the Title screen and leave the Game Screen visible. It also adds an event listener to activate the button on the stage.

 
private final function showGameView(e:MouseEvent):void 
{ 
	TweenNano.to(titleView, 0.3, {y:-titleView.height, onComplete:function():void{startButtonListeners('rmv');removeChild(titleView); titleView = null;}}); 
	betBtn.addEventListener(MouseEvent.MOUSE_UP, placeBet); 
}

Let's stop here to make a quick test and make sure that our main interface code is working:

Keep in mind that some lines have been commented as some functions haven't been created yet.

Remember that the Milestones are included in the source files, so if for some reason your file doesn't mimic this one take a look at the source to figure out the reason.


Step 23: Place Bet

This function runs when the BetBtn is pressed. The part we are adding in this step subtracts a credit from the bank and removes the listener from the button to avoid pressing it while the shells are moving.

 
private final function placeBet(e:MouseEvent):void 
{ 
	/* Place Bet */ 
	 
	bankTF.text = String(int(bankTF.text) - 1); 
     
    /* Remove Bet button listener */ 
	 
	betBtn.removeEventListener(MouseEvent.MOUSE_UP, placeBet)

Step 24: Change Message

The message at the bottom will change depending on the current game state, and the following line changes that message.

 
/* Change Msg */ 
 
msgTF.text = "";

Step 25: Reset Total Movements

The shells' movements are calculated by this variable; resetting its value will make the shells make the correct moves every time.

 
/* Reset Total Moves */ 
 
totalMoves = 5;

Step 26: Hide Ball

The next line of code performs the tween that hides the ball using the shell. The function that moves the shells is called when the animation is complete.

 
/* Hide Ball */ 
 
TweenNano.to(s2, 1, {y:s2.y + 30, ease:Strong.easeInOut, onComplete:randomShellMove});

Step 27: Calculate Random Shell

This code uses a simple math function to generate a number that will be used in the Vector to select two random shells every movement.

 
private final function randomShellMove():void 
{ 
	var randm:int = Math.floor(Math.random() * 2) + 1; 
	var shell1:Sprite = shells[randm]; 
	var shell2:Sprite = shells[randm -1];

Step 28: Hide Ball

There's really no need to animate the ball with the shell so we hide it. This function will be executed the times that the totalMoves variable indicates; we decrease that value every time until it reaches 0.

 
ball.visible = false; 
	 
totalMoves--;

Step 29: Tween Shells

These lines of code are very important as they perform the curved path animation of the shells. They use the bezier plugin of the TweenMax library to calculate where the curve point will be.

The value is generated by calculating the middle X point between the two shells selected to shuffle; the Y value was introduced manually by testing the shells in the stage. There can't be an easy way to perform a curved tween!

 
	TweenMax.to(shell1, moveSpeed, {bezier:[{x:(shell1.x + shell2.x) * 0.5, y:56}, {x:shell2.x, y:shell2.y}]}); 
	TweenMax.to(shell2, moveSpeed, {bezier:[{x:(shell1.x + shell2.x) * 0.5, y:210}, {x:shell1.x, y:shell1.y}], onComplete: checkMovesLeft}); 
}

Step 30: Check Moves Left

When the animation is complete, we check the moves left in our variable to determine if another shell movement should be made.

 
private final function checkMovesLeft():void 
{ 
	if(totalMoves > 0) 
	{ 
		randomShellMove(); 
	}

Step 31: Add Shell Mouse Listeners

If the shuffle part is complete its time to add mouse interactivity to the shells and change the message instructions.

 
else 
	{ 
		s1.addEventListener(MouseEvent.MOUSE_UP, revealBall); 
		s2.addEventListener(MouseEvent.MOUSE_UP, revealBall); 
		s3.addEventListener(MouseEvent.MOUSE_UP, revealBall); 
		 
		/* Change Msg */ 
	 
		msgTF.text = "click where the ball is."; 
	} 
}

Let's stop here to make a quick test and make sure that our game code is working:

Keep in mind again that some lines have been commented as some functions haven't been created yet.


Step 32: Remove Shell Listeners

Any shell the player clicks will run this function. This part will remove the shell mouse listeners to avoid unwanted behavior.

 
private final function revealBall(e:MouseEvent):void 
{ 
	/* Remove shell mouse listeners */ 
	 
	s1.removeEventListener(MouseEvent.MOUSE_UP, revealBall); 
	s2.removeEventListener(MouseEvent.MOUSE_UP, revealBall); 
	s3.removeEventListener(MouseEvent.MOUSE_UP, revealBall);

Step 33: Move Ball to Correct Position

Next we move the ball to the correct shell position and make it 'visible' (though we won't see it, because it is behind the shell).

 
/* Move ball to correct position */ 
 
ball.x = s2.x; 
ball.y = s2.y + 10; 
ball.visible = true;

Step 34: Give Credits and Reveal Ball

Here we test if the correct shell was clicked and add the credits to the bank. The message is also changed according to the shell clicked and finally an animation is made to reveal where the ball is.

 
/* Give credits if correct guess */ 
 
if(e.target.name == 's2') 
{ 
	bankTF.text = String(int(bankTF.text) + 2); 
	 
	/* Change Msg */ 
 
	msgTF.text = "correct! Click bet to play again."; 
} 
else 
{ 
	/* Change Msg */ 
 
	msgTF.text = "wrong! Click bet to play again."; 
} 
 
/* Reveal Ball */ 
 
TweenNano.to(s2, moveSpeed, {y:s2.y - 30, ease:Strong.easeInOut}); 
 
/* Add Bet button listener */ 
	 
betBtn.addEventListener(MouseEvent.MOUSE_UP, placeBet);

Step 35: Check for Enough Credits

After that we check whether any bank credits are left and call an alert if not.

 
	/* Check for Bank credits */ 
 
	if(int(bankTF.text) == 0) 
	{ 
		betBtn.removeEventListener(MouseEvent.MOUSE_UP, placeBet); 
		 
		alert(); 
	} 
}

Step 36: Alert

This function will stop the game and show the game over message; it also adds a mouse listener to reset the game when clicked.

 
private final function alert():void 
{ 
	var alert:AlertView = new AlertView(); 
	 
	alert.x = stage.stageWidth * 0.5; 
	alert.y = stage.stageHeight * 0.5; 
	alert.addEventListener(MouseEvent.MOUSE_UP, restart); 
	 
	addChild(alert); 
	TweenNano.from(alert, 0.6, {scaleX: 0.2, scaleY: 0.2, ease:Strong.easeOut}); 
	 
	/* Change Msg */ 
	 
	msgTF.text = ""; 
}

Step 37: Restart Function

The next function will reload the SWF, restarting all variables and returning to the first screen.

 
private final function restart(e:MouseEvent):void 
{ 
	navigateToURL(new URLRequest(stage.loaderInfo.url), '_level0'); 
}

Step 38: Test Game

We are now ready to test our game and see whether everything works as expected.


Step 39: Change Movements

You can change the number of shuffle movements that are performed by the shells by simply changing two lines in the code:

 
private var totalMoves:int = 5; //Line 16 
 
totalMoves = 5; //Line 76

Change the number value on each line and the game will be automatically make the amount of shuffle movements specified!


Step 40: Change Speed

You can also change the shuffle speed!

To do it, change the following line:

 
private var moveSpeed:int = 1; //Line 15

This is the seconds that takes the first shell to replace the second one so the minimum value should be 0.1 (although that would be invisible!).


Conclusion

Use these last values to customize your game and have fun with it.

I hope you liked this tutorial, thank you for reading!

Advertisement