In this tutorial we will create a simple class that use the original Tween class which already comes with flash, the class we are going to create will simplify your timeline animation such as fading, resizing, rotating, and it can be upgraded to a class that contains functions to handle the flash 8 filters to animate like blur, drop shadow, glow ect, and it will be a future tutorial that you will see here on AS[org], the main idea is when we need a fading effects we just call a function with some parameters, and if this animation is done we need to call another function that will handle something else, now lets take a look at the example below and and after see how this class work.

Example:



in the example above we have four squares and each one have a simple rollover rollout event, lets take a look at the code.

the code:

var te = new tweenEffects();
s1_mc.onRollOver = function() {
 te.fadeOut(this);
};
s1_mc.onRollOut = function() {
 te.fadeIn(this);
};
s2_mc.onRollOver = function() {
 te.changeWH(this, 70, 70);
};
s2_mc.onRollOut = function() {
 te.changeWH(this, 100, 100);
};
s3_mc.onRollOver = function() {
 te.changeRotation(this, 90);
};
s3_mc.onRollOut = function() {
 te.changeRotation(this, 0);
};
s4_mc.onRollOver = function() {
 te.fadeTo(this,50);
 te.changeXYscale(this, 80, 80);
 te.changeRotation(this, -90);
};
s4_mc.onRollOut = function() {
 te.fadeTo(this,100);
 te.changeXYscale(this, 100, 100);
 te.changeRotation(this, 0);
};


now as you can see we have defined an object of our class tweenEffects and we used it for all or movie clips on the stage, and you can directly know what's going on by reading the function name that is called like fadeOut that mean the movie passed in parameter will fade out when the mouse rollover the movie clip pretty simple eh!

now lets take a look at the code of our class:

the class:

/* tween effects class writen by Amen Kamaleldine 2006-2007*/

class tweenEffects {
 //time of the animation
 private var time:Number;
 //easing Type
 private var easeType;
 // true or false = animation in seconds or frameNumber
 private var secOrFrame;
 //the function we need to call after the animation is done
 private var functionToCall;
 //an object parameter for the function that is called after the animation
 private var param;
 //-----------------------------------
 public function tweenEffects(){
  //default values
  this.time=.5;
  this.easeType=mx.transitions.easing.Regular.easeOut;
  this.secOrFrame=true;
 }
 //--------function used to all effects-------------
 private function tween(_mc, easeType, type, begin, end, time, bool, mcf, functionToCall, param) {
  //this function take the necessary parameter and generate a new tween object.
  var myTween;
  myTween = new mx.transitions.Tween(_mc, type, easeType, begin, end, time, bool);
  myTween.functionToCall = functionToCall;
  myTween.param = param;
  myTween.mcf = mcf;
  //this function is called when the animation is done
  myTween.onMotionFinished = function() {
   this.mcf[functionToCall](this.param);
  };
 }
 //----------------------------------------
 function fadeIn(_mc:MovieClip,currentAlpha:Boolean,mcf:MovieClip,functionName:String,functionParam:Object){
  //currentAlpha is a boolean value so if it is true the _mc will fade in from the current _alpha else it will fade
  //in from 0.
  var iAlpha=(currentAlpha)?_mc._alpha:0;
  tween(_mc,this.easeType,"_alpha",iAlpha,100,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function fadeOut(_mc:MovieClip,currentAlpha:Boolean,mcf:MovieClip,functionName:String,functionParam:Object){
  var iAlpha=(currentAlpha)?_mc._alpha:100;
  tween(_mc,this.easeType,"_alpha",iAlpha,0,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function fadeTo(_mc:MovieClip,alpha:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  var iAlpha=_mc._alpha;
  tween(_mc,this.easeType,"_alpha",iAlpha,alpha,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function gotoX(_mc:MovieClip,xf:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_x",_mc._x,xf,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function gotoY(_mc:MovieClip,yf:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_y",_mc._y,yf,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function gotoXY(_mc:MovieClip,xf,yf:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_x",_mc._x,xf,this.time,this.secOrFrame);
  tween(_mc,this.easeType,"_y",_mc._y,yf,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function changeWidth(_mc:MovieClip,w:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_width",_mc._width,w,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function changeHeight(_mc:MovieClip,h:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_height",_mc._height,h,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function changeWH(_mc:MovieClip,w:Number,h:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_width",_mc._width,w,this.time,this.secOrFrame);
  tween(_mc,this.easeType,"_height",_mc._height,h,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function changeXscale(_mc:MovieClip,xs:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_xscale",_mc._xscale,xs,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function changeYscale(_mc:MovieClip,ys:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_yscale",_mc._yscale,ys,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function changeXYscale(_mc:MovieClip,xs:Number,ys:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_xscale",_mc._xscale,xs,this.time,this.secOrFrame);
  tween(_mc,this.easeType,"_yscale",_mc._yscale,ys,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function changeRotation(_mc:MovieClip,rot:Number,mcf:MovieClip,functionName:String,functionParam:Object){
  tween(_mc,this.easeType,"_rotation",_mc._rotation,rot,this.time,this.secOrFrame,mcf,functionName,functionParam);
 }
 //----------------------------------------
 function setTime(value){
  this.time=value;
 }
 function setEaseType(value){
  /*
   value can be one of this (usually used)
   mx.transitions.easing.Regular.easeOut|easeIn|easeInOut
   mx.transitions.easing.Strong.easeOut|easeIn|easeInOut
   mx.transitions.easing.Elastic.easeOut|easeIn|easeInOut
   mx.transitions.easing.Bounce.easeOut|easeIn|easeInOut
   please refer to
   <a href="http://www.actionscript.org/resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/Page1.html">http://www.actionscript.org/resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/Page1.html</a>
   for more information
  */

  this.easeType=value;
 }
 function getTime(){
  return this.time;
 }
 function getEaseType(){
  return this.easeType;
 }
}
 function setSecOrFrame(value){
  this.secOrFrame=value;
 }
 function getSecOrFrame(){
  return this.secOrFrame;
 }


so from now on when u want to animate a movie clip on the stage all you have to do it to put the file tweenEffects.as in your project folder and on the frame of animation u put this code

How to Use

//create a movie clip on the stage with its instance my_mc
var te=new tweenEffects();
te.setTime(1);//set the animation to 1 sec duration.
//not that mcf parameter is the reference to the movie clip that contain the
//function to call
te.fadeTo(my_mc,40,this,"traceFinished");
//-----function finished
function traceFinished(){
trace("finished");
}


thats it, i hope u ll know how to use this class it will simplify alot of things, and if you have any question just go directly to the forums.

Note: it will be a tutorial for a sliding menu using this class so be ready ;).

happy flashing AS[org] dudes :)