David J McClelland

eLearning Designer / Developer

Archive for the ‘Techniques’ Category

I read an article recently describing this concept at CoderHump. Ben Garney used it to make it easier for game artists and designers to tweak game settings without training them on an API or building and maintaining a separate tweak input tool for them to use.

This concept takes advantage of a useful feature of Google Docs spreadsheets: they can be set up to publish in ATOM format, which is XML. You can lay out columns and rows so that they correspond to variables and values like a flat-file database. There are docs on the API.

Like any Google Doc, you can set up access control if you want. If you want multiple editors, think carefully about how you deal with unexpected values. It would be nice if there was cell-level protection.

Step-By-Step

Google Docs:

Create a spreadsheet. Put in a couple columns and rows worth of data, such as the days of the week in column one and their corresponding name in Spanish in column two. (This could be an awesome translation tool, no?).

The settings you need are in the Share Tab on the Right:

Using Sharing settings… , publish the spreadsheet so that it is publicly viewable:

Then open the pubish as a Web Page settings from the same settings tab:

Change the dropdown menu from Web page to ATOM…

… and copy the ATOM URL to use in ActionScript.

Flash: Load the XML using the URL for the ATOM feed as the URLRequest string.

Post to Twitter

  • 0 Comments
  • Filed under: Techniques
  • Multi-Lesson Captivate Projects for CD-ROM

    Background

    Captivate 4 had a bug that made project links always use absolute paths. The result was you couldn’t author a menu to launch lessons for playback from a CD. Adobe issued a patch that was supposed to fix it, and I tried it out. It didn’t seem to work on the files I was given to set up for CD delivery.

    If you run into a similar circumstance, here is another way to accomplish the same thing.

    Not Tracking

    First off, this is for a project where there is a menu used to access a collection of lessons. You are going to run from a CD so you already decided you aren’t tracking anything. Or, if you have a way to track it, I would love to know more – please leave a comment!

    The Menu

    If your menu contains some intro material, put the menu slide last.

    Duplicate it

    Loop them by setting the last Slide load the previous one, and the next-to-last slide go to the next slide (default setting).

    Change the project setting so that the presentation does not fade out at the end. This will ensure that the buttons will remain enabled and visible at all times.

    Set up the button links as URLs that point to the .swf pages (or .html)

    Captivate publishes for each lesson. Change the target setting from self to blank. This will make each lesson pop up in a new window, which circumvents the security errors that occur with Flash Player opening a new .swf in the same window.

    Autorun

    Captivate will generate an autorun file that will launch the menu in the system default browser if you check the option when publishing.

    Post to Twitter

  • 0 Comments
  • Filed under: Techniques
  • Make a Bobblehead Character

    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.

    To take that work a step further while continuing to avoid that deep dive into modeling and clothing figures, I present a labor-cheap alternative that I call a Bobble-head. I doubt this is original, I think I might have seen Terry Gilliam do something like this at some point.

    I had a friend take a snapshot of me from 5 angles that I need to show my ffilmation character from an angle roughly matching that of the game. To get the angle I sat down on the floor. Flat lighting is essential to avoid weird shadows or color effects. You will save a lot of time on silhouetting backgrounds if you can find a solid color background or hang a blanket behind the subject. An office conference room is a good place.

    I transformed the silhouetted head shapes so that it looked like each one fit on Ryan’s body at a given angle. To do this I put each angle of Ryan standing in a layer in Fireworks. Then I imported the head bitmaps into a copy of the .fla file containing Ryan, which I had already finished and tested.

    A quick test using the script in this post on the .fla showed that I had some more work to do to make the head look natural. It just floated around like a stationary object pasted on Ryan.

    Get Adobe Flash player

    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.

    Get Adobe Flash player

    Final Build

    Post to Twitter

  • 0 Comments
  • Filed under: Techniques
  • 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.

    Post to Twitter

  • 0 Comments
  • Filed under: Techniques
  • Using Poser Character in Flash ffilmation

    Get Adobe Flash player

    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.

    Post to Twitter

  • 2 Comments
  • Filed under: Techniques
  • Shiny