A Balloon Effect

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.

Back to Intermediate Tutorials              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.