In the balloon applet below, we tween the 'dummy' property 't' of a 'dummy' object 'paramObj' just as on the previous pages. Then we use the tweened values of 't' and a couple of well-chosen functions to imitate the motion of a balloon. The most interesting part is the interplay bewteen event listeners. We add and remove several listeners that listen to tween events and other events.
Download
Download the fla file for the applet above.
The Code
// The following classes are needed for this application.
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
// We set the easing function here so we can easily make changes.
var curEase:Function = Bounce.easeOut;
/*
This object is the key idea in this tutorial. This construct creates an
object called paramObj with a single property t that is initially set to 0.
We will be tweening the t property of this object and then tying the motion of the
balloon to this changing property.
*/
var paramObj:Object = {t:0};
// We need a global variable for the location of where the balloon is released.
var releasePoint:Point = new Point();
/*
We use a global variable for the tween that will be created when the user drags and
releases the balloon (or mouses outside of the black region while dragging the balloon).
*/
var tw:Tween;
/*
We create a Sprite spBoard. We will draw the black rectangle in spBoard
and we will add the balloon as a child of spBoard. We need spBoard
to control mouse events precisely and avoid unpredictable behavior
when the user presses over the balloon and then mouses away
from the Stage without releasing the mouse button. A listener
to ROLL_OUT event attached to spBoard will take care
of such undesirable effect.
*/
var spBoard:Sprite=new Sprite();
this.addChild(spBoard);
spBoard.x=10;
spBoard.y=10;
/*
BallonClip is stored in the Library and linked to AS3. We are
creating an instance of BalloonClip below and store it in the variable
mcBalloon.
*/
var mcBalloon:BalloonClip= new BalloonClip();
spBoard.addChild(mcBalloon);
mcBalloon.x=97;
mcBalloon.y=0;
//We call a function that draws the black rectangle in spBoard.
drawBoard();
/*
When the mouse is pressed down on the balloon, we start to drag the balloon.
Also, we add a listener for the MOUSE_UP event to the stage and a listener to ROLL_OUT
to spBoard.
*/
mcBalloon.addEventListener(MouseEvent.MOUSE_DOWN, moveBalloon);
function moveBalloon(evt:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_UP, letGo);
spBoard.addEventListener(MouseEvent.ROLL_OUT,letGo);
mcBalloon.startDrag(false, new Rectangle(0,0,460,288) );
}
/*
When the balloon is released, we record the release point in screen coordinates
so we can use this information in the motion. We stop the dragging of the balloon
and start the tween attached to the paramObj. As the paramObj.t property is changed,
the balloon is moved by the moveBalloon function. We remove all listeners
except for those attached to the tween. The listeners will be restored when the tween finishes.
*/
function letGo(mevt:MouseEvent):void {
releasePoint.x = mcBalloon.x;
releasePoint.y = mcBalloon.y;
mcBalloon.stopDrag();
/*
Constructing (and starting) the tween that runs paramObj.t from 0 to 100
over a 5 second period.
*/
tw = new Tween(paramObj, "t", curEase, 0, 100, 5, true);
tw.addEventListener(TweenEvent.MOTION_CHANGE, floatUp);
tw.addEventListener(TweenEvent.MOTION_FINISH, stopFloat);
// Stop listening for mouse events. These will be restored
// when the tween motion has finished.
mcBalloon.removeEventListener(MouseEvent.MOUSE_DOWN, moveBalloon);
stage.removeEventListener(MouseEvent.MOUSE_UP, letGo);
spBoard.removeEventListener(MouseEvent.ROLL_OUT,letGo);
}
/*
Get the coordinates of the moving balloon from the function 'f' defined
later in the script.
*/
function floatUp(tevt:TweenEvent):void {
mcBalloon.x = f(paramObj.t).x;
mcBalloon.y = f(paramObj.t).y;
}
/*
When the tween motion is finished we remove the listeners from tw and
start listening for the MOUSE_DOWN event again.
*/
function stopFloat(tevt:TweenEvent):void {
tw.removeEventListener(TweenEvent.MOTION_CHANGE, floatUp);
tw.removeEventListener(TweenEvent.MOTION_FINISH, stopFloat);
mcBalloon.addEventListener(MouseEvent.MOUSE_DOWN, moveBalloon);
}
/*
We can move the balloon in terms of any equations of a single parameter t.
The equations we chose seem to best imitate the motion of a balloon.
*/
function f(t:Number):Point {
var thisX:Number = releasePoint.x + 25*Math.sin(Math.PI/50*t);
var thisY:Number = releasePoint.y * (1-t/100);
if(thisX>460){
thisX=460-Math.abs(25*Math.sin(Math.PI/50*t));
}
if(thisX<0){
thisX=Math.abs(25*Math.sin(Math.PI/50*t));
}
if(thisY>288){
thisY=288;
}
return (new Point(thisX, thisY) );
}
function drawBoard():void {
spBoard.graphics.lineStyle(1,0x000000);
spBoard.graphics.beginFill(0x000000);
spBoard.graphics.drawRect(0,0,530,380);
spBoard.graphics.endFill();
}
On the next page, we show a couple of tricks for tweening text.
