Flash11:Debugging and Testing

From virtualMV2015wiki
Jump to: navigation, search
 Home  Flash11 (CS5) <
Icon Objective.png

Objective Strategies for Problem Solving and Debugging

By the end of this page you will be able to:

  • Use the inbuilt features of Flash CS5 to debug and test your ActionScript3 movie

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

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 → Play
  • Control → Stop
  • Control → Rewind
  • Control → Step Forward One Frame
  • Control → Step Backward One Frame
  • Control → 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 → Toolbars → Controller

Sd windowpathflash.png

The controller toolbar appears.

Sd controller.png

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.

  • Control → Test Movie → in Flash Professional or
  • Control → Test Scene

This generates a corresponding .swf file.

Sd controltestinflashpro.png

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 → Test Movie → in Flash Professional
  • Select View → 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 → Download Settings → 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 trace() 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.

Sd syntaxchecking.png

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.

Sd errorreport.png

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

Sd highlightederror.png

What line two of the code should have read is:

var answerSquare:YellowSquare = new YellowSquare();

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.

Sd compilererror.png

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 trace() 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 trace() statement will not display. For example, we need to check that the following piece of code to drag an object is executing:

function pickUp(e:MouseEvent):void {
	e.target.startDrag(true);
	e.target.parent.addChild(e.target);
	startX=e.target.x;
	startY=e.target.y;
 
}

By adding a trace() 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.

function pickUp(e:MouseEvent):void {
	e.target.startDrag(true);
	e.target.parent.addChild(e.target);
	startX=e.target.x;
	startY=e.target.y;
	trace("yep I can start dragging")
}

What we get in the Output Panel is:

Sd trace.png

A trace() 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 → Debug Movie → 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.
Sd debuggerconsole.png


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.

Sd breakpoints.png

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.

Sd hottipicon.png HOT TIP! 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[1]

Icon References.png References

  1. Grover, C. (2010). Flash CS5, the missing manual. Sebastapol, California, USA: O'Reilly Media Inc.

 

Day, S. (2010). Flash11:Debugging and Testing. Retrieved January 19, 2018, from http://www.virtualmv.com/wiki/index.php?title=Flash11%3ADebugging_and_Testing