Flash provides several enhancements that make it easier for you to debug scripts using the ActionScript language. The features include new language elements, improved editing and debugging tools, and the introduction of a more object-oriented programming language; however, not all debugging problems reside in an ActionScript. Debugging a Flash movie is similar to a mechanic attempting to fix the engine on a car. He can hear a knocking or pinging sound, but he’s not sure what’s causing it, so he brings out his debugging tools to help locate the problem.
A Flash movie is not a car, however, there are similarities. If the movie is not doing what you want: Maybe it’s running too slow, or your movie crashes after playing a specific scene; you can bring out Flash’s debugging tools to help locate (and fix) the problem. When you design a Flash movie, the fonts, colors, video and audio (if any), along with the overall construction of the movie are very right-brain techniques (your creative side at work). When you debug a Flash movie, you’re using a very logical approach to the problem. Like the car mechanic, you’re listening for that annoying pinging sound. Flash will not only help you locate the problem, its array of debugging tools will help you fix it and get you back speeding down the electronic highway.
Flash’s debugging tools include the Debug workspace (ActionScript 3.0) or Actions panel (ActionScript 2.0) and the Movie Explorer, where you can set breakpoints, view variables, and see how they react during the play of the movie. Flash uses a different debugger for ActionScript 3.0 files than it does for ActionScript 2.0 files. The debugger functionality is similar, but the look and feel is different. The debugger for ActionScript 3.0 uses the Debug workspace while ActionScript 2.0 uses traditional the Actions panel.
FL 5.1
When you debug a movie, you’re not just looking for the obvious problems; you’re attempting to see if you can find anything that might happen. Depending on the complexity of the movie, hidden problems can be difficult to find. For example, if you’re calling video files into a Flash movie, are all your paths to the files correct? It may function fine when you’re testing on your computer, but will it still work when you move it to a CD or Web server? Test it and find out. Here are a few things to consider when going into the debug phase of a Flash Movie:
• Paths to file. If you’re importing external .swf files, image files, video, or audio files into a Flash movie, the best approach is to create a folder to hold the entire Flash project, and then create sub-folders within that folder to hold the movie assets. When you move the Flash project, move the entire folder. That way, all the path names stay correct, and you always know where everything is, at all times.
• Short, descriptive file names. Computers allow for file names of unlimited length; however, that does not mean that you need to use large file names. Large file names are harder for you to type in, and there is a greater chance that you will mistype the name. Use short, descriptive names.
• Use smart naming conventions. Since file names display alphabetically, it’s not a bad idea to come up with similar names for similar file types. For example, car_1.jpg, car_2.jpg, car_3.jpg. The name and extension describe (in general terms) the content of the file and file type and will display one after the other. Smart naming conventions won’t make your Flash project any better, but they will help to organize some of the confusion that comes with a complicated Flash project.
• Test and test often. Debugging does not start at the end of a project, it begins as soon as you click the File menu, and then click New. Flash lets you test a movie whenever you choose. Just click the Control menu and then click Test Movie (to test the entire Flash movie), or click Test Scene (to test just the active scene). When you test a scene or movie, Flash creates a temporary .swf file and then runs the movie in a version of the Flash plug-in. Flash publishes the test movie using the settings in the Publishing dialog box.
• Bandwidth. If a project is going out to the Internet, make sure that the size of the finished movie isn’t so large that your visitors have to wait a long time for it to download. It’s possible you might want to include a pre-loader to entertain the audience while they’re waiting.
• Planning is the key. If you want your Flash movie to look good, work without error, and be completed in the least amount of time, then plan, plan, and then plan some more. Use the carpenter’s adage: Measure Twice... Cut Once. University studies show that planning a project, before you start, cuts the project completion time by 20 percent. Planning involves thinking about what you want to accomplish (what’s the message), research and gather all the files and things you’ll need to complete the project, and think about where the project will be used (Internet, CD). In addition, a well-planned project will cut down your debugging time by over half.
FL 5.1, 5.2
The ActionScript editor allows you to edit and debug scripts. When you’re debugging a Flash movie, the traditional wisdom is to try to push it until it breaks, and then figure out why it broke. However, once you find out what’s broken, it’s very possible that you’re going to have to work on the ActionScript’s that drive the movie. That’s where the Actions panel comes into play. The designers of Flash included editing and debugging features to make debugging easier. You can quickly set and remove breakpoints using the Debug Options button to check different parts of your code to determine if it’s working correctly. You can also work in the Actions panel in Script Assist mode—supported by ActionScript 2.0 and ActionScript 3.0—in which you filled in options and parameters to create code. It is a great way for novice ActionScript coders to learn programming. To make working with code easier, you can use collapse and expand buttons to show and hide sections of code. In addition, you can use buttons to quickly add comments to a line of code or a block of code to document your work.
Click the Window menu, and then click Actions to open the ActionScript Editor.
Script Assist. You can view, write, and edit scripts using a visual interface that includes automatic syntax completion and parameter descriptions.
Word wrapping. Click the Options pop-up menu in the Script pane to enable or disable word wrapping.
Viewing context-sensitive Help. When your pointer is positioned over an ActionScript element in the Actions toolbox or in the Script pane, you can click the Reference button in the context menu to display an element help page.
Importing scripts. When you select Import Script from the pop-up menu in the Actions panel, the imported script is copied into the script at the insertion point.
Single-click breakpoints. To add a debugging breakpoint before a line of code in the Debugger panel or the Script pane of the Actions panel, click in the left margin.
Pinning multiple scripts. You can pin multiple scripts within a FLA file along the bottom of the Script pane in the Actions panel.
Script navigator. The Script navigator is a visual representation of the structure of your Flash (.fla) file; you can navigate through the file to locate the ActionScript code.
Integrated Script window for editing external files. You can use the ActionScript editor in a Script window (separate from the Actions panel) to write and edit external script files.
Syntax coloring. Syntax coloring utilizes a user-defined set of colors to display the code entered into the Script pane. Click the Flash menu, and then click Preferences (Mac), or click the Edit menu, and then click Preferences. Click the ActionScript Preferences tab to modify the syntax coloring, font and size, or the scripting text.
Instant Syntax Checking. Click the Check Syntax button to get an instant evaluation of the current script.
Code Hint. Click the Show Code Hint button, and then Flash will give you a hint of what to do next.
Debug Options. Click the Debug Options button to set and remove breakpoints.
Collapse and Expand. Click the Collapse Between Braces, Collapse Selection, or Expand All buttons.
Comments. Click the Apply Block Comment, Apply Line Comment, and Remove Comment buttons.
Flash’s Movie Explorer gives you an easy way to view and organize the contents of an .fla document, and even select elements for modification. It contains a display list of currently used elements, arranged in a tree hierarchical structure. The Movie Explorer gives you the ability to filter which categories of items in the document are displayed: text, graphics, buttons, movie clips, actions, and imported files. You can even display selected categories as individual scenes, concise symbol definitions, or both. When you select an item in the Movie Explorer panel, the item will be selected in the Flash document. If you double-click on an ActionScript, Flash opens the script in the Actions panel. If you double-click on a Library item, Flash opens the item in the Library.
Click the Window menu, and then click Movie Explorer to open the panel.
Click the Movie Explorer Options menu, and then select from the following options:
a. Go To Location. Takes you to the selected layer, scene, or frame in the active document.
b. Go To Symbol Definition. Takes you to the symbol definition for a symbol that is selected in the Elements area.
c. Select Symbol Instances. Takes you to the scene containing instances of a symbol that is selected in the Definitions area.
d. Find In Library. Select to highlight the selected symbol in the document’s Library.
e. Rename. Select to enter a new name for a selected element.
f. Edit In Place. Select to edit a selected symbol on the Stage.
g. Edit In New Window. Select to edit a selected symbol in a new window.
h. Show Movie Elements. Displays document elements organized into scenes.
i. Show Symbol Definitions. Select to display all the elements associated with a symbol.
j. Copy All Text To Clipboard. Select to copy selected text to the Clipboard.
k. Cut, Copy, Paste, And Clear. Select to perform these functions on a selected element.
l. Expand Branch. Select to expand the navigation tree at the selected element.
m. Collapse Branch. Select to collapse the navigation tree at the selected element.
n. Collapse Others. Select to collapse the branches in the navigation tree not containing the selected element.
o. Print. Select to print the hierarchical display list currently displayed in the Movie Explorer.
The Show buttons give you the option to show or hide different elements of the movie. These options will only impact the Movie Explorer, not the Flash Stage.
• Show Text
• Show Buttons, Movie Clips, and Graphics
• Show ActionScripts
• Show Video, Sounds, and Bitmaps
• Show Frames and Layers
Click the Customize Which Items To Show button to customize what items display in the Movie Explorer window.
FL 5.2
The designers of Flash included editing and debugging features to make debugging easier. You can quickly set and remove breakpoints to check different parts of your code to determine if it’s working correctly. Flash uses a different debugger for ActionScript 3.0 files (FLA or AS) than it does for ActionScript 2.0 files. The functionality is similar, but the look and feel is different. The debugger for ActionScript 3.0 uses the Debug workspace that displays the Debug Console, Variables, and Output panels along with the Actions panel or Script window. The Debug Console displays the call stack, scripts containing the functions in the call stack, and contains buttons to step through the code. The call stack shows the current list of nested function calls ready for execution. The Variables panel displays variables and their current values. When a problem is encountered, Flash displays the line of code in the Compiler Errors panel. Double-click the error to view it in the code.
Create or open a Flash document (ActionScript 3.0).
a. To debug an ActionScript 3.0 file (AS), open the file in the Script window, select the associated Flash file from the Target menu.
Click the Debug menu, and then click Debug Movie.
a. You can access many debugging commands on the Debug menu.
Add or remove breakpoints to interrupt the execution of the scripting code.
a. Add. Click in the left margin next to the line of code.
b. Remove. Click the breakpoint in the left margin.
To step through the code line by line or step in and out of functions, use any of the following:
• Step into code line by line. Click the Step In button in the Debug Console panel.
• Step over a function call. Click the Step Over button in the Debug Console panel.
• Step out of a function call. Click the Step Out button in the Debug Console panel.
• Resume normal code execution. Click the Continue button in the Debug Console panel.
To view the individual scripts that contain each function, double-click the script name in the call stack in the Debug Console panel.
To view variable values, click the Options button on the Variables panel, and then click one of the following:
a. Show Constants. Displays the values constants.
b. Show Statics. Displays variables for the class instead of instances of the class.
c. Show Inaccessible Member Variables. Displays variables that are inaccessible to other classes or namespaces.
d. Show Additional Hexadecimal Display. Displays hexadecimal values instead of decimal values.
e. Show Qualified Names. Displays variable types with both the package name and the class name.
To edit the values of variables in the Variables panel, double-click the value, enter a new value, and then press Enter (Win) or Return (Mac).
If an error occurs, double-click it in the Compiler Errors panel.
To exit debugging mode, click the End Debug Session button in the Debug Console panel. To change workspaces, click the Workspace menu, and then select one.
FL 5.2
Flash provides several tools for testing Flash files (ActionScript 2.0). The Debugger panel lets you find and locate errors hidden in an .swf file, while it’s running in the Flash Player. You must view your SWF file in a special version of Flash Player called the Flash Debug Player (installed automatically when you install the Flash application). The Debugger panel shows a hierarchical display list of movie clips currently loaded in the Flash Player. You can then use the Debugger to display and modify variables and property values as the .swf file plays. You can insert breakpoints to stop the .swf file and step through the ActionScript code line-by-line. You can even use the Debugger panel to test files on a Web server in a remote location. The Debugger lets you set breakpoints in your ActionScript that stop the Flash Player, and then lets you step through the code as it runs. You can then go back to your scripts and edit them so that they produce the correct results. The Debugger will show you where the problems are, but it doesn’t fix them.
Create or open a Flash document (ActionScript 2.0).
Click the Debug menu, and then click Debug Movie.
The Code View panel displays a message indicating the movie is paused.
Click the Continue button to start the movie.
Click the Stop Debugging button to turn off the Debugger panel.
Click inside the code, and then click the Toggle Breakpoint button to add or remove a breakpoint at the insertion point of the cursor.
Breakpoints stop the movie from playing and allow you to step through the code line-by-line.
Click the Remove All Breakpoints button to remove all the breakpoints from the code.
Click the Step Over, Step In, and Step Out buttons to step through each line of an ActionScript.
When you work in the debugger, you have the option of viewing any variables used in the Flash movie. The Variables tab (ActionScript 2.0) or Variables panel (ActionScript 3.0) displays the names and values of any global and variables in the .swf file. If you change the value of a variable, you can see the change reflected in the .swf file while it runs. This gives you the ability to test new data variables and their impact on the Flash player document.
Click the Debug menu, and then click Debug Movie.
Select the movie clip containing the variable from the display list.
Select an item in the display frame to view the variables’ names and values.
Click the Continue button to observe the variables as the Flash movie runs.
Click the Variables tab (ActionScript 2.0) or open the Variables panel (ActionScript 3.0).
Important
The display list updates automatically as the .swf file plays. When a movie clip is removed from the .swf file at a specific frame, the movie clip, variable and variable name are removed from the display list in the Debugger panel. This lets you focus on the current variables. When you’re viewing a complex Flash movie that contains a lot of variables, only having to view the current variables cuts down on the visual clutter and helps you to focus on the immediate problem.
In any complex Flash movie, there will probably be a set of critical variables that you want to keep an eye on. You can monitor critical variables in a controllable way by marking them to appear in the Debugger panel Watch list (ActionScript 2.0). The Watch list displays the absolute path to the variable and its current value, and just like the Variables tab, you can enter a new variable value at any time during the debugging process. If you add a local variable to the Watch list, its value appears only when Flash Player is stopped at a line of ActionScript where that variable is in scope. All other variables appear while the .swf file is playing. If the Debugger can’t find the value of the variable, it will list the value as undefined.
In a Flash document (ActionScript 2.0), click the Debug menu, and then click Debug Movie.
Click the Variables or Locals tab, and then select a variable.
Click the Debugger Options button, and then click Watch.
Click the Watch tab.
Click the Debugger Options button, and then click Add Watch.
Enter the target path to the variable name and the value in the fields.
The Properties tab in the Debugger panel displays all property values of any movie clip on the Stage. Properties are modifiable script elements such as _alpha (controls transparency) or _rotation (controls the rotation of an object). The Properties tab lists all the properties including their current values. You can then view and adjust the values as the Flash movie is running to judge their impact. This gives you a tremendous amount of control over the debugging process.
In a Flash document (ActionScript 2.0), click the Debug menu, and then click Debug Movie.
Select an available movie clip from the Display list.
Click the Properties tab to view all the properties, and their associated values.
Double-click on a value, and then enter a new value in any available property.
Click the Continue button to view how the Properties change as the Flash movie executes.
FL 5.3
Breakpoints are instructions to the Debugger to halt the running of a Flash movie. For example, you’re watching how the .swf file plays using the debugger, however, it’s moving so fast it’s difficult to watch everything. By inserting a breakpoint, you instruct the Debugger to halt the movie, and any variables and properties will display the values associated with that point in time. You can then change the values, and instruct the Debugger to continue playing the movie, using the modified values.
Click the Debug menu, and then click Debug Movie.
Click in the left margin next to the line of code where you want the breakpoint (red dot) to appears.
a. You can also click the Toggle Breakpoint button (ActionScript 2.0) to add/remove a breakpoint.
To remove a breakpoint, click the existing breakpoint (red dot) in the left margin.
Click the Continue button to begin playing the Flash .swf file.
The Debugger will stop the movie at each breakpoint.
Did You Know?
You can set or remove breakpoints in the Actions panel. In the Actions panel (ActionScript 2.0), click in the line you want, click the Debug Option button, and then select a command to set or remove breakpoints.
You cannot set a breakpoint on a comment line. If you set a breakpoint in a comment (or empty line) in the Actions panel, the breakpoint will be ignored by the Debugger.
FL 5.3
When you open the Debugger, the Flash Player is automatically paused. This gives you the opportunity to set breakpoints in the script (see previous lesson: Setting Breakpoints). Once the breakpoints are set, you can click the Continue or Play button, and the Debugger will play the .swf file until it encounters a breakpoint. When a breakpoint is reached, the Debugger again pauses the movie. You now have the option to step in, out, or through the breakpoint script.
Click the Debug menu, and then click Debug Movie.
Add breakpoints by clicking in the left margin next to the line of code where you want the breakpoint. To remove a breakpoint, click it.
Click the Continue button.
Flash will stop at the first breakpoint.
Select from the step options:
a. Continue. Click to leave the line at which the player is stopped and continue playing.
b. Stop Debugging. Click to deactivate the Debugger, but continue to play the SWF file.
c. Step In. Click to step into and execute a function (works only for user-defined functions).
d. Step Out. Click to move out of a function (works only if you are currently stopped in a user-defined function).
e. Step Over. Click to skip over a line of code.
Debugging a Flash movie manually means exactly what it implies. You can open the movie and take it for a test drive. Debugging a movie manually gives you a chance to be the visitor, and experience your movie exactly as they would. When you manually test a Flash movie, you want to experience the wait time for downloading, you want to forget that you created this masterpiece, and you want to come at it just as if you were a first-time viewer. A Flash movie is composed of text, video, audio, images, animation, and ActionScript. Your visitors will never see the ActionScript code, and most do not care how it was written; but they will care if it doesn’t work properly. For example, your visitor clicks a button to load a video file, and the video never loads, or it takes so long to load that they get bored and leave. Problems like these are what manual debugging can solve.
Click the Control menu, and then click Test Movie to test the entire Flash movie, or click Test Scene to test the active scene.
Important
Flash uses the settings described in the Publish Settings dialog box to test the movie. Use different settings such as Flash plug-in, to test the movie against earlier versions of the Flash plug-in.
Test the movie for any structural failures. Click all the buttons, and then do all the things you think a visitor would do.
Note any problems on paper (remember this is manual) in a list, called a debug, or edit list. The list can then be used to edit the document, using Flash’s standard editing tools.
See Also
See Chapter 20, “Publishing a Movie” on page 465 for information on modifying publishing settings.