In previous posts I showed a generic walking character rendered from Poser named Ryan. He is fine for getting somewhere quickly with a proof-of-concept without getting lost in the weeds of what is possible with Poser.

How To Bobble

How Not To Bobble

Sorry, Was I Bobbling?

Some tweening and testing for each angle made a convincing connection between the two images while maintaining a certain amount of artificiality to the whole thing. Most of the tweens in the mirror angles of the character could be reused by pasting them in and flipping them horizontally. Plan on spending some time on this part, although not as much as you might if you have a learning curve to climb with Poser.

Final Build

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.

The code

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.

Tic-Tac-Toe Whaddyaknow is the first eLearning product offered by Novatek.

We are exploring the notion that we could sell eLearning tools for use by other developers, so we are giving away the first one to the community. Created in Flash with the Engage SDK, instances are authored using Articulate Engage, a commercial template-driven eLearning development tool we use quite often.

I hope that once learners experience a simple game like this the response will drive instructional designers to come back to buy more.

Got a nice mention on Articulate‘s Word Of Mouth blog, and the downloads have begun!

We shall see.

Adding objects to a scene is very similar to the process for adding a character. According to the documentation the only difference is that objects are static, and they require less memory resources from the engine to exist on the stage.

You can use any method to create the graphics that make up an object. I used a prop in Poser and set it to an angle that I hoped would fit in my layout. You can create multiple angles using the same method as with characters. Keep the pixel dimensions of the object bitmap as small as possible – I keep a high-res version and make smaller copies from it. Make sure to set the export properties so that ActionScript can find it:

You can store multiple objects in a single fla/swf. I approach them as any shared library – you can organize libraries by project, theme or other principle that meets your project’s requirements. They don’t have to be placed on the stage as I’ve done either.

Create a definition file for your library to enable ffilmation to utilize it. The name should be the same as the swf name, only with an .xml extension. Here is a sample:

<?xml version="1.0" encoding="utf-8" ?>
<definitions>
<media src="../media/medicalProps.swf"/>
 <objectDefinition name="LabTube">

 <displayModel>
 <sprite angle="0" src="LabTube"/>
 </displayModel>

 <collisionModel>
 <box width="116" depth="70" height="200"/>
 </collisionModel>

 <shadowModel>
 <shadow type="sprite"/>
 </shadowModel>

 </objectDefinition>

</definitions>

Then you must add the library swf and object definition to your scene definition file.

In the head section add this:

<definitions src="../definitions/medicalProps.xml"/>

In the body section:

<object id="labTube" definition="LabTube" x="422" y="224" z="0" orientation="0"/>

You will probably need to experiment with a few details of your object: the location of the origin in the MovieClip and the collision area shape and dimensions. If you see light between the bottom-most parts of your object and/or weird Z-sorting, the origin is probably too high. I set mine near the bottom and center. I start the collision shape and dimensions that match as closely to my bitmap pixel dimensions and then test with a character in the game.

If you use png format when importing bitmaps your game will look better in low quality, since the quality setting will not effect their display, unlike shapes. Compare the gurney to the vacuum chamber in the screenshot. Also notice the built-in support for transparency in the object and the shadows, and Z-sorting.

I found a few posts that explained the trick to creating isometric renderings using Poser. A trick is necessary because Isometric cameras in Poser are orthogonal only. The trick is to tilt the model instead of the camera – duh. But yes, I did search for this “trick”.

It is a good idea to create a reference object in Poser to “lock down” the angles to match your game’s POV, and use the Front Camera. I created a box prop and set the angles that worked with ffilmation: X:45, YU:0, Z:30. I made the box 2% yScale so that it would be used as a tile.

For walking characters it is recommended that the reference tile be sized to match the game tile. This can be confirmed by superimposing a render of the tile from poser over a default game screenshot with a grid visible. The character footprint should be contained within the tile boundary like a chess piece.

When you import third-party props they will appear in a default angle.

The Rotation settings that worked for the character and the reference tile didn’t work for the props.

I had to manually adjust the rotation settings of all three axis to get desired angles. This is not as simple as could be because Poser limits rotation transformations to cardinal planes, and our model is oblique to at least 2 of them.

I used the reference tile to confirm that I was close to the correct compound angles by intersecting the props in various places.

Once the prop was close enough I exported a .png, which preserves alpha transparency in Flash.

If I need another angle of the prop, another manual setup is required because the other iso camera angles are generally useless.

I use a copy of the same prop. I recommend doing a final render with all prop angles instances in the frame together. This keeps the lighting angle consistent, and I can cut and stack them in Fireworks to preserve their coordinate registration.