Programmatic Tweening in Flash AS3 – Caurina Dice Roll Example

By
Dave
– April 15, 2011Posted in: Actionscript, Flash Games


Tweening via the timeline in Flash can oftentimes be too computationally expensive, especially if your application is some massive, complex flash game or other. What I am going to present in this Flash Cove AS3 tutorial is an example of using some third-party software to do all your tweening via actionscript code. There are numerous benefits to tweening via actionscript, as listed here:

  • Less computationally expensive
  • Tweening may be done on the fly dynamically
  • Tweens could be based off real-time user input
  • Programmatic tweening is less graphically expensive
  • Easy to edit, make changes, and upkeep as time goes by

Though there are thousands of different 3rd-party tweening packages, my absolute favorite and best in class is the caurina.transitions.Tweener (AS2 and AS3). It is simple to install and easy to use, has plenty of functionality, and is totally free!  The creator’s website is here, and the code for download is located
here. I’ll explain some of the tips and trick throughout this flash tweening tutorial, but before I start, I might as well give you a taste of what’s to come..





Here's the final result, a dice roll simulation in flash,
animation completely controlled by actionscript 3 code.

 
Let’s go ahead and start.

  1. Create a new flash document, 550px by 400px. Actionscript 3.
  2. Download the caurina.transitions.Tweener package from the Google Code page. Extract the “caurina” folder form the .zip file, and put it in the same directory with your *.fla you created in the previous step.  Make sure your file hierarchy looks like the following image.
  3. Once your directory is setup, head back in to the flash file, and create a new movieclip (Ctrl + F8); name it “die”.
  4. Create a second layer inside the “die” movieclip, and on the bottom layer, draw a square die shape, about 100px by 100px.

  5. Spread that bottom layer of the dice background along 6 frames, by either copying and pasting the single frame, or by jamming the F6 key repeatedly. On the top layer for each frame, draw dots over the dice backdrop, to represent the numbers 1-6, as you would see on a normal die.

  6. Now that the art is drawn for each of the 6 faces, it’s time to add a little code. On every single die face keyframe, go ahead and add the line of code:
    stop();

      Though this isn’t required necessarily, I like putting the stop() ocmmand on every frame just in case to prevent the dice from jumping frame unnecessarily as each face is intended to be consistently static, all the time.

  7. We are officially done with setting up the die movieclip, now to move on to the shadow. Create a new movieclip again (Ctrl+F8), name it “shadow”. Once inside the movieclip, the rest is easy. All you need to do is draw a gray semi-circle, maybe 120px by 40px, and then exit back out to the main scene.
  8. Before we write the code, we need to setup export for our die and shadow classes. In the library panel, right-click on each of the two classes and select “Properties”.  Inside the popup, the only thing you need to do is check the box “Export for Actionscript” as seen in the image below.
  9. The final step for this flash tutorial is writing our actionscript in the main file; which, to some people, may be pretty hefty. I am going to chunk each function in to separate pieces, but also be sure to review the comments inside the code for further clarification.

 

First off, initialization:

(as a note, all the following code can be copied and pasted straight in to your first frame on Scene 1, right after the other.)

import caurina.transitions.Tweener;  //import the Tweener class from the Caurina package.

var dice:Array; //setup dynamic arrays for both the dice and shadows.
var shadows:Array;
var stop_go_number:Number = 4;
//this stop_go_number variable is being used to time and regulate the dice rolls

function init():void{ //initiailization function. Clean way to wrapup the starting code.
    dice = new Array(); //initialize the arrays
    shadows = new Array();
    for(var gto:Number = 0; gto < 4; gto++){// loop through and create 4 new instances of shadows and dice.
        shadows[gto] = new shadow();
        shadows[gto].y = 295;
        shadows[gto].x = gto*50 - 50; //set each at a displacement from eachother
        shadows[gto].scaleX = 0.50;   //top left of the scene
        shadows[gto].scaleY = 0.50;
        shadows[gto].alpha = 0;
        shadows[gto].mouseEnabled = false;
        MovieClip(root).addChild(shadows[gto]); //actually add the dynamically created shadow to the stage

        dice[gto] = new die();
        dice[gto].y = -120;
        dice[gto].x = gto*50 - 50;  //do the same for shadows and dice
        dice[gto].scaleX = 0.40;
        dice[gto].scaleY = 0.40;
        dice[gto].mouseEnabled = false;
        MovieClip(root).addChild(dice[gto]); //actually add the dynamically created die to the stage
    }
}

What this code accomplished was:

  • Importing the caurina package so tweening is available to us
  • Initialization of our arrays of procedurally generated movieclips
  • The creation of those shadows and dice
  • and calling addChild() to actually populate the stage.

Then our roll function:

function roll(e:MouseEvent):void{
    if(stop_go_number == 4){ //if stop_go is equal to 4, that means all dice have finished rolling
        stop_go_number = 0; //so we can go ahead and start over
        //reset all the animation pieces!
        for(var ccc:Number = 0; ccc < 4; ccc++){ //the dice and shadows are lying on-stage, we need to move them off again.
            dice[ccc].x -= 200; //shift the dice back top-left
            dice[ccc].y -= 400;
            shadows[ccc].x -= 200; //move the shadow left
            shadows[ccc].scaleX = 0.5; //set the scale back to our original setup
            shadows[ccc].scaleY = 0.5;
            shadows[ccc].alpha = 0; //set alpha(visibility) to 0.
        }

        for(var c:Number = 0; c < 4; c++){ //here where we actually execute the tweens
            var additive:Number = Math.floor(Math.random() * 6) + 1; //generate a random number between 1-6
            dice[c].gotoAndStop(additive); //set the dice face to that number
            //this tween moves the die along the y-axis, and rotates
            Tweener.addTween(dice[c], {y: 280, rotation: 360, time: 2.5, delay: c * 0.10, transition: "easeOutBounce"});
            //this tween moves the die along the x-axis and, on completion, increments our stop_go_number
            Tweener.addTween(dice[c], {x: 120 + c*50, time: 2.5, delay: c * 0.10, transition: "easeOutQuad", onComplete: function():void{ stop_go_number++; }});
            //this shifts our shadow along the x axis
            Tweener.addTween(shadows[c], {x: 120 + c*50, time: 2.5, delay: c * 0.10, transition: "easeOutQuad"});
            //and the final one tweens our alpha and scaling for the shadow, giving it that bouncy feel.
            Tweener.addTween(shadows[c], {scaleX: 0.2, scaleY: 0.2, alpha: 0.5, time: 2.5, delay: c * 0.10, transition: "easeOutElastic"});
        }
    }
}

What the “roll” function does, in steps, is:

  • Checks to see if the dice are idle; if they are, go ahead and proceed. if they aren’t, exit the function
  • Once inside, iterate over all the dice and shadows, resetting their positions to top-left, off-screen.
  • Then, make a second loop; where for each shadow/die pair, set die face and execute tweens.

The tricky part in the roll() function are the tweener calls. I’ll go ahead and explain how these work. Everytime you want to create an actionscript, it always follows this syntax:

 Tweener.addTween(my_movieclip_name, {param1: new_value, param2: new_value, ...});

param’s can be any attirbute of the movieclip (x, y, scaleX, scaleY, color, width, height, alpha, etc..), and there are also some special parameters, as follows:

  • time: how long you want the transition to take from present state to future state
  • delay: how long you want (in seconds) the tween to wait before executing. This is a useful tool if you want a delay between Tween starts, especially when assigning them all very quickly through a loop. I did this in the roll() function above.
  • onComplete: You can either put a function_name there and reference a later function in the actionscript file, or you can inject an anonymous function like I did in the roll() method above, this is good to do if what you need to execute is trivial or simple. onComplete calls whateevr function you point do once the tween is done with its transition.

Those are the only parameters I used in this tutorial, but there are plenty move available (such as onCompleteParams), which can be viewed on the official documentation page.

http://hosted.zeh.com.br/tweener/docs/en-us/

And finally, our last 2 lines of code,  execution:

init(); //actually call the initialization function
//every time the mouse is clicked, our roll() function will be called.
stage.addEventListener(MouseEvent.CLICK, roll); //add CLICK

Putting all of this together and publishing via (Crtl+Enter) brings us to the following state:








All that's left is a little personal taste, such as the gradient
 background and some text ques so our user knows what to do.
The gradient I used was a (white, gray, white), and the pixelfont
 I put in my version is called JOYSTIX,
 available at http://www.dafont.com/joystix.font.

 

 

Tags: , , , , , , , , , , , ,

About Dave

Hey Guys! I'm Dave, an Ohio State CSE alumni who just recently started work in the industry. I'm a flash hobbyist at heart, and love making flash games and tutorials when the time permits. Check out what flash tutorials are available on the site, and don't forget to "Like Us!" on Facebook!