Written by: Patrick Mineault, , http://www.5etdemi.com
Difficulty Level: Beginner
Requirements: MX or MX 2004
Topics Covered: Debugging, common errors, load functions, device fonts, etc.
Assumed Knowledge: basic knowledge of flash, some actionscript

Common errors and debugging

When you become an accomplished programmer, you actually get worried when your code works for the first time; surely this is wrong, it works! Yes, such is the tragedy of computer work; it never quite works as intended. Actionscript is no different. Sooner or later you will stumble into a bug that will seem impossible to iron out.

Looking at the boards and at feedback from previous tutorials, I've spotted what I believe to be the most common Actionscript errors. These vary from basic to advanced; even expert coders may learn a thing or two. Before looking at these errors, I present a brief review of Flash's debugging tools.

  1. Introduction
  2. Debugging Actionscript
    1. The trace action
    2. List Objects and List Variables
    3. Textfields
    4. The debugger
    5. The instruction manual
  3. Common errors
    1. Targeting errors
    2. Name clashing
    3. Errors in the function chain
    4. Function references and function strings
    5. onKeyUp, onKeyDown and listeners
    6. Movieclip.onLoad issues
    7. LoadMovie and LoadMovieNum
    8. Files don't work online
    9. Preloader in first frame does not appear immediately
    10. gotoAndPlay, gotoAndStop and scenes
    11. Device fonts and embedding
    12. Non-English characters
    13. startDrag used twice
  4. Conclusion

Debugging Actionscript

1. The trace action

The most primitive of the Flash debugging tools, it's been around since Flash 4. It will send a string to the output window when you test your movie inside the Flash IDE. It can be used to see if a function is called, if a movieclip is correctly targeted, if a variable has the right value and so forth. Even though it is primitive, I still use it all the time, and you should too. Use like this:

trace("I'm a trace action!");

Or with a variable:

myTrace = "I'm the content of a variable";

2. List Objects and List Variables

When testing your movie inside the Flash IDE, you will find two items under the Debug menu. List Objects will list levels, frames, buttons, movieclips, text, shapes and such, along with their instance name. List Variables will list all of the persistent variables, as well as their scope, type and value.

List Objects is particularly useful for debugging duplicatemovieclip and attachmovie, as you can see if the movieclips are being created. List Variables is great as well, although you will find it hard to spot your variables if you use components, as they use a ton of variables themselves.

3. Textfields

If you need to watch continuously for a value, you may place a textfield (dynamic text) on stage and set its text property to show debugging text. With the Object.watch function, this can be automated relatively easily. For example, if you have a textfield named debug on stage, you can try this:

//Debugging code
_root.watch("msecs", watchMsecs);
function watchMsecs(prop, oldval, newval, userData)
 debug.text = getTimer() + ':' + newval;
 return newval;

//Buggy function
function countMsecs()
 msecs += 1000;
msecs = 0;
setinterval(countMsecs, 1000);

In this case we are trying to debug a millisecond counting function. It uses the msecs variable; we set _root to watch this variable and call watchMsecs every time it is changed. A string is created which compares our value to the the time elapsed as measured by getTimer; the debug textfield is used to display the result. Upon testing the movie, you can see that there is a difference between getTimer and the interval timer. The great thing about this method is that you can test it in a browser to see if the difference is the same in the IDE or in browser, while the trace approach works only in the IDE.

4. The debugger

Flash has an integrated debugger that is very powerful. To activate the debugger, you need to go into Control > Debug Movie. You will see the usual Test Movie setup but with an additional window aptly titled 'Debugger'. It should look like this:

As indicated, when you first debug your movie, the Flash player is paused. You can select your movie's scripts by using the combo box on the right. By clicking on the left margin of a line of code, you will set a breakpoint, indicated by a red octagon. When you press play, the flash player will pause every time it encounters a breakpoint; this allows you to examine the value of a variable or the position of the playhead before an action is executed. By right clicking a property or variable in the Name : Value grid you may add it to the watch stack. The debugger also offers advanced features such as remote debugging.

The debugger is a very handy tool for large projects. However, for quick and dirty coding, you may find the previous methods to be more appropriate.

5. The instruction manual

Yes, the Flash instruction manual IS a debugging tool. I ALWAYS keep the Actionscript dictionary open when I code, and you should too. Personally, I don't like the new integrated help system (in MX 2004), as I find there's already more than often of these palettes and I have limited screen space. Luckily, Solomon Wong of Flash Skynet has kindly created a Flash extension which provides an external HTML help system; you can download it on Macromedia Exchange. Make sure you look at the examples Macromedia has provided, they can serve as a great guideline when using a function for the first time.