Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources]

Using Tools To Create Code

If you're familiar with JavaScript, learning ActionScript might be a minor transition. Both ActionScript and JavaScript are based on the same core specification: ECMA (which stands for European Computer Manufacturers Association).

You have built interactive and animated SWF files in earlier projects. You already know how to make a creative and engaging user experience using Flash, even ones that include a bit of interactivity. However, the kind of interactivity you used didn't involve much complexity because you have used only a limited amount of code. The animation you used so far, such as changing images or moving things around the Stage, didn't involve any ActionScript, either. That begins to change in this chapter, and the good news is that it lets you create more complexity in your files that you cannot achieve without using code.

Scripting is useful when you need to build complex and interactive SWF files, and it's essential if you plan to build applications in Flash. You can use ActionScript to make your sites a bit more dynamic, such as creating an animated menu based on data from an external file, or a menu that loads data or images from the server. Or, you might just use ActionScript to make comments in your files so that you remember what steps you took while tweening animations or include your own copyright information.

You discover different ways to add code to a document in the next section called "Using the Actions panel". You find out how the tools work in Flash for adding, editing, and formatting ActionScript. Then you start to learn ActionScript and afterward jump into a tutorial that demonstrates how the concepts work.

Using the Actions panel

You already added ActionScript to several of the projects you created in this book. It's necessary to add very simple scripts to move or stop the playhead on the Timeline. In the next chapters, you start to add much more ActionScript to your projects. Before you jump into using longer pieces of code and learning how to write ActionScript, you need to know where and how to edit the code.

You can add ActionScript to your documents by typing code into the Actions panel (Window > Development Panels > Actions). The Actions panel lets you write and edit code that you place on the Timeline or directly on an instance, such as a movie clip, button, or component instance.

The Actions panel has many invaluable tools for helping developers write robust ActionScript code (Figure 6.1). Some of the main tools include the following:

Search and replace capabilities

Syntax checker

Error reporting

Code formatting

Code hinting

Code completion

Syntax coloring

Code debugger

Find help

The ability to search your ActionScript (Find button) allows you to easily find a snippet of code for a particular instance. For example, if you have a movie clip on the Stage called parrot_mc, you can find all code related to that instance when you click the Find button in the Actions panel and enter parrot_mc in the Find dialog box. When you click the Find Next button, you can step through each occurrence of parrot_mc in your code and make edits as necessary in the Actions panel. The Replace button lets you search for a string of text, and replace it directly with a different string of text that you specify in the dialog box.

Looking at ActionScript 1.0 and 2.0

It's likely that you've heard about ActionScript 2.0, so you might wonder how version 2.0 compares with versions in earlier versions of Flash. You will see code examples of both versions of ActionScript when you search online, so you should be aware of differences between the versions so you can choose what version of the language to use. ActionScript 2.0 is the latest version of ActionScript available in Flash MX 2004. However, it's not a requirement of Flash MX 2004 to use ActionScript 2.0you can use any version of ActionScript you want with the software. You can use ActionScript 2.0 for Flash Player 6 or Flash Player 7 files, however some features of ActionScript 2.0 only work with Flash Player 7.

There are a few differences between the languages. For example, you can use strict data typing in ActionScript 2.0, but not ActionScript 1.0. This process improves the error-checking process, so it's a good practice to code using strict typing. You learn about strict data typing in Chapter 7 Another improvement in ActionScript 2.0 is improved support for writing object-oriented code. This helps build better applications by allowing you to intelligently organize code into classes, so it is mostly important for developers. You find out more about classes later in this chapter, but you won't use custom classes (classes you write yourself) in this book. You use only classes that are built into Flash.

It's not necessary to use ActionScript 2.0's class-based coding, and it's sometimes overkill and just makes more work necessary in simple applications (or animation/graphics-based files). However, you will use some aspects of ActionScript 2.0 in this book. When you use any part of ActionScript 2.0, you need to publish your SWF files with ActionScript 2.0 selected as the version you are using. You need to select this setting in the Flash tab of the Publish Settings dialog box (File > Publish Settings) to correctly compile (publish) your SWF file.

The syntax checking feature (using the Check Syntax button) runs through your ActionScript and checks that the code doesn't throw any errors when you publish it. You only need to click the Check Syntax button in the Actions panel to see whether your code has any syntax errors. Doing this can save you a lot of time because it lets you check that your syntax is valid before you publish the file. Otherwise, Flash might generate various error messages if there are problems with the ActionScript.

One of the best features of Flash's ActionScript is its robust error reporting. You click the Check Syntax button in the Actions panel to check if your code has any syntax errors, and if any errors are found, Flash displays the Output panel. The Output panel displays information or a message about the code that contains errors, and it displays useful debugging information in the Output panel, such as the type of error, frame, and line numbers.

Another great feature in the Actions panel is the code formatter (using the Auto Format button). When you click the Auto Format button, all the ActionScript in a Script pane is formatted (such as applying indenting and spacing) based on options you specify in your preferences. You can specify how the code formats by selecting Auto Format Options from the Actions panel options menu (Figure 6.2). The Auto Format Options dialog box opens, which allows you to modify five formatting options and also view how each option affects code by looking at a preview pane, as shown in the following figure.

Using the Output Panel

Sometimes the Output panel opens and displays information about the ActionScript you have written or how the SWF file is working. The Output panel mainly does two things:

It alerts you to any problems with your code.

It returns values or display information.

Information can be the result of actions in your code that you specifically write, so messages or values display in the panel. You can write these messages using a trace statement. You use the trace statement to send results or values to the Output panel, usually to troubleshoot problems or see what values return to the SWF. You learn much more about the trace statement later in this chapter.

Code hinting and code completion help speed up development time, and they help you avoid typing mistakes. Code hints (Figure 6.3) can also help you learn ActionScript and teach you how to format code. Code hints help show you where brackets go, or what you can enter as parameters.

Code completion (Figure 6.4) lets you choose methods and properties for an instance from a pop-up menu. When you type an instance name and press the period key (.), Flash displays the pop-up menu containing methods and properties in the Actions panel. In addition to speeding up the coding process, this feature helps you remember what methods and properties are available.

You probably noticed how certain parts of your code have different colors in the Actions panel. ActionScript uses syntax (the structure and ordering of a language's elements), and parts of that syntax display in a specified color. Syntax coloring is helpful for beginners and advanced users alike. Colored code lets you quickly see whether your code contains typos by specially coloring different sections of code because incorrect syntax doesn't correctly use coloring. A color helps you understand what that part of the code does (specifically, keywords,comments and strings). To customize the current color scheme, select Edit > Preferences from the main menu. When the Preferences dialog box opens, click the ActionScript tab. This tab lets you control tab size (for indenting), the number of seconds before code hints appear, the font used in the Actions panel, syntax coloring, and a few other options. To change the background color in the Actions panel, click the palette swatch next to the Background label and use the color pop-up window to select a new color. Setting the foreground color sets the text color for instance names. Likewise, you can also set the color for other parts of the ActionScript language.

To take advantage of code completion, you have to give your instance names special predefined suffixes, or explicitly define a variable's data type (Number, String, Date, and so on). You learn how to do this later in the chapter and will practice it regularly when you code.

Highlight a color-coded word in your code (it is part of the ActionScript language). If you click the Reference button (in the upper-right corner of the Actions panel) when it's highlighted, the Help panel displays the ActionScript Language Reference entry for the action. This helps you use the particular action, examine an example for the code, or fix a problem in your code.

Organizing code in an FLA file

There are three main ways to organize the ActionScript that you write for a project:

On the Timeline: Select a frame on the Timeline and type ActionScript into the Script pane of the Actions panel. A small "a" appears in the frame you added the script to (Figure 6.5).

Attached directly to objects: Select an object on the Stage (such as a movie clip or a component) and then type ActionScript into the Script pane. The code you write is applied to that object, unless specified otherwise.

Placed in external ActionScript files (or classes): Type code into a code editor, such as the Script window in Flash MX Professional (or a text editor such as Notepad). The external code imports into the SWF file using a statement in the FLA file.

The preferred and officially (Macromedia) recommended way to write ActionScript is to place as much code as possible either in an external file or on the main Timeline. You should always avoid placing code directly onto instances because it quickly leads to a lot of duplicated code. It also makes the code snippets that you need to fix or edit difficult to find in an FLA file. Placing code all over a FLA file is sometimes referred to as "spaghetti code."

Coding concepts."

When you write code, it is best to group similar code together. For example, if you have large blocks of code that you use to create and modify similar items (such as movie clips) it makes sense to keep the code that does this together in one location. For example, if you have ActionScript that builds a menu system (or adds functionality to it), try and organize the code for the menu together in one place.

Using external code files lets you incorporate code libraries into several SWF files. This means you can save time by using the same code in several files. You do not use this way of organizing a project in this book, which sometimes involves a more complex way of programming.

Organizing code logically helps serve many different purposes. First and foremost, it's easier to read, understand, and modify organized code. Disorganized code is often spread throughout a file, perhaps on many frames, put inside movie clips, or attached onto movie clips. When code is put in different locations, it's difficult to find, modify, and figure out. It's difficult to figure out how the ActionScript interacts when it's put in so many places. When the code is placed in one place, you can easily read the ActionScript and figure out how all the pieces work together.

In this book, you add all your code to the Timeline in an FLA file.

Another way to organize your code is to write it in external ActionScript (.AS) files. There are two different types of external files that you often encounter while working with ActionScript. The first one is commonly referred to as an include file, where Flash includes the code from the external file in your Flash application when you publish it. You can write this include file in the Actions panel and paste it into Notepad or TextEdit, write it in the Script window in Flash MX Professional (Figure 6.6), or any number of third-party programs (such as PrimalScript or sciTE|Flash).