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 Objects for ffilmation
Author: David McClelland
30 Mar
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.
External Double-Byte Fonts in Flash CS3
Author: David McClelland
7 Dec
Since I posted External Fonts in Flash, Flash CS3 came out and I started coding in ActionScript 3. Font sharing has changed in some subtle, frustrating ways with this new version. Fonts just don’t embed in libraries in Flash CS3.
Fortunately I was able to find several solid posts that describe a solution that works. I will add several nuances that come from my particular situation and vantage point. The examples covered reuse in order to ensure that a specific font would be displayed, but did not cover localization issues.
The best post I found, on allflashwebsite, walks through installing and configuring the free Flex SDK and FlashDevelop ActionScript editor to create a font swf. Fonts in Flash CS3 The Good Way includes sample code to create and test the font swf as well.
Another excellent post on troyworks provides links to very useful tools for designating character ranges and identifying Unicode character codes. It also lists additional posts used to research the font swf technique, font conversions.
Tip: Font Embed Test
Set the rotation of the field – this only works with embedded fonts and is very obvious.
Embedded for sure
Once I successfully created a font swf, I used the sample code to verify that it was loaded and available to other swfs at runtime. Then I retooled some of the sample code to verify that the specific font and character range that I wanted to use would work: Sim Hei font in the Simplified Chinese character range.
XML Encoding
The XML containing the Chinese text wouldn’t load until I changed the encoding from UTF-8 to GB2312.
Importance of Font Naming
To do this I substituted the values for Sim Hei in place of the fonts in the example font embed Actionscript. I designated the character range to the CJK Unified Ideographs: unicodeRange=’U+4E00-U+9FBB’. To find this information I consulted a Unicode Guide provided by jrfraphix.
Set ActionScript Panel Font to Sim Hei
ActionScript Panel font with a Chinese text displayed
I changed the display font in the Flash ActionScript editor to Sim Hei and pasted in some Chinese text from the XML in place of the sample text provided for the Font Tester swf. This ensured that it displayed the correct characters instead of squares, and would visually match the text in the swf.
A note on Unicode fonts:
The best font to match with Arial is MS Hei or Sim Hei. Hei loosely translates to “bold.” There are better (smaller file size) Double-byte fonts for web use that can be purchased as well. I find Arial Unicode to be an all-around poor choice: the Latin characters don’t look and space like standard Arial, the font file is huge, and double-byte characters are too light.
