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 Library and 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:
flipbtn.addEventListener(MouseEvent.CLICK, Sets up that flip will be
flip);
function flip(ev) {
if (Math.random()>.5) {
head.visible = true;
tail.visible = false;
} else {
invoked when the
MouseEvent.CLICK
happens, for the flipbtn.
Set up a function. This
is a function header. A
parameter must be
present, though the
function does not use it.
Start off if statement.
The condition is
Math.random()>.5
If the condition is true,
set head to be visible
tail to be not visible
If the condition is not
true
 head.visible = false; Set head to not be
visible
tail.visible = true; tail to be visible
} Close off else clause
} Close off definition of
flip function
head.visible = false; Set head to start off not
visible.

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.