Tutorial: Coin Toss Using Actionscript 3

Tutorial: Coin Toss using ActionScript 3.0.

Open Flash and under Create New select Flash file (ActionScript 3.0).

This will open up the Flash development environment. It should look something like this:

Flash has many windows/panels, so you spend some time clicking on Window and selecting the ones you want at the moment. What the screen shot shows in the center is the Flash Stage. At the top, with the name Layer 1, the first (and only) frame is highlighted. This is the Timeline. On the right, below the panel with the rainbow, is the empty Library. On the left, is the Toolbox. You, the developer, will create symbols (movie clips, graphics and buttons) in the Library. Note: movie clips can consist of just one frame and no code or can be quite complex. You will bring instances of these to the Stage at particular frames. You also may draw directly on the Stage and create text fields (static, dynamic, or input) on the Stage. You will write code, ActionScript, in the frames.

With that general introduction, here is how you create a coin toss application. The opening screen of the complete application looks like this:

When the player clicks on the Flip button, either a head or a tail is displayed (the drawings are quite crude—you can do better). A count is kept of heads and tails.

Here is a screen shot after several flips.

You will create 2 movie clips, head and tail and bring instances of these to the Stage. You can create a button, but the directions here are to get a button from the Common Library. Good programming practice is to build applications incrementally, so the directions are first to make a basic game and then add the text fields and the code for keeping counts.

Click on Insert and then New Symbol.

Next, give the symbol a name—head would be fine—and make sure that Movie Clip is selected from the 3 choices. This opens up a new Stage for creating the symbol. Draw a head of a coin. By the way, you always can go back and improve the look of any symbol and all instances of it on the Stage will change.

In the Toolbox, you may see the symbols at the left. Notice the Rectangle under the line and above the pencil. The little arrow at the lower right indicates there are more tools available. If you click on it, you can choose the Oval tool. Use the Oval tool to draw a circle: press the Shift key while you are dragging to constrain the oval to a circle.

You can specify the color for the stroke (outline) and for the fill of this and other shapes by clicking on the color squares. The cursor will change to an eyedropper and a palette of colors appears. Select the one you want. I chose a dark gray for the stroke and a light gray for the fill.

You can use the line tool and the pencil tool. If you click on the pencil tool, at the bottom of the Toolbox, you can click to get straight line, smooth or ink options. The straight line modifies your strokes to be straight lines and the smooth modifies to be smooth curves. With ink, the strokes are captured exactly.

Now, go back to the main Scene. Do this by clicking on Scene 1.

You now need to make a tail movie clip. You can proceed as before. An alternative is to right click on the head in the Libraryand click on Duplicate. Rename the duplicate tail. Now think about how you need to change the head picture to be a tail. You can click on the line segments that outline the head and delete them. When all that remains is the gray circle, you can draw the tail.

Return to Scene 1. Bring instances of the head and the tail to the Stage by clicking on them in the Library and dragging to the Stage. What you have on the Stage are instances. They each need instance names. Select the instance and enter in the name under where it says Movie Clip. The screen shot below shows tail having been entered. Yes, you need the instance name for the movie symbol, also named tail. Repeat this for the head instance.

The next thing to go on the Stage is a button. You can create your own. An alternative is to use the Common Libraries.

Click on Window / Common Libraries / Buttons. Decide on a button and drag it to the Stage. You will notice that it also is in the Library. You need to edit the symbol to change the text to Flip or something like it from Enter.

Buttons have 4 frames: Up, Over, Down and Hit. When you make your own buttons, you can decide how different to make these. The material in the Hit frame is the only thing that defines a hit. To change the built-in button, all you need to do is change the label. Click on the text layer, Up frame to select it. Then click on the T tool since you are going to change the text. Notice that you can change the font, size of font, color, etc. This is a Static text field. In the next version of the game, you will add static text fields and dynamic text fields. When the color is what you want, select the field and change Enter to Flip.

You need to give the button an instance name, also. The screen shows that I gave the button the name flipbtn.

Now I will show the code that refers to these 3 objects.

The code (the ActionScript) makes use of a function. A function, in programming, is a way of encapsulating code. Function definitions start off with function header statements that include the word function, the function name, and parameters (extra information) to be used when the function is called.

I define a function, called flip, which will use the built-in function Math.random to get a number (decimal) greater or equal to 0 and less than 1. The function has an if statement that does one thing if the results of calling random is > .5 and another, if it is not. The if statement is standard in programming languages.

I need to associate the function with the button. This is called event handling. In ActionScript 3.0, this is done by called the addEventListener method for the button. Notice that the coding has the name of the button followed by a dot followed by addEventListener. This method required 2 pieces of information as parameters in between parentheses: the first is the specific event and the second is the name of the function.

Lastly, there is a single line of code that sets the head instance to be invisible.

Click on the 1st and only frame in the Timeline. Go to Window / Actions to get the Actions panel.

Enter in the code:

The built-in terms will be in blue, a good way to know you typed them correctly.

At this point it is possible to check what you have done. Click on Control and then Test Movie.

To add keeping counts, you need to add the text fields and the code. There are 4 text fields: two act as labels only so these are Static and two are changed by the code. These are Dynamic. Click on the T in the Toolbox and drag to create a rectangle on the Stage. Make sure Static is in the Properties panel and, as before, choose the size, font and color you want. Enter in Heads:. Repeat below with Tails:. Now, create a third text field. This time, change Static to Dynamic. You need to give this field a name in order to refer to it in the code. See the screen shot. I gave it the name headcount. Enter in 0 as the text.

Repeat again to create a dynamic text field called tailcount.

Select the 1st frame and click on Window / Actions to get the Actions panel again. The text fields hold text! They do not hold numbers, even though they look like numbers. The numerals 0 or 1 or 2 are what is called characters or a character strings or strings. Each character is represented by its own 8 bit (8 bits = 1 byte) pattern according to something called the ASCII code. So the text field "12" is a string 2 bytes long holding the representation of the numeral 1 followed by the representation of the number 2. The number 12, in binary, is 1100. The code must convert the text into numbers, do the arithmetic of adding 1, converting the numbers back to text, and placing the result in the text field.

All this is accomplished for heads by the line:

headcount.text = String(parseInt(headcount.text) +1);

You need to put this line within the { and } for the true clause. You need to put a similar line for tails. The final script looks like:

Test the program. Control / Test Movie.

Don’t expect the tails and heads to alternate. The results should not be any detectable pattern.

One more thing to add to coin toss: rotating the head and the tail movie clip instances to produce a more random effect. The rotation is a property like visible. The value is in degrees (this will be important to note for the cannonball application). To produce a random effect, the code

head.rotation = Math.random()*180;

will change the rotation to a value between 0 and 180. So the new code for the flip function (shown here in full; there are 2 additional lines of code) will make the coin toss have a random effect:

function flip(ev:Event) {

if (Math.random()>.5) {

head.visible=true;

head.rotation = Math.random()*180;

tail.visible=false;

headcount.text=String(parseInt(headcount.text)+1);

} else {

head.visible=false;

tail.visible=true;

tail.rotation = Math.random()*180;

tailcount.text = String(parseInt(tailcount.text)+1);

}

}

To produce a finished version of the program suitable for uploading to the Web, Click on File / Publish. This produces two files: an .html and a .swf . You need to upload both of these files along with a file named AC_RunActiveContent.js to the file folder, if that is not already present. This file is created by the Flash environment and will be in the folder with the other files. When setting up a link to your game, make the href be to the .html file.

ActionScript 2.0 to ActionScript 3.0

Only read this if you are familiar with previous versions of Flash and want to reflect on the differences.

First of all, consider that much is the same: you still bring material to the Stage; give things names; write a function that performs the logic, including calls to Math.random; and set up a connection between an event involving the button and the function.

Now, here are the differences that I noticed:

Movie clip properties do not have an underscore: it is head.visible.

The option to write code 'in' the button referring to on(Release) is no longer available. You must use frame code and the exact format is

flipbtn.addEventListener(MouseEvent.CLICK, flip);

ActionScript 3.0 has strong-typing for data types, including specification of parameters. This means that the flip function needs to be defined with a parameter even though it is not used in this application.

function flip(ev) {

Imagine, please, a situation in which a function would serve for different events and the parameter would be used to determine which one.

The option to use a VAR name for a dynamic text field is not longer available. You need to give text fields instance names and refer to the .text property. Moreover, the conversions between numbers and text must be done explicitly:

headcount.text = String(parseInt(headcount.text) +1);