Category: motion

[SWF(backgroundColor=0x000000, frameRate=30)]

var elements:Array = new Array();
for (var i:int = 0; i<200; i++){
	var c:MovieClip= MovieClip(addChild(new MovieClip()));
	c.x = Math.random()*(stage.stageWidth + 100) - 50;
	c.y = Math.random()*stage.stageHeight;
	with(c.graphics) lineStyle(2, 0xFFFFFF,3), drawCircle(0,0,2 + c.y / 20);
	c.startX = c.x;
	elements.push(c);
}

var offset:Number = 0;
var t:Number = 0;

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	t+=.1;
	offset = 200 * Math.cos(t);
	for (var i:int = 0; i<elements.length; i++){
	   elements[i].x = elements[i].startX + offset / ((stage.stageWidth - elements[i].y) / 80);
	}
}

I wrote this snippet originally to automatically add parallax motion to a bunch of quick drawings I did within the flash IDE. Each movieClip in the elements array is moved from left to right based on it’s y position. Clips with a higher y value will oscillate more from left to right than clips with lower y values.

Here is the original drawing I used this on.

And here is what the above snippet will create.

// line thickness, line color, start point, end point, divisor, callback
function animateLineTo( thick:Number, col:uint, sp:Point, ep:Point, div:Number=4, callback:Function=null):void {
	 var s:Shape  = Shape(addChild(new Shape()));
	 var ap:Point = sp.clone();
	 div = Math.max(2, div);
	 setTimeout(runLineAnimation, 1000/stage.frameRate, s.graphics , thick , col , sp , ep , ap, div, callback);
}

function runLineAnimation(g:Graphics , thick:Number, col:uint, sp:Point, ep:Point, ap:Point, div:Number, callback:Function):void {
	 ap.x += (ep.x - ap.x) / div;
	 ap.y += (ep.y - ap.y) / div;
	  with(g){
		clear();
		lineStyle(thick, col);
		moveTo(sp.x, sp.y);
		lineTo(ap.x, ap.y);
	  }
	   if (Math.abs(ap.x - ep.x) < 1 && Math.abs(ap.y- ep.y)  < 1){
		   // done
		   if (callback!=null){
			   callback();   
		   }
	   }else{
		    setTimeout(runLineAnimation, 1000/stage.frameRate, g , thick , col , sp , ep , ap, div, callback);
	   }
}
//
// test out the animateLineTo function:
//
var a:Point = new Point(100,100);
var b:Point = new Point(150, 200);
var c:Point = new Point(300, 190);
var d:Point = new Point(280, 90)

animateLineTo(0, 0xFF0000, a, b, 4, line2);

function line2():void{
	animateLineTo(0, 0xFF0000, b, c, 4, line3);
}

function line3():void{
	animateLineTo(0, 0xFF0000, c, d, 4, line4);
}

function line4():void{
	animateLineTo(0, 0xFF0000, d, a, 4);
}

The above demos a function called animateLineTo() that will draw a line using zeno’s paradox.

There are a couple weird/interesting tricks going on here. I’m using setTimeout() over and over rathaer than using setInterval(). This makes it so I don’t need to store an interval id. I’m also using a delay of 1000/stage.frameRate, this attempts to cause the setTimeout() to run at the same frequency as an enter frame would. This is important because having a setTimeout()/setInterval() that is doing animation and attempting to run more frequently than the framerate can cause problems and is a waste of cpu power.

This snippet was spurned by a student question about how to animate a Graphics.lineTo() from point A to point B. Here is the original snippet, which is easier to read and more bare bones:

var p0:Point = new Point(100,100);
var p1:Point = new Point(400,200);
var dp:Point = new Point(p0.x,p0.y);

var s:Sprite = Sprite(addChild(new Sprite()));

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	s.graphics.clear()
	s.graphics.lineStyle(0,0x000000);
	s.graphics.moveTo(p0.x, p0.y);
	s.graphics.lineTo(dp.x, dp.y);
	dp.x += (p1.x - dp.x) / 4;
	dp.y += (p1.y - dp.y) / 4;
}

stage.frameRate=30;
var nav:Sprite = Sprite(addChild(new Sprite()));
nav.x=nav.y=150;

var cover:Sprite;
var coverDest:Number=0;
var spacing:int=4;
var btnNum:int=6;

buildNav();

addEventListener(Event.ENTER_FRAME, onLoop);

function onLoop(evt:Event):void {
	cover.x += (coverDest - cover.x) /4;
}

function buildNav():void {
	for (var i:int = 0; i<btnNum; i++) {
		var b:Sprite=makeBox(50,50);
		b.x = i * (b.width + spacing);
		b.buttonMode=true;
		b.addEventListener(MouseEvent.CLICK, onClick);
	}
	cover=makeBox(54, 60);
	cover.blendMode=BlendMode.INVERT;
}

function onClick(evt:MouseEvent):void {
	coverDest=evt.currentTarget.x;
}

function makeBox(w:Number, h:Number) {
	var b:Sprite = new Sprite();
	with (b.graphics) {
		beginFill(0x000000),drawRect(-w/2,-h/2,w,h);
	}
	nav.addChild(b);
	return b;
}

This is something I do in my intermediate flash classes… the only difference is that we do the graphics in the flash IDE during class time instead of drawing them with ActionScript.