In this lab we'll get used to the Flash environment and write a small program using it. Boot your computer on MacOS and open Flash CS5. You'll see a dialog that allows you to create a new project. Choose ActionScript 3.0. Then in the drop-down menu on the right side of the screen, left of the search box, switch your environment style to Classic.

Ex. 1. In this lab we will implement a simple version of the game of Hangman. Save your project under this name.

a. Stage Setup. The big white rectangular area under the title of your project is called the Stage. This represents the graphical area on which the app will run.

Start by setting the background color of the stage. On the right, under Properties, you'll see the label Stage next to a small white rectangle. Click on it and choose a color that you want.

The tools in the bar to the left of the window can be used to vector draw in the stage. Start by drawing the gallows somewhere to the left of the stage. Using the selection tool at the top of the toolbar, select all the objects that compose the gallows. From the Modify menu, choose Group. Now they should act like one entity. Move it around the stage a little to see that it works as a group. Then from the Modify menu select Convert to Symbol. In the dialog that opens give it the name gallows and choose the type Graphic. This is a type of symbol that we don't intend to interact with in the app.

Using the drawing tools, create a stick figure head. Note that you can find an oval in a drop-down menu attached to the rectangle. Group the objects composing the head and the convert it to a symbol. Give it the name HeadClass (we'll use a simpler name for the instance name). Choose the type Movie Clip for this one because we'll need to manipulate it during the execution of the program. Note that in the Properties area there is a box now where you can enter an Instance Name. Call this object head. Basically the symbol name defines a class and the instance name defines a variable name that contains a reference to the object.

Repeat the procedure to create the body, each arm, and each leg (separately because we want to give the player more chances to guess letters). Name the symbols classes whatever you want and the instances for these objects body, leftArm, rightArm, leftLeg, rightLeg. Note that for the arms and legs you can create one of them, convert to a symbol, then make copies after that and give them different instance names. If you create the left arm, for example, convert to a symbol, then make a copy, you can apply the transformation Flip Horizontal found in the Modify menu, to convert it into a right arm, and then you can re-position it. Each of these must have their own instance name, but they can be instances of the same class.

Interface Objects. We still need a few interface objects before we go and start writing code.

First, we'll need a text box where the word to be guessed will be written. From the toolbar on the left, click on the Text Tool (it looks like a T). On the right side, under properties, in the first drop-down menu choose Classic Text, and in the second one choose Dynamic Text. This way we can edit its content in the code. Place a box under the gallows and stick figure and for now fill it with "_ _ _ _". Select the entire text (Command-A), and choose an appropriate font, color, size for the text. Then click on the Select Tool at the top of the toolbar and select this text that you have entered (as an object). Now in the Properties area you should be able to give it an instance name. Let's call this guessTxt.

Repeat the procedure to create another text are somewhere in the top-right area that will display the letters that the user has already entered. Let's call this text area historyTxt. Then create another text box in the right-center area and write "Your guess:" in it. Choose the type for this one to be Classic Text - Static Text. This box does not need an instance name because we will not need to modify it.

The last piece that we need to add is a text box that will receive as input the key guessed by the player. Create another text box under the label Your Guess and choose the style for it to be Classic Text - Input Text. Make the box of a reasonable size to store one letter. Below the Anti-Alias properties in the Character section of the Properties you'll see 3 little boxes. The one to the right should allow you to show a border around the text. Click on it to enable it. Give this object the instance name inputTxt. Make sure that all your dynamic text boxes are long enough to contain the text they may need to hold.

Before we proceed to the code, there is one more operation that we need to do in order for the movie to work properly. Select one of your text boxes. In the Properties area, under Character, you will see a button that says "Embed...". Click on it. In the dialog that opens, check the boxes for uppercase and lowercase alphabet letters. If the font is not given a name at the top, enter a name yourself, then click OK.

Code. Now that we have prepared everything we need, it's time to start writing some code. Let's test first what the movie will look like with Cmd-Enter. For now you should just see the content of your stage the way you've set it up.

Make sure that none of your objects is currently selected. Let's open the Actions panel from the Window menu. First, we want to start by hiding some of the objects in the stage. To hide the head of the stick figure, add the following line of code:

head.visible = false;

Do the same for all the other parts of its body. Test that the figure is not visible anymore with Cmd-Enter.

Next, we need to set up the content of the historyTxt object. For this, add the line:

historyTxt.text = "";

We can now add some code to start with a list of words from which we'll choose one at random, and then set up the guessedTxt object with the appropriate content. Let's declare this variable first:

var words:Array = new Array("", "", "");

Fill this array up with 10 words of your choosing, each delimited by quotes and separated by commas. Then declare three variables called word, guess, and history and initialize all of them with an empty string. Now let's write a function that chooses a random word out of the 10, stores it in the variable word, and then initializes the the variable guess with a string containing "_ " (underscore and one space) for each letter in the word. First, go to the top of the code and add the line

import Math;

The Math module contains a function called random returning a random number between 0 and 1 (non inclusive). If we multiply the result by 10 and then take the floor of it, we should obtain a random integer between 0 and 9. The last thing you need to know, a string object has a property called length that give you the number of characters in the string. Now add the following function at the end of the code::

function chooseWord() {
	var i = Math.floor(Math.random()*10);
	word = words[i];
	guess = "";
	for (i=0; i<=word.length; i++) {
		guess += "_ ";
	}
	guessTxt.text = guess;
}

function checkAddHistory(letter:String) {
	var i = history.indexOf(letter);
	if (i>=0) {
		return false;
	} else {
		history += letter;
		trace(history);
		historyTxt.appendText(letter);
		trace(historyTxt.text);
		return true;
	}
}

function captureInput(event:KeyboardEvent):void {
    if (event.keyCode == Keyboard.ENTER) {
        var letter:String = inputTxt.text;
        inputTxt.text="";
        if (letter.length > 1) {
            letter = letter.substr(0, 1);
        }
        playLetter(letter);
    }
}