Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Create a Slot Machine Game in Flash Using AS3

by
Difficulty:IntermediateLength:MediumLanguages:

Follow the straight-forward steps of this Premium Tutorial to create an entertaining Slot Machine game in Flash. Spin the wheels and see what you could win!


Step 1: Brief Overview

Using the Flash drawing tools we'll create a good looking graphic interface that will be powered by several ActionScript 3 classes.

The user will be able to bet different amounts to win the prizes.


Step 2: Flash Document Settings

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



Step 3: Interface


A dark interface will be displayed; this involves multiple shapes, buttons, bitmaps and more.

Continue to the next steps to learn how to create this GUI.


Step 4: Background

Create a 480x320 px rectangle and fill it with this radial gradient: #404040, #080808.


Use the Align Panel (Cmd + K) to center it in the stage.


Step 5: Title

Let's add a title to our game; depending on your Slot Machine theme you can change the graphics to fit your needs. Here I've used the Tuts+ logo.



Step 6: Slots Background

Use the Rectangle Primitive Tool (R) to create a 320x160px rectangle. Change its corner radius to 10 and fill it with this linear gradient: #F5DA95, #967226, #91723B.


Duplicate the shape, change its size to 316x156px and change its color to the black linear gradient we used before.



Step 7: Items Graphics

These are the graphics we'll use as the slot machine items -- feel free to use any graphics you want in your own game!



Step 8: Reel Backgrounds

To create the background for the reels, use the Rectangle Tool (R) to create a 98x146px rectangle and fill it with this gradient: #8F8459, #F8F4C7, #8F8459.


Duplicate the shapes and align them in the slots area.


Step 9: Reel MovieClip

Arrange the items graphics in your desired order and convert them to movie clips. We'll use the reel background rectangle of the last step to create the shadow effect: change its color to black and change its alpha values to 65, 15, 0.

This can be a tricky part so be sure to download the source files to help you out.


As you can see, I've used two Nettuts+ logos and two Psdtuts+ logos, but only one each of the Activetuts+ and Vectortuts+ logos. This means there's a greater possibility of matching three Nettuts+ logos than there is of matching three Activetuts+ logos.

Use the shadow as a Mask Layer, and the Timeline to animate the items downwards. I used frame by frame animation moving the items 20 px down in every frame. You could use a tween, if you wanted to.


Duplicate this MoveClip and place them in the correct slot background. Use the following instance names: items1, items2, items3.


Step 10: Labels

Timeline labels will be used to check for a winning combination. Create a new Layer and label each frame where our item is in the center.



Step 11: Static TextFields

Use the Text Tool (T) to create three static textfields: Credits, Bet and Winner Paid.



Step 12: Dynamic TextFields

With the Text Tool still selected, create three dynamic textfields, place them above the static ones and name them, from left to right: creditsT, betT and paidT.



Step 13: Buttons

Use the Rectangle Primitive Tool to create three 45x45px squares, change the corner radius to 4 and fill it with: #CD0202, #910202. Add the corresponding text label to each, convert each to a button, and name them: payTabB, betMaxB and betOneB.



Step 14: Spin Button

The Spin button is a little larger that the others and also has another color.

Use the same process of the other buttons, but change the size to 50x50px and the color to: #5DA012, 3C670C.


Name the button spinB.


Step 15: Sounds


We'll use Sound Effects to enhance the feeling of the game, you can find the sounds used in this example in Soungle.com using the keywords slot machine.


Step 16: TweenNano


We'll use a different tween engine from the default included in Flash, this will increase performace as well as it is easier to use.

You can download TweenNano from its official website.


Step 17: New ActionScript Class

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



Step 18: Class Structure

Create your basic class structure to begin writing your code.


Step 19: 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.


Step 20: Variables

These are the variables we'll use, read the comments in the code to know more about them.


Step 21: Constructor Code

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 then SWF first loads if it belongs to the document class.

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


Step 22: Stop Items

Prevent the reels MovieClips from playing immediately.


Step 23: Add Button Listeners

Here we use a custom function to add the Mouse Events to our buttons; this function will be created later in the class.


Step 24: Disable Spin Button

Next we use another custom function that will prevent the Mouse Events of the Spin button.


Step 25: Button Listeners

This function adds or removes a MouseUp Event to the buttons depending on the specified parameter.


Step 26: Enable/Disable Buttons

The following function uses its parameters to tween the alpha value of the specified button and disable/enable mouse interactions.


Step 27: Bet Max Button

The Bet Max button is handled by this function.

It plays the spin sound, changes the credits textfields,, and calls the spin function.


Step 28: Bet One Button

The Bet One button is handled by this function.

It increases the bet by one (if possible) and plays the corresponding button sound. It also enables the Spin button.


Step 29: Show/Hide Pay Table

The Pay Table button is handled by this function.

It checks whether the pay table is already on stage, and, if not, it uses a Tween to display it and center it. The other buttons are disabled while the table is showing.


Step 30: Spin Button

The Spin button is handled by this function.

It plays the spin sound and the Spin function if the credits are correct.


Step 31: Spin Function

One of the core functions of the game, the spin function handles the winning and spending of credits, spins the items in the slots and uses a timer to stop them. Read the next steps for a more detailed view of these actions.


Step 32: Add Won Credits

This checks whether credits are available to add from the paidT textfield, and resets its value to 0.


Step 33: Subtract Credits

This subtracts the credits used in the last bet.


Step 34: Spin Items

This function animates the reels, to make the items appear to spin.


Step 35: Spin Timer

This timer determines (randomly) the time to let the reel items spin, it is different in every spin.


Step 36: Timer Function

This function is executed every time the timer ends its count.

It stops the current slot from spinning and plays the stop sound. When all items are stopped it clears the timer and calls the checkWin() function.


Step 37: Snap To Nearest Logo

As the timer can end in a frame where the current item is not in the center, we check the current frame of the MovieClip and use gotoAndStop() to display the closest item.

You may need to alter this code to match the symbols and spin animation that you chose.


Step 38: Check Win

This function checks if the three items are equal, if true, it plays the winning sound and adds the corresponding amount to the paid textfield.


Step 39: Set Main Class


We're making use of the Document Class in this tutorial, if you don't know how to use it or are a bit confused please read this QuickTip.

Set your FLA's document class to Main.


Step 40: Test

We are now ready to test the movie and see if everything works as expected, don't forget to try all the buttons!



Conclusion

The final result is a customizable and entertaining game; try adding your custom graphics and prizes! You could also have a go at altering the probability to make it easier or harder to win.

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.