Fraser Crosbie: Calgary Web Developer

One of the most important things to know about any programming language is how to debug. In ActionScript trace is the most common way to write data into the output window in order to figure out where your program is breaking. Here is an example of using trace in ActionScript 3.0:

package ca.flashdev.debug {
  public class TraceDebug {		
    public function traceString(myString:String) {
      trace(myString);
    }		
  }
}

Paste this code into a text file and save it as TraceDebug.as in a folder structure of caflashdevdebug.

Create a new movie and using the Actions (F9) panel put the following code on the first frame of the timeline:

import ca.flashdev.debug.TraceDebug;

var classInstance:TraceDebug = new TraceDebug();
var myString:String = "Hello World!";
classInstance.traceString(myString);

Save the movie as trace.fla in the same directory as your ca folder.
Publish (ctrl-enter) your movie and you should see “Hello World!” in the Flash Output window.

You can use trace to output all kinds of information into the Output window, but what do you do if you have to test your file outside of Flash? Often I run into pathing issues where my movie will work great on my system, but when I send my movie to a client it will break on their server. In cases like these you can output information into a javaScript alert window in order to debug the issue. To do this you will have to use ExternalInterface to call the javascript:alert() method in a web browser.

Create a new actionScript file and paste the following code into it:

package ca.flashdev.debug {
  import flash.external.ExternalInterface;
  public class AlertDebug {		
    public function alertString(myString:String) {
      ExternalInterface.call("alert", myString);
    }		
  }
}

Save this file as AlertDebug.as in the same folder as TraceDebug.as.

Create a new movie and add the following code:

import ca.flashdev.debug.AlertDebug;

var classInstance:AlertDebug = new AlertDebug();
var myString:String = "Hello World!";
classInstance.alertString(myString);

Save this file as alert.fla in the same folder as trace.fla.
Open the Publish Settings (Ctrl+Shift+F12)window and place a checkmark beside HTML then click Publish. Open alert.html in your web browser (I used Mozilla Firefox because Internet Explorer kept crashing). You should see a javaScript alert window with “Hello World!” in it.

Well now you know hot to do basic debugging in AS3. You will most likely want to replace myString with variables in your code that you think might be undefined or NaN, causing your program to fail. If your variable is an Object then these two methods won’t tell you much. All they will display is [object Object]. In my next post we will explore how to trace the insides of an Object.

Download the Source Files