Adobe Flash Logging with Active Log

• Download Active Log - 408 Kb
• Download demo project - 442 Kb

Summary

This is a step-by-step article that will guide you through the entire process of using VATech System's Active Log to log messages from Flash movie during runtime.

Introduction

Active Log is a Windows ActiveX application that can be easily plugged to web clients in Internet Explorer browser to log, view and analyze text messages. It can be used as diagnostic trace and log to provide you with information that shows internal processing of operations in your Flash application.

Active Log is extremely useful for logging and analyzing the interaction history between client and server for the following web applications:

• Multiplayer applications such as chatting system and games
• Flash message boards and forums
• Flash RSS viewers

How to use the Active Log

Active Log is a Windows ActiveX application. It can be launched in Internet Explorer browser through JavaScript by calling the ActiveXObject object constructor:

var ActiveLog = new ActiveXObject("VAALOG.ActiveLog");

Use the LogData method to write a message to Active Log:

ActiveLog.LogData(message,title);

Parameters

Returns

To write messages from a Flash movie application to the Active Log we can use the following Flash-JavaScript methods of communication:

• getURL() for earlier versions of Flash Player 8.
• fscommand() action.
• ExternalInterface class introduced in Flash Player 8 that enables ActionScript to call any JavaScript function on the HTML page directly with passing any number of arguments of any data type and receiving a return value from the call.

In this example, we will use ExternalInterface class to invoke Active Log's LogData method from Flash movie. The ActionScript code below demonstrates this approach.

ExternalInterface.call("ActiveLog.LogData",message,title);

Live Active Log Example

This live demo demonstrates how Active Log can be used to log messages from Flash movie during runtime.
Note    This demo works in IE browser only.

Walkthrough: plugging Active Log to Flash movie

Here are the steps you should follow to implement this demo example:

1. Install Active Log.
2. Create a new ActionScript 3.0 Flash Document in Adobe Flash. Save the file with the file name: ActiveLogEx.fla.
3. Place a TextInput component on the stage and give instance name of: txtTitle.
4. Place a TextArea component on the stage below the txtTitle and give instance name of: txtMessage.
5. Place 2 Label components on the stage before text components and set Text properties to Message Title and Message Body.
6. Place 2 Button components on the stage below the txtMessage and give in instance names of: cmdXml and cmdLog.
7. All of the code for the movie will be in Frame 1. Select the frame one of Layer 1 (or make a new layer for your ActionScript) and open the Actions Panel.
8. Use ActionScript External API ExternalInterface.call method which, in this example, will invoke a JavaScript ActiveLog.Trace function that will call LogData method in Active Log. The parameters passed into that function in JavaScript will be set to txtMessage.Text and txtTitle.Text in cmdLog_onClick event handler.

   This is the completed ActionScript:

   import flash.external.ExternalInterface;
   
   // Register events
   cmdLog.addEventListener(MouseEvent.CLICK, cmdLog_onClick);
   cmdXml.addEventListener(MouseEvent.CLICK, cmdXml_onClick);
   // Writes a message to the Active Log
   function cmdLog_onClick(event:MouseEvent):void
   {
          ExternalInterface.call("ActiveLog.Trace", txtMessage.text, txtTitle.text);
   }
   // Generates XML and populate txtMessage textarea
   function cmdXml_onClick(event:MouseEvent):void
   {
          var xmlDoc:XMLDocument = createSampleXml();
          txtMessage.text = xmlDoc.toString();
   }
   // Creates      sample XML
   // @return      sample XMLDocument
   function createSampleXml():XMLDocument
   {
          var xmlDoc:XMLDocument = new XMLDocument();
          var xmlNode:XMLNode = xmlDoc.createElement("ADDRESS");
          xmlNode.appendChild(createXMLNode("BUILDINGORHOUSENUMBER","525",xmlDoc));
          xmlNode.appendChild(createXMLNode("STREET","Chaplin Crescent, SW",xmlDoc));
          xmlNode.appendChild(createXMLNode("CITY","Toronto",xmlDoc));
          xmlNode.appendChild(createXMLNode("PROVINCE","ON",xmlDoc));
          xmlNode.appendChild(createXMLNode("POSTALCODE","M5N2N2",xmlDoc));
          xmlNode.appendChild(createXMLNode("COUNTRY","Canada",xmlDoc));
          xmlDoc.appendChild(xmlNode);
          return(xmlDoc);
   }
   // Creates XMLNode with text
   // @param name          XMLNode name
   // @param text          XMLNode text
   // @param xmlDoc        XMLDocument to create XMLNode
   // @return                      XMLNode
   function createXMLNode(name:String,text:String,xmlDoc:XMLDocument):XMLNode
   {
          var xmlNode:XMLNode = xmlDoc.createElement(name);
          var xmlTextNode:XMLNode = xmlDoc.createTextNode(text);
          xmlNode.appendChild(xmlTextNode);
          return(xmlNode);
   }

   
   
9. Open the HTML created when having published the SWF for ActiveLogEx.fla.
10. Within the head tag of the HTML, insert the JavaScript jsoActiveLog function used to interact with the Flash movie and pass messages to the Active Log.

    This is the completed JavaScript placed in the HTML head:

    function jsoActiveLog(bActiveLogMode)
    {
        // Constructor
        // @param bActiveLogMode - Boolean value( true or false ) whether to turn Active Log on.
        function jsoActiveLog(bActiveLogMode)
        {
            this.ActiveLogMode = bActiveLogMode;
            this.ActiveLog = null;
            try     {
                this.ActiveLog = new ActiveXObject("VAALOG.ActiveLog");
            }
            catch (e){
                this.ActiveLogMode = false;
            }
        }
        // Logs message to Active Log.
        // @param message   - Text message to be logged.
        // @param title     - Message title that is displayed in the message list pane.
        jsoActiveLog.prototype.Trace = function Trace(message, title)
        {
            if(this.ActiveLogMode)
               this.ActiveLog.LogData(message, title);
        }
        return new jsoActiveLog(bActiveLogMode);
    }
    var ActiveLog = new jsoActiveLog(true);

Conclusion

The ActionScript trace statement already provide mechanism to display messages in the Output panel while testing a SWF file. However, several factors make Active Log a suitable technology for logging messages in real-time. In this article, we've covered the basics of using Active Log, and we've seen the example of a plugging Active Log to Flash movie step by step. Many developers and system administrators can benefit from its use.