In this Flash tutorial I will show you how to make a simple but yet smart dice roll game. This tutorial will cover a lot of simple programming issues, the use of buttons, make your own functions, make use of movie clip properties through actionscript, using simple math and random function an much more. I hope you enjoy it.

Download the Game flash project file here.

First of we set up the scene, What you will need is a button, I just made a simple graphic with a gradient, then convert it to a button symbol by right clicking and choose convert to symbol. Give the button an instance name, we will need it when we have to do some action scripting. I called mine "roll".

Then we need a simple text box, place it center on the stage, and change its property to dynamic textbox, so its able to receive information through actionscripting.

Basically this is what we need to make things work, but to make the game a bit more interesting we also need some graphic for visual appeal. I just made 6 different view of a dice, I made it in Photoshop, (I could have done it in any graphic related environment.

Import your images to the stage, File -> Import -> Import to stage and locate your dice image files.

Now separately convert all images to movie clips and give them instance names like this dice_1, dice_2, dice_3, dice_4, dice_5 and dice_6.

I very important thing now is to place all dice movie clips exactly on top of each other, an easy way to do this is to type in the x and y coordinates for all movie clips.

Now to the fun part, the action scripting.

This function tells flash that when someone clicks on the button the textbox will show a random number between 1 and 6 using the Math function in flash, a very useful tool.

The next thing is to make a simple function that makes all our dice movie clips invisible, we will do this every time we need a new shuffle, then only show the dice with the same number of eyes as shown in the textbox (eg. random number 1 then dice_1._visible = true).

Now we will need to call this function every time the button is pressed so we have to add to the onpress part of our code.

We are almost done, this next part is the most annoying part to type, its not that complicated its an if condition with 5 else if's, this will control that if the number 1 comes up, then we will show dice movie clip one, if number 2 comes up, then we will show dice movie clip two and so on. This code also has to be added in the buttons onpress code so the final onpress code will look like this.

Just to clarify I will try to explain how this if and else if part works.

if number 1 comes up then show dice 1

else if number 2 comes up then show dice 2

else if number 3 comes up then show dice 3

And so on.

Here is the final code.

Labels: tutorial, web, Web Design, Web Design And Maintenance, web site design, Web Site Design Development