Category Archives: motion

Skew DisplayObject

By Zevan | November 18, 2008
CLICK HERE TO COPY
Actionscript:
  1. var box:Shape = Shape(addChild(new Shape()));
  2. with (box.graphics) beginFill(0x006666), drawRect(0,0,50,50);
  3. box.x = box.y = 100;
  4.  
  5. addEventListener(Event.ENTER_FRAME, onLoop);
  6.  
  7. function onLoop(evt:Event):void {
  8.    
  9.     var m:Matrix = box.transform.matrix;
  10.     // skew on the X
  11.     m.c = (mouseX - stage.stageWidth / 2 ) / stage.stageWidth;
  12.    
  13.     // skew on the Y
  14.     // m.b = (mouseX - stage.stageWidth / 2 ) / stage.stageWidth
  15.    
  16.     box.transform.matrix = m
  17. }

This skews a box Shape using the c and b properties of the transformation matrix. Note that these values don't match those in the IDE's transform window. This is good further reading if your interested in this topic.

Also posted in DisplayObject | Tagged , , | Leave a comment

Mouse Velocity

By Zevan | November 16, 2008
CLICK HERE TO COPY
Actionscript:
  1. var velocityInfo:TextField = new TextField();
  2. velocityInfo.x = 20;
  3. velocityInfo.y = 20;
  4. addChild(velocityInfo);
  5.  
  6. var prevX:Number = mouseX;
  7. var prevY:Number = mouseY;
  8. var velX:Number = 0;
  9. var velY:Number = 0;
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12.  
  13. function onLoop(evt:Event):void {
  14.      
  15.      velX = mouseX - prevX;
  16.      velY = mouseY - prevY;
  17.      
  18.      velocityInfo.text = velX + ", " + velY
  19.      
  20.      prevX = mouseX;
  21.      prevY = mouseY;
  22. }

Wrote this in response to a question from one of my students. The next step is to use velX and velY to push objects around the screen.

Posted in motion | Tagged , , , | 5 Comments

Animate Along a Path

By Zevan | November 15, 2008
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. var pencil:Shape = new Shape();
  3. addChild(pencil);
  4.  
  5. var index:int = 0;
  6. var points:Array = new Array();
  7. var circle:Shape = new Shape();
  8. circle.graphics.beginFill(0x000000);
  9. circle.graphics.drawCircle(0,0, 5);
  10. addChild(circle);
  11.  
  12. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  13. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  14.  
  15. circle.addEventListener(Event.ENTER_FRAME, onMoveCircle);
  16.  
  17. function onDown(evt:MouseEvent):void {
  18.     pencil.graphics.lineStyle(0,0x000000);
  19.     pencil.graphics.moveTo(mouseX, mouseY);
  20.     stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
  21. }
  22.  
  23. function onUp(evt:MouseEvent):void {
  24.     stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
  25. }
  26.  
  27. function onDraw(evt:Event):void {
  28.     pencil.graphics.lineTo(mouseX, mouseY);
  29.     points.push(new Point(mouseX, mouseY));
  30. }
  31.  
  32. function onMoveCircle(evt:Event):void {
  33.     if (points.length>0) {
  34.         circle.x += (points[index].x - circle.x) / 4;
  35.         circle.y += (points[index].y - circle.y) / 4;
  36.         index++;
  37.         if (index==points.length) {
  38.             index=0;
  39.         }
  40.     }
  41. }

Wrote this in response to a student question. It causes a circle shape to animate along lines drawn by the user.

Also posted in arrays | Tagged , | 2 Comments

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.

Also posted in dynamic, properties | Leave a comment