Debugging flash movies with trace()

When we start making custom flash for Inetsupervisor they tend to be small and relatively easy, but as we become more comfortable with flash we start to test our programming chops and want our little movies to behave more like apps with all the bells, whistles, functionality and bugs that go along with that. I have been using a plugin for firefox called Flash Tracer for a while and have found it very useful. Flash Tracer works with the trace function in flash, some of you may not know what the trace function is so here is an explanation straight from Adobes website:

trace
Availability
Flash Player 4.
Usage

trace(  expression  ) 

Parameters
expression An expression to evaluate. When a SWF file is opened in the Flash authoring tool (via the Test Movie command), the value of the expression parameter is displayed in the Output window.
Returns
Nothing.
Description
Action; evaluates the expression and displays the result in the Output window in test mode.
Use trace to record programming notes or to display messages in the Output window while testing a movie. Use the expression parameter to check if a condition exists, or to display values in the Output window. The trace action is similar to the alert function in JavaScript.
You can use the Omit Trace actions command in Publish Settings to remove trace actions from the exported SWF file.
Example
This example is from a game in which a draggable movie clip instance named rabbi must be released on a specific target. A conditional statement evaluates the _droptarget property and executes different actions depending on where rabbi is released. The trace action is used at the end of the script to evaluate the location of the rabbi movie clip, and display the result in the Output window. If rabbi doesn't behave as expected (for example, if it snaps to the wrong target), the values sent to the Output window by the trace action will help you determine the problem in the script.

on(press) { 
  rabbi.startDrag(); 
 } 

 on(release) { 
  if(eval(_droptarget) != target) { 
     rabbi._x = rabbi_x; 
     rabbi._y = rabbi_y; 
  } else { 
   rabbi_x = rabbi._x; 
   rabbi_y = rabbi._y; 
   target = "_root.pasture"; 
  } 
  trace("rabbi_y = " + rabbi_y); 
  trace("rabbi_x = " + rabbi_x); 
  stopDrag(); 
 }

as you can see the trace function will take an object value and then write it as text. In this case Adobe is talking about displaying the text in the output window of the flash program during a debugging session, but what about when you are vieing it on a webpage. This is where Flash Tracer comes to the rescue. Flash Tracer will capture the text coming out of the trace() and display it on a window in your browser.

Before I begin to show you how to use trace() and the Tracer you will need to setup your machine. First and foremost Firefox will have to be on the machine, second get Flash Tracer plugin for Firefox, then third you'll need a debugging version of flash player. Once you have all that downloaded and installed then we need to setup Flash Tracer.

Start Firefox and then Tracer by going to Tools --> Flash Tracer when it is running click on the wrench icon on the lower right for preferences. At the top you will see Select File Output depending on you operating system this file will be located in different locations, just follow the defaults for you OS and you should be fine. The rest of the preferences you can leave as the defaults as they are mostly styling.


Next lets write some code to show how this works. Make a movie then add the following code:

setInterval(funct,1000);//repeating timer to run a function set at 1 second
var inc:Number = 0;//conting variable
function funct()//function that is called by the repeating interval
{
trace(inc++);//increase the value of inc and output the value to the trace
}

Build the movie, insert into a webpage, and as you can see now when we run the movie with Flash Tracer every second the value of inc gets updated and ported to the text. You can forward the value of anything to the trace() strings, numbers, names or you can use it to confirm actions have happened like when a button is clicked. I hope this helps/encourages more and better flash development