Browse the notebook

Category: motion

Skew DisplayObject

By Zevan
var box:Shape = Shape(addChild(new Shape()));
with (box.graphics) beginFill(0x006666), drawRect(0,0,50,50);
box.x = box.y = 100;

addEventListener(Event.ENTER_FRAME, onLoop);

function onLoop(evt:Event):void {
	
	var m:Matrix = box.transform.matrix;
	// skew on the X
	m.c = (mouseX - stage.stageWidth / 2 ) / stage.stageWidth;
	
	// skew on the Y
	// m.b = (mouseX - stage.stageWidth / 2 ) / stage.stageWidth 
	
	box.transform.matrix = m
}

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.

Read snippet: Skew DisplayObject

Mouse Velocity

By Zevan
var velocityInfo:TextField = new TextField();
velocityInfo.x = 20;
velocityInfo.y = 20;
addChild(velocityInfo);

var prevX:Number = mouseX;
var prevY:Number = mouseY;
var velX:Number = 0;
var velY:Number = 0;

addEventListener(Event.ENTER_FRAME, onLoop);

function onLoop(evt:Event):void {
	 
	 velX = mouseX - prevX;
	 velY = mouseY - prevY;
	 
	 velocityInfo.text = velX + ", " + velY
	 
	 prevX = mouseX;
	 prevY = mouseY;
}

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.

Read snippet: Mouse Velocity

Animate Along a Path

By Zevan
stage.frameRate = 30;
var pencil:Shape = new Shape();
addChild(pencil);

var index:int = 0;
var points:Array = new Array();
var circle:Shape = new Shape();
circle.graphics.beginFill(0x000000);
circle.graphics.drawCircle(0,0, 5);
addChild(circle);

stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);

circle.addEventListener(Event.ENTER_FRAME, onMoveCircle);

function onDown(evt:MouseEvent):void {
	pencil.graphics.lineStyle(0,0x000000);
	pencil.graphics.moveTo(mouseX, mouseY);
	stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}

function onUp(evt:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}

function onDraw(evt:Event):void {
	pencil.graphics.lineTo(mouseX, mouseY);
	points.push(new Point(mouseX, mouseY));
}

function onMoveCircle(evt:Event):void {
	if (points.length>0) {
		circle.x += (points[index].x - circle.x) / 4;
		circle.y += (points[index].y - circle.y) / 4;
		index++;
		if (index==points.length) {
			index=0;
		}
	}
}

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

Read snippet: Animate Along a Path

Mini Tween Engine

By Zevan
var box:MovieClip = new MovieClip();
box.graphics.beginFill(0xFF0000);
box.graphics.drawRect(-25,-25,50,50);
addChild(box);

stage.addEventListener(MouseEvent.CLICK, onStageDown);
function onStageDown(evt:MouseEvent):void{
	moveTo(box, "x", 300, 2, Back.easeOut);
	moveTo(box, "y", 200, 2, Back.easeOut);
	moveTo(box, "scaleX", 2, 2, Back.easeOut);
	moveTo(box, "rotation", 180, 2, Quartic.easeOut, onDone);
	stage.removeEventListener(MouseEvent.CLICK, onStageDown);
}
					 
function onDone():void {
	moveTo(box, "x", 120, 2, Back.easeIn);
}

//
// -- TWEEN ENGINE
//
import fl.motion.easing.*;

// movieClip to tween, property to tween, final value for the property, duration of tween,
// ease type, complete callback function
function moveTo(mc:MovieClip, prop:String, dest:Number, duration:Number, ease=null, 
				           completeFunction:Function=null):void {
	if (ease == null) {
		ease = Quartic.easeOut;
	}
	// use the property to make all var names unique
	mc["begin" + prop] = mc[prop];
	mc["change" + prop] =  dest - mc[prop];
	mc["time" + prop] = 0;
	mc["startTime" + prop] = getTimer();
	mc["duration" + prop] = duration;
	mc["prop"] = prop;
	mc["ease" + prop] = ease;
	mc["complete_" + prop] = completeFunction;
	mc.addEventListener(Event.ENTER_FRAME, makeMotionFunction(mc, prop));
}

function makeMotionFunction(mc:MovieClip, prop:String):Function {
	return function(evt:Event){
		if (mc["time" +prop] <= mc["duration"+ prop]){ 
		   mc[prop]=mc["ease" + prop](mc["time" + prop], mc["begin" +prop], mc["change"+ prop], mc["duration"+ prop]);
		} else {
			var completeFunction:Function = mc["complete_"+prop];
			if (completeFunction!=null){
			  completeFunction();
			}
			mc.removeEventListener(Event.ENTER_FRAME, arguments.callee);
			// see how long the tween took
		    //trace(mc["time"+prop]);
		}
		   mc["time" + prop] = (getTimer() - mc["startTime" + prop]) / 1000;
	};
}
/*
WARNING: This code was written for fun. Use at your own risk.
*/

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.

Read snippet: Mini Tween Engine

Sine Cosine Walk

By Zevan
stage.frameRate = 30;
var footA:MovieClip = makeFoot(0);
var footB:MovieClip = makeFoot(Math.PI);

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	 graphics.clear();
	 graphics.lineStyle(0,0x000000);
	 graphics.moveTo(footA.x, footA.y);
	 graphics.curveTo(footA.x + 20, footA.y - 50, 200, 100);
	 graphics.curveTo(footB.x + 20, footB.y - 50, footB.x, footB.y);
}

function makeFoot(startAngle:Number):MovieClip {
	var mc:MovieClip = MovieClip(addChild(new MovieClip()));
	with(mc.graphics) beginFill(0x000000), curveTo(10,-10, 20, 0);
	mc.x = 200;
	mc.y = 200;
	mc.sx = mc.x;
	mc.sy = mc.y;
	mc.t = startAngle;
	mc.r = 50;
	mc.addEventListener(Event.ENTER_FRAME, onRunFoot);
	return mc;
}
function onRunFoot(evt:Event):void {
	var mc:MovieClip = MovieClip(evt.currentTarget);
     with(mc){
		x = sx + r * Math.cos(t); 
		y = Math.min(sy, sy + r * Math.sin(t));
		rotation = sy - y;
		t += .15;
	 }
}

This is a funny looking snippet that creates a very primitive walk cycle with the Graphics class and sine and cosine.

Read snippet: Sine Cosine Walk