ptg Debugging a Movie Introduction 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 tech- niques (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 prob- lem, 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 vari- ables, 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 the traditional Actions panel. 17 17 What You’ll Do Debug Concepts Debug with the ActionScript Editor Use the Movie Explorer Debug for ActionScript 3.0 Resolve Compiler Errors Debug for ActionScript 2.0 View Variables Add Variables to the Watch List View Properties Set Breakpoints Step Through Code Debug Manually 409 From the Library of Wow! eBook ptg 410 Chapter 17 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 for errors. 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. Debugging Concepts Project folder From the Library of Wow! eBook ptg Chapter 17 Debugging a Movie 411 ◆ Test and debug 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, point to Test Movie, and then click Test (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. If there is a problem, you can use the Debugger to diagnose the problem, so you can fix it. Just click the Debug menu, point to Debug Movie, and then click Debug. ◆ 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. Smart file naming conventions From the Library of Wow! eBook ptg 412 Chapter 17 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 differ- ent 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 (attached to a frame)—in which you filled in options and parameters to create code or access the Code Snippets panel (New!) to insert ActionScript 3.0 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 or a block of code to document your work. Debugging with the ActionScript Editor Use the ActionScript Editor Click the Window menu, and then click Actions to open the ActionScript Editor. Script Assist. Click the Script Assist button to view, write, and edit scripts using a visual interface that includes syntax completion and parameter descriptions. ◆ To insert ActionScript 3.0 co de , click Code Snippets to access the panel (New!). Word wrapping. Click Word Wrap on the Options menu in the Actions panel 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. Click Import Script on the Options menu in the Actions panel, the imported script is copied into the script at the insertion point. 5 4 3 2 1 3 5 26 4 Breakpoints From the Library of Wow! eBook ptg Chapter 17 Debugging a Movie 413 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 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 (Mac) or Edit (Win), and then click Preferences. Click the ActionScript category to modify the syntax coloring. 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 to have Flash help you enter code. 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. 15 14 13 12 11 10 9 8 7 6 11 8 12 13 7 10 Selected code 14 Click to expand code 15 Collapsed code From the Library of Wow! eBook ptg 414 Chapter 17 Flash's Movie Explorer gives you an easy way to view and organize the contents of an .fla document, and even select elements for modifica- tion. 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. Using the Movie Explorer Use the Movie Explorer 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: ◆ Go To Location. Takes you to the selected layer, scene, or frame in the active document. ◆ Go To Symbol Definition. Takes you to the symbol definition for a symbol that is selected in the Elements area. ◆ Select Symbol Instances. Takes you to the scene containing instances of a symbol that is selected in the Definitions area. ◆ Find In Library. Select to highlight the selected symbol in the document's Library. ◆ Rename. Select to enter a new name for a selected element. ◆ Edit In Place. Select to edit a selected symbol on the Stage. ◆ Edit In New Window. Select to edit a selected symbol in a new window. ◆ Show Movie Elements. Displays document elements organized into scenes. 2 1 1 2 From the Library of Wow! eBook ptg Chapter 17 Debugging a Movie 415 ◆ Show Symbol Definitions. Select to display all the elements associated with a symbol. ◆ Copy All Text To Clipboard. Select to copy selected text to the Clipboard. ◆ Cut, Copy, Paste, And Clear. Select to perform these functions on a selected element. ◆ Expand Branch. Select to expand the navigation tree at the selected element. ◆ Collapse Branch. Select to collapse the navigation tree at the selected element. ◆ Collapse Others. Select to collapse the branches in the navigation tree not containing the selected element. ◆ 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. 4 3 43 From the Library of Wow! eBook ptg 416 Chapter 17 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 exe- cution. 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. Debugging for ActionScript 3.0 Use the Debugger for ActionScript 3.0 Create or open a Flash document (ActionScript 3.0). ◆ 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, point to Debug Movie, and then click Debug. ◆ You can access debugging commands on the Debug menu. Add or remove breakpoints to interrupt the execution of the scripting code. ◆ Add. Click in the left margin next to the line of code. ◆ Remove. Click the breakpoint in the left margin. To step through the co de 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. 4 3 2 1 3 4 Output panel Actions panel 2 1 From the Library of Wow! eBook ptg Chapter 17 Debugging a Movie 417 ◆ 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 sc ri pts th at contain each function, double- click the script name in the call stack in the Debug Console panel. To view variable values, cl ic k th e Options button on the Variables panel, and then click one of the following: ◆ Show Constants. Displays the values constants. ◆ Show Statics. Displays variables for the class instead of instances of the class. ◆ Show Inaccessible Member Variables. Displays variables that are inaccessible to other classes or namespaces. ◆ Show Additional Hexadecimal Display. Displays hexadecimal values instead of decimal values. ◆ 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, cl ick the End Debug Session button in the Debug Console panel. To change workspaces, click the Workspace menu, and then select one. 9 8 7 6 5 7 9 Continue 6 8 From the Library of Wow! eBook . 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. 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. execution. Click the Continue button in the Debug Console panel. To view the individual sc ri pts th at contain each function, double- click the script name in the call stack in the Debug Console