Internet / Software Applications

Macromedia Flash MX 2004 ActionScript Programming Tutorial

Welcome to the Free Macromedia Flash MX 2004 ActionScript Training Course

Welcome to our free Macromedia Flash MX 2004 ActionScript programming training course and tutorial. ActionScript is the programming language powering advanced Flash movie functions and interactivity. ActionScript allows you to create games, interactive Flash movies, and more.

Learn ActionScript for free using our tutorial.

Section 1: ActionScript Programming

Section 2: Variables

Section 3: Conditional Statements

Section 4: Loops

Section 5: Functions

Section 6: Objects

Section 7: Classes

Section 8: Animating with Code

Section 9: Debugging

Macromedia Flash MX 2004 ActionScript 2.0 Tutorial and Free Online Training Course

In this section, you will learn about:

  • The Actions Panel
  • Customizing Flash
  • Syntax
  • Case Sensitivity
  • Dot Syntax
  • Functions and Event Handlers
  • Comments
  • Reserved Words
  • Simple Actions
  • Event Handling
  • Targets and Paths

Introducton to ActionScript

ActionScript is Macromedia Flash’s scripting language. It’s used to add more complex effects and interactivity to movies than can be created just by using the interface tools. In Flash MX 2004, a new version of ActionScript, ActionScript 2.0, has been introduced. ActionScript 2.0 is more object-oriented, with standard terminology that will be familiar to object-oriented programmers. This includes implementation of classes and subclasses, as well as strict data typing. Over time, Flash has evolved into a powerful tool whose real potential for application development can only be realized using ActionScript.

This free tutorial introduces you to basic programming concepts in the context of ActionScript 2.0 syntax, and then explores common events, methods and properties of ActionScript objects as you develop two complete sample applications. The first is a simple Asteroids-type video game, which gives you practice using event handling, variables, conditional statements, loops, functions, and a number of methods available to the MovieClip and Sound objects, among others. Then you learn how to send and receive data by developing a feedback form users can submit to your web site. Finally, we introduce you to the XML class, where you learn how to build a simple data front-end that lets users display and manipulate XML data.

The Actions Panel

We begin by introducing you to the Actions panel, which has changed somewhat in Flash MX 2004. Instead of expert and normal modes, the panel offers only one mode, which has an Actions toolbox and a script navigator on the left side. To display the Actions panel, open the Window menu and select Development Panels and then Actions, or press F9 on your keyboard:

This is where you’ll be spending the majority of your time in this tutorial, as you write, revise, and debug scripts.

There are three ways to add actions in the Actions panel: First, you can simply type the code. Or, if you need help with the syntax or parameters for a particular action, you can select the action from either the folders in the Actions toolbox or from the menu available from the Add new item button. Both the Actions toolbox and the Add new item button organize actions the same way, grouping them into global functions, global properties, statements, operators, and so on. When you insert one of these items, Flash automatically adds the necessary syntax elements, like parentheses for arguments or parameters and curly braces for the beginning of a function or event handler. In addition, Flash’s Intellisense helps you select acceptable events, methods, and properties by giving you choices in a pop-up menu:

The script navigator on the lower left side of the panel helps you to navigate among scripts attached to the different objects in your movie:

The navigator first lists the current selection, then the objects in each scene, then the objects in the library. This makes it much easier than it was before to find a script attached to an object. Instead of locating the object on the stage or in the library, you can simply navigate to it in the Actions panel:

This way, you can expand the height of the Actions panel to fill the screen, and do much of your coding without having to locate an object on the stage.

The buttons along the top of the Actions panel also make coding faster and easier:

Add a new item to the script opens a menu of available actions that can be inserted into your script.
Find lets you search for a word or phrase anywhere in your code.
Replace lets you search and replace a word or phrase anywhere in your code.
Insert a target path lets you insert a target by selecting from the objects in your movie. Flash automatically inserts the correct path to the target based on the location of the current code. You can choose to insert either an absolute or a relative path.
Check Syntax checks the current script for errors.
Auto Format formats your script for readability, indenting lines as necessary.
Show Code Hint displays a yellow pop-up with the correct syntax for the action you’re adding.
Reference opens the ActionScript Language Reference in the Help panel beneath the Actions panel.
Debug Options lets you set and remove breakpoints for debugging.
View Options lets you set display options for the Script pane, like adding line numbers.

Customizing Flash

There are a few things you can do before you get started to customize the Actions panel so your code is easier to read and work with:

  1. From the Edit menu, select Preferences.
  2. In the Preferences dialog, select the ActionScript tab:

  1. Make sure Automatic indentation is selected. This indents a new line of code appropriately when you press Enter at the end of a line.
  2. Make sure Code hints is selected so Flash automatically displays the correct syntax when you add an action.
  3. Make sure Syntax coloring is selected. You can assign a different color to the elements in your code by clicking the color button for each element and selecting a color from the palette:

We’ve changed keywords to a bright blue, identifiers to green, and strings to red:

  1. If you don’t like the default font, you can change it under Text.
  2. Click OK.

Different elements in the code now stand out:

If you have some existing code, try clicking the Auto Format button in the Actions panel to see how Flash neatens the code:

Finally, adding line numbers makes it easier to keep track of and debug your code: Click the View Options button and select View Line Numbers:

As you progress through the tutorial, you’ll become more and more comfortable navigating through your code and using the various tools available to you in the Actions panel.

Syntax

ActionScript syntax is similar to JavaScript, but even if you aren’t familiar with JavaScript, it’s fairly easy to learn. You only need to understand and learn to follow some basic rules.

Case-Sensitivity

First, ActionScript 2.0 is case-sensitive. It isn’t case-sensitive in all instances, but it will make your life much easier if you simply think of it as always case-sensitive. Case-sensitivity is especially an issue in external scripts like FLA files, class files, and those included with the #include command.

Dot Syntax

ActionScript uses dot (.) syntax, both to access an object’s properties and methods and to specify paths. Objects, variables, and functions all exist within Flash’s hierarchy, so you must keep track of where you place each of these, and then target them appropriately. For example, a function residing in a movie clip that resides on the main timeline would be called using: _root.myMovieClip.myFunction

Although you can still use slash syntax to target movie clips and variables in movies being played in Flash Player 7 or earlier, ActionScript 2.0 does not support it, so it isn’t recommended, especially if you want to use any of the new objects available in ActionScript 2.0.

Functions and Event Handlers

Functions and event handlers (as well as class definitions) are placed into curly braces ({}). For example, the following event handler moves the timeline to Frame 2 when a user clicks a button:

on(release) {

gotoAndPlay(2);

}

The gotoAndPlay() action is included inside the curly braces. All the actions that should be performed when the user clicks the button must appear within these braces.

In addition, all statements in ActionScript are terminated with a semicolon (;), as you can see at the end of the gotoAndPlay() line.

Comments

Comments let you specify your intentions for a piece of code. They’re ignored by Flash and have no impact on the script itself—they’re simply used to document the various portions of your scripts. Comments may seem unnecessary at first, but they can prove invaluable later on, when you’ve forgotten what the lines in a particular script do.

You can add in-line comments or comment blocks. In-line comments are one-line comments created by prefacing the comment with two forward slashes (//):

// Play the explosion

gotoAndPlay(“Explosion”);

You can use comment blocks to comment out entire portions of a script, entire functions, or to add extensive documentation. You do this by enclosing the comment block in a forward slash (/) and an asterisk (*):

/* Comment this function out so it’s ignored

function myFunction () {

action 1;

action 2;

}

*/

The asterisks go on the inside of the comment block and the slashes go on the outside.

We’ll occasionally include comments in our sample code in this tutorial to help you identify the purpose of specific lines.

Reserved Words

Like other languages, ActionScript reserves words for specific use, so these words can’t be used as variables, function names, or labels. These include class names, component class names, and interface names, as well as the following words:

  • add
  • and
  • break
  • case
  • catch
  • continue
  • default
  • delete
  • do
  • eg
  • extends
  • finally
  • ge
  • get
  • gt
  • le
  • lt
  • ne
  • new
  • private
  • return
  • set
  • static
  • switch
  • this
  • throw
  • try
  • void
  • while
  • with