Mini Tween Engine

By Zevan | November 9, 2008
CLICK HERE TO COPY
Actionscript:
  1. var box:MovieClip = new MovieClip();
  2. box.graphics.beginFill(0xFF0000);
  3. box.graphics.drawRect(-25,-25,50,50);
  4. addChild(box);
  5.  
  6. stage.addEventListener(MouseEvent.CLICK, onStageDown);
  7. function onStageDown(evt:MouseEvent):void{
  8.     moveTo(box, "x", 300, 2, Back.easeOut);
  9.     moveTo(box, "y", 200, 2, Back.easeOut);
  10.     moveTo(box, "scaleX", 2, 2, Back.easeOut);
  11.     moveTo(box, "rotation", 180, 2, Quartic.easeOut, onDone);
  12.     stage.removeEventListener(MouseEvent.CLICK, onStageDown);
  13. }
  14.                      
  15. function onDone():void {
  16.     moveTo(box, "x", 120, 2, Back.easeIn);
  17. }
  18.  
  19. //
  20. // -- TWEEN ENGINE
  21. //
  22. import fl.motion.easing.*;
  23.  
  24. // movieClip to tween, property to tween, final value for the property, duration of tween,
  25. // ease type, complete callback function
  26. function moveTo(mc:MovieClip, prop:String, dest:Number, duration:Number, ease=null,
  27.                            completeFunction:Function=null):void {
  28.     if (ease == null) {
  29.         ease = Quartic.easeOut;
  30.     }
  31.     // use the property to make all var names unique
  32.     mc["begin" + prop] = mc[prop];
  33.     mc["change" + prop] =  dest - mc[prop];
  34.     mc["time" + prop] = 0;
  35.     mc["startTime" + prop] = getTimer();
  36.     mc["duration" + prop] = duration;
  37.     mc["prop"] = prop;
  38.     mc["ease" + prop] = ease;
  39.     mc["complete_" + prop] = completeFunction;
  40.     mc.addEventListener(Event.ENTER_FRAME, makeMotionFunction(mc, prop));
  41. }
  42.  
  43. function makeMotionFunction(mc:MovieClip, prop:String):Function {
  44.     return function(evt:Event){
  45.         if (mc["time" +prop] <= mc["duration"+ prop]){
  46.            mc[prop]=mc["ease" + prop](mc["time" + prop], mc["begin" +prop], mc["change"+ prop], mc["duration"+ prop]);
  47.         } else {
  48.             var completeFunction:Function = mc["complete_"+prop];
  49.             if (completeFunction!=null){
  50.               completeFunction();
  51.             }
  52.             mc.removeEventListener(Event.ENTER_FRAME, arguments.callee);
  53.             // see how long the tween took
  54.             //trace(mc["time"+prop]);
  55.         }
  56.            mc["time" + prop] = (getTimer() - mc["startTime" + prop]) / 1000;
  57.     };
  58. }
  59. /*
  60. WARNING: This code was written for fun. Use at your own risk.
  61. */

This code uses a ~35 line tweening engine. I wrote this for fun a few weeks back. It works by creating dynamic variables on the MovieClip that it tweens. The dynamic variables and the square bracket syntax cause it to be pretty slow. Definitely not a substitute for a real tweening engine... like TweenLite.

I wouldn't recommend using this for anything other than playing around. See warning page for more info.

This entry was posted in dynamic, motion, properties. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*