Flash Tutorials
Flash Yahtzee Game Tutorial 1 Next
Preparation. Let us start by setting up the resources. You'll need a collection of images: one for each face of the dice, and one for a grey dice that can be rolled. Create these images with whatever program you want, then save them to the project folder. Here are the 7 images that I'll be using:
| 
| 
| 
| 
| 
| 
|
Project. Create an Actionscript 3 project. The stage area will have to contain on the left side a table that looks like this:
| Combination | Score |
| Ones | |
| Twos | |
| Threes | |
| Fours | |
| Fives | |
| Sixes | |
| Upper bonus | |
| 3 of a kind | |
| 4 of a kind | |
| Full house | |
| Small straight | |
| Large straight | |
| Yahtzee | |
| Chance | |
| Yahtzee bonus | |
| Total |
On the right hand side of the stage there should be some space for displaying the dice. If you plan on implementing some animation on the rolling dice (optional), then this space should be larger. Below or above the dice space, we'll add a button later for the roll action. The score categories in the table will be created using buttons, to make it easier for the player to choose them.
Import images. Import your seven images to the library one by one. For each of them, go to File - Import - To Library, then select the image form the project folder. Once all the images are in, go to the Library tab next to Properties, right-click on one of the images, and select Properties. Check Export to ActionScript, and underneath, give it a class name you can remember. From here on I'll assume that the names of these classes are OneBmp through SixBmp and GreyBmp. Then click Ok. Now these seven classes should be usable in the code to create objects based on these images.
Score Cell The score board will be organized in cells, each of them an object of a class called ScoreCell. For this class, we will combine vector drawing techniques in Flash with coding.
Let's start by creating one row of the table score using Flash's vector drawing. You need one rectangle for the name of the combination, and a smaller one next to it for the score of that combination. Then on top of the first rectangle, add a text box ans write the text Large Straight inside, since this is likely to be the longest combination name on the board. Adjust the font, size and colors the way you prefer. On top of the score box, add another text box in a similar font and size, and write the text 40 inside. The objects might look like in the following image:
Then write down on a piece of paper the coordinates of each of the four objects.
Move the text boxes away from the rectangles they are shown on. This is to make other operations on these objects easier. Use the selection tool to select the entire first rectangle along with its borders - select an area around it instead of clicking on it, because Flash treats the borders of the rectangle as separate objects. Then group the rectangle and its borders, and convert it to a symbol. Name the symbol Box1 and make export it for ActionScript. Repeat the operation with the second rectangle, and call the class Box2.
Class. Create a new ActionScript file of type class under the name ScoreCell. Add the following import statements at the top of the package:
import flash.text.TextField;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
Let's start with the class constructor. Just like in the other applications, this class will need a reference to the stage in order to add objects to it dynamically. It will also need values for the top right corner of the position of this cell on the stage, as well as an identifier for the type of combination that the cell represents. To anticipate storing all this information in the class, declare the following class attributes before the constructor: parent, posX, posY, combination. Then add the following variables to the constructor: theStage, origX, origY, option. Then start the code of the constructor by assigning to each class variable, the value of the corresponding parameter respectively, in this order.
Let's add two boxes using the classes Box1 and Box2 that we created by converting the vector drawing objects to symbols. Add the class attributes boxName, boxScore, textName, textScore that will store references to the two boxes and the two text fields. Add the following function to the class, after the constructor:
function moveTo(spriteObj, valx, valy) {
spriteObj.x=valx;
spriteObj.y=valy;
}
To create the first box, we can have to create the object itself first, then add it to the stage so that it becomes visible and active, and move it to the correct position on the stage. To summarize it, here is the code:
boxName = new Box1;
parent.addChild(boxName);
moveTo(boxName, posX, posY);
Add similar code to create the boxScore, with the exception that the
horizontal position should be pushed forward by a quantity such that
the second box is displayed to the right of the first one. The easier
way to do this is to go back to the paper where you wrote the
coordinates of the two boxes in the original design. Subtract the x
coordinate of the first box from the x coordinate of the second
one. The obtained quantity should be added to posX in the moveTo
function call.
Next we'll create a text box for the name of the combination and one for the score. To create the first one, add the following code to the constructor:
textName = new TextField();
moveTo(textName, posX+14, posY+6);
textName.width = 200;
textName.text = "Small Straight";
parent.addChild(textName);
Replace 14 and 6 with numbers computed based on the difference between the values of X and Y of the score box and of the rectangle behind it in the original layout. Replace the 200 for the width with the width of this text box that you have written down before. Then do something similar for the textScore. Testing the app, you'll see that the text is in the right position, but most likely, is not in the right font. Back at the top of the package, import the module flash.text.TextFormat. After the text boxes are created, let's create an object of type TextFormat to define their attributes. Add the class attribute txtFormat in case we need to use it again when we set the score dynamically during the execution of the game. Go back to the stage first and write down the name of the font and the size. While you're there, click on either of the text boxes, then on the button Embed next to the font name in the Properties area. Select all the uppercase and lowercase letters, as well as the numerals (or digits), then click OK. Then go back to the ScoreCell class and add the following code before the definition of the text boxes:
txtFormat = new TextFormat;
txtFormat.font = "Arial Rounded MT Bold";
txtFormat.size = 18;
Replace the name of the font in parenthesis with the name of the font that you've chosen. Then add the following line right after the text of the textName box has been defined, and then a similar one for the textScore:
textName.setTextFormat(txtFormat);
To test this class and make sure that it works so far, go back to the game fla add the following lines to the Actions window:
import ScoreCell;
var cell = new ScoreCell(this.stage, 200, 20, 1);
Next, let's add a function to the class that sets the text of the cell with the right value based on the option. Normally the indexes in an array start from 0, which would mean that the first combination, the Ones, would correspond to an option value of 0. To keep things simpler, we'll choose to have the values of the options starting from 1 instead of 0, so that the first six combinations are easier to score. First, add a class variable called "score" and one called "used". The purpose of the second one is to mark the fact that the combination in this cell has been used already and not let it be scored again. We cannot just use the score to determine if a combination has been used or not because a score of 0 is possible in the game. Assign values of 0 and false respectively to these variables in the constructor.
Add the following function after the constructor:
function setCombination() {
var names = ["", "Ones", "Twos"];
textName.text = names[combination];
}
Then complete the rest of the array names with all of the other combinations. This creates a C-style array containing the names, and we can extract the one that is appropriate for the combination that applies to that particular ScoreCell object.The first element of this array is an empty string because we don't use the combination number 0. Replace the instruction setting the text of the textName with a function call to this function.
Test this class as it is at this point to make sure everything works. At this point you can delete the vector drawing objects in the stage. In the next part we'll start working on the Game class.