PATRICK JOSEPH BESONG: May 2007 Archives

Here is what I've got so far on the simulation: Intubation Decisions

You should be able to navigate through the simulation to some conclusion (at the end you will not get a "Continue" button).

I just grabbed a couple photos from Google Images for now. This will be for demo purposes only and none will be used for the final project. I threw in a photo of an operating room for a background that I kind of grayed out and put a translucent panel on one side for the text to go over so it won't fight with the background. I tweaked the text sizes and placement a bit to make it more readable. Since I'm using the RadioButton components from Flash, I needed to set the text color and size programmatically instead of using the properties window. I think I need to handle the text somewhat differently in future projects in that the text placement should become dynamic so that if you have 3 lines for one scene and one line for the next scene, the text coming below them should be uniformly spaced. I will need to research this a bit, but I'm guessing it will have something to do with creating the text areas dynamically one at a time so that each will refer to the one before it for placement.

As I was working on this I was thinking - wow, it would be neat if we had some actual images of the blood pressure and other monitors such as the oxygen saturation, capnograph (an instrument to measure the CO2 concentration in an air sample), that could be changed on each scene via input from the XML file. We could also include operating room sounds and the sounds of breathing, for example to help sell the scenario. It would be simple to add a field in the FileMaker DB for an MP3 file (or several).

Another idea might be to have a coach available in the operating room. By clicking a button, a coach might appear in a video that is related to the scene you are on to help you make a decision. Something like "Your patient's chest is not rising and falling. Better check the location of the tube. It may be getting obstructed." So you might choose to reorient the tube in the simulation.

I don't want this post to get too long, so I'll quit here with a final thought about this. Now that the basic interaction is there and working, I could easily add a whole loop of frames to the simulation by paying attention to the decision tree and simply by adding records to the FileMaker DB, I can take the sim in a whole new direction, or make it do a loop and come back to a certain point in the sim. Pretty cool. I'm liking the direction this kind of thing could take.

I was able to get the sim to run from the XML file as I'd planned, but it's definitely not pretty. First of all I have no pix. Tried finding pix of intubation on Google, but there just aren't that many I can use as dummy photos that might make sense. Might as well put pix of anything there.

The Flash file is only 3 frames, but there is a lot that goes into it as far as functionality. There are many things to consider. One is that not every page will look the same. Some have 2 choices you have to pick from, others have only one choice, still others may only be a "Continue" button with no real choice to make. To build this in only a few frames means that you have to take a few things and make if/else clauses out of them. For example, if the first choice is null (meaning no value is available), I had to make the radio button for that choice disappear, since there is no real choice to be made. Another might be what happens when you come to the end? How do you prevent it from looking like it needs another question answered? For that, I put the value "end" in the CHOICE1DESTINATION field in FileMaker. I then wrote a clause that says if the destination is equal to "end", then hide the Submit button, which would then prevent the sim from moving forward anymore.

It's very crude at this point, but I was able to navigate through the whole 15 scenes predictably by looking at my paper copies of the decision tree while clicking through the sim.

The next big hurdle I have is to somehow figure out how to code the Flash interface so tht the text for the title, description, and choices can be seen in their entirety and not overlap each other.

Today, in lieu of having a decision tree from the professor, I decided to forge ahead and figger out what screens were there and where you get sent when making any decision. I took a bunch of screen shots and dumped them into PowerPoint. I then printed them out 16 to a page so they'd be small and manageable. It took me a couple hours to get all the screens captured, printed, and arranged in the proper flow diagram to match the decision tree of the example.

Once I got that all done, I fired up FileMaker Pro and began creating a simple database. I decided that for the proof of concept, I'd leave out extra stuff like points and feedback for any given question. Here is the list of fields I came up with:

• SceneNumber
• Title
• Description
• Image
• Question
• Choice1
• Choice2
• Choice1Destination
• Choice2Destination

There ended up being 15 total screens. So I was able to quickly create the database and populate it with all the data I needed. I then exported it as an XML file and began crafting my Flash file. I think it will only take 3 frames to run the whole thing. I've got the basic code and some of the data is being read in. I now need to switch gears and concentrate more on the interface. First I'll get it to work, then I'll make it look pretty.

If you've been reading my blog lately, you'll know that I'm working on a Flash-based simulation. Haven't had much time to spend on this sim project, but what I have done is promising. I've been able to upgrade to FileMaker Pro 8.5, so I've got the latest tools. What I really need to do right now is plan how this is going to work.

A decision tree would be most valuable at this point to be able to see where things are supposed to go. If that doesn't come quickly enough I can navigate thru the demo file and take screenshots and print them out just to get started. It's not too extensive.

I'm thinking that I'll use a counter in the Flash movie to be the "boss". By that I mean that I'll pass one number to the Flash arrays so that it will populate the rest of the movie. So, if I want to go to the scene that's listed in record 6 in the FileMaker database, I'll make the counter read 5, since arrays start with 0 instead of 1. I will most likely have separate arrays for each field in the database. Since the arrays are parallel, passing the number 5 would give me all the fields associated with that record in FileMaker. For example...

background_img = backgroundArray[0].firstChild;
description = descriptionArray[0].firstChild;

...would give me the background image and the description of the scene that is listed as the first record in the database (since arrays start with 0).

background_img = backgroundArray[5].firstChild;
description = descriptionArray[5].firstChild;

...would give me both values for the 6th record in the database. And again, there will be many fields in the record for each scene (2-4 possible answer choices, the next scene that each answer will make you go to, points for each answer, feedback, etc.).

So what I'd need to do is associate that number with the answer that is chosen on any given scene in the sim. If the user chooses the first of 4 answers, for example, the counter might be updated to 5, we'll say. Perhaps if they choose the second answer they might be sent to scene 10. It doesn't really matter what order the records are made as long as they accurately point to the right scene. Pretty simple concept actually, and XPath should be very helpful in pulling it off.

In my initial zeal to export XML from FileMaker Pro, I found that the first choice of XML grammar types, FMPXMLRESULT, is not the best choice. What it does is to make a generic formatting of the field names so that all the data comes from a ROW/COL/DATA path. This is not real helpful if you're going to be using XPath. You would still end up using a lot of firstChild.nextSibling iterations in addressing your info.

What you need to do when exporting from FileMaker Pro is to choose XML from the pulldown menu, then for the Grammar type, choose FMPDSORESULT. When you go to save it, make sure that you check "Apply current layout's data formatting to exported data" at the bottom of the window. This way, instead of getting generic ROW/COL/DATA structure, the data will be enclosed by the names of the respective fields. I'll explain more in a moment.

Once the XML file is exported from FileMaker, it can be opened in a text editor (I use BBEdit). What is not good, however, is that the XML file is not indented neatly, but just kind of jumbled all together. Not sure if there is a better way to correct this, but I downloaded a demo copy of Oxygen, which is an XML editor for the Mac. After dragging my XML file to the main window, I clicked the "Format and Indent" button and magically my jumble of text became a neatly organized and indented XML file like I'm used to seeing. GREAT! I think Oxygen costs about $48 educational, so I may get our department to spring for this after the 30 day trial is up.

Moving on to Flash, I'm now going to redo what I blogged about last time. This time you'll see the beauty of how XPath can get you to your data without anyone getting hurt.

// Starting the same as last time...

import mx.xpath.XPathAPI;
var my_xml:XML = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success:Boolean) {
trace("onload...");
if (success) {
trace("success...");

// Now instead of setting the path to this like I did previously...
// path = "/FMPXMLRESULT/RESULTSET/ROW/COL/DATA";

// I can set it directly to this to find all the backgrounds in each record
path = "/FMPDSORESULT/ROW/BACKGROUND"
arrayBackgrounds = mx.xpath.XPathAPI.selectNodeList(this.firstChild, path);

// and set my first background to the first one it finds...
background_img = arrayBackgrounds[0].firstChild;
// so in my second FMP record the background_img would be "arrayBackgrounds[1].firstchild"

// I can then make a new path and point it to the fields called "DESCRIPTION"...
path2 = "/FMPDSORESULT/ROW/DESCRIPTION";
arrayDescriptions = mx.xpath.XPathAPI.selectNodeList(this.firstChild, path2);

// and set my first description variable to the first record it finds...
description = arrayDescriptions[0].firstChild;

} else {
trace("error loading XML");
}
};
my_xml.load("simulation.xml");

stop();

Okay, so each "ROW" in my XML file represents an individual record in FileMaker Pro. Each record in my simulation database will include such info as the background image, the scene title, scene description, the question to be asked, and each of the four choices you might get on that scene. There would also be a destination for each choice that would make you go to that scene should you choose that particular choice. We could also include points for each choice and feedback among other things.

BTW, I actually got the crude demo Flash file from Hershey and am pretty excited to start this project. It became apparent right away that I will need a good flow diagram of the scenes to know what to create and where things will go. Still, it looks very doable, especially since I have a leg up on the data end of things.

If you read my last blog, you'll see that I'm interested in using a FileMaker Pro database to populate Flash content. I'm relatively new to XML and using it in Flash, so I had a bit of a problem at first understanding how to get what I needed out of the XML file to display on screen. It seems like an endless series of "firstChild.firstChild.firstChild" to find the data you actually want. I finally figured out how to get to the right data by doing a trace in Flash and it told me when I got it right.

I then discovered a better way - XPath. According to the W3C, XPath is a language for addressing parts of an XML document. Although the standard is not completely supported in Flash, the parts that matter to me and probably most other Flash developers are. XPath allows you to take a look at your XML file and figure out what path you want it to use to easily get to the info you need.

Before you do anything in Flash, however, you need to go to the Window menu in Flash, and select Common Libraries. From there, select Classes, then drag the DataBindingClasses icon to your Library in your Flash doc. Once you do that, you can go to the first frame of your movie and set the following code in your Actionscript window (I've commented it out line by line):

// the following lines call the XPath class and create a new XML object in Flash
import mx.xpath.XPathAPI;
var my_xml:XML = new XML();

// tell it to ignore any white space it sees in the XML file
my_xml.ignoreWhite = true;

// Here is the function that will run when the Flash movie loads
my_xml.onLoad = function(success:Boolean) {

// Throw a couple trace messages to tell me that the XML file has loaded
trace("onload...");
if (success) {
trace("success...");

// Looking at my XML file, I decided that this was the path to the data I needed
path = "/FMPXMLRESULT/RESULTSET/ROW/COL/DATA";

// Make a array (list) of all the data
arNodes = mx.xpath.XPathAPI.selectNodeList(this.firstChild, path);

// Display the first and 9th pieces of data that you find in the text fields on screen
fname = arNodes[0].firstChild;
lname = arNodes[8].firstChild;

// Now I've made a new path to a higher level of data (just people's names)
path2 = "/FMPXMLRESULT/RESULTSET/ROW";
// And again I'll make an array of those names
namNodes = mx.xpath.XPathAPI.selectNodeList(this.firstChild, path2);

// Now just display the first one in the Output window in Flash
trace(namNodes[0].firstChild.firstChild.firstChild);

} else {

// In case of an error loading the file, trace the following
trace("error loading XML");

}
};

// This is actually the first thing that happens on the page - the XML file is loaded
// "fmp.xml" is the name of my XML file that I exported from Flash
my_xml.load("fmp.xml");

If you've ever addressed information from an XML file in Flash, you'll see that:

arNodes = mx.xpath.XPathAPI.selectNodeList(this.firstChild, path);

sure beats sure beats the snot out of trying to figure out the path manually. That usually looks like this:
name = this.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.firstChild.firstChild.nextSibling.nextSibling.nextSibling.firstChild.firstChild;

And also note the this long line is only giving me 1 piece of data, while the XPath code gives me a whole array of similar information. This is a no-brainer for me. XPath is definitely the way to do XML in Flash!

With the new version of FileMaker Pro 8.5, there is better support for interfacing with Flash to create data driven Flash applications. FileMaker can be used in a couple of different ways. If you're not running a FileMaker server, you can export your database as XML and take advantage of Flash's XML object to import all the data that you need. If you are running a FileMaker 8.5 server, you can access data on the fly without needing to export XML files. The FileMaker server will answer any calls to it in XML format, enabling you to use the same XML object you would use for a static XML file.

What I really like about FileMaker is that it is very simple to set up a database. New records are easily added and layouts are easy to set up. I once set up a database for our church that included all pertinant parishoner information and even got it to spit out a total for their contributions for the year at tax time.

I will be looking soon at developing a proof of concept for a Flash-based anesthesia simulation for the Hershey Medical Center. I envision using FileMaker to create each scenario for the simulation. Perhaps different fields will include the background, what audio is presented, what the description of action in the scene will be, what the question choices might be, how many points would be awarded for each question, which anwer is the correct one, and what the feedback would be for each answer. This in my mind could act exactly like a gaming engine. Flash would simply be a conduit for the content. I used to work for a company that produced business simulations and this is very similar to the way they worked. I always wondered how they pulled it all together, since I only saw a limited portion of it as a web developer. Since FileMaker can export the database as an XML file, there would be no reason why we shouldn't be able to make a standalone simulation available on DVD as long as all the content could fit.

I think if we could pull this off it would be a very cool example of how we could create other data-driven games in the future.

On my way back from lunch, I passed two construction workers. I overheard one say, "I know he knows a lot about windows, but..." and my first thought was Windows operating system. Then I realized, no, he was probably talking about real windows. With glass. Gee, there's a whole 'nother world out there. I've spent too much time in front of a computer maybe.