Tutorials

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();
}

- As3 Random Numbers Generator
Here's an AS3 random numbers generator that I wrote a while back, and I thought I'd share it. I explain how to use it after the code. var allNumbers:Array = new Array(); var randomNumbers:Array = new Array(); var highest:int = 55; var pick:int...

- The Flash As3 Tween Class
In this tutorial, we're going to learn how to use the Flash AS3 Tween Class. The tween class lets you create tween animation using code. Step 1 Let's first create a movie clip that we will use with our ActionScript 3 tween. Draw a small circle...

- The As3 'this' Keyword And How To Randomize The Size Of A Movieclip Instance On The Stage
In this lesson, we'll learn about the this keyword. But before I explain what the this keyword is, let's first recall that we can put some ActionScript code on keyframes in the main timeline. But we can also put some ActionScript code on the keyframes...

- Retreiving The Index Value Of An Item In An Array In Flash As3
In AS3, you can retrieve the index value of an item in an array by using the indexOf() method of the Array class. Let's take a look at an example: var aPets:Array = new Array("dog", "cat" , "hamster", "turtle");This creates an array named aPets, which...

- Creating Multiple Textfields And Positioning Them Using Arrays And For Loops In Flash Actionscript 3.0
In this tutorial, we are going to learn how to create multiple text fields and how to position them in different locations using an array and a for loop in Flash using ActionScript 3. Go ahead and create a new Flash ActionScript 3.0 document. Select frame...

Tutorials