Isometric Character Motion Analyzer

As I promised, I will describe how I set up the motion analyzer to test character animations without loading them into a game. It should go without saying that you should still test your character in the game – the idea is to eliminate simple issues before getting to that stage.

This is really quite simple: set up a document class that puts listeners on every character on the stage. put a button in your library and use it to set up the controls you want to wire up to the character. If the clip has a timeline it will run the lead-in and loop until you stop it.

I added a tile background to help visualize foot position and relative angles.

The same swf that is used to test can be used in the game as media. I recommend hiding the tiled background if you want to optimize file size. Do this by leaving “include hidden layers” unchecked in the publish dialog or setting the layer that contains them to be a guide.

The ActionScript is very basic. The connection between the frame animation and the document class are one of the things that keeps me coming back to Flash. At some point I want to try sprite sheets in ffilmation too though.

package {
	import fl.controls.Button;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.filters.GlowFilter;

	public class FFChar_MotionAnalyzer extends MovieClip {
		public var FFChar_0:MovieClip;
		public var FFChar_45:MovieClip;
		public var FFChar_90:MovieClip;
		public var FFChar_135:MovieClip;
		public var FFChar_180:MovieClip;
		public var FFChar_225:MovieClip;
		public var FFChar_270:MovieClip;
		public var FFChar_315:MovieClip;

		public var run_btn:Button;
		public var walk_btn:Button;
		public var jump_btn:Button;
		public var stop_btn:Button;

		private var cur_FFChar:MovieClip;
		private var glowFilter:GlowFilter;
		private var rollFilter:GlowFilter;
		private var characters:Array;

		public function FFChar_MotionAnalyzer() {
			rollFilter=new GlowFilter(0x00FF00);
			glowFilter = new GlowFilter();
			characters = new Array(FFChar_0, FFChar_45, FFChar_90, FFChar_135, FFChar_180, FFChar_225, FFChar_270, FFChar_315);
			for each (var char:MovieClip in characters)
			{
				char.addEventListener(MouseEvent.CLICK, FFCharClicked);
				char.buttonMode = true;
			}
			run_btn.addEventListener(MouseEvent.CLICK, run_btnClicked);
			run_btn.label="Run";
			walk_btn.addEventListener(MouseEvent.CLICK, walk_btnClicked);
			walk_btn.label="Walk";
			jump_btn.addEventListener(MouseEvent.CLICK, jump_btnClicked);
			jump_btn.label="Jump";
			stop_btn.addEventListener(MouseEvent.CLICK, stop_btnClicked);
			stop_btn.label="Stop";
		}

		private function FFCharClicked(event:MouseEvent):void {
			trace(event.target.name);
			cur_FFChar=event.target as MovieClip;
			clearGlows();
			cur_FFChar.filters=[glowFilter];
		}

		private function clearGlows():void {
			for (var i:uint = 0; i < numChildren; i++) {
				getChildAt(i).filters=[];
			}
		}

		private function run_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndPlay("Run");
				cur_FFChar.filters=[];
			}
		}

		private function walk_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndPlay("Walk");
				cur_FFChar.filters=[];
			}
		}

		private function jump_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndPlay("Jump");
				cur_FFChar.filters=[];
			}
		}

		private function stop_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndStop("Stand");
				cur_FFChar.filters=[];
			}
		}
	}
}

My next post will show an example where using this approach is essential to setting up a hybrid Poser/Photo cartoon character.