Any developer will need, at some point, to debug his/her widget from within Captivate to see what’s really going on. Since we don’t have access to a debugger in Captivate, the next best thing is to trace outputs. Being a little bit lazy at time (but this can also be a good thing!), I never bothered much and used the Flash trace() function through a logging API. When you have the Flash Player Debug version, all the traces are written to a log file hidden somewhere in your local settings folder.

So, I used the same mechanism to investigate how widgets are working in Cp5 . However, to my surprise, the trace statements are only logged when you publish the project, not if you preview it. That’s strange since it used to work in both, preview and publish modes, under Cp4. It seems that the Flash Player now used for previewing projects from within Captivate is of a special kind. I have my own idea as to why they did that and I don’t mind at all since it will add some very nice functionality for widget developers … but this is for another post

They say that necessity is the mother of all inventions and I tend to believe this. I don’t want to have to publish my project to trace data so I had to find another way to do this while previewing the project. I knew about the different debuggers existing for pure Flash projects; debuggers like Arthropod or DeMonsterDebugger. These tools are great but I prefer a more complete logging API like Log4J. For years I have looked around for an AS3 version of Log4J but to no avail. Of course, there’s the Flex logger but it links (or used to?) different Flex classes that are not useful in a pure Flash project. I once found a decent logging API but it was limited. I always told myself that I would do it at some point. Today, I Googled for Flash logging APIs and I found a new one: Log5F. This is great! Someone went to the trouble of rewriting a good chunk of Log4J in AS3. And to top it off, that person also wrote a lot of appenders for the most common logging tools. So, I will show you how to use Log5F in your Captivate 4 or 5 project and to use Arthropod to monitor the log outputs.

The first thing to do is to create a widget. You can do this from Captivate by selecting “File>New>Widget in Flash …” from the menu bar. You can create any type of widget but for this example, we will create an Interactive Widget. This will have created a Flash file in the Flash IDE. Save that file to disk. The template created by Captivate has some errors in it. So I strongly suggest that you take the fla included with this post. Also note that more advanced developers should not code in the timeline but in external .as files. If you are at that level, then I strongly suggest that you use Tristan Ward’s Widget Factory API.

The next step is to download the Log5F SWC. The SWC contains the logging API compiled classes so you can use them in your project. Save the SWC in the same folder as the .fla file you just created in the previous step.

From the Flash IDE, open up the “Publish Settings” dialog. Navigate to the “Flash” tab, ensure that the script is set to “Actionscript 3.0″ and click on the “Settings…” button. You should now have the following dialog. Navigate to the “Library Path” tab and add a the Log5F.swc in there.

It is now time to start using the logging API in your code. Go back to the Flash IDE, select the first frame in the stage timeline and open up the code editor. We now need to configure the logger to use Arthropod as an appender. In Log5F, you do that by using an XML file that you put in the same folder as your swf. This is not very practical for us so we will need to configure it programmatically. Log5f doesn’t offer this possibility out of the box so we will have to hack it a little bit. The side effect will be that Flash will issue a warning that it could not load the configuration file.

OK, we need to import the logger classes if we want to be able to use them. Add the following line at the top, with the other import statements:

import org.log5f.*;

Next, configure the logger like this:

var loggerConfig:XML = new XML(' ... look in the fla file ...');
PropertyConfigurator.configure(loggerConfig);
var logger:Logger = LoggerManager.getLogger(this);

NOTE:  I was not unable to properly display the XML string used to create “loggerConfig” so please refer to the fla file to look at it.

The last thing to do is to use the logger to display our messages. There are several methods that you can call. Each method represents a different log level. For example, if there is a critical error in your application and you want to log it, you use the  “fatal” method. On the opposite, if you log outputs purely for debugging, you use the “debug” method. Here is how you call the different logging methods available to you:

logger.fatal("Your Message");
logger.error("Your Message");
logger.warn("Your Message");
logger.info("Your Message");
logger.debug("Your Message");

If you want to know more about logging API in general, I invite you to google a little bit. There are plenty of information on how to use logging API on the web.

We are now ready to test this out. Compile your widget and insert it into Captivate. Download Arthropod , install it and run it. Preview your Captivate presentation and monitor the messages appearing in Arthropod.

Voilà, you can now monitor trace outputs from within Captivate. After all, it’s a very good thing that I could not see trace outputs in Cp5, otherwise, I may have never been lazy enough to integrate this

Download the FLA file here

N.B. There is also another great tool that could help us debug our Captivate application. It is called De MonsterDebugger and allows us to see the display objects structure and to manipulate objects data without recompiling . I will eventually write an appender in Log5f for it and will create another post on how to use it.