Previous Project | Next Project

Tween Demo

Tweens are a tool used for animating movement in Flash and other platforms. You can set a start and end position for your animation, and a tween will create all the frames in between without you having to draw them all.

I decided it would be useful to create a demo to show all the different tweens that are available in AS3, so that one could see what it looks like before using it on an object.

Since creating this demo, I have found the Tween class in Flash to be pretty basic and slow in performance. I usually use my own tweener or TweenMax or TweenLite.

You must select a tween, ease and property before clicking the Go! button.

Source Code


package {

import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import fl.controls.Button;
import fl.controls.List;
import fl.controls.Slider;
import fl.controls.CheckBox;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.net.URLRequest;
import flash.net.navigateToURL;


public class TweenDemo extends Sprite {


var controlY : int = 460; // coords of controls
var guitarBD : Guitar = new Guitar(225, 73);
var guitarB : Bitmap = new Bitmap(Guitar(guitarBD));
var guitar : Sprite = new Sprite();
var homeX : int = 10 + guitarB.width / 2; // starting values for guitar
var homeY : int = 10 + guitarB.height / 2;
var endX : int = stage.stageWidth - guitarB.width / 2 - 10; // ending point for guitar
var endY : int = controlY - guitarB.height / 2 - 30;
var tweenL : List = new List(); // list of tweens
var tweenS : Array = new Array("None", "Regular", "Strong", "Back", "Bounce", "Elastic");
var easeL : List = new List(); // list of ease types
var easeS : Array = new Array("easeIn", "easeOut", "easeInOut");
var propertyL : List = new List(); // list of properties
var propertyS : Array = new Array("x", "y", "rotation", "alpha", "scaleX", "scaleY");
var durationS : Slider = new Slider(); // duration slider
var reverseC : CheckBox = new CheckBox(); // reverse start and end values checkbox
var goB : Button = new Button(); // button to run the tween


function TweenDemo() {

var i : int;

// add the guitar to the stage
guitarB.x = -guitarB.width / 2;
guitarB.y = -guitarB.height / 2;
guitar.addChild(guitarB);
addChild(guitar);
guitar.x = homeX;
guitar.y = homeY;
// add tween type listbox
for (i = 0; i < tweenS.length; i++) {
tweenL.addItem( {label: tweenS[i]} ); }
tweenL.rowCount = tweenS.length;
tweenL.allowMultipleSelection = true;
tweenL.x = 10; tweenL.y = controlY;
addChild(tweenL);
addLabel(tweenL.x, tweenL.y - 20, "Select tween *");
// add ease type listbox
for (i = 0; i < easeS.length; i++) {
easeL.addItem( {label: easeS[i]} ); }
easeL.rowCount = easeS.length;
easeL.x = tweenL.x + tweenL.width + 10; easeL.y = controlY;
addChild(easeL);
addLabel(easeL.x, easeL.y - 20, "Select ease");
// add properties listbox
for (i = 0; i < propertyS.length; i++) {
propertyL.addItem( {label: propertyS[i]} ); }
propertyL.rowCount = propertyS.length;
propertyL.allowMultipleSelection = true;
propertyL.x = easeL.x + easeL.width + 10; propertyL.y = controlY;
addChild(propertyL);
addLabel(propertyL.x, propertyL.y - 20, "Select property *");
// add duration slider
durationS.minimum = 1;
durationS.maximum = 10;
durationS.value = 3;
durationS.x = propertyL.x + propertyL.width + 10;
durationS.y = controlY + 10;
durationS.width = 180;
addChild(durationS);
addLabel(durationS.x, durationS.y - 25, "Select duration (1-10 seconds)");
// add reverse begin/end checkbox
reverseC.label = "";
reverseC.x = durationS.x;
reverseC.y = controlY + 40;
addChild(reverseC);
addLabel(reverseC.x + 20, reverseC.y, "Reverse begin and end values");
// add the Go button
goB.label = "Go!";
goB.x = durationS.x + 50; goB.y = controlY + 80;
addChild(goB);
goB.addEventListener(MouseEvent.MOUSE_DOWN, doTween);
addLabel(10, stage.stageHeight - 20, "* Press CTRL and mouse button to select multiple tweens or properties");
addLabel(stage.stageWidth - 115, 0, "By: Hooman Row");
}

// prints a label, given x/w coords and string
public function addLabel(x : int, y : int, s : String) {

var t : TextField = new TextField;

t.defaultTextFormat = new TextFormat(null, 15, 0xFFFFFF);
t.x = x; t.y = y; t.text = s;
t.autoSize = TextFieldAutoSize.LEFT;
t.selectable = false;
addChild(t);
}

// execute all the selected tweens, ease and properties
public function doTween(e : MouseEvent) {

if (guitar.alpha == 0 && !(3 in propertyL.selectedIndices)) guitar.alpha = 1;

if (tweenL.selectedIndex < 0 || easeL.selectedIndex < 0 || propertyL.selectedIndex < 0) {
var js : String = "alert('You must select a tween, ease and property first!');";
var url : URLRequest = new URLRequest("javascript:" + js + " void(0);");
navigateToURL(url, "_self");
return;
}

var sT : String;
var sE : String;
var sP : String;
var i : int; var j : int; var temp : int;
var obj : Object;
var begin : int; var end : int;

for (i = 0; i < tweenL.selectedIndices.length; i++) {
sT = tweenS[tweenL.selectedIndices[i]];
sE = easeS[easeL.selectedIndex];
switch (sT) {
case "None": obj = None; break;
case "Regular": obj = Regular; break;
case "Strong": obj = Strong; break;
case "Back": obj = Back; break;
case "Bounce": obj = Bounce; break;
case "Elastic": obj = Elastic; break; }
for (j = 0; j < propertyL.selectedIndices.length; j++) {
sP = propertyS[propertyL.selectedIndices[j]];
switch(sP) {
case "x": begin = homeX; end = endX; break;
case "y": begin = homeY; end = endY; break;
case "rotation": begin = guitar.rotation; end = begin + 900; break;
case "alpha": begin = 1; end = 0; break;
case "scaleX": begin = 1; end = 2; break;
case "scaleY": begin = 1; end = 2; break;
}
if (reverseC.selected) {
temp = begin; begin = end; end = temp; }
var t : Tween = new Tween(guitar, sP, obj[sE], begin, end, durationS.value, true);
}
}
}

}

}