Fun with Tween Class and some combobox!

This topic will talk about how we can play with Tween Class from flash actionscript 3.0.

1. create a ball and convert it to simbol like this picture.

2. Create new two as file first file save its name simpleTween.as and second for ballExt.as
simpleTween.as is the main control of this project and ballExt.as we will assign this class to ball simbol that we had created befor.

3. add this code to simpleTween.as

package
{
import flash.events.MouseEvent;
import flash.display.Sprite;
import flash.events.Event;
import fl.controls.ComboBox;
import flash.display.Stage;
import fl.transitions.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
public class simpleTween extends Sprite
{
private var ball_ins:ball;
private var ballArr:Array = new Array();
private var cb:ComboBox = new ComboBox();
private var __stage:Stage;
private var radian:Number = 120;
private var __time:uint=2;
private var twFn:Function;
private var ballCount:Number=30;
public function simpleTween(st:Stage)
{
__stage = st;
for (var i:Number =0; i
{
ball_ins = new ball();
ballArr[i]=ball_ins;
addChild(ballArr[i]);
ballArr[i].visible = false;

}
/////////////////////create new ball object to stage 30 object if you want more ball change the value of ballCount
var childs:Sprite = new Sprite();
childs.graphics.beginFill(0);
childs.graphics.lineStyle(0, 0);
childs.graphics.drawRect(0, 0, __stage.stageWidth,__stage.stageHeight);
childs.graphics.endFill();
childs.alpha=0;
addChild(childs)
////////////////////////create blank rect when click on it balls will flow on stage
addChild(cb);
cb.setSize(155, 22);
cb.addItem( { label: "Strong.easeIn", data:1 } );
cb.addItem( { label: "Strong.easeOut", data:2 } );
cb.addItem( { label: "Strong.easeInOut", data:3 } );

cb.addItem( { label: "Regular.easeIn", data:4 } );
cb.addItem( { label: "Regular.easeOut", data:5 } );
cb.addItem( { label: "Regular.easeInOut", data:6 } );

cb.addItem( { label: "None.easeIn", data:7 } );
cb.addItem( { label: "None.easeOut", data:8 } );
cb.addItem( { label: "None.easeInOut", data:9 } );

cb.addItem( { label: "Elastic.easeIn", data:10 } );
cb.addItem( { label: "Elastic.easeOut", data:11 } );
cb.addItem( { label: "Elastic.easeInOut", data:12 } );

cb.addItem( { label: "Bounce.easeIn", data:13 } );
cb.addItem( { label: "Bounce.easeOut", data:14 } );
cb.addItem( { label: "Bounce.easeInOut", data:15 } );

cb.addItem( { label: "Back.easeIn", data:ballCount } );
cb.addItem( { label: "Back.easeOut", data:17 } );
cb.addItem( { label: "Back.easeInOut", data:18 } );
cb.selectedIndex = 10;
//////////////assign data to combobox all data are the tween function you will choose the function for animate the ball
twFn = fl.transitions.easing.Elastic.easeOut;
cb.addEventListener(Event.CHANGE, FnSelected);
childs.buttonMode = true;
childs.addEventListener(MouseEvent.CLICK,startAnimFn);
///////add listenner to the blank rect
}
private function FnSelected(e:Event):void { // when the combobox was change the Tween function will change follow the combobox
switch (cb.selectedItem.data)
{
case 1: twFn = fl.transitions.easing.Strong.easeIn; break;
case 2: twFn = fl.transitions.easing.Strong.easeOut; break;
case 3: twFn = fl.transitions.easing.Strong.easeInOut; break;
case 4: twFn = fl.transitions.easing.Regular.easeIn; break;
case 5: twFn = fl.transitions.easing.Regular.easeOut; break;
case 6: twFn = fl.transitions.easing.Regular.easeInOut; break;
case 7: twFn = fl.transitions.easing.None.easeIn; break;
case 8: twFn = fl.transitions.easing.None.easeOut; break;
case 9: twFn = fl.transitions.easing.None.easeInOut; break;
case 10: twFn = fl.transitions.easing.Elastic.easeIn; break;
case 11: twFn = fl.transitions.easing.Elastic.easeOut; break;
case 12: twFn = fl.transitions.easing.Elastic.easeInOut; break;
case 13: twFn = fl.transitions.easing.Bounce.easeIn; break;
case 14: twFn = fl.transitions.easing.Bounce.easeOut; break;
case 15: twFn = fl.transitions.easing.Bounce.easeInOut; break;
case ballCount: twFn = fl.transitions.easing.Back.easeIn; break;
case 17: twFn = fl.transitions.easing.Back.easeOut; break;
case 18: twFn = fl.transitions.easing.Back.easeInOut; break;
}
}
private function startAnimFn(m:MouseEvent)////////when you click on stage(blank rect) this function will called
{
__time=randRange(10,20)/10; //set time of tween class the ball will flow fast or slow cos this line I use random function
for (var i:Number =0; i
{
var sc:Number=randRange(1,10)/10;
var xp:Number=randRange(m.stageX-radian,m.stageX+radian);
var yp:Number=randRange(m.stageY-radian,m.stageY+radian);
ballArr[i].visible = true;

ballArr[i].playFn(m.stageX,m.stageY,xp,yp,sc,sc,randRange(1,10)/10,__time,twFn);//call playFn function inside the ballExt class this function will call tween class to Animate the ball
}
}
private function randRange(min:Number, max:Number):Number
{
var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}

}
}

4. add this code to ballExt.as
package
{
import flash.display.Sprite;
import fl.transitions.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
public class ballExt extends Sprite
{
var xTween:Tween;
var yTween:Tween;
var xscTween:Tween;
var yscTween:Tween;
var alphaTween:Tween;
public function ballExt()
{
}
public function playFn(stX:Number,stY:Number,xpos:Number,ypos:Number,xsc:Number,ysc:Number,__alpha:Number,_time:Number,twFn)
{
xTween = new Tween(this, "x", twFn, stX, xpos, _time, true);
yTween = new Tween(this, "y", twFn, stY, ypos, _time, true);
xscTween = new Tween(this, "scaleX", twFn, 0, xsc, _time, true);
yscTween = new Tween(this, "scaleY", twFn, 0, ysc, _time, true);
alphaTween = new Tween(this, "alpha", twFn, 0, __alpha, _time, true);
}
}
}

xTween = new Tween(this, "x", twFn, stX, xpos, _time, true);
this line create new tween instances and store them as the variables xTween . The Tween class constructor requires seven parameters, which are in order:

1. object – The instance of an object in which to apply the tween. This can be any object, and is not just limited to movie clips.

2. property – The numeric property of the previous object in which to Tween. The property name is passed to the constructor as a string.

3. ease class and method – The type of tween and the method of ease applied to it. Flash comes bundled with 6 easing classes:

   1. Back – Extends the animation over one or both ends of the tween.

   2. Bounce – Creates a bouncing effect in the tween at one or both ends.

   3. Elastic – Creates a mixture of the bounce and back classes. The animation is extended over and bounces back at one or both ends of the Tween.

   4. Regular – Slower motion at one or both ends of the tween.

   5. Strong – Similar to regular but is more pronounced when combined with the various easing methods.

   6. None – A simple linear transition from a to b.

These six easing classes each have three methods to control the ease:

1. easeIn – The ease is applied only at the start of the tween.

2. easeOut – The ease is applied only at the end of the tween.

3. easeInOut – The ease is applied at both the beginning and end of the tween.

By combing the six easing classes with the three easing methods, we can create a possible 18 different effects for each property.

4. begin – The beginning value for the property in the tween.

5. end – The end value for the property in the tween.

6. duration – The duration of the tween. This value can either be specified as a number of frames or a number of seconds depending on the value of the next parameter.

7. use seconds – Specifies whether or not the duration parameter should be measured in frames or seconds. Requires a Boolean of either true (use seconds) or false (use frames).

Last .On the main time line add this code to first frame

import simpleTween;
var smTw:simpleTween = new simpleTween(stage);
addChild(smTw);


down load full code here !

this project will use full for a dynamic animate that can interactive with user .
Without time line animation we will get a smaller file.

Hudsadin keox