Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Create an Awesome Hangman Game in Flash Using ActionScript 3.0

by
Difficulty:IntermediateLength:LongLanguages:

Developing a game is must-have skill if you are a Flash Developer, it makes use of many different ActionScript methods and properties, plus you will have plenty of fun in the process! In this tutorial, I will show you how to create an advanced Hangman game using ActionScript 3.0. Let's play!


Step 1: Brief Overview

During this Premium tutorial I'll demonstrate the game development process from the Graphical User Interface design using Flash Tools and a little bit Photoshop, to the code part using the power of ActionScript 3.


Step 2: Graphical User Interface

These are the elements of the graphical user interface we will create:



Step 3: Logo

Create a new Flash File and set its dimensions to 320x480 px.


Select the Text Tool (T), and choose a cartoon style font, I used GoodDog 86 pt.


Write "Hangman+" and break apart (Cmd+B) the text to add a gradient color.


Select the graphics and open the Color Panel, choose Linear Gradient and use these colors: #FBA31E, #FECB56.


Use the Gradient Transform Tool to rotate the gradient and get a color as shown in the image.


Repeat this process in the "+" using these colors: #831000, #A91101.


Convert the whole lot to a MovieClip and add a Drop Shadow Filter with the following values:


You will end up with something like this:



Step 4: Background

Let's create the Background.

Open Photoshop and create a new file (320x480).


Select the Gradient Tool (T) and add a brown (#4E4236, #382F26) radial background starting from the center to one of the edges.


Now it's time to add a Noise filter to get a textured background.

From the menu go to Filter > Noise > Add Noise and use these values:


Save your image as png-24 using the "Save for Web & Devices" option in the File menu.

Your background should look like this:



Step 5: Main Screen Buttons

Go back to Flash, import (Cmd+R) your background and center it.

Use the Arrange > Send to back option from the contextual menu (right click) to send the background to the bottom and show your previously created logo.


Select the Rectangle Primitive Tool and create a 200x50 px rectangle with the same yellow gradient as before (#FBA31E, #FECB56).


Go to Rectangle Options in the Properties Panel and set the corner radius to 8.00.


Convert the drawing to MovieClip and add the following filter:


Select the Text Tool, create a new Static Text and write "New Game". I used this format: Myriad Pro Semibold, 24 pt, #831000.


To create a letter press effect, duplicate (Cmd+D) the textfield and move it a pixel down, Change the text color to #FDDA8A.


Convert it to MovieClip and center it in the stage. Set its instance name to "newGame".

Repeat this process with two more buttons; Options and About. Remember to change the instance names.


Convert what you have so far to a MovieClip, name it "menuScreen" and place it temporarily away from the stage.


Step 6: Game Graphics

This is the interface of the actual game, where you interact with the keyboard to guess the hidden word.


As you can see we use the same background, so duplicate it and center it in the stage.


Step 7: NoteBook

Select the Rectangle Primitive Tool, change the corner radius to 10 and draw a 260x250 px rectangle. Add a radial background (#FBEE84, #FDF9B2).


To make the lines, l use the Rectangle Tool and draw a 260x1 px rectangle with a color of #C6C970.


Duplicate the line (Cmd+D) and place it 10 pixels down, repeat this until you get something like the following image:


For the side lines, create a 1x250 px, #99832E rectangle and and place it 20 pixels from the edge, duplicate it and place the new one 2 pixels from the original.


Convert this to MovieClip, duplicate it, send it to back and place it 5 px lower. Use the same button filter.


Now we'll give the notebook a title; this text will change according to the category selected in the Options.

Select the Text Tool, create a 236x25 px Dynamic TextField and write some text as a guide. The format is Marker Felt 18 pt, #663622.

Use the letterpres technique we used before to add some detail. The instance names are "categoryText", and "categoryLP" for the letterpress field.



Step 8: Hangman

To draw the hangman we'll cheat a little, since Flash doesn't have brushes or anything similar we'll use a Font to draw crayon style.

I used characters from the font LeviCrayola to draw this:


Convert each part to a MovieClip and set their instance names like this: head, body, leftArm, rightArm, leftLeg, rightLeg.

Place the Hangman parts in the center of the notebook and continue to the next step.


Step 9: Keyboard

The user input will be handled by a keyboard in the stage that will compart the key pressed to the hidden screen.

Select the Rectangle Primitive Tool and draw a 26x38 px rectangle with the previously yellow background, add a corner radius of 5.


Convert it to MovieClip and add the button filter.

Add the corresponding letter and use the letterpress technique to create a better looking button. Format is Myriad Pro Semibold, 23 pt, Black.


Convert the 2 elements to a MovieClip and name it as the Letter it represents in UpperCase.

Repeat this step with all the letters, remember to set the correct instance name.

We will also create a MovieClip that will appear on top of the key when its pressed using the same rectangle created for the key

Copy and paste the rectangle and change it color to white, alpha 30%, mark the "Export for ActionScript" box and name it "Inactive".


A sound will also be played when a key is pressed.

You can find all types of sounds including buttons at AudioJungle, when you find a sound you like, import it (Cmd+R) and in the Library Panel, right click it and select "properties", mark the "Export for ActionScript" box and write ButtonSound as the class.



Step 10: Back Key

The back key will clear the game data and take the user to the Menu Screen.

Create a key using the same steps as the keyboard, convert it to MovieClip and name it "back".



Step 11: Options

The Options View is shown when the user clicks in the Options button in the MenuScreen. It displays information some options for the game.

It should be easier to create this view since we already have all the graphics and backgrounds.


The Category option, as the name says, describes the type of words that will be displayed when playing. You can use unlimited number of categories, we'll see that later in the code.

The Victory option is the number of words that you need to correctly guess to declare the game as won.

The Lives option is the number of wrong answers you can make before you lose the game.


Step 12: TextFields

This view has a 6 TextFields, the left ones are Static and formatted in the following way: Marker Felt Thin, 19 pt, #673723.


The right ones are Dynamic and fomatted like this: Helvetica Regular, 15 pt, #673723. (add instances in image)



Step 13: Back Button

The back button will take the user to the Menu Screen.

Create a Static TextField with the same format as the ones above, and change the size to 16 pt.

Convert it to Button, name it "back".



Step 14: More Button

The More button will change the values of the options.

Create a white 16x16 px circle using the Oval Tool (O).


Create another circle, this time 12x12, #673723 and center it.


Create a 2px wide 5px tall rectangle and duplicate it, rotate the -45 degrees and break it apart (Cmd+B) to make them intersect, remove the unwated area to make an arrow, and center it.


Convert it to MovieClip and add the following filter:


Duplicate and place the buttons as shown in Step 11 and name them: "catButton", "vicButton" and "livesButton".

Convert all to a MovieClip, mark the "Export for ActionScript" checkbox and name it "OptionsView". You can delete the symbol from the stage now.


Step 15: About

The About view shows information about the creator, company and version of the application.


Scale the Hangman logo to 121x30.6 px and center it.

Create and center a Static TextField with this format: Helvetica Neue Regular, 15 pt, #EFEFEF, and add the text shown in the image.

Convert it all to a MovieClip, mark the "Export for ActionScript" checkbox and name it "AboutView". You can delete the symbol from the stage now.


Step 16: Alert

We're going to display a message when you win or lose, for that we will use this Alert view.


Create a 320x240 px rectangle and use this radial gradient: #000000 alpha 0, #000000 alpha 50.


Next, create a 260x100 px white rectangle with 20 px corner radius and place it in the middle of the black background.


Duplicate the rectangle and make it 256x96 px, #FCB73A alpha 90.


Create a 240x23 px Dynamic TextField and name it "title". Press the "Align Center" Button in the Paragraph panel and use the letterpress technique, this time moving the duplicated textfield up. The format is Helvetica Bold 19 pt, white.


Use another Dynamic TextField with this format: Helvetica Regular 15 pt, white. Place it in the center and use the Align Center option.

Name it "content" and add some text to the fields as a guide.


Convert all to a MovieClip, mark the "Export for ActionScript" checkbox and name it "AlertView".


Step 17: Setting the Interface

Place the MenuScreen in the stage again and center it. It should be on top of the game graphics.



Step 18: ActionScript Time!

It's time for ActionScript. Create a new ActionScript File and save it as Main.as in the classes folder.



Step 19: Package

The package keyword allows you to organize your code into groups that can be imported by other scripts. It's recommended to name them starting with a lowercase letter and use intercaps for subsequent words, for example: myClasses.

If you don't want to group your files in a package or you have only one class you can use it right from your source folder, but the idea is to be organized.


Step 20: Import Necesary Classes

These are the required classes. For a more detailed description about every class, please refer to the Flash Help (F1).


Step 21: Declaring and Extending the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

In this example, the HangmanPlus class inherits all the methods and properties of the Sprite Class.


Step 22: Variables

There are a lot of variables in this game, this is because a lot of things can vary. You'll find everything explained in the comments.


Step 23: 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 using the Document Class.


Step 24: Start Function

This function is executed when the user clicks the New Game button.


Step 25: Restart Function

This function restarts some variables and settings to load a new word, no matter if the word was guessed or not. It's called when the word animation ends.


Step 26: Load File

Loads a TextFile. This function is executed in Step 24.


Step 27: Parse Text

Parses the text to create the necesary underscores and textfields.


Step 28: Back Button Actions

The Back button removes unnecesary data, restarts variables and sends the user to the Menu Screen.


Step 29: Underscores

This function creates the underscores according to the letters and spaces in the chosen word(s).


Step 30: TextFields

The createTextfields() function creates the necesary TextFields to display a single letter of the word(s) in each one.


Step 31: Hide Parts Function

Let's hide the parts of the hangman.


Step 32: Keyboard Actions

This is a core function. It will search if the letter pressed is in the current word to guess, disable the key, play a key sound, add the key to stage in case it exists, check if the word is complete or if the chances are over.


Step 33: Keyboard Listeners

This code adds the keyboard listeners.

And this removes the listeners.


Step 34: Correct Word Function

This is the function that will execute when the user correctly guesses a word(s).


Step 35: Wrong Word Function

This is the function that will execute when the user fails to correctly guess the word(s).


Step 36: Options View

This function will handle the Options View animations.


Step 37: Category Function

This function changes the category, taking the value from the categories array.


Step 38: Victory and Lives

Handles the victory and lives counter, the user can have up to 10 victories and 10 lives.


Step 39: About View

These functions show and hide the About View using a Tween animation.


Step 40: Document Class

Go back to the Fla and in the Properties Panel, Class textfield add "classes.Main". This will link the Main class as the Document Class.

Now test your Hangman+ Game!


Conclusion

You have created a fully featured Hangman game in ActionScript 3; add your own categories and enjoy!

I hope you liked this Premium tutorial, thanks 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.