During development, I experienced a problem with the display of the dynamically loaded graphics. If a question had a graphic associated with it, the assessment engine;

1. loaded the graphic,
2. unloaded the previous graphic from the movie clip that holds graphics,
3. placed the graphic in the movie clip,
4. positioned the movie clip,
5. sized and positioned a border around the graphic, and
6. set the movie clip and border to be visible.

When the movie clip was set to be visible the previous picture with the previous position and border size flickered on stage before showing the correct display.

Once I had determined the code was being executed properly, I read more about the screen update process and discovered the importance of scheduling screen updates to happen with Event.ENTER_FRAME when using code to create displays or animate.

Event.ENTER_FRAME is dispatched at regular intervals determined by the frame rate. The key to solving the problem is understanding that when Event.ENTER_FRAME is dispatched, code is executed first, then the screen is rendered.

I added one step to the process (step 6). With the new code, if a question has a graphic associated with it, the assessment engine;

1. loads the graphic,
2. unloads the previous graphic from the movie clip that holds graphics,
3. places the graphic in the moviclip,
4. positions the movie clip,
5. sizes and positions a border around the graphic,
6. waits for a screen update, and
7. sets the movie clip and border to be visible.

Steps 1-5 happen during the first Event.ENTER_FRAME dispatch. After Step 5 executes, the screen updates and the display is  set to the correct state. On the next Event.ENTER_FRAME, it is safe to execute the code that makes the display visible.

Below, I’ve place the code you need to implement a scheduled screen update.

// The listener is attached in the image load callback function
_image.addEventListener(Event.ENTER_FRAME, fShowImage);

// Gets called when the screen updates because that is when it is ok to make the image visible
  public static function fShowImage(e:Event):void
  {
   _image.removeEventListener(Event.ENTER_FRAME, fShowImage);
   Globals.Swf.border_mc.visible = Globals.Swf.graphic_mc.visible = true;
  }

The common workaround for the bug is to simply remove the Video component  from the stage when the movie is complete. This solution is not robust enough for my purposes because I continue to use use the Video instance to play other movies. Also, the video templates will be used by a client to develop screens for courses, and the client might change properties of the component (name, placement, etc.) so a function that always creates a component with predetermined values is not an option either.

Below I have pasted the function I use in a custom VideoHandler class to create a duplicate Video component, clear the original Video component, and place the new on the stage.

private function fClearVideo():void
{
// Stops playing video and deletes the local copy of the video, though it may still exist in cache
_ns.close();

// There is a bug with _video.clear where it only clears 1 pixel of the video
// This bug was noted in 2008, exists in Flash Player 9 and 10, and unfortunately has not been fixed
// Duplicate the Video component
var videoDouble:Video = new Video;
videoDouble.x = _video.x;
videoDouble.y = _video.y;
videoDouble.width = _video.width;
videoDouble.height = _video.height;
videoDouble.name = _video.name;

// Remove Video instance from the stage and add the duplicate instance.
this.removeChild(_video);
_video = this.addChild(videoDouble);
}

Of course you could purchase them, but that’s not ideal. The price for the PostScript version of one of our client’s fonts is $500 because it’s packaged with the TrueType version (which we already have).

So I searched the Web for an open source converter and found FontForge. To install FontForge on a Windows OS you must also install cygwin. On a Mac you need to install the X11 server. Cygwin and the X11 server will make your machine look enough like a UNIX machine to run the program. This is a fine solution for a developer or technology-savvy person, but I know our Instructional Designers who use Captivate will certainly be intimidated and deterred by the process.

The best solution I found for converting any type of font to a PostScript format is FontLab’s product TransType Pro, which costs $179. Unfortunately the demo download for TransType does not allow you to test the conversion of a font to PostScript. Although FontLab products come with a 60-day money-back guarantee, if you wish to test a conversion before making a purchase, you may use the demo download for FontLab Studio to convert 20 characters of your font set. You can then test the font in Captivate using only those 20 characters to see if the conversion will meet your standards.

The solution that has evolved is a function named DisplayText, which I have copied below. The comments explain how the function works and an example call is included.

If you try implementing this solution and find it useful, if you need help or would like to enhance it, please leave a comment below.

/**
 *  Takes a string of text that may have bold and italic tags.
 *  Displays string properly in an HTML TextField by replacing the bold and italic
 *  tags with font tags.
 *  Fonts should be linked in the library.
 *  Each version (regular, bold, italic) should have its own link.
 *  If 2 versions of the font (ex. regular and italic) have the same name
 *  in the Font Symbol Properties dialog Font menu you don't need specify the italic
 *  or bold version.
 *  Example Call:
 *   var s:String = "Hi, and welcome to <b>Lesson 1:</b><i>Topic 1</i>."
 *   DisplayText( display_txt, s, 13, "Franklin Gothic Book", "Franklin Gothic Demi" );
 * @param    tf                TextField to format
 * @param    s                 Text to place.
 * @param    size              Size of text display.
 * @param    defaultFont       Regular font.
 * @param    boldFont          Optional. Bold font.
 * @param    italicFont        Optional. Italic font.
 */
 function DisplayText ( tf:TextField,
                         s:String,
                         size:Number,
                         defaultFont:String,
                         boldFont:String = "",
                         italicFont:String = "") : void
 {
     tf.htmlText = true;              // Set this to allow HTML text to be set
     tf.embedFonts = true;            // Set embed fonts to true
     tf.text = s;                     // Assign text - but not as htmlText yet

     // If a bold font is specified, replace bold tags
     if ( boldFont != "")
     {
         var boldStart:RegExp = /<b>|<B>/gi;            //    Match opening bold tags
         var boldEnd:RegExp = /<\/b>|<\/B>/gi;         //    Match ending bold tags

         tf.text = tf.text.replace( boldStart , "<font face='" + boldFont + "'>" );
        tf.text = tf.text.replace( boldEnd , "</font>" );
     }

     // If a italic font is specified, replace italic tags
     if ( italicFont != "")
     {
         var italicStart:RegExp = /<i>|<i>/gi;          //    Match opening italic tags
         var italicEnd:RegExp = /<\/i>|<\/I>/gi;        //    Match ending italic tags

         tf.text = tf.text.replace( italicStart , "<font face='" + italicFont + "'>" );
         tf.text = tf.text.replace( italicEnd , "</font>" );
     }

     // Wrap the text in a tag defining default font face and size
     tf.text = "<FONT FACE='" + defaultFont + "' SIZE='" + size + "'>" +
                tf.text + "</FONT>";
     // Assign the text
     tf.htmlText = tf.text;
 }

Each of us has written a summary of our favorite FlashPitt 2009 presentation. You may read them below and hopefully they will convince you to attend the conference next year.

Ben Rogers (Director, Technology and Solutions)

Julian Dolce spoke about “iPhone Development for Flash Developers” on the heels of Adobe’s announcement that CS5 would allow developers to compile ActionScript 3 projects to iPhone applications. The announcement came just a few days before FlashPitt, but Julian made his talk relevant by switching gears and researching what it means for Flash developers. Julian and his company Fuel Industries have already spent considerable time in the iPhone SDK to convert Flash applications to the platform manually, and his research on the new subject was impressive.

Julian’s best subject was anticipating Apple’s response. Apple has not officially responded to the CS5 announcement, and if they chose to respond negatively Apple could disrupt plans in several ways. First, the existing SDK signing method has not been available on a Windows platform. It is implied by the CS5 capability that Adobe reverse-engineered the procedure to enable signing on a Windows platform. Would Adobe change their algorithm or policies to thwart that? Second, the Apple team reviewing iPhone application submissions may choose to place CS5 compiled apps at the bottom of their priority list- especially if the market is flooded with new apps from the Adobe community. Finally, Julian’s own research pointed towards CS5 compiled apps being significantly larger than iPhone SDK equivalents – a problem that may cause Apple (or even AT&T) to have concerns in distribution. It will be interesting to see how Apple handles the announcement!

Julian also pointed out that developers are mistaken if they think they can open up every old Flash project and successfully get it running on the iPhone without modification. Flash developers will have to consider image and audio files, among other things, because of the differences in how they are processed and interpreted on the iPhone.

The presentation was informative and well put together on such short notice. Julian’s knowledge and experience on the subject really came through. Find out more about what he’s up to on his blog.

Doug DiFilippo (.NET Developer)

I really enjoyed Josh Sager’s discussion on integrating MIDI information into Flash. Josh had the idea of developing an animated character that would react to input from his keyboard. I think what I appreciated most was how Josh took us step-by-step through his development process. He started with the basics of researching, installing, and learning how to use a Red 5 Server. He then moved on to simple examples of receiving MIDI data and creating different visual displays based on pitch. Each example was a little more sophisticated than the next and before you knew it he was able to visually display pitch, pressure changes, and even recognize basic chords. Overall, it was a very unique application of Flash and I am glad to now be exposed to Red 5 Server as well. You can watch  the presentation for yourself here. Great job Josh!

Matt Manzo (Graphic Designer)

I found the most interesting creative work at the 2009 FlashPitt conference was not in one of the official “design track” sessions, but in Seb Lee-Delisle’s talk titled “Work/Play.” Seb covered everything from homemade 3D Flash render engines under 5k, interactive projected outdoor particle firework installations, Papervision driven 3D websites for the BBC, Stereoscopic motion detecting pong, ball tracking software for Major league Baseball, and more! Seb is constantly pushing the limits of what Flash is capable of, and leading his work in directions that most Flash developers would not think possible. Plus it looks good.  All of this complex code is beautifully wrapped in eye-popping graphics and illustrations, an item that many programmers overlook. The session had my mind reeling at the time, but more importantly has left the gears in my head turning long after the conference has ended.

Nicole Gagliardi (Multimedia Developer)

“Developing MMOs on the ActionScript Platform” by Max Kaufmann, from Silver Tree Media, was my favorite presentation. Throughout the presentation Max returned to a common theme of developing for what is and is not acceptable in gaming environments. Long loading times, for example, are not acceptable so users are often allowed to start playing a game before all the assets are loaded. This means clothes and character accessories or weapons might start popping onto a character during the first few seconds of the game, then background elements such as trees or mountains start to load.

Max also explained a scenario where it is acceptable to award a prize to multiple players. Due to the varying connection speeds of the players, one player may grab a prize, but before the information had time to reach the server and update all the other players’ virtual worlds a second player grabs the same prize. If the prize is relatively unimportant it is acceptable to award the prize to both players, rather than disappoint and annoy one player.

Developing MMO’s is extremely challenging and Max reminded us they do not need to be perfect. The most important thing is handling obstacles in a way that allows players to enjoy an environment they perceive as fun and fair. In fact, it’s even okay for the game to occasionally fail…. as long as it fails with humor!

Recently I was working on a project that required a combination of an animated introduction with music and alternating sections with a video of the host talking and a Captivate movie with the host’s voice synced to the movie. We had never combined Captivate SWFs with audio and Flash SWFs with audio in the same project, and we found it difficult to match the audio quality of the final SWFs. No matter what compressions we tried, the Captivate files sounded worse. Because we were short on time, we saved the Captivate files as FLAs and exported the final SWFs from Flash so that the sound quality would match.

The solution worked, but I was left wondering if there was a way to match the sound quality of audio output in Flash and Captivate without exporting to Flash.

The Research

I searched the web for help answering this question. The first piece of information I found was that a non-critical patch for audio degradation had been released for Captivate 4 in May 2009. Non-critical patches do not get downloaded as an automatic update—you have to go to Help > Updates and download it yourself. I did this immediately because it not only improves the audio, but it fixes a memory leak, compile problems and more.

The patch helped but it didn’t completely solve the quality discrepancies between Captivate and Flash.  My next stop was Mark Siegrist’s elearninglive.com blog. In July 2008, Siegrist started blogging about Captivate audio output. He tests the effects or the three configurable audio parameters on the audio quality and files sizes. The series is missing the final post summarizing the results and recommending settings to use for the best file size-to-quality ratio, but the existing posts are incredibly informative and contain examples that you can listen to and compare. I have listed the posts below.

• Captivate Audio Output Settings Comparison – Part One – Encoding Bitrate
• Captivate Audio Output Settings Comparison – Part Two – Encoding Frequency
• Captivate Audio Output Settings Comparison – Part Three – Encoding Speed

This series of posts allowed me to begin testing right away. I decided to test whether or not importing different audio formats (WAVs and MP3s) at different qualities would help me find a way to match the audio in Captivate to the audio in Flash.

The Testing

I imported a variety of MP3 files into both Captivate and Flash, trying to match the audio quality to the published SWFs. The MP3s included 128kbps/44.10khz,  64kbps/44.10khz, 48kbps/44.10khz and 48kbps/20.50khz 16-bit files (Captivate only accepts 8-bit and 16-bit audio files). Even the 128kbps/44.10khz file in Captivate had slightly more static compared to the 48kbps/44.10khz file in Flash, with publish settings in each program set to match those of the native files.

Although WAVs imported into Captivate get converted to MP3s when you publish to a SWF, I decided to try importing a 128kbps/44.10khz 16-bit WAV file into Captivate to see if I would get better results than the MP3. The results were the same.

The Solution

It’s best not to mix Captivate published SWFs in the same project as Flash published SWFs. We are often able to get around this problem by having a Flash wrapper handle all audio for the course, though this creates difficulties when the Captivate and audio need to be synced. In cases where audio needs to be synced, the quickest and easiest solution is to save your Captivate file as an FLA and publish in Flash.

But don’t get the wrong idea—just because these solutions worked for us doesn’t mean that Captivate has poor audio compression. That is not the case at all. As you can hear in Siegrist’s posts, you can get very good quality audio in Captivate published SWFs.

The Summary

I could not find a way to match the audio quality of SWFs published from Captivate and SWFs published from Flash, although I was able to improve the Captivate results by downloading the patch. I also learned from Siegrist’s posts that the best file size-to-quality ratio can be achieved using 48kbps/44.10khz compression with an encoding speed of 8.

The question remains—is Captivate audio compressed the same way as Flash audio? I could not find documentation from Adobe that would help me answer this question, but my tests lead me to believe that audio compression for the two programs is not the same. If you have any information you can share with me on this topic, please leave a comment below.

When trying to create a theme for Captivate, I discovered our client’s preferred font, Whitney set to 12 pts, which was illegible in the program and in the published SWFs. So I did some research on font rendering in Captivate and came across several possible solutions. Below is a summary of my research, test results, and conclusions:

The Research

I started by searching the web for documentation on Captivate’s font rendering engine and I requested information from RJ Jacquez, the Adobe Evangelist for Captivate. The web search for documentation resulted in one useful article on the CommunityMX web site: Text in Captivate, by Tom Greene. The article does not have a date but the support file for this article was dated 9/12/2005, therefore I assumed it was written about one month after Flash 8 Player was released and the author would have been using Captivate 1. Considering the age of the article I read it with caution.

According to Greene, Captivate turns letters into bitmaps, using Microsoft products such as MS Word as the benchmark for font rendering. The Captivate team chose to do this rather than use the Flash font rendering engine because Flash could not display small point sizes adequately. Greene would have preferred the Captivate team to just inform developers to stop using bitmap fonts. One additional issue with Captivate is that Captivate displays fonts 2-3 points larger than Fireworks, so a 9 pt Arial in Captivate looks like 12 pt Arial in Fireworks.

I requested help from Jacquez through Twitter (@rjacquez). At first he replied saying he would look into my problem and get back to me as soon as possible. He later replied that he is “not in documentation” but would share my query with the team. A dead end for me… and so it was time to sit down and do some testing to see if Greene’s insights would still hold true with the Flash Player 10 and Captivate 4.

The Testing

Initially I set up a font test in Captivate and one in Flash using Postscript, TrueType and OpenType fonts. Below is a screen capture of my results. Notice how all the fonts in Captivate have jagged, unaliased edges while the Flash fonts are smooth because they are aliased. The distortion of the Captivate fonts is worse for OpenType and TrueType fonts because Postscript fonts are meant to be rasterized for print, and therefore look better when they are rasterized and turned into bitmaps.

Although these were the results I should have expected after reading Greene’s article I was still surprised. The OpenType format was developed by Microsoft in partnership with Adobe, and Adobe has a set of OpenType fonts they distribute for use with their programs, so I never would have expected one of their products would do such a poor job of displaying those font types.

Lastly, take note of the variation in display size between the Captivate and Flash fonts, despite all fonts being set to 25 pts. I measured the difference between the first letter in the Captivate font and compared it to its Flash partner. For each font the Captivate display was 5-7 pixels larger!

This test reveals that the information in Greene’s article from 2005 still holds true. The basis of Captivate’s font rendering engine has not been improved since Captivate 1. The next step was finding a work around.

The Solutions

My mind first jumped to embedding the fonts in Captivate. There is no embed option in the program so I thought I might be able to place a Flash SWF embedded with the fonts in the Captivate project. When that didn’t work I searched the Adobe forums and tried many other potential solutions that involved changing settings in Captivate and on my computer. All I learned is that I’m not the only frustrated person, and there is no way to embed fonts in Captivate or make the fonts render better without Flash.

If you can use Flash for a project, there are two solutions. The first is to save your Captivate file as a Flash file, open the file in Flash, embed fonts in any dynamic text fields and then publish the SWF. This is the best solution if you need a font to be used throughout a project that does not render well in Captivate.

The second option is best if you plan to use a font that does not render well in Captivate on a limited number of slides. Simply create your slide in Flash, publish the SWF and insert it into Captivate. If you are using dynamic text fields in the SWF, ensure all text is embedded, because Adobe warns that Captivate does not display device fonts. This means that if you don’t embed your text in Flash, you won’t see any text at all. I also found you cannot allow dynamic or static text to be selectable because if a user selects it, the text may disappear.

The Summary

In summary, if you need to work in Captivate and cannot use Flash for a project, you are limited to carefully choosing your fonts. My general recommendation is to use Postscript fonts since they tend to look best. If you plan to have any dynamic text fields in your project (i.e., text entry fields) you will want to stick to common fonts since Captivate cannot embed fonts, and users who do not have the fonts installed on their computer will not be able to see them.

I received the email above last Thursday from James Gagliardi, River Farms Horticulturalist, to inform me that the André Bluemel Meadow web site launched.

River Farms, a 25 acre property in Alexandria, VA, once owned by George Washington, currently serves as the headquarters for the American Horticultural Society. The André Bluemel Meadow is a 4-acre sustainable meadow planted to replace a vast expanse of lawn.

As the River Farms Horticulturalist, James is primarily responsible for the care of the grounds, including the meadow. A few months ago James called and asked for my help developing an interactive web site for the meadow to promote it, involve the community, and garner support for an initiative to redevelop the entire AHS web site.

Since the current AHS hosting plan did not provide PHP support and there was no budget for the project, Five Star generously offered to host the site and allowed me to donate my time to the project. I built the site using WordPress as a content management system because it offers a solution the AHS can reuse and build upon when redeveloping their site.

To help James create the plant list for the Meadow Plants page more easily, I built a Plant Manager plugin (pictured below) which gives hima wizard to use. To add interactivity, we included a Flickr slideshow so that visitors may upload their own pictures to a Meadow Wildlife page where visitors may leave comments about the wildlife they spot in the meadow. Both interactive pages allow nature lovers to share their experience and help promote the meadows purpose, showing that a meadow can be a beautiful, sustainable alternative to traditional lawns, supporting it’s own ecosystem.

If you are in the Washington D.C. area I recommend visiting River Farms to enjoy a view of the Potomac and a nature walk in the meadow. When you get home make sure to share your photos and tell us what wildlife you saw!

Oh, and one more thing, if you have noticed this developer and James share a last name I’ll answer your question… yes we are related; he is my brother. Despite James’ penchant for procrastination and my disposition to work well ahead of deadlines we managed to successfully complete this project together. James and I would like to thank Five Star for the opportunity to work together and create something special for the AHS to help support their mission by relaying the educational message and beauty of the meadow to the 23,000 members of the AHS and the public as a whole.

The ActionScript version I’ve implemented works in much the same way as its .NET counterpart. The first argument is a format string containing format items. For example, to display the current date, we may set up the following format string, “Today is {0}.” Then, we pass an array of objects to use as replacements for the format items. In our example, we would pass a new array literal with one item, [ new Date().toDateString() ]. So our entire call would look like the following:

// display today's date in the text field txtDate
txtDate.Text = StringUtils.Format( "Today is {0}." , [ new  Date().toDateString() ] );

The function will return a new string that has the {0} format item replaced with the evaluated value from the Date object. It is important to note that ALL instances of {0} will be replaced, not just the first occurrence. So the function itself is very simple, but can dramatically improve the readability of code.

I have provided the source below and a link to download StringUtils.as, which has the necessary Replace function as well. The only note I would make about the code is the use of toString() on each object in the array passed to the function. This allows calling code to pass arrays containing any type of object and omit calling toString() on each instance (provided the toString() implementation is acceptable). Hopefully you find this as useful as I have!

Source:

public static function Format( formatString:String , args:Array ) : String
{
   var result:String = formatString;

   for (var i:int = 0; i < args.length; i++)
   {
      result = Replace(result, "{" + i + "}" , args[i].toString() );
   }
   return result;
}

Download Source Files

rdcmndPrevious = 1: Go to previous slide.
rdcmndNextSlide = 1: Go to next slide.
rdcmndPause = 1: Pause the project.
rdcmndResume = 1: Resume showing a paused project.
rdcmndRewindAndStop = 1: Rewind and stop the project.
rdcmndRewindAndPlay = 1: Rewind and play the project.
rdcmndGotoFrame: Go to a specific frame.
rdcmndExit = 1: Exit.
rdcmndInfo: Display the information window (in Captivate 2 this variable is rdcmdInfodisplay).
rdinfoFrameCount: Total number of frames in the project (this is not the number of frames in the main Timeline, but the sum of all slide frames)
rdinfoSlidesInProject: Number of slides in the project (including hidden slides)
rdinfoCurrentFrame: Current frame
rdinfoCurrentSlide: Slide currently playing (zero based)
rdinfoSlideCount: Number of slides in the project (not including hidden slides)
rdIsMainMovie: Can be used to identify whether the SWF corresponds to the main Adobe Captivate project

According to Matt Maxwell’s blog post “Controlling an Imported Captivate Movie” there are three additional variables not published in the Adobe Captivate Live Docs, and those three are listed below.

rdcmndHidePlaybar: Used to hide or show the playbar 1= hide 0=show
rdcmndCC: Used to show or hide Closed Captions 1= show 0=hide
rdcmndMute: Used to mute or unmute the audio 1= mute 0=unmute