The Flash Anthology: Cool Effects & Practical ActionScript - Chapter 1: Flash Essentials

Actions Panel Framework

The Actions Panel doesn't offer Expert and Normal modes in Flash MX 2004 or Flash MX 2004 Professional. In earlier versions, the Actions Panel could be run in one of these two modes, toggled to from its Options menu. In Normal mode, actions could be inserted only via the menu system; Expert Mode allowed the developer to enter actions by typing directly into the Actions Panel itself. In the 2004 editions, you can add ActionScript to the Script pane only through direct input, the Actions toolbox, or the + button above the Script pane.

If you're still "finding your feet" when it comes to the Actions Panel, you aren't left completely on your own. Flash's code hinting functionality will attempt to complete your code automatically, or offer you a choice of syntax based on what you've already typed. For example, if you type "Math" within the Actions Panel, you'll be presented with a list of methods that are available for the Math class, ordered alphabetically from abs to tan. You can then either select the method you require from the drop-down menu or continue typing the script yourself.

Optimizing the Actions Panel

One of the important elements of working efficiently within Flash, and decreasing the development time of scripted effects, is an efficient and comfortable working environment. Now, I'm not about to tell you to vacuum your room and polish your desk (although I have to admit that before I sit down to a scripting session, I do sort my papers out and try to clear up my workspace). But remember: a tidy environment reflects a tidy mind, and tidy code is easier to understand when you come back to it at a later date.

Figure 1.4. Get to know the important options within the Actions Panel.

There are three major options available within the Actions Panel that are great time-savers, and will aid you in your quest for coding perfection. The buttons for these are found in Figure 1.4:

1. Show Code Hint: When you type directly into the Actions Panel and Flash suggests syntax to complete your code, you'll note that if you don't accept this suggestion, after a short time it will disappear from the screen. At other times, you may be happily coding away, only to have the ActionScript gremlins run in and steal thoughts from your brain—suddenly, you forget what you were typing! In either event, click this button to have the program display a code hint relative to your current position in the script.


2. Auto Format: After heavy code editing, additions, and deletions, the comments and formatting within your code can get a little out of kilter. A simple click of the Auto Format button will format your code beautifully, based on either preset rules or custom rules you set up, as described in the next section. This is one of the most frequently clicked buttons in my copy of Flash—it's a welcome addition to Flash MX and later versions.


3. Check Syntax: When you're examining the impact of a piece of script on the final movie, the last thing you want to see is an output window full of errors. To check your code for errors without either exporting the movie or viewing it within the internal Flash Player, click on the Check Syntax button (Ctrl-T, or Command-T on Mac). This will report any errors immediately, which can save a lot of time in the initial development phases.

Configuring Auto Format

Coming back to a piece of code you developed six months earlier can be a pleasant experience if your code is effectively formatted and commented; if not, it can be a veritable nightmare.

The Auto Format button helps keep your code in the best possible condition. While it doesn't comment code for you, it does make code readable—definitely a bonus when you're revisiting libraries of compiled code. To alter the Auto Format options to your liking, select Auto Format Options… from the Options drop-down menu in the corner of the Actions Panel. To keep your code in pristine condition, I suggest you check all the checkboxes, which will produce a similar result to that shown in Figure 1.5.

Figure 1.5. Adjust the Auto Format options to generate cleaner code.

Code Commenting

There comes a time during every project, be it large or small, when you return to a line or chunk of code and think 'Hmm… what does that bit do again?' There's nothing worse than having no idea what your code does, and needing to work through it all again to make alterations or reuse it in another project. Commenting will make your code more readable, easier to navigate, and, if you work as part of a team, more easily transferred or shared via common libraries.
Note

Comments in ActionScript are not executed when a movie is running; in fact, Flash completely ignores them. They're for your benefit, used to describe your code or temporarily disable sections of it.

As an example, here's a snippet I include as the first line of every function I write. I save this as a text file in the ActionScript library on my hard drive so that I don't need to retype it each time I use it. It contains a wealth of information that makes it easy for me (or any other developer) to see what the code does, what variables it will accept and/or output, and relevant revision data:

//-----------------------------    
//Function Name: Name of Your Function    
//Function Date: 15/09/2003    
//Input:         Input Variables (e.g  Color Variable (String))    
//Output:        Output Variables (e.g  Hex Color Reference)    
//Revision Date: 28/09/2003: Added Non Numeric Error Checking    
//-----------------------------

A double slash (//) tells Flash to ignore the remainder of a line of code. In the example above, each line of the comment begins with a double slash. You can also use this trick to temporarily disable a line of code, like so:

// var TestVar = _root.parentMovieClip.childMovieClip.value;

You can create multiline comments by starting them with /* and ending them with */. Here's what the function description would look like using that style of comment:

/*-----------------------------    
 Function Name: Name of Your Function    
 Function Date: 15/09/2003    
 Input:         Input Variables (e.g  Color Variable (String))    
 Output:        Output Variables (e.g  Hex Color Reference)    
 Revision Date: 28/09/2003: Added Non Numeric Error Checking    
 -----------------------------*/

This style of comment can be used to "comment out" entire blocks of code, like this:

/*    
_root.Option_Button.onPress = function ()    
{    
 getURL ("http://www.google.com");    
};    
*/

Taking a little extra time to comment code will save you and others time in the long run. Once you get into the habit of commenting, you'll wonder how you ever got by without it.

ActionScript Coding Tips

There are a few key points to remember about creating functions and actions within the Actions Panel. These are by no means the be-all and end-all of best coding practices within Flash; they're merely standards that will see you spend more time developing, and less time searching for and squashing bugs.

ActionScript is Case-Sensitive

Just like the JavaScript on which it's based, ActionScript will not work as expected if it's written in the wrong case. But there are some exceptions. For example, consider the following function:

function TestTrace () {    
 trace ("hello");    
}

This function is completely error-free, and will output 'hello' to the Output Window when it's called. Now, even though the function name is capitalized (TestTrace), you can call the function without the capitalization (testtrace), and Flash won't complain:

myButon.onRollOver = function ()    
{    
 testtrace ();    
}

Note: In Flash MX, the ActionScript compilation routine is quite forgiving—it's not case-sensitive. ActionScript will be treated as case-sensitive if you include #strict pragma as the first line of a script.

Just because ActionScript is forgiving with your own function and variable names, don't expect it to do you the same favors when it comes to built-in names. These mistakes will stop your code from executing and are often the most annoying and difficult to find as you introduce more code into your project. For this reason, the best policy is to always take care to use the correct capitalization.

Externalize ActionScript

Externalizing large blocks of ActionScript is a good way to separate the elements of your project and help keep your code tidy and concise. Imagine, for example, that we have a piece of navigation code that's 50 lines long. We could externalize it by cutting and pasting the code chunk into Notepad (Windows) or BBEdit (Macintosh), and saving it as navigation.as. We would then replace the code in the movie with this line:

#include "navigation.as"

This .as file would then be included in the SWF file at compilation time and need not be distributed with it.

Tip: To quickly export your ActionScript into an external file, select Export Script… from the Options menu within the Actions Panel.

Script Pinning

Because you can associate ActionScript actions with almost any element of a Flash movie, you may be working on one script fragment and need to refer to another somewhere else. Clicking the other element will display that other fragment; if you need to return to the fragment you were working on, you could easily lose your place.

To help developers avoid confusion while jumping between multiple script fragments, Macromedia has provided script pinning. Simply click the Pin Script button in the Actions Panel, and Flash will keep the currently displayed script fragment open in a tab along the bottom of the Actions Pane. You can then navigate to another element to view its script without fear of losing your place in the original script—simply click the tab to switch back to the pinned script whenever you need to. You can even pin multiple script fragments when the situation calls for it.

Note: Flash MX 2004 introduces an extra pane in the Actions Panel—the script navigator pane. Located just below the Actions toolbox, this new pane allows easy navigation through all the code in a movie.

Lift and Lock

Actions can be added to the timeline within keyframes, or assigned to objects on the stage. Regardless which type of action you're creating, however, it's best practice to create a new layer, give it a meaningful name such as 'ActionScript', and lock the layer before placing your ActionScript in it. This way, you can easily see the objects containing ActionScript and navigate to them without having to open the Movie Explorer.
Naming Conventions

When you write code, create functions, or name layers and folders, there is a set of best practices that you should try to implement. Some of these are common sense; others are not so obvious. None of these conventions is essential, but by following these simple guidelines and other suggestions in this chapter, you should be able to organize your Flash projects successfully.

Do

• create filenames that relate to the purpose or goals of the Flash project
• create names for functions and variables that indicate their roles in the project
• use underscores to separate words; avoid hyphens
• be consistent in your application of the naming system you decide to use

Do Not

• use acronyms that make little or no sense
• shorten filenames
• create function, file, or variable names that require a Masters degree in Particle Science to decrypt
• use spaces or merge words together