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.

Click a character and use the buttons to test it.

This is a continuation of my last post on the workflow involved in creating a character in Poser to use in a ffilmation project in Flash. We pick up after you have completed rendering all frames for all the angles you need to display a character that can walk around in an isometric game.

Bulk Asset Replacement Technique

Don't try this in one .fla

My next post will cover how to set up a test rig that I used to display the examples.

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.

The third game engine on my list, ffilmation has a lot going for it. By substituting the assets in the demo levels I am able to create a sketchy walkabout iso game proof-of-concept in about an afternoon. It also comes with a free level editor, and is tied pretty closely to the Flash IDE (it can be set up with Flex as well, but you will still need Flash to create assets).

What worries me is that it looks like a one-man labor of love project. There has been little/no activity on the site in quite a while. There doesn’t appear to be much of a community built up around it. I thought it must be because the source is not hosted under version control and there is no licensing information. But I was wrong- it is now hosted on Google Code – but still only the one contributor. And it has an MIT license.

Still, ffilmation has a lot of potential, and has the most complete feature set of any engine I have looked at so far for my goals.

That includes:

• texturing with bumpmaps
• animated, scriptable lighting
• simple 3d prisms
• projectiles
• heads-up display
• ISO character sprites
• Multiple characters
• Collision detection

Hoping to have something worthwhile to show clients from this soon.

Here’s a shot of a space adapted from one of the examples provided on the site. The character was created in Poser.