Category: Flash

There are a plethora of new and old tools out there to debug your Flash movies. However, just a reminder you can use Flash to see your trace statements and use your debugger while a SWF is running in a browser. Steps are as follows:

1. Close all browsers and Flash.
2. Go to your Flash installation directory, and look in the players directory. Mine on my PC is:
   C:\Program Files\Macromedia\Flash MX 2004\Players
3. Make a folder called “backup”. Cut and paste the following files into it:
   • SAFlashPlayer.data
   • SAFlashPlayer.exe
   • SAFlashPlayer.rsrc
4. Go into the debug folder, and copy the same files. Paste them one directory up, in the players folder. These are the files Flash MX 2004 Professional will utilize to make a debuggable SWF.
5. Go back in the debug folder and install the appropriate debug player. The AX one is for IE (ActiveX), and other uses of embedded Flash, OSX for duh, exe for Firefox, and hqx for non-OSX Macs (maybe Linux? :: shrugs ::).
6. Re-open Flash, and when compiling your FLA, make sure Debugging is enabled in your File > Publish Settings, Flash Tab > Debugging Permitted. This will ensure your SWD file, the ASCII holder of your ActionScript, will be created upon each compile. Careful, though; it has the nasty habit of caching just like ASO’s, causing the code you are debugging to be different than what’s in the SWF running. Delete if you’re paranoid like me.
7. Open your Debugger, and ensure “Enable Remote Debugging” is on (drop down menu, top right).
8. Finally, upload your SWF and SWD file to your server. When you hit the SWF in a browser, it’ll ask where do you want to connect; choose localhost, and go back to Flash if it doesn’t auto-focus it back for you; click OK (assuming no password), and your Output window should show traces, and your Debugger should work as normal (although a tad slower).

This’ll work for Flex too; it comes with a debug player in:
C:\Program Files\Macromedia\Flex\bin

For offline debugging where Flash is embedded, such as Zinc, you can log using Afterthought.

There are a plethora of other debugging tools as well, a lot made in Flash, but just so you know you have your standard ones by default which can be used for web deployed content.

If you have one you know of not mentioned here, please feel free to leave a link in the comments; we’d all like to hear about it.

I managed to get DataSelector to work earlier this week and wanted to share how cool it is once you get it working.

Introduction

DataSelector is a mixin class in the Flash MX 2004 Professional v2 component framework (hereafter referred to as the v2 framework). It’s full classpath is:

mx.controls.listclasses.DataSelector

It is used to give a UIComponent the core attributes of working with the common data methods and properties that are prevalent in the v2 framework.

So, if you want your component to have all of the dataProvider methods like addItem, removeItemAt (to interact with a dataProvider thus implementing the DataProvider API), as well as the useful properties to query the View (your UIComponent) such as selectedItem, selectedIndex, and value, this is the class to use. It also gives your UIComponent a dataProvider property, and when it changes, calls invalidate for you. There are a plethora of functions and properties given to you to make more effecient redraws when the model does change.

Why should I care?

Why would you use this? I like it because I don’t feel like proxying all of the DataProvider API calls myself; I can just use the DataSelector, and it automatically gives my class all of those methods instead of me having to write them manually. Secondly, all of the fine grained control over how a dataProvider’s data is changed, as well as keeping track of which item is selected, etc., is all handled for you.

Inheritance vs. Mixin

Why can’t you just inherit from it? As I said, it’s a mixin. Since ActionScript 2.0 does not support multiple inerhitance, you must either use an Interface, Composition, __resolve, or a mixin. A mixin is basically a Decorator that at runtime adds methods at properties to a class’s prototype. Since ActionScript 2.0 supports prototype, this means anything added on a class’ prototype is effectively the same thing as a class member variable or class function.

It manages to compile correctly because a plethora of the base classes of the v2 framework define properties & methods (and the DataSelector template) to ensure the compiler finds the functions and properties that will be there at runtime. So, even though no dataProvider exists in your code at authortime, it will at runtime, so you have to define it so the compiler doesn’t bitch.

Implementing

DataSelector comes with a template that defines all of these properties and methods for you so you can just copy and paste it into your class file. The only two things you have to do to use it are:

1. import both DataSelector, and DataProvider
2. call their initialize functions in static varible references. This ensures they are actually used and referenced so the compiler exports the class, AND since it’s static, it’ll only happen once; when your class is instantiated

Like so:

import mx.core.UIComponent;
import mx.controls.listclasses.DataSelector;
import mx.controls.listclasses.DataProvider;

class YourClass extends UIComponent
{
        // your DataSelector template will go here
        
        public static var mixIt:Boolean = DataSelector.Initialize(YourClass);
        public static var mixIt2:Boolean = DataProvider.Initialize(Array);
}

Then, you can just react to any data changes in your draw/size/doLayout function (doLayout assuming you extend View instead of UIComponent).

createClassObject(YourClass, "test", 0);
test.dataProvider = ["one", "two", "three"];
test.addItem({label: "four", data: 4});
test.selectedIndex = 0;
trace(test.selectedItem);

Conclusion

Now, in all fairness some MVC purists will say that this is a violation since this allows your View to be bound to the Model via the dataProvider, which is itself a controversial way of handling data in Flash. I argue that the Controller is the one who bound them so it’s legal. Additionally, in MVP, a modelChanged event is triggered upon using a DataProvider API function like addItem, but the View gets the event and reacts, not the Presenter. Anwyay, I like it and it helps my custom components integrate nicely in the v2 framework.

Editing my bio over at OpenARP, and noticed Aral’s using a Flash movie for a Captcha test in his Wysiwyg Wiki. This is the 2nd time I’ve seen Flash used in this manner.

I use it for my comments so blog spambots cannot directly hit my mt-comments.cgi without knowing the key. Since the key is just a variable hidden in my SWF, and no blogspammer has yet written a Perl spambot to rip open my SWF, introspect the variables, and thus carry this key to my server… I remain protected from blog spam.

I’ve noticed over the past 3 years, Captcha’s have gotten more and more elaborate. The one used when signing up for an Microsoft Passport, used in Windows Messenger, is nigh unreadable (even after 5 page refreshes), and I’ve got 20/20 vision.

Aral’s using it to confirm a human is in fact making an edit to the Wiki just by a simple animation (a lot more readable than the Salvador Dali’s I’ve seen generated). Smart thinking, Aral! Another great niche use of Flash.

One of the nice things about MTASC is it’s TRACE function. Utilizing the -trace compile parameter, you can map the TRACE function written in your ActionScript to a static class method of your choice.

You get an additional 3 parameters passed to your trace:

1. Full class package path and name with method
2. File name of the class
3. line number the TRACE command is at in your class

You can get some really informative and nicely formatted trace messages now. Below is something I whipped up this morning to get it to look cool in Flashout; you can use this with trace too if you don’t use Flashout. Modify the tabs to suit.

static public function coolTrace(str:String,
                                 classNameAndMethod:String,
                                 fileName:String,
                                 lineNumber:Number):Void
{
        var splitClassAndMethod:Array = classNameAndMethod.split(".");
        var classAndMethod:String = splitClassAndMethod[splitClassAndMethod.length - 1];
        var classAndMethodArray:Array = classAndMethod.split("::");
        var theClass:String = classAndMethodArray[0];
        var theMethod:String = classAndMethodArray[1];
        
        var theString:String = "message: \t" + str + "\n";
        theString += "\t\t\tclass: \t\t" + theClass + "\n";
        theString += "\t\t\tmethod: \t" + theMethod + "\n";
        theString += "\t\t\tfilename: \t" + fileName + "\n";
        theString += "\t\t\tline: \t\t" + lineNumber;
        
        //trace(theString);
        Flashout.debug(theString);
}

The above, when tested, will give you something alone the lines of this:

Pimp as hell, eh!?

Thanks Kenny for inspiring me to get this to work! Now, if I can just figure out how to make the line # a hyperlink so if you click it, it’ll take you to the line number you clicked on in the correct as file…