AS3 How to and Tips > A Simple Game Spinner Using the Tween Class

A very popular topic in Flash books is “tweening,” in which one can describe a beginning state and an ending state, and Flash will figure out how to continuously get you from beginning to end. The most sophisticated versions of this concept fall into the realm of “timeline tweening” to make canned effects, but we will not discuss this method here. The ActionScript language has a Tween class that can be used to do many of the same things, but with the added advantage that properties of the motion can be dynamically set in the context of the user interface. We have written several other tutorials with documentation of the class or with advanced examples:

In this simple how-to, we will build the little game spinner shown below, based on an example from Chapter 5 of our Flash and Math Applets book.

When the arrow head (mcArrow) is clicked, a Tween object is created with (1) the starting value of the rotate property is its current value, and (2) the ending value is a random multiple of 45 degrees, the angle between successive numbers on the spinner. Immediately thereafter, the Tween is started, automatically handling the animation of the arrow from the starting value to the ending value. To avoid unpredictable behavior in our program, we disable the arrow head’s response to clicks until the Tween animation has completely finished, which we signal to the user by finally displaying the result of the spin.

Download

Download the fla file for this tutorial below:

Setting up the stage

In order to keep the script focused on the tweening, we create the following interactive objects on the stage at authoring time. If you are new to this part of Flash development, open the accompanying fla file and explore the elements on the stage.

  • The stage should contain an arrow drawn as a horizontal line segment of lenght 50px with a small filled triangle on the right end. The graphic should be converted to MovieClip (Modify > Convert to Symbol) with its registration point on the left end. The arrow on the stage should have its left end aligned with the center of the square (described above), and the arrow MovieClip should have the name mcArrow to be consistent with the script below.
  • The stage should contain a square that is 140 pixels on a side positioned with x=70 and y=50. The coordinates are important so that we can place our arrow clip exactly in the center. Create this using the Rectangle tool and the Properties panel, and make it any color that will contrast with the arrow. If you size and place the square with these properties, then your mcArrow will have x=140, y=120.
  • The stage should contain a dynamic textbox with instance name txtCount placed on the stage to display the result of each spin.

Aside from any instructions you want to add with static text, you are now ready to write code in the Actions panel.

The code for the file GameSpinner.fla

The following import statements must be in your file so that various aspects of AS3 tweening will work. The variable randomnumber will be the randomly generated spinner value -- it has global scope so that it can be used once for the Tween settings and then later for display in the txtCount textbox.

import fl.transitions.Tween;

import fl.transitions.TweenEvent;

import fl.transitions.easing.*;

 

txtCount.background=true;

var randomnumber:Number;

We create the Tween object generically (i.e., not based on an actual spin) and immediately stop the Tween animation from playing. Unlike a Timer object, a Tween object immediately starts to “play” when it is created, and we will wait until the user clicks the arrow to start the animation. For more on the choices for built-in easing functions, see the Intermediate area tutorial referenced above.

var tw:Tween = new Tween(mcArrow,"rotation",Strong.easeOut, 0, 360, 3, true);

tw.stop();

The line below has the Tween object listen for the MOTION_FINISHED event so the final result of the spin can be displayed only after the spin has completed. The spinStopped function performs the three things to do when the spinning motion have finished: change the text background back to white, display the result of the spin, and make the arrow clickable again so another spin can be made.

tw.addEventListener(TweenEvent.MOTION_FINISH, spinStopped);

 

function spinStopped(twevt:TweenEvent):void {

txtCount.backgroundColor = 0xFFFFFF;

txtCount.text = String(randomnumber);

mcArrow.addEventListener(MouseEvent.CLICK, spin);

}

The next lines form the meat of the program, executed when the mcArrow object is clicked. Here we pick our random number from 1 to 8, display the text "Spinning...", set the beginning and ending values for the Tween object, and let it start playing. Note that setting the beginning and ending values override the previously set values. Also note that we randomly make the spinner make 1 or 2 complete turns (controlled by the numturns variable)

mcArrow.addEventListener(MouseEvent.CLICK, spin);

 

function spin(mevt:MouseEvent):void {

var numturns:int = Math.ceil(2*Math.random());

randomnumber = Math.ceil(8*Math.random());

 

// The line below makes the arrow "unclickable" while the Tween is playing.

mcArrow.removeEventListener(MouseEvent.CLICK, spin);

 

// We display "Spinning..." with a pink background while the Tween is playing.

txtCount.text = "Spinning...";

txtCount.backgroundColor = 0xFF9999;

 

// Tween starts with current rotation value & ends at correct value after 1

// or 2 complete turns

tw.begin = mcArrow.rotation;

tw.finish = numturns*360 + randomnumber*45;

tw.start();

}

Back to AS3 How To and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.