iGeeks

June 20th, 2004

A Touch Of Tween with AS2

Flash, as a product, has gone through tremendous changes in the past few years. Slowly but surely two user groups emerging from this churning process. The traditional vector graphics designer suddenly finds amongst his midst, numerous web and enterprise application developers using Flash to create rich user interfaces. There is promise in collaboration between the groups as the symbiotic relationship can usher in an era of attractive and responsive user interfaces of enterprise apps making it a rule rather than the exception.

However, there needs to be certain level of interaction between the two groups that attempts to build confidence and discover the other group’s way of doing the same things. I thought tweening would be a good subject simply because for a lot, Flash is still synonymous with tweening.

While using onEnterFrame is still an option for tweening movieclips thru actionscript, there is a better alternative that provides you with more options and control in Flash MX 2004 if you are using AS2. Yes, I am talking of the Tween class of the mx.transitions package.

flash/TweenClass/”>View Demo
(you may need to wait a bit for download on a slow connection)

What follows is an attempt to use this Tween class for our personal consumption!!!

TweenClass.fla

We start by creating a new Flash MX 2004 project (a good practice, however small your project might seem initially). This would help us organise files involved in the project plus utilize a new feature!!! Let?s name the project TweenClass.flp. Good, now let?s get down to the flash movie, shall we? Create a new Flash document and lets name it ..err.. TweenClass.fla. Did I hear you say something to the tune of ?how imaginative!!!?? We need to include the TweenClass.fla in our project, so right click you project folder and using the Add File option, do your own thing.

Our primary focus is in the script we are going to write, right? So, we create our TweenClass.as file in the same directory, not to mention add the file to our flash project. And I did hear you snigger.

We can make this very easy for us by using just the Tween class and a movieclip but that would not satisfy our hunger for fun, would it? So we will use some components as well. Don?t worry, they are the default components that bundle with your copy of Flash trial, so there are no third party downloads to contend with. Drag the following components to the stage and name them the following.

Don?t worry if ?tweening property?, ?initial value?and ?finish value? has got you confused. It?ll soon be clear when we use our all-important Tween class. And then you can always refer the finished TweenClass.fla for reference. Also create a new MovieClip symbol and name it ?rect1? (instance name). You don?t necessarily have to create a rectangle in the movieclip but it would be nice to associate the shape with the name.

Lets get to the code. For the sake of simplicity we shall not create a separate MovieClip and associate it with a class (but highly recommended++ when developing large apps), but write our code in our separate ?TweenClass.as? file and ?#include TweenClass.as? it from the main timeline.

TweenClass.as

//import statements
import mx.transitions.Tween; // Our all important 'Harry Potter' like Tween class
import mx.controls.Button; 
import mx.controls.ComboBox;
import mx.controls.Label;
import mx.controls.TextInput;

The above lines are used to import the classes that we are going to use. By that I mean, I am borrowing the functionality of the classes (their definitions, methods, properties etc) in our application (if we could call it that). By importing, we get to call our classes by just the class name rather than fully qualifying them everytime we require. Eg. ?Tween? instead of ?mx.transitions.Tween?. I hope that one day this would be extended to some of my very good friends from South India as well. Aha.. did you notice mx.transitions.Tween? So we are going to get our money?s worth after all.

// Variable references
var tweenStart_pb :Button ; // PushButton that fires our app
// Labels used
var tweenProp_lbl :Label ;
var startVal_lbl :Label ;
var endVal_lbl :Label ;
var duration_lbl :Label ;
//
var tweenProp_cb :ComboBox ; // Visually contains movieclip properties that can be tweened
var startVal_txt :TextInput ; // Container for user defined initial value / beginWith
var endVal_txt :TextInput ; // Container for user defined ending value / finishWith
var duration_txt :TextInput ; // Container for user defined duration value in seconds
//
var rect1_Tween :Tween ; // Tween reference 
var rect1 :MovieClip ; // Movieclip to be tweened
//
var tweenPropData :Array = new Array(); // Dataprovider for ComboBox

The above lines are responsible for telling Flash that our application is going to use some variables of certain type. Eg. rect1_Tween (instance) of Tween (class) type. Note that variable references include some of our UI Component friends as well. Eg. tweenProp_cb of the ComboBox fame.

// init() function to initialize our app
function init() :Void
{
	tweenStart_pb.addEventListener("click", this.beginTweening); //register listener for button
	tweenProp_cb.addEventListener("change", this.changeTween); // register listener for combobox	
	tweenProp_cb.dataProvider = buildTweenProperties(); // build and assign data to combobox
	//
	var item = tweenProp_cb.selectedItem; // get default selectedItem of combobox
	//
	changeTween(); // used to populate textinput boxes
	//
	// associate Tween class instance with rect1 movieclip and pass initial values
	// rect1 IS target of our tween. Here, its a MovieClip
	// item.label IS movieclip property to be tweened
	// null IS tweening function -- uses default function. 
	// item.data.startVal IS the initial value of the movieclip property that i wish to tween and start with
	// item.data.endVal IS the finishing value of the movieclip property that i wish to tween and finish with
	// item.data.duration IS the duration of the tween in seconds
	// true IS the boolean value that tells that i wish to use to duration rather than the movie FPS
	rect1_Tween = new Tween(rect1, item.label, null, item.data.startVal, item.data.endVal, item.data.duration, true);
	//	
	rect1_Tween.FPS = 20; // set the target movieclip's FPS for smooth playback
	rect1_Tween.stop(); // stop the tween from starting during initialisation
	//	
	rect1_Tween.addListener(this); // register the Tween class instance for events
}

The init() function?s main objective is to set up our app. It does so by registering event handlers for our UI Components, providing the combobox with a dataprovider to gorge upon etc. Eg. Clicking the button fires the ?click? event (and you blamed me for being unimaginative!!!) which is handled by the beginTweening method lying patiently in the main timeline.

The main source of curiosity is the Tween class instance named rect1_Tween. While instantiating it, we pass our initial values to the constructor. As we can see from the comments in the code, this not only associates our Tween class instance with a MovieClip but also provides it with data as to what its goal is. So if this app would not have been as advanced as it is (there was no need for the guffaw), we could have passed static values to the constructor and it would quietly follow our oh-so-unchanging order of tweening the ?_alpha? property from 100 to 10 over 5 seconds.

For Eg. rect1_Tween = new Tween(rect1, “_alpha”, null, 100, 10, 5, true);

// Build the dataprovider for the ComboBox in Array format
function buildTweenProperties() :Array
{
	// label contains tweening property :String
	// data contains tweening values :Object
	tweenPropData.addItem({label: "_alpha", data: {startVal:100, endVal:30, duration:4}});
	tweenPropData.addItem({label: "_x", data: {startVal:80, endVal:320, duration:4}});
	tweenPropData.addItem({label: "_y", data: {startVal:100, endVal:300, duration:4}});
	tweenPropData.addItem({label: "_xscale", data: {startVal:20, endVal:500, duration:4}});
	tweenPropData.addItem({label: "_yscale", data: {startVal:20, endVal:500, duration:4}});
	tweenPropData.addItem({label: "_rotation", data: {startVal:0, endVal:360, duration:4}});
	//	
	return tweenPropData;
}

The buildTweenProperties function returns an Array which is very convenient for the ComboBox component to populate itself with. This function is called once during the execution of the init function.

// Executed when Button is click'ED'
function beginTweening() :Void
{
	rememberTweenProperties(); // small function to remember user defined tweening values
	//	
	var item = tweenProp_cb.selectedItem;	
	rect1_Tween.prop = item.label;
	//	
	// cast String values returned by .text to Number
	rect1_Tween.duration = Number(duration_txt.text); 
	rect1_Tween.begin = Number(startVal_txt.text);
	rect1_Tween.position = Number(startVal_txt.text);
	rect1_Tween.finish = Number(endVal_txt.text);
	//	
	rect1_Tween.start(); // start the tween!!!
}
// Executed when ComboBox is change'D'
function changeTween() :Void
{
	var item = tweenProp_cb.selectedItem;
	startVal_txt.text = item.data.startVal;
	endVal_txt.text = item.data.endVal;
	duration_txt.text = item.data.duration;
}

The beginTweening() and changeTween() functions are basically registered as eventHandlers. The init function registered them to listen for activity and respond appropriately.

The changeTween() function is executed when the combobox selection changes. This results in fetching the selectedItem of the ComboBox and subsequently changing the values in the start_txt, endVal_txt and duration_txt TextInput components by setting its ?text? setter property.

The beginTweening() function is executed when one clicks the button. This causes the Tween class instance to change the movieclip property to be tweened and also other user defined values like startingValue, finishValue and duration from the TextInput component. The start() function of the Tween class instance initiates the tweening process.

// Lame Artificial Intelligence function 
function rememberTweenProperties() :Void
{
	var ndx = tweenProp_cb.selectedIndex;
	// target the dataprovider of the combobox
	tweenPropData[ndx].data.startVal = startVal_txt.text;
	tweenPropData[ndx].data.endVal = endVal_txt.text;
	tweenPropData[ndx].data.duration = duration_txt.text;
}
// Event of Tween class instance, fires when the tween has finished
function onMotionFinished() :Void
{
	rect1_Tween.yoyo(); // causes the tween to loop just like a ..err... yoyo
}
init(); // initialize me this instant!

rememberTweenProperties() is present to remember the user defined values for the movieclip property being tweened. Note that even though it affects the array that is acting as the dataProvider for the comboBox, the changes are reflected in the comboBox as well as dataProvider in reality is a reference to the Array and not a distinct copy.

The onMotionFinished() function is broadcasted by the Tween class instance when it has finished tweening the desired movieclip property to the ?finishingValue over time ?duration?. The yoyo() function causes the tween to loop infinitely.

flash/TweenClass/”>View the Demo, download the sample files
(you may need to wait a bit for download on a slow connection)

Brajeshwar