Loading ...

ActionScript Best Practices

by Greg Lunn - March 3, 2007

When starting out with ActionScript, it’s easy to be confused by the many varying styles used to enter code into the Flash environment. There are many books and tutorials on Flash and ActionScript, each with their own styles and conventions that may vary drastically from one to the next. Adobe suggests adhering to several best practices to ensure that your code remains as functional and efficient as possible. All ActionScript tutorials here at monkeyflash.com will use these practices, so let’s take a look at a few of the most important.

Use standard naming conventions

When placing objects on the stage or creating variable, it is important to maintain a standard system for naming all elements. ActionScript is case-sensitive, and without a standard set of names, it is easy to forget what something is called, and have unexplained errors or a non-functioning project as a result.

The recommended naming scheme for variables and instance names is to use mixed case, or “camel case”, where multi-word names are concatenated without spaces, and each subsequent word is capitalized. For instance, the following would be acceptable names for variables:

• myVariable
• scrollPanel
• buttonLeftPosition

Of course you can use any other convention (underscores between words, specific prefixes for variable types, etc.) but it’s important to remain consistent.

When assigning instance names, Adobe has a set of suffixes that you can append to your names to help identify their purpose. These allow you to know whether an instance is a movieclip or a button at a glance. They also will activate extra code hinting that will assist you when writing your ActionScript specific to that type of object.

Use the suffix “_btn” when adding an instance name to a button.

Although there are many of these suffixes, some of the most common are _mov, _btn, _txt and _sound. For a complete list, see the Flash 8 documentation on suffixes.

Place all code on frames

In earlier versions of Flash, it was acceptable and even encouraged that code relating to a button or a movieclip be placed directly on the element itself. This gave beginners a visual connection between the code and the objects on the stage, but caused scripts to be scattered throughout a project file in many different locations, a symptom sometimes referred to as “spaghetti code.” You can better organize your project by placing all of your code on one layer of the timeline within keyframes. Doing so will require a slight modification of the way your code is written to make sure that it still functions in the same way.

For instance, here is how code for a simple click interaction would have been placed directly on a button. This is a style that should be avoided:

on(release) {
	//do some actions
}

Instead, consider creating a layer named “Actions” in the timeline, and placing the following code on a keyframe of that layer.

myButton_btn.onRelease = function():Void {
	//do some actions
};

Adding ActionScript to a keyframe in its own layer.

There are several syntax differences in the two styles, and some might argue that the second style is more difficult for a beginner to remember. However, by learning to write all of your code for a frame, you will learn the proper syntax and format for all other ActionScript, and lessen the confusion that comes with trying to use both styles. Also, code kept in a single location in a layer is easier to debug when problems arise, and promotes a proper coding style.

Use strict data typing

ActionScript 2.0 introduced the ability to assign data types to variables and data returned from a function. This means that if you assign a variable a data type of Number, for example, and then later you try to pass it a text string value, you will see an error in your output window. Without data types in place, the problem would go unannounced at runtime, and you could spend too much time trying to find out why your project doesn’t work. Also, data types allow Flash to make better and more efficient use of memory and your computer’s processor if it knows what kind of information you expect to store in a variable.

Typing variables is done when they are created, or instantiated, by adding a colon and the data type after the variable name. Examples could look like these:

var myCounter:Number = 0;			// myCounter will contain a number
var userName:String = "";			// userName will contain a text string
var gameBoard:Array = new Array();	// gameBoard will contain an array of values

Data typing enables convenient code hints in the Actions panel.

Notice that data types begin with a capital letter. The most common data types you will encounter are Number, String, and Boolean, although there are many others. More information on data typing is available from Adobe.

When you execute a function, Flash will expect some data to be returned. It’s recommended that you provide a data type for your return value when writing a function. If the function will not return anything, assign it a return data type of Void. Then if something goes wrong in your function and the wrong data (or no data) is returned, you’ll get an error explaining what went wrong, instead of a silent failure.

function calculateSalesTax(price):Number {       // this function will return a number
	var tax:Number = price * 0.07;
	return tax;
}
 
myButton.onEnterFrame = function():Void {       // this function will return nothing
	//do some actions
};

Use comments appropriately

Whether you’re working on a Flash project alone, or with a large group of developers, it is essential that you leave comments in your code explaining what the code should do, and how the code is organized. When you open a project after a month or two of inactivity to perform an update, you’ll thank yourself for the little reminders you leave behind now. Other developers who need to alter your code (or learn from your tutorial) will appreciate the hints you leave them as well.

You can leave two type of comments: single-line and multi-line. Single line commets can be added on their own lines, or at the end of another line of code to explain its purpose, and begin with two forward slashes (//).

// These variables contain the mouse position on the screen
var mx:Number = this._xmouse;	// x coordinate
var my:Number = this._ymouse;	// y coordinate

Multi-line comments are used when a more detailed explanation is required, or you would like to include additional information in your code. Begin multi-line comments with /* and end them with */.

/*  Drag and Drop ActionScript tutorial
     You are free to use this code in its original or modified form in your own project.
     For more information, use the contact form at http://www.monkeflash.com/contact/  */

Getting into these habits now will make your projects easier to debug and update, and will also prepare you for the switch to ActionScript 3.0, which will be a part of the next version of Flash. For a more in-depth look at these and many other best practices when working with ActionScript 2.0, check out Jen DeHaan’s article at Adobe.com.