Sample code from today's class on AS3 Tweens (2011-02-17)

I talked about the AS3 Tween class today and how it can be used to create motion tweens using AS3 code. For the example discussed in class, I used a for loop to create multiple sprite instances, and multiple tween objects to animate those sprites. The size, color and movement properties of each moving sprite were randomized as well. I also talked about the MOTION_FINISH event related to the AS3 Tween class, and how it can be used with the yoyo() method to make the tweens loop back and forth. Some of my students asked if I could post the sample code from our session today about the AS3 Tween class, so I'm posting it here. I also created another version that has more randomized properties. The AS3 Tween class is great for creating simple motion tween animations using code.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.Sprite;

var nSprites:Number = 25;
var aSprites:Array = new Array();
var aTweenX:Array = new Array();
var aTweenY:Array = new Array();

for (var i:Number = 0; i < nSprites; i++)
{
     var nRadius:Number = Math.random() * 25 + 10;
     var nColor:Number = Math.random() * 0xFFFFFF;
     var nStartX:Number = Math.random() * stage.stageWidth;
     var nEndX:Number = Math.random() * stage.stageWidth;
     var nStartY:Number = Math.random() * stage.stageHeight;
     var nEndY:Number = Math.random() * stage.stageHeight;

     aSprites[i] = new Sprite();

     aSprites[i].graphics.beginFill(nColor);
     aSprites[i].graphics.drawCircle(0,0,nRadius);
     aSprites[i].graphics.endFill();
     
     addChild(aSprites[i]);

     aTweenX[i] = new Tween(aSprites[i], "x", Elastic.easeInOut, nStartX, nEndX, 3, true);
     aTweenY[i] = new Tween(aSprites[i], "y", Elastic.easeInOut, nStartY, nEndY, 7, true);

     aTweenX[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
     aTweenY[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
}

function onMotionFinish(e:TweenEvent):void
{
 e.target.yoyo();
}

Here's another version with even more randomization. The duration for each tween is randomized. The easing used is also randomized. The different easing functions are placed in an Array. Then we get a random number that's anywhere from 0 to the highest index value in the array, and use that to retrieve an easing type randomly from the easing functions Array:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.Sprite;

var nSprites:Number = 25;
var aSprites:Array = new Array();
var aTweenX:Array = new Array();
var aTweenY:Array = new Array();
var aEasing:Array = new Array(None.easeNone, Back.easeIn, Back.easeOut, Back.easeInOut, Bounce.easeIn, Bounce.easeOut, Bounce.easeInOut, Elastic.easeIn, Elastic.easeOut, Elastic.easeInOut, Regular.easeIn, Regular.easeOut, Regular.easeInOut, Strong.easeIn, Strong.easeOut, Strong.easeInOut);

for (var i:Number = 0; i < nSprites; i++)
{
     var nRadius:Number = Math.random() * 25 + 10;
     var nColor:Number = Math.random() * 0xFFFFFF;
     var nStartX:Number = Math.random() * stage.stageWidth;
     var nEndX:Number = Math.random() * stage.stageWidth;
     var nStartY:Number = Math.random() * stage.stageHeight;
     var nEndY:Number = Math.random() * stage.stageHeight;
     var nDurationX:Number = Math.random() * 5 + 2;
     var nDurationY:Number = Math.random() * 5 + 2;
     var nEasingX:Number = Math.floor(Math.random() * aEasing.length);
     var nEasingY:Number = Math.floor(Math.random() * aEasing.length);

     aSprites[i] = new Sprite();

     aSprites[i].graphics.beginFill(nColor);
     aSprites[i].graphics.drawCircle(0,0,nRadius);
     aSprites[i].graphics.endFill();

     addChild(aSprites[i]);

     aTweenX[i] = new Tween(aSprites[i], "x", aEasing[nEasingX], nStartX, nEndX, nDurationX, true);
     aTweenY[i] = new Tween(aSprites[i], "y", aEasing[nEasingY], nStartY, nEndY, nDurationY, true);

     aTweenX[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
     aTweenY[i].addEventListener(TweenEvent.MOTION_FINISH, onMotionFinish);
}

function onMotionFinish(e:TweenEvent):void
{
     e.target.yoyo();
}