Flash trace app for Mac OS X

Download FlashTraceThe other day my FlashTracer (Firefox add-on) and my FBTracer (FireBug extension for Firefox) stopped working (again!). I’m so tired of these flash tracing tools doing this to me all the time and as an addition I’ve wanted a stand-alone tool for my flash trace for a while, so I can have the Flash trace and Safari windows visible at the same time, without the need for Firefox (or a massive debugging tool – I just want a simple trace output). That’s why this time I wrapped up a small Mac OS app that simply opens Terminal and shows the user the Flash trace output in a Terminal window.

This is no magical app, it still demands that the user has the DEBUG version of Flash player installed and that your flash trace text file is in this directory:
~/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt
(the ~ meaning your home directory in unix talk)

The app is downloadable below and is free for you to use. Note that I release the app with a GPL license and your are welcome to use, distribute and change it. You can open the app using the AppleScript Editor. I would love to hear if you make any useful additions to it but cannot provide any support, sorry.

Enjoy!

Download FlashTrace.app here

Google Analytics and Flex using ExternalInterface

A big issue for people creating flash sites is getting the site to work well with Google Analytics. “The page doesn’t refresh. How can I track the clicks?”

Well, it is actually very easy. If you look at the trace script Google Analytics gives you to add to your HTML code you can find a call to a method that actually records the event. This method is simple to call using JavaScript.

I have solved it like this in my latest Flex App (which is a public site). NOTE: This is for the new trace code version.

1. Paste the Google Analytics trace code as usual just before the </BODY> tag.
Check your Google Analytics account for the correct code.

2. See to it that your embedded flash works with ExternalInterface.
This can be a bit tricky, but in my experience the things that do the trick are to change allowScriptAccess to always and inside the Flex App call a custom JavaScript function on creationComplete like so: ExternalInterface.call(‘initFlash’). In my html this initFlash function creates a variable reference to the embedded flash. This sort of “creates the connection” between them. I’m not sure why this is so, but for me it works, so I’m happy with that. If there is a need I would be glad to create a more thorough tutorial on the use of ExternalInterface. Just let me know.

3. Create a custom JavaScript that passes the URL you want to register to the Google Analytics script.
This is not necessary, but I have found it easier to work with, as you don’t need to edit you call from inside of Flex if something changes in the Google code or such.

function trackURL(url)
{
    pageTracker._trackPageview(url);
}

4. Call your custom javascript from within Flex.
I created a static class for this. (I love static classes). I named it Analytics.as and placed it in the root source folder in the Flex App. It looks like this. All it does really is call the JavaScript using ExternalInterface, but putting it within a static class lets you call it from anywhere in your application without having to pass on references to this or that object or function.

package
{
   public class Analytics
   {
      import flash.external.ExternalInterface;

      public static function track(url:String) : void
      {
         ExternalInterface.call("trackURL", url);
      }
   }
}

And anywhere in your app write:

Analytics.track('/path_to_tha_page_you_want_to_track/');

(NOTE: You have to start your path with a slash).

There you go. It now should track the URL:s you want and give you nice statistics.

FlashTracer Firefox plugin

Update Jan 24 -09: The Flash Tracer that works with Firefox 3 has to be downloaded from the creator’s own site. The one at Mozilla Addons doesn’t work with 3.x (yet). In the instructions below I have therefore used the link to his own site.

If you’re developing for Flash/Flex the FlashTracer can be quite a nifty plugin. It lets you see the flash player trace output directly in a sidebar in you browser. Outputting debugging info is something I use all the time while developing and I have tried several times to get FlashTracer to work, but haven’t managed, so I usually have a textarea inside my flash/flex project with a custom debug output. I guess I have been too impatient before but today I sat down and read through some posts about it. This is how I eventually got it to work on my Mac:

1. Make sure you’re using the latest Flash Player Debug version. Download it here

2. Install the plugin (of course)

3. Open the FlashTracer sidebar in FireFox. Click the Preferences button.

4. Under the area named “Select output file” click browse and point the plugin to the flashlog.txt file your debug player outputs. In my case (being on a mac) it was here:
/Users/{username}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

The plugin will ask if you want to replace the file, which is stupid because you will want to read from the file, not write to it, but that’s just how it is. Don’t let it scare’ya.

5. Save/close preferences.

6. Restart FireFox.

That should do it.