Flash11:Debugging and Testing

Introduction
Flash CS5 comes with some great inbuilt tools to help test and debug your movie, however a lot of trouble can be avoided with some simple planning.

Strategies and Techniques
There are some strategies and techniques that help to avoid some common pitfalls:
 * Use an actions layer to house all the ActionScript - this makes it easy to find likewise, use a Labels layer for the same purpose
 * Create symbols, this way they can be reused
 * Reuse ActionScript by creating methods and functions
 * Fully comment everything
 * Use consistent naming conventions, abbreviations, acronyms throughout.
 * Test Often and test everything
 * Test on different computers and different OS
 * Test in multiple web browsers, using the latest 2 or three versions
 * Get someone unfamiliar with you production to test (usability)
 * Test in a real world environment (online)

Click here(Current Naming conventions) to read the latest in naming conventions. There has been a move away from what was commonly used in ActionScript1 and ActionScript2

Testing on the Stage
Testing on the stage is quick, but doesn't necessarily give you the output that would be seen by the viewer once the movie is compiled, it wont for example show a contained movieclip. Use the Controller toolbar and associated items to move back and forth along the timeline:


 * Control &rarr; Play
 * Control &rarr; Stop
 * Control &rarr; Rewind
 * Control &rarr; Step Forward One Frame
 * Control &rarr; Step Backward One Frame
 * Control &rarr; Go to End

This method is ideal if you just want to test out a few frames, check a motion path or not see hidden layers. To see the controller toolbar: Select Window &rarr; Toolbars &rarr; Controller



The controller toolbar appears.



There is also options under the Control Menu to Play all Scenes, Loop Playback and Enable Simple Frame Actions and Enable Simple Buttons.

Testing in the Flash Player
Testing with the inbuilt Flash player is the more usual way of testing and gives an accurate view of what the audience will see, barring hardware and connection differences. This generates a corresponding .swf file.
 * Control &rarr; Test Movie &rarr; in Flash Professional or
 * Control &rarr; Test Scene



Simulating Downloads
Sometimes it is useful to test your production as if it were being viewed from the Internet and over various connection speeds. Flash gives you an option to simulate the common connection speeds and to test the average download time.


 * Choose Control &rarr; Test Movie &rarr; in Flash Professional
 * Select View &rarr; Download Settings, and from the sub menu select the connection speed. The default available range covers from a slow dial-up speed to T1.

You can also customise the download speed (choosing either faster or slower speeds than the default selection) by selecting:


 * View &rarr; Download Settings &rarr; Customize.

From there, set the required rates from 1 byte per second to 10,000,000.

Debugging
Flash provides a few tools that can help to track down any problems you may have.
 * ActionScript Color Coding - Default: keywords and identifiers in blue, text strings in green, comments in light grey. Black indicates something that is not recognizable and is usually where the problem lies.
 * Check Syntax Button - checks for typos, missed parenthesis and misplaced semicolons - but its not perfect!
 * Compiler Errors Panel - alerts to mistakes in ActionScript logic, e.g. a reference to a non existent or misnamed object
 * Output Panel (use the Statement - see below)
 * The Debugger - checks all sorts of things - variables, properties and objects with the ability to apply break points.

Checking the Syntax
This is useful to check for typos, missed brackets, misplaced semicolons. With the Actions Panel open and the ActionScript3 you wish to check visible in the code panel, click on the Check Syntax button.

The Syntax checker will go into action searching your code for errors.



On completion, Flash will "ping" you to let you know its finished and the results (if there are any errors) will pop up in the compiler errors panel. In this case the message doesnt quite get it right, but it does tell you that the error is in line two of your ActionScript3 and has to do with the parenthesis...a good place to start.



Double clicking the message will take you to, and highlight, the offending line in the Actions Panel.



What line two of the code should have read is:

Using the Compiler Errors Panel
There is every possibility that checking the syntax will not reveal the errors that are causing your Flash Movie to crash. This is because "Check Syntax" does not compile your code. The Compiler Errors Panel will check the code and report the type and location of other errors.

Test your movie:
 * Ctrl+Enter (PC) or Command+Return(Mac)

It is possible, with lots of lines of code to have multiple errors show up here. As with the check syntax error reporting, double clicking on the code takes you straight back to the actions panel with the code highlighted. The compiler will report errors relating to undefined properties, non existent objects as well as syntax.

Using the example as before and removing the variable holding the instance of yellowSquare, will cause an error each time the compiler tries to access the object answerSquare.



Each time the error is reported, is an indication not necessarily of where the error is, but often where the object is being called from. An error message like the one above, definitely points to something missing.

Using Trace and the Output Panel
The  statement is an easy way to keep track of whats happening. In effect, it gives a text detail of whats happening and displays it on the Output Panel. You can use it to test that certain events have taken place. You can put a trace statement inside a code block to check that the code within that block is executing correctly, if not the  statement will not display. For example, we need to check that the following piece of code to drag an object is executing:

By adding a  statement, containing some simple text and it showing in the output panel when the movie is tested, will indicate that this piece of code is all OK.

What we get in the Output Panel is:



A  statement can almost be added anywhere to check that a piece of code is working. Once tested, it can be removed or commented out.

Using the Debugger
The debugger is useful for listing variables and their properties and can help when trying to find problems.


 * Click Debug &rarr; Debug Movie &rarr; in Flash Professional.

Flash automatically compiles and runs your movie and displays the debugging console.
 * The Scenes/Symbol panel tracks the current position in the main timeline, scene or symbol timeline. It will display the name of the scene or symbol, the layer that contains the code and the frame number.
 * The middle panel shows the ActionScript. This is where you can set the break points.
 * The Output panel, where any trace statements will show and any other errors.



Setting Break Points
The breakpoint is a stopping point that you can insert into your ActionScript to stop the Flash Player at any given point. This allows you to check objects and properties, inspect variables and then step through the remaining code, allowing you to easily pinpoint any errors. You can check that certain pieces of code execute and check conditions.

The breakpoint is set in the Code Panel by clicking at the left hand side of the piece of code that you wish to halt your movie at. A red dot will appear. You can click multiple points and from there keep an eye on whats happening. This is especially useful when looking for variable errors.



When you click on the green play button at the upper left hand corner, the code will step through to each breakpoint and stop at the breakpoint without executing the code on that line. The current position in the movie is indicated by the red dot with the yellow arrow through it. Any changes will appear in the variables panel. This is also useful to check if code is actually being reached, important when dealing with conditional statements.

Test all the time.. this cant be emphasized enough. It will save you a lot of time later if you try and get working your code in small chunks, rather than hundreds of lines of code, where errors can and will be difficult to track.

Resources
The information above is a summary of Part Four, Debugging and Delivering your Animation, in Flash CS5, the missing Manual