Roll the dice Flash game tutorial

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.

dice roll flash game tutorial

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.

dice roll

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.

roll.onPress = function () {
	_root.result.text = 1 + Math.floor(Math.random()*6); /*numbers between 1 and 6 */
}

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).

function invisible () {
    _root.dice_1._visible = false
    _root.dice_2._visible = false
    _root.dice_3._visible = false
    _root.dice_4._visible = false
    _root.dice_5._visible = false
    _root.dice_6._visible = false
}

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.

roll.onPress = function () {
    _root.result.text = 1 + Math.floor(Math.random()*6); 
    /*numbers between 1 and 6 */
    invisible();
}

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.

roll.onPress = function () {
    _root.result.text = 1 + Math.floor(Math.random()*6); 
	 /*numbers between 1 and 6 */
    invisible();
    if (_root.result.text == 1) {
        _root.dice_1._visible = true
        } else if (_root.result.text == 2) {
        _root.dice_2._visible = true
        } else if (_root.result.text == 3) {
        _root.dice_3._visible = true
        } else if (_root.result.text == 4) {
        _root.dice_4._visible = true
        } else if (_root.result.text == 5) {
        _root.dice_5._visible = true
        } else if (_root.result.text == 6) {
        _root.dice_6._visible = true
    }
}

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.

roll.onPress = function () {
    _root.result.text = 1 + Math.floor(Math.random()*6); 
    /*numbers between 1 and 6 */
    invisible();
    if (_root.result.text == 1) {
        _root.dice_1._visible = true
        } else if (_root.result.text == 2) {
        _root.dice_2._visible = true
        } else if (_root.result.text == 3) {
        _root.dice_3._visible = true
        } else if (_root.result.text == 4) {
        _root.dice_4._visible = true
        } else if (_root.result.text == 5) {
        _root.dice_5._visible = true
        } else if (_root.result.text == 6) {
        _root.dice_6._visible = true
    }
    }
function invisible () {
    _root.dice_1._visible = false
    _root.dice_2._visible = false
    _root.dice_3._visible = false
    _root.dice_4._visible = false
    _root.dice_5._visible = false
    _root.dice_6._visible = false
}

Boddeh Woddeh says: 2008-09-01

Hi Bye

mona says: 2008-07-24

This was the simplest bit of code Iin Flash, Good job!

Stetlo says: 2008-07-11

This is a very good, well layed out tutorial.Just there are two problems with this. 1) The ActionScript dosnChr(34)t work, I have looked at it and edited it but yet no result. 2) This is too hard for beginners to learn, put the whole ActionScript in one code box.

bava says: 2008-06-09

i am study in flash

master wei says: 2008-05-30

script is too long, there is still some shorter script to work for that random dice

sun says: 2008-05-16

there is a many many simple way to do that ~.~ only 1 row actionscript...

ruiqi says: 2008-05-15

Awesome tut! Thanks!

Melissa says: 2008-04-26

Would love to see this rolling 2 die at a time...

cathy says: 2008-04-16

i donChr(34)t get it:(

gary storm says: 2008-04-04

hi this is for chewy noobs

someone says: 2008-04-02

it is a bit confusing

Mr.Becker says: 2008-02-06

Nice Job YOUNG MAN!

Fort Worth Supervisor says: 2008-02-06

Ummmm...Very Interesting....it looks like you still need some work on this!

Penis says: 2008-02-05

hmmmmmmm........

Joe Shmoe says: 2008-02-05

Wow

Admin Bob says: 2008-02-02

Hi David, I tried to extract the file, no problem for me, but I have uploaded a new version anyway, so try again.

David says: 2008-02-02

Sorry I do not speak English. When I download the file complait (.Zip), I open the file (. Fla) but does not open (it was broken) can you sent one plz. dav.cote@hotmail.com

Kio says: 2008-01-21

Great! Thanks

Simon Shine says: 2008-01-17

Hi, IChr(34)m also new to Flash (started Monday, and now itChr(34)s Thursday). I donChr(34)t want to be rude, but I think thereChr(34)s a better way to do it, and IChr(34)d like your feedback since it might have disadvantages. 1) Instead of having six different movie clips, only have one movie clip with six frames and call an instance "die". 2) Within this movie clip, add a layer called "actions" and in frame 1 call the code "stop();" 3) Anywhere, when you want to roll the die, run something similar to: var r:Number = Math.round(Math.random()5)+1; // one plus (zero to five) die.gotoAndStop(r); This way you donChr(34)t have a lot of objects, just one, and you change its state. You can either put the code in your _root in some layer intended for ActionScript, or you can put it in a layer in the MovieClip itself... IChr(34)m not sure if the latter is bad style or not, but if you are, you can even add a function and make it somewhat object-oriented: 1) In a layer called "actions" in the "die" MovieClip, write the code such as: stop(); function roll() { gotoAndStop(Math.round(Math.random()5)+1); } And anywhere you can then call: die.roll() and itChr(34)ll change the graphics. (Additionally you might want to store the state in a variable instead of referring to the current frame of the MovieClip.)

Admin bob says: 2008-01-20

hi Simon Shine, yes your way of doing it works, but I see some disadvantages, I am use to doing object oriented programming with visual basic and other languages and therefore I tend to keep as much as possible in one frame instead of looping it. But then again it depends on what you want to accomplish, because in most cases your example will work fine.

Marius Oprea says: 2008-01-02

IChr(34)m new to Flash and IChr(34)ve tried this tutorial with Adobe Flash CS3. The script isnChr(34)t working with Action Script 3.0 . So IChr(34)ve adapted the code to Action Script 3.0 the following code itChr(34)s working with Action Script 3.0: [CODE] / adapted by Marius Oprea, email: oprea_marius@yahoo.com / roll.addEventListener(MouseEvent.CLICK,PressRollButton); function PressRollButton(e:MouseEvent) { result.text = (int)(1 + Math.floor(Math.random()6)); / numbers between 1 and 6 / invisible(); if (result.text == (int)(1)) { dice_1.visible = true; } else if (result.text == (int)(2)) { dice_2.visible = true; } else if (result.text == (int)(3)) { dice_3.visible = true; } else if (result.text == (int)(4)) { dice_4.visible = true; } else if (result.text == (int)(5)) { dice_5.visible = true; } else if (result.text == (int)(6)) { dice_6.visible = true; } } function invisible () { dice_1.visible = false; dice_2.visible = false; dice_3.visible = false; dice_4.visible = false; dice_5.visible = false; dice_6.visible = false; } [/CODE]

james says: 2007-12-31

what did you do this in

tilterbm says: 2007-12-30

Great tut, yo! Keep up the work and IChr(34)m lokking forward to reading other tuts