David J McClelland
eLearning Designer / Developer
Using Poser Character in Flash ffilmation
Author: David McClelland
11 May
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.
OK, maybe BART is not a catchy acronym but is better than when I started (Bulk replaced Wholesale, Full).
When you move an asset into a folder that contains another asset with the same name in Flash Library it will prompt if you want to replace it? If we carefully name all our assets we can use this feature to great advantage when importing assets to build each angle of our character.
The key is to organize assets into folders that ID the angle in their name, but only name the sequence files with the pose and sequence number. For example, the folder ryanRunLoop_90 contains runLoop_0001.png through runLoop_0015.png.
If I want to make a ryan_135 MovieClip from a copy of ryan_90 I can do this by importing the assets and dropping the appropriate bitmaps into their respective folders. For runLoop I would drop the imported bitmaps into char_runLoop_90, choose to replace existing, and rename the folder char_runLoop_135.
To save time, I installed a jsfl Command extension called Find and Replace that will automatically change library names. Unfortunately it doesn’t change folder names.
Create two files for creating your character: an asset .fla to contain all the clips that make up a complete character, and a conversion .fla where you replace assets. This will make creating each angle timeline easier and make any mistakes more obvious when they occur and less costly to fix once detected.
Keep assets for a particular angle in library folders that contain the angle as part of their name. Rename the folders before you copy the finished angle clip from the conversion stage fla and paste it in the asset fla to avoid copying over existing assets for another angle.
Once I had the character angles for 0, 45, 90, 135 and 315 I planned to flip 0, 45 and 90 (the mirror angles) to make 180, 225 and 270.
Gotcha: In order for ffilmation to access the angles at runtime you must make a link for each one. Flipping the mirror angle characters, even if they are duplicates of the mirror angles with the correct linkage names, will not work. You will see the character in your game just as it appears in the library, not on your character .fla stage.
To make movieclips with linkage names for every angle you will have to flip the bitmaps inside a copy of the Movieclip. I use the Edit Multiple Frames tool to select every frame and flip all bitmaps in a single operation. It only takes a few seconds and cuts down on your file size compared to Poncho, which has bitmaps for all angles. You will get the added benefit that any bitmap replaced for a mirrored clip will be also be replaced in its mirror.
Gotcha: Resist the urge to crop! After I saw first render sequence from Poser I realized that each image was the size of the render window, even though most of that area is transparent. So I batch cropped them. After which I noticed the file sizes increased, and I had to hand-register each frame because the cropping algorithm I used made the smallest possible image.
You will notice that every frame you export from Poser will be pin-registered automatically as long as you keep your character in one place and make variations from a copy of the original, standing character. When you replace the bitmaps to create each angle you don’t have to fiddle with their coordinates. Sweet!
[DDET How to filter mouse events to visible areas of png, allow for overlaps]
Use a mask over the standing pose to limit the clickable area to the visible portion of the character. Either a rectangle or a copy of the image will work, depending on how precise you want to be.
My next post will cover how to set up a test rig that I used to display the examples.
Creating an Isometric Character in ffilmation
Author: David McClelland
29 Mar
ffilmation provides a demo that includes source for a hero character, “Poncho”. Poncho can walk, run, jump, crouch, roll, and shoot.
To create a custom character for my own game prototype, and to understand how ffilmation works with characters, I started with a copy of the Poncho source and replaced images in the movieclips it contained.
The angles ffilmation uses to determine vectors are different from those in Poser, so I created a reference:
Instead of a cowboy, I needed to create a bobble-head-like character. The base character would be a default poser character that could be readily animated with a walk, run, and gestures. I would superimpose scaled photos of actual people on the character to create the bobble-head look.
To do this, I set up Ryan Casual at the isometric angles in Poser (X:30,Y:45). I rendered the figure in a standing pose at the quality setting one notch above draft. I exported as a .png, Rotating and exporting at 45 degree increments until I had Ryan turned 180 degrees.
I had someone photograph me at approximately the same angle as the character and silhouette out the background. I superimposed, scaled distorted and color-corrected the photos to mate up with the Ryan character renders in Fireworks. Fireworks will preserve the alpha channel in each layer, which is important for this technique – if you use Photoshop or Gimp your mileage will vary.
I imported the .png file into the library of a copy of the Pancho.fla file. I did not select to import as a single flattened file, but to keep appearance of layers when prompted. Since I would have multiple characters based on the bobble-head concept, I kept the Ryan character layers separate from the head shots in Fireworks.
Once in the Flash library each image needs to be put in a movieclip so that the body and head can be displayed together, and so that a linkage name can be set for ffilmation to use them.
The linkage name should have the ffilmation angle in it and something identifying the character.
ffilmation engine will look for frame labels in each clip which determine what the character is doing. You can use the labels that come with Poncho or create your own. I decided to follow the naming used in the ffilmation examples, although I haven’t noticed anything magic about it. Since my character only stands at this point, the label is “Stand” which is what is used with Poncho.
Publish a swf and put it in the media folder of your project.
Open and copy FFCharacters_poncho.xml from the definitions folder of the examples build directory. Save it with a name that matches your swf file name, in my case it will be FFCharacters_mac.xml. Then do a find/replace in it, replacing “FFCharacters_poncho” with your new name. Notice that around line 59 there are listings for the sprite angle clip linkage names. If you use fewer angles in your character you can put the same src for more than one angle.
In order to see your new character you will need to add it to the scene. In the ffilmation examples the scene file is in the XML directory and matches the name of the fla file that creates the main swf. Replace Poncho references with your new file here too.
I decided to replace the Poncho class with a copy renamed Hero.as and changed all references to Poncho from the Document Class from Poncho to Hero. I am planning to generalize the hero character so that it can be changed during the game.
The entry in my scene file:
<character id="Hero" definition="FFCharacters_mac" x="500" y="500" z="0"/>
Here is the character in the scene:
Using Poser to Render Isometric Assets for Flash
Author: David McClelland
25 Mar
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.
