Tutorial: Page (1) of 3 - 11/20/09 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Flash Browser Tracing On Mac, Windows, and Linux

See and hear what your Flash movies (and everyone else's) are doing and saying behind the scenes By Kevin Schmitt

Ah, the simple, venerable trace command. Everyone who has ever written even a single line of ActionScript -- from the newbiest of designers to the most seasoned programming professional -- has doubtless become intimately familiar with this most basic, approachable, and useful command. But love turns to hate if you ever need to see what's going on when your Flash movie is playing in a browser, where seeing a simple trace can rapidly become an exercise in frustration. Fret no longer, fearless readers, as this guide aims to get everyone in on that sweet, sweet browser tracing action.

There are a couple of reasons why being able to see ActionScript traces from a browser is important. I already generalized the rationale in the opening paragraph, but it may be worth spelling it out more bluntly: sometimes, once your Flash projects are running in a browser, oddities bubble up. To cite some broad examples which have personally bitten your humble author on the backside, a flashvar may not be what it needs to be, a server-side PHP script could return strange data, or a relative path which worked locally might be just a tad off once on the server. In other words, stuff goes sideways, and if you can't see how things are going wrong in an actual online environment, you're dead in the water.

Another real-world case for tracing Flash output in the browser is user testing. Equipping beta testers with the means to view errors or general output helps enormously when you're shaking down bugs and issues in Flash-based RIAs. Instead receiving user feedback on the order of "I did this, and it didn't work," you can actually get "I did this, and here's the specific error I'm seeing," a scenario which I'd imagine would be more helpful to just about all Flash designers and developers. Unless, of course, you thrive on a certain level of vagueness and uncertainty, in which case I suppose you can stop reading. Otherwise, let's get to how this is set up.

 

The project

Any Flash project you have lying around that has any trace calls in it would qualify as one to test against, but for the sake of completeness I'm including a very basic project which does nothing more than provide a button that calls a trace statement. You can download the pre-made Flash CS4 project (backsaved to CS3 format in the name of broader compatibility), compiled SWF, and HTML file from this link, or you can create and publish your own version from the following (very basic) steps:

  1. Create a new ActionScript 3 Flash file
  2. Drag a Button out of the Components panel onto the Stage
  3. Name the button instance "btn" using the Properties panel
  4. Create a new layer named "actions" in the Timeline
  5. Select frame 1 in the actions layer
  6. Enter the following code in the Actions panel:

stop();

var count:uint = 1;

btn.addEventListener(MouseEvent.CLICK, onClick);

function onClick($e:MouseEvent):void {
    trace("I am tracing the number " + count);
    count++;
    setLabel(count);
}

function setLabel(n:uint):void {
    btn.label = "Trace the number " + n;
}

setLabel(1);

Since it's outside the scope of this guide, I'm not going to explain the steps or code in greater detail, but suffice it to say that the project shouldn't be hard to figure out if you're inclined to take a closer look. In any event, if you test the movie (Control: Test Movie) and click on the button while the movie is running, you should see something similar to Figure 1:


Figure 1

And while that's all fine and good, the whole point of this guide is to give you similar feedback while this project is running in a browser, so let's move things along towards that goal.

The Debug Player

If you do any sort of Flash development already, you likely already have the Debug version of the Flash Player. However, it's a safe bet that any end user you may be trying to set up won't, and seeing how browser traces won't show up without it, it's a download worth having. This page always contains the most recent version of the Debug Player, which, as of this writing, is the version of Flash 10 released on July 30, 2009. You'll want to snag the version for whatever platform you're developing on (or that your users are on) and keep it handy. Note that the Windows version has two distinct installers: an ActiveX control for Internet Explorer, and a Netscape-compatible version for everything else. Installation is point-and-click simple on Mac and Windows, as you might expect, though Linux might be another story. I have the latest Ubuntu running in a virtual machine, and with the assistance of this helpful hint, I used apt-get to install the latest non-debug player, downloaded the Debug player for Linux, and then replaced the regular player library with the debug version. If you're comfortable with a command line (even if it's just for simple commands), you'll be fine.

Alternately, if you have Flash CS4 installed on your Windows or Mac system, and are current as far as updates are concerned, the Players folder inside your Flash CS4 program directory should already contain the Windows and Mac versions of the Debug Player, so an extra download may not even be necessary. Once you've run the Debug player installer on your target system, an easy way to determine whether or not it installed correctly is to navigate to any page with an embedded Flash movie, right-click on it, and look at the menu. If it contains entries like "Show Redraw Regions" and "Debugger" (fig. 2), you're good to go.


Figure 2: Ready to rock on (from top) Mac, Windows, and Linux.

One last word of warning for Mac users before moving on: if you have previously installed the Debug Player but have applied a Mac OS X update in the interim (such as the recently released OS X 10.6.2 update), make sure the installed player is still the debug version, as Apple has a habit of overwriting whatever installed Flash Player is present with the most recent non-debug version. You may need to check and re-install if this is the case.


Page: 1 2 3 Next Page


Related Keywords:flash, flash cs4, adobe, flash player, mac, windows, linux

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved