Macromedia Flash MX 2004 ActionScript 2.0 Tutorial and Free Online Training Course
In this section, you will learn about:
- The Output panel
- Using the trace() action
- Listing objects and variables
- Setting and stepping through breakpoints
- Viewing and modifying variables and properties
- Viewing and modifying properties
Debugging
Debugging is an essential part of application development. Flash helps you to pinpoint specific problems with your code, and provides tools that let you step through your code line by line, viewing the results and manipulating properties and variables of each of the movie clips.
The Output Panel
When you test a movie, Flash notifies you of errors in your code using the Output panel, which appears in front of the movie preview:
For each error, it lists the scene, layer, and frame where the error occurred, as well as the nature of the error.
Using the trace() Action
The Output panel can also be used to trace the output of your commands as you step through your code. The trace action is essential to locating problems in your code and confirming that the code is working as expected as you develop. The trace action returns the output of whatever you specify in the Output panel. For example, if you want to see the value of a variable, you’d add the following statement somewhere after the line that assigns the value to the variable:
trace(myVariable) //where myVariable is the name of your variable.
When you test the movie, the Output panel lists the value of the variable:
It’s helpful to add some text to the output as a label, especially when you’ve got multiple trace actions returning results. You can concatenate the message just as you can elsewhere in ActionScript using the addition operator:
trace(“The value of myVariable is: ” + myVariable);
Any text you want to see displayed in the Output panel is placed in quotation marks, followed by a plus sign, and then the reference to the value you want returned. The code above would display the following in the Output panel:
You can use the trace action to view the output of any number of things—a variable, an array item, a node of an XML object, or a path. This helps you to ensure that variables are being assigned with correct values, that values aren’t undefined when you don’t intend them to be, and the code is generally behaving the way you want it to, when you want it to.
Listing Objects and Variables
The Output panel can also display the objects and variables in your movie. To do this, test the movie and, in the Preview window, open the Debug menu and select either List Objects or List Variables.
List Objects displays the symbol names, button, movie clip, and text field instance names, shapes, and target paths in the Output window for the current frame. As the frames change during the preview, the output changes.
List Variables lists the values of any variables in your movie, as well as the properties of any ActionScript objects, and any XML data.
The Debugger Panel
While the Output panel can help you quickly identify specific problems or confirm a value, you can use the much more powerful Debugger panel when you need to step through your code action by action. Debugging a movie is different from testing one; instead of pressing Ctrl+Enter (for PC users), you press Ctrl+Shift+Enter to debug. (You can also select Debug Movie from the Control menu.) This opens the Debugger panel on top of the movie preview, with the movie stopped. Instead of using the Play and Stop commands in the Control menu to play and stop the movie, you use the buttons on the Debugger panel to control playback as you step through the code.
All the code in the movie is listed in the drop-down menu above the Script pane. You can select a movie clip, button, or frame from this menu to view the code located there, or you can set breakpoints to stop playback at specific locations in your code. If you do this, the Debugger panel will stop at the breakpoints and display the code in the location of each breakpoint in the Script pane.
Setting and Stepping Through Breakpoints
Notice that the first message you see in the Debugger panel is “The Flash Player is paused so that breakpoints may be adjusted…” Breakpoints are locations in your code where you want the movie to stop playing so you can analyze what’s happening in a given line. You can set initial breakpoints in the Actions panel by clicking inside the blue area of the line where you want to pause the playback:
This adds a red dot to the line, indicating the breakpoint. To remove it, simply click it again.
With breakpoints set, you can debug the movie and start playback by clicking the Continue button on the Debugger panel. The movie starts to play, and then stops at the location of the first breakpoint in the code:
The small yellow arrow indicates the current location in the playback. For example, above, the Debugger has stopped the movie at a breakpoint at line 21 of the code for Scene 1, Frame 1, on the Actions layer.
You can add and remove breakpoints in the Debugger panel the same way: clicking inside the blue area (the gutter) toggles breakpoints on and off, as does the red Toggle Breakpoint button in the panel’s toolbar:
Once the debugger has stopped at the location you’re concerned with, you can use the Step In 
, Step Out 
, and Step Over 
buttons on the toolbar to move through the code. If the debugger has stopped at a function call, Step In “steps into” the function being called. There, you can use Step In again to step through the function’s code line by line. Step Out moves out of the function, playing the movie again until the next breakpoint. Step Over steps “over” a line containing a breakpoint, so the debugger doesn’t stop the movie at that line. The code in the line is still executed.
As you step through your code, you can use the lists on the left side of the debugger to view what the code is causing to change. For example, you can view variables being incremented or properties changing. The Display list at the top lists all the movie clips in your movie, beginning at the root. Select a movie clip to view properties and variables, which are displayed in the list beneath. Below, the Variables tab is selected to display the variables for level 0:
Viewing and Modifying Variables and Properties
As you step through code, you can watch the values of the variables change, helping you to pinpoint possible problems. If there are a number of variables in different movie clips that you want to track at the same time, you can add them to the Watch List by right-clicking the variable and selecting Watch:
This adds the variables to the Watch tab. The contents of the Watch tab doesn’t depend on the selected movie clip.
Note:
The Watch tab will only display a local variable when the Debugger has stopped at a location in the code where the variable is used.
You can also change the value of a variable by entering a new value into the field next to the variable’s name:
In this way, you can test different values to pinpoint problems, and exert a measure of control over the playback. For example, you can force the Debugger to move straight into a conditional statement by changing the value of a variable in the statement so the condition evaluates to true.
Viewing and Modifying Properties
The Properties tab displays the properties of the selected movie clip. Here, you can find out the current frame, the number of frames loaded, and the name, URL, position, and other attributes of the movie clip, among other properties. The properties displayed in color cannot be changed in the Debugger, while those that appear in black can be changed, just as you change the values of variables.
Congratulations!
Congratulations! You have completed the free Macromedia Flash ActionScript tutorial. ActionScript will allow you to program Flash movies and create interactive and fun Flash movies. Visit other sections of Learnthat.com to learn other great technologies.
