Hiltonline.com

Debugging an SWF at runtime (or) how to output trace() from a browser.

Introduction
This post refers to browser debugging with
Firefox 3.6.8
MacBook OSX 10.4.11 (Intel)

There are 4 main steps to getting your environment up and running for debugging.

Install the Debug version of Flash Player.
Configure the Debug player with mm.cfg.
Check the debug player is writing to the logfile flashlog.txt.
Track the logfile output in realtime.

1: Install the Debug version of Flash Player

1.1 Go to the adobe download page:
http://www.adobe.com/support/flashplayer/downloads.html

1.2 Download the plugin content debugger dmg file.
http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_plugin_debug_ub.dmg

1.3 Close all browser windows, open the dmg, and run the plugin installer (I also archive a copy of the dmg file, renamed with the version number).

1.4 Check the player has installed correctly by opening you browser navigating to some flash web content. CTRL + Click on the swf stage area and you should see the context menu with an item named “Debugger”.

Default context menu for debug player

You can also check your Flash Player is a debug version by checking the version and isDebugger properties of the flash.system.Capabilities class. A test SWF file can be found here.

2: Configure the Debug player with mm.cfg.

The Debug Player configuration requires the the creation of the mm.cfg file.
(Oddly this is not created automatically when the debug player is installed).

2.1 Create a config file mm.cfg (it’s just a text file with *.cfg tag) and save it to
HD/Library/Application Support/Macromedia/mm.cfg
OR:
HD/Users/username/mm.cfg

2.2 Add the following lines to mm.cfg file
ErrorReportingEnable=1
TraceOutputFileEnable=1
MaxWarnings=0

3: Check the debug player is writing to the logfile flashlog.txt.

The flashlog.txt is a text file which the Flash debugger player writes all the trace/error messages into. It must be created at the default location of:
/Users/username/Library/Preferences/Macromedia/Flash Player/Logs/

3.1 Navigate to some flash web content that has a trace() statement output. Then open the flashlog.txt and eyeball the output. (test file here)

Troubleshooting:
3.2 If the text file is blank then there is no output or no recorded output
- Ensure that the flash content actually has some trace() statements to output.
- Ensure the flashlog.txt is not opened BEFORE you navigate to the flash content. (close and reopen the file).
- Double check the steps above have been followed correctly. Ensure ErrorReportingEnable and TraceOutputFileEnable are set to 1 not 0.

4: Track the logfile output in realtime.

Now that you have a working and configured debugger that is writing to the flashlog,txt you might want a user friendly way of tracking the output in real time rather than manually opening the flashlog.txt.

My prefered methods are:
Track output 1: Flash Tracer a Firefox plugin by Alessandro Crugnola [sephiroth].
Install FlashTracer from http://www.sephiroth.it/firefox/flashtracer/
When you restart firefox you can open the FlashTracer panel from the Tools menu and if your logfile.txt is being written to in part 3 then you should see the contents of the log file in the FlashTracer panel.

If you see nothing then make sure that FlashTracer in pointing to your flashlog.txt file by checking Prefences (spanner icon in the FlashTracer Panel) > General Settings > Select Output File.

Track output 2: Terminal (Mac OSX)
Open the terminal Applications/Utilities/Terminal
At the prompt type:
tail -f /Users/dsmith/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

Or you could save time by typing:
tail -f (with a trailing space, then drag and drop the flashlog text file onto the terminal shell window).

(Note the backslash in the file path because of the space character in the name of the “Flash Player” directory).

Notes:

1: Standalone Player
Once your debug player and log tracking is up and running there is nothing stopping you from using a standalone projector with debug.
You would have to use the “Projector content debugger” version from the flashplayer downloads page and ensure it was targeted correctly when launching when an swf.
The projector will output to the flashlog.txt and the terminal or flashTracer will automatically track this as with browser debugging.

2: Location of mm.cfg file.
On Mac OSX, Flash Player first looks for looks for mm.cfg in home directory: HD/Users/username
If the file is not found it then checks in:
HD /Library/Application Support/Macromedia
However that only seems to happen on first run, once the mm.cfg has been found the Flash Player always uses that location.

3: Definition of mm.cfg properties.
TraceOutputFileEnable – Boolean enables/disables trace() statements being written to flashlog.txt.
ErrorReportingEnable – Boolean enables/disables ERROR messages being written to flashlog.txt.
MaxWarnings – Maximum number of messages that the debugger will write to the logfile before stopping. a value of 0 means all messages will be recorded. Naturally the more messages outputted may hinder performance of swf.

The mm.cfg file used to have a TraceOutputFileName property. This allowed a custom location to be defined for the output logfile. However since Flash Player 9,0,28,0 The default location of flashlog.txt cannot be modified and this property has become redundant.

4: At the time of writing the latest debug player is
10.1.82.76

Links:
Configuring the debugger version of Flash Player:
This contains lists of the locations for mm.cfg file, flashlog.txt across multiple OS and descriptions of the mm.cfg properties.
http://livedocs.adobe.com/flex/3/html/help.html?content=logging_04.html

Reference links 1

Overview of new features in Flex 4
http://andrewrshorten.wordpress.com/2010/03/23/whats-new-in-flash-builder-4-all-of-this/

Links on ANT and FDT/FlexBuilder and Actionscript
ANT + MTASC for AS2
http://www.dopelogik.com/documents/actionscript_ant/

Setting up ANT for Windows
http://www.boostworthy.com/blog/?p=194

Using ANT with Mac
http://anarchogeek.com/2008/04/13/building-flex-3-flash-swc-libraries-on-mac-os-x-with-ant-and-flex-builder-3/

Adding SWC files to ANT builds:
http://talsma.tv/post.cfm/ant-mxmlc-and-swc-files

MXMLc command line otions
http://www.docsultant.com/site2/articles/flex_cmd.html#mxmlc_3_opt

Barclays Bank – 3Box

client: Dare Digital, London

Barclays Bank – 3Box (aka personal reserve)
http://apps.barclays.co.uk/personalreserve-video/

This was an interactive video presentation to promote and educate customers about the new service, “Personal Reserve” provided by Barclays Bank.

It takes the form of a narrative about a young teacher (Sam) who has agreed to trial the service for a week. The service gives a buffer to customers who might stretch to make ends meet between their monthly salary payments.

There is a brief introduction from Sam to set the scene but the line “unless something unexpected crops up” hints at what is to come.

The user then goes on to see what happens the following week. Each day has a video intro as Sam has breakfast or gets ready for work. The user is then invited to change Sam’s day, (and bank balance) with a little surprise.

Implementation is with AS2 and the design is MVC with main views for the Video, Drag/Drop Icon panel, Info text panel, small graph and large graphs. Transitions and which views are active is determined by a simple application state.

Main challenges were how to expand the small graph into the larger graph on the overview screen and sychcronising the former with the video.
The video was created by a 3rd party and had no cuepoints yet the graph had to respond to events in the video.

The synchronisation was solved by making the graph a timeline rather than a dynamic animation (graph shape is the same whatever order the “surprises” are added) and creating data linked to each video ID which defined a video time to trigger the graph to animate to the next labeled keyframe.
The side effects of this included limiting video playback options such as seek, which I would liked to have added if time allowed.

The graph expansion was switched for an alpha-fade transition.

I belive filming was quite a rushed with everything done in one day.
In the case of the “water surprise” when the shelf supports were pulled, the mobile phone was supposed to just land in the glass. However if you look very closly you notice that the phone takes an unplanned bounce off the rim and somersaults before diving in – quality!

Portfolio - Williams F1 HQ Tour

client: Endemol UK, London

Williams – HQ Tour
http://www.attwilliams.com/team/hq-tour

The objective is to provide the user with a virtual tour of the Williams site starting with a video introduction from the great man Frank Williams himself and multimedia presentations on the day to day operation of the team, key team members and the history of Williams amongst others.

It has an interactive layer over an aerial shot of the team headquarters with animated hotspots marking out the location of areas of interest.

Clicking a hotspot activates a panel with a presentation from that location, usually text and a small photo gallery. There are 3 main video presentations Museum, Race Bay and Machine Shop. Their main presentation panels have links to other video presentations on Williams History, and Team interviews.

Iimplementation was in AS2 with one developer (me) and two designers. It is an MVC pattern build with permanent views such as the background and hotspot overlay with a number of display panel templates for the different display types.
All content is dynamic and is driven by static XML which allows for content to be updated, or localized. (Although this would be manually as a CMS was never part of the scope).

The biggest puzzle solved in the project was how to get the link buttons to track the team members in the introductory Race Bay and Machine Shop videos.
The answer was not elegant, but was effective. The video clips were embedded and Mario (the designer) spent about 2 days motion-tweening a 1px movieclip over each individual as they walked around in their choreographed loop. I then coded link buttons to dynamically track these dots which allowed the client to change button look and feel and change button labels at a later stage.

This is one of my favorite all-round projects, originally a component of the Williams F1 website for 2007. It has survived a number of parent site rebuilds and updates.
What I believe works here is mainly that it is a good use of Multimedia. It has short snappy hotspot and UI animations which liven up the presentation but doesn’t over-do the bells and whistles and the overwhelming weight of the experience is the content which varied and substantial. This was also a tribute to Williams who had an extremely clear vision of what they wanted but were also adaptable and pragmatic.

If I was to do it again I would like to add loaders to the videos and possibly a hidden tab menu that would have all the location links in a listview for quick access. The latter is possibly not as necessary as this is a fan site and the typical fan would not mind spending their time exploring the site.

Pandorum - Viral Game

client: Candystore, London

Pandorum Movie – viral marketing webgame
http://www.preparetobescared.com/pandorum/game/

A simple clone game to attract users to the website of the Sci-fi Horror Pandorum as part of a DVD marketing campaign. Once a user has played the game they are invited to send an email to a friend with their score (time) challenging the friend to beat it.

The film received about 7/10 on IMDB (http://www.imdb.com/title/tt1188729/) mainly because it has few novel twists for the seasoned horror or sci-fi buff (and the plot might be familiar) but is still perfectly watchable.

The same can be said for the game itself. It is a retro game and retro code as it was built with AS2 in 2010. The game was incorporated into banner ads and MPUs that were trafficked through FlashTalking which did not support AS3 at the time of development.

The aim is for the user to avoid contact with the walls or the enemy which add one to their number every few seconds. Not original but very playable, and a little addictive for some.

The game was built as a module so it could be deployed on it’s own or slotted into ads and switched on and off by the parent application. When deployed in an ad events in the game module were also tracked by the ad servers. Another feature was the ability of the parent application to determine the size of the play area (to fit all ads in the campaign) and control difficulty such as the number of enemies present initially.

The main concern in development was the optimisation issues caused by having a large number of enemy objects and a pulse all with radial alpha-gradients animating around the screen. Therefore bitmap caching and collision testing against the “swarm layer” was used where possible.
The concern seems not to have been borne mainly because it is near impossible for a game to last long enough to get a high number of enemy objects on screen.

The record for survival in the game currently stands at 19.4 seconds.

Embed assets without flex classes

If building from flash class libraries but using the [embed] tag for external media, the flex compiler will throw up errors such as:

Error: The definition of base class SpriteAsset was not found.

(But you can alternatively have BitmapAsset, ByteArrayAsset, SoundAsset etc). This is because the generated asset class is forced to extend Flex-specific classes.

As these Flex classes extend basic flash classes, the answer is to fake the Flex Class.

The classpath:
Project / src / mx / core / SpriteAsset.as

The class:

Package mx.core {
    import flash.display.Sprite;

    /**
    * @author Hilt
    * Fake Flex Asset Class
    */
    public class SpriteAsset extends Sprite
    {
        public function SpriteAsset()
        {
        }
    }
}

This solution is described here:
http://www.ultrashock.com/forums/flex/embed-flex-assets-without-using-flex-123405.html

FlashTracer for firefox 3

I was just updating a post on browser debugging for flash and found the lovely FlashTracer by Alessandro Crugnola [sephiroth] is available for firefox 3.

Download FlashTracer v 2.3.1 from
http://www.sephiroth.it/firefox/flashtracer/

Oddly the latest version available under Mozilla Firefox add-ons is 2.2.0 (not compatible with firefox 3) which is why I assumed it had been discontinued.

Outdoors for the rest of the week... (hurrah!)

Making final preparations for Dodentocht this weekend. Looking forward to seeing how they record movement of, and present realtime tracking on, slightly over 10,000 runners/walkers.

Historically they have done pretty well and certainly are tech leaders among the events I am aware of.

A smart phone app (augmented reality?) would be ideal for this kind of route and to provide personal data on routes/landmarks/lap data etc. However in the first instance you must decide which handset to work with. Maybe XKCD can help?

ATT Williams HQ Tour

Great to see that one of my all time favorite dev projects has survived into yet another F1 season and a new look parent HTML site.

http://www.attwilliams.com/team/hq-tour

This was done for the F1 2007 season and while there are some things I’d do differently today (list menu + code it is AS3!), it stands the test of time very well. It was a good utilisation of flash’s capabilities and the creative guys did an excellent job of with the design and animations. I’ll admit to wishing for simpler reveal/hide animations for the panels because of the number of special cases and time limitations. However the final effect really was worth the extra effort coding up!

A couple of areas including Machine Shop and Racebay content appear to have been disabled/removed this year. Presumably this was due to dated video content. Symptoms of this are halting of secondary preloading (see bottom preloading bar) and a visible hotspot toward the top right of the screen.

Of course you might not notice and it doesn’t effect enjoyment of the active areas.

Fun theory

Inspired idea to change the “interface” of everyday objects to encourage a (measurable) change in people’s behavior though playfulness.

http://www.thefuntheory.com/

Recent

Archive