Imitate a dice roll using Actionscript 3 classes in flash cs3

In this tutorial you learn how to properly call and use movieclips from your library using Actionscript 3 as classes. You will also learn how to imitate a die roll using a die and button movie clips. This is to ease you in to the not so complicated world of AS3 with out loosing you or making you fall asleep and believe you me there have been many cases where in the initial phases of learning action script i have been falling asleep in fact i laughed as i yawned right now. But rest assured it is all worth it because as I’m sure you seen a whole lot of experiments all over the web Therese is a whole new world to be explored with AS3.

This tutorial is for an intermediate Actionscript user and Advanced Flash user

The file we will be creating will end up looking like so i could have added a load of fancy effects to the movie clips but that was not the purpose of this tutorial so i will leave that up to you to play about with.

Your Ad Here

Setting up the Die

First off create a square like shape on the stage this will be the Die

convert to a movieClip using F8 and name DieMc

it is important that we correctly name all our movieClips as we will need to later call them within the AS3 class files

Now double click to enter inside the movieClip so that you can create the die assets inside the main movieClip you know your inside when you can see the small blue logo under the time line next to Scene-1 use this also to return out from within your movieClips.

Draw in 6 circles increasing frame by frame eg. frame 2 has 2 circles frame 6 has 6 circles. Use swf above as reference.

As soon as the previous steps are done you can remove the die from the stage by highlighting and clicking delete this is because we will only need the die as a library item so i can teach you how to pull things out of the library as well

Next on create a button like shape and using text write onto it Roll Dice as seen in image. Convert this to a movieClip and name ButtonMc, remember what you name things is very very important.

I have also renamed the Die layer as only 1 layer is now needed

your stage should now be looking like above

and your library should now look like this

so that the making of the movie clips and library items done. What we need to do now is link the library items to get them ready for use with Actionscript 3

in library left click your mouse on an item and scroll to linkage

next set it up like so and do not rename anything unless you fully know what you are doing !

The DieMc

ButtonMc

All ready for Action script 3

Now open 2 Actionscript files in flash note just actionscript files nothing else

and name them DieMc.as and ButtonMc. as

DieMc Actionscript 3 class

The code

package {

    import flash.display.MovieClip;

    public class DieMc extends MovieClip {

        private var DieX:Number;

        private var DieY:Number;

        public function DieMc() {

            DieX = 30;

            DieY = -200;

            this.x = DieX;

            this.y = DieY;

        }

    }

}

Very simple actually first import the MovieClip class to access is capabilities

Then extend the MovieClip class through the the DieMc class

Then add the positional settings to the constructor function within the DieMc class

note all the names of the movieclip name, file name public class name and even constructor function name have been kept the same.

ButtonMc Actionscript 3 class

The code

package {

    import flash.display.MovieClip;

    import flash.events.MouseEvent;

    import DieMc;

    public class ButtonMc extends MovieClip {

        private var _die:DieMc;

        public function ButtonMc() {

            _die = new DieMc();

            addChild(_die);

            this.buttonMode = true;

            this.addEventListener(MouseEvent.CLICK, onClick);

        }

        private function onClick(event:MouseEvent):void {

            _die.gotoAndStop(Math.ceil(Math.random() * 6));

        }

    }

}

The usual setup here imports of the Movieclip,MouseEvents and more importantly the DieMc this is so we can use the DieMc within the ButtonMc Class mainly so that both classes and MovieClips can interact with each other.

we declare the DieMc as a variable give it a new name as _die

add a new instance of it onto the stage so that it compiles at runtime this is done in the public function

then make the button act as a button by using buttonMode = true

add the event listeners

then the event for when the listener hears what its waiting for

and a function to generate random die circles when ever the button is clicked to a maximum out put of 6

thus creating the following

please comment and let me know what you think

If you liked this tute Bookmark it

Add 'Imitate a dice roll using Actionscript 3 classes in flash cs3' To Del.icio.us

Add 'Imitate a dice roll using Actionscript 3 classes in flash cs3' To digg

Add 'Imitate a dice roll using Actionscript 3 classes in flash cs3' To Stumble Upon

If you enjoyed this post, make sure you subscribe to my RSS feed

!

Comments

9 Responses to “Imitate a dice roll using Actionscript 3 classes in flash cs3”

jarmine on August 6th, 2007 3:14 pm

Great tutorial teaches you how to use classes and make the dice great way of learning at an intermediate level. keep up the good work
Dan on August 11th, 2007 1:33 am

Couldnt use this tutorial for flash 8.. can you tell me why? i it because of the version? how can i make it work in flash 8? thanks
shaz on August 13th, 2007 11:19 pm

Dan unfortunately this tutorial is only possible in flash cs3 using actionscript 3 flash 8 it can also be done in flex 2 but that’s a whole other tutorial. if you want this tutorial to be written for flash 8 in AS2 for you then request in the request a tute page
rajat on August 30th, 2007 9:48 pm

please send me more interersting tutorials like this.
eagerly waiting.
shaz on September 1st, 2007 4:17 am

Thanks rajat best way is for you to subscribe to our rss feed that way you can keep updated with all our tutorials. I try to post my self every day and we get tutorial submitted to use as well so we are never low on them.
Ash on September 5th, 2007 9:55 pm

How did you do this part:

Very simple actually first import the MovieClip class to access is capabilities

Then extend the MovieClip class through the the DieMc class

Then add the positional settings to the constructor function within the DieMc class

? im lost
shaz on September 5th, 2007 10:52 pm

Hey Ash this refers to the code above it if you read it with the code it will make more sense. I may need to intertwine it with the code to as comments to make it more readable
some 1 on September 15th, 2007 5:49 am

hey can i ask y is it not working i mean the button looks like a shape i m clicking on and there is no response no dice no random circles!
shaz on September 17th, 2007 1:00 pm

Are you using flash player 9 it wont work other wise you can download from the adobe web site http://www.adobe.com