Pub. Date:
Flash MX Actionscript: The Designer's Edge / Edition 1

Flash MX Actionscript: The Designer's Edge / Edition 1

by J. Scott Hamlin


View All Available Formats & Editions
Current price is , Original price is $50.0. You
Select a Purchase Option (1ST)
  • purchase options
    $32.38 $50.00 Save 35% Current price is $32.38, Original price is $50. You Save 35%.
    Note: Access code and/or supplemental material are not guaranteed to be included with textbook rental or used textbook.

Product Details

ISBN-13: 2900782141213
Publisher: Wiley
Publication date: 10/01/2002
Edition description: 1ST
Pages: 384
Product dimensions: 6.00(w) x 1.25(h) x 9.00(d)

About the Author

J. Scott Hamlin is author and co-author of several books, including Flash 5 Magic: with ActionScript, Flash 4 Magic, and Photoshop Web Techniques. His clients include Nabisco, Proctor & Gamble, Sun, Nokia, and Nickelodeon.

Jennifer S. Hall is an experienced multimedia programmer and contributor to Flash 5 Magic: with ActionScript. Her clients include Disney, Holt, and the Austin Children's Museum.

Read an Excerpt

Flash MX ActionScript

By J. Scott Hamlin

John Wiley & Sons

ISBN: 0-7821-4121-8

Chapter One

ActionScript for Non-Programmers

For many of us, making the transition from user to programmer -from working "manually" with an application program's interface to building scripts that automate complex operations-can be an intimidating prospect. Coding, the common name for writing scripts in a programming language, seems to imply a set of cryptic, inflexible rules that may take ages to learn.

It's true that there is a lot to learn, and your scripts do need to follow the rules in order to work. But Flash MX provides an interface to Action- Script that does some of the work of creating scripts for you. Learning to write Flash MX scripts will be much less intimidating once you become familiar with the ActionScript environment and its core mode of operation. You'll gain this familiarity as you work through the examples in this book.

The most important tool that Flash MX provides for working with ActionScript is the Actions panel. It is your interface for creating simple to complex scripts. It allows you to drag and drop commonly used code lines into your script, as well as to enter code directly. In this chapter, you'll become familiar with the Actions panel and learn how to use its many useful and timesaving features. You'll learn how to take advantage of features like the Actions toolbox, the Reference panel, auto-formatting, code hints, and the View Line Numbers option. You'll also begin to learn some nuts and bolts about how ActionScript works.

Getting Comfortable with the Actions Panel

For many designers, the Actions panel can be somewhat intimidating. It's not as scary as it seems-even when you're working in the dreaded Expert mode. In this book, you'll be spending all of your time in Expert mode. Most of the coding in this book is infeasible (or awkward at best) in Normal mode.

The main difference between Expert and Normal mode is that in Expert mode, you can type in the code directly, as well as drag it from the Actions toolbox. In Normal mode, you can only drag and drop code from the Actions toolbox; you cannot enter code manually.

In many ways, this book is about making anyone who is not experienced with programming comfortable in Expert mode. You'll start to see the blank, white space in the Actions panel as a doorway to endless possibilities, rather than as a members-only door accessible only to a select few.

Adding ActionScript in the Actions Panel

This is a book in which you'll learn by doing. Throughout this book, you'll be building scripts, testing the results, and analyzing what the elements of each script do. By following the examples here, and by continuing to practice on your own, you'll develop firsthand knowledge of how ActionScript works. In this first example, however, you'll just start exploring the Actions panel. In the second half of the chapter, you'll try your hand at scripting.

1. Open the File

Begin by opening the file named Chapter1_Start.fla in Flash MX (1.1). If you haven't already downloaded this book's sample movie clips from the Web, see the Introduction for a complete description. Save the file to your local hard drive with the name Chapter1_Modified.fla. (To see a finished version of this movie, open Chapter1_Final.fla.)

Going from the bottom to the top of the timeline, you can see that the Chapter1_ Start.fla file has five layers: Background, MC1, MC2, MC3, and Actions. The MC1, MC2, and MC3 layers contain the same movie clip, named Fading Spoke. The Fading Spoke movie clip fades a graphic symbol named Spoke Graphic from 100% alpha to 0% alpha.

2. Test the Movie

Test the movie before you enter any code. Press Cmd/Ctrl+Enter or choose Control -> Test Movie to see what the animation does.

Each instance of the animation goes through the alpha fade transition. The movie clips appear on the timeline in a staggered manner. The instance of the Fading Spoke movie clip on the MC1 layer is always visible, but the instance on the MC2 layer is visible only from frame 7 through frame 21, and the instance on layer MC3 shows up on frame 14 and plays through to frame 21.

You will see why we constructed the file this way in a moment. Now let's get ready to enter some simple ActionScript. Whenever you want to write or edit ActionScript, you will need to access the Actions panel. By default, the Actions panel is nested below the stage in Flash MX.

3. Toggle the Actions Panel

Close the Test Movie window and then open the Actions panel. To open the Actions panel, press F9 (1.2). This keystroke toggles the Actions panel between open or expanded and closed or minimized.

Notice that when you open the Actions panel, it partly obscures the stage; this makes the ability to toggle the panel on and off quite useful. You can toggle it on and off by choosing Window -> Actions.

The first time you open the Actions panel, it will be in Normal mode (as in 1.2). You will not be using the Normal mode in this book. Go directly to Expert mode.

4. Select Expert Mode

Click anywhere within the Actions panel to make sure it is selected, and then press Cmd+Shift+E (Mac) / Ctrl+Shift+E (Win) to go to Expert mode. (Using the keyboard shortcut for switching to Expert mode will have no effect if the Actions panel is not selected.) When you switch to Expert mode, you'll see that the white area on the right side of the Actions panel (called the script window) takes up much more space than it did in Normal mode.

On the left side of the Actions panel, you see the Actions toolbox (1.3). It contains a list of actions, organized in folders of categories-such as Operators, Functions, Constants, Properties, and so on. You can use the Actions toolbox to select actions. You won't be using the Actions toolbox for most of the examples in this book, because it's generally quicker to type commands than to work through the categories to select them. However, the toolbox can be useful until you're familiar with ActionScript syntax or if you need a reminder of which ActionScript commands are available. So let's take a few minutes to explore some of the useful aspects of the Actions toolbox.

5. Expand Categories in the Actions Toolbox

Select frame 21 of the Actions layer. Click the Actions folder in the Actions toolbox to expand the category. You'll now see a list of subcategories such as Movie Control, Browser/Network, Movie Clip Control, and so on. Click the Movie Control folder to expand the Movie Control subcategory, and you'll see a list of actions for controlling a movie.

6. Double-click the Stop Action

Double-click the stop action in the Actions toolbox (1.4). Flash will add the following line to the script window on the right:


7. Test the Movie

Now press Cmd/Ctrl+Enter to test your movie again. You'll notice that the spokes stagger onto the stage, but once they get there, they each cycle through the fade at a different time and keep repeating. That's because even though you've told the main timeline to stop in frame 21, each Spokes Fade movie clip timeline continues to cycle through the frames within each movie clip. Each animation started on a different frame of the main timeline, so even though they are all the same movie clip, they are going through their fading cycle at different times.

On the positive side, the value of using the Actions toolbox for entering ActionScript in the Actions panel is that you are assured of getting the syntax correct. The downside is that it would be very taxing on your time to need to hunt down the actions all the time. Usually, you'll want to use the Actions toolbox to enter code only if you're having trouble recalling the syntax of a certain line of ActionScript.

Getting Quick Information about Actions

A particularly useful aspect of the Actions toolbox is that it can give you some quick information about actions. Let's look at an action that's not as obvious as the stop() action (in terms of what it does or what it is used for) to demonstrate this feature:

1. Close the Test Movie window, and then click the Movie Control folder in the Actions toolbox to minimize it.
2. Click the Conditions/Loops folder.
3. Roll the cursor over the default action. Don't click; just place the cursor over the action and hold it there. After a second or two, you'll see some pop-up text explaining what the default action is used for (1.5). In this particular case, unless you know about switch statements, the explanation only brings up more questions.

Flash MX provides information about ActionScript and specific actions in several ways. Later in this chapter, you'll use the Reference panel, code hints, and syntax coloring, all of which provide different kinds of information. While you're learning how to use ActionScript, these features will be invaluable. First, however, let's finish looking at the Actions toolbox.

Resizing and Closing the Actions Toolbox

If you plan to use the Actions toolbox regularly, you can minimize how much space it takes up. Hold your mouse over the gray bar that separates the Actions toolbox from the script window. Don't place it over the button with the left-pointing arrow (that's the minimize/maximize button, as you'll see in a moment). When you see the cursor change to two lines with arrows pointing left and right, you can click and drag to resize the window. Drag the bar to the left to make the Actions toolbox smaller (1.6).


Resizing the Actions toolbox is temporary. If you minimize and then maximize the Action toolbox, Flash does not remember the position of the resized Actions toolbox. Similarly, Flash will not remember the position of the Actions toolbox if you close and reopen Flash. However, minimizing the Actions toolbox is retained.

While the Actions toolbox has its uses, it will often be more trouble than it's worth. As you become more proficient with ActionScript, the space that it takes up will probably be more valuable to you than using it to enter actions or to find information about actions. Fortunately, you can close, or minimize, the Actions toolbox. To minimize the Actions toolbox, just click the small button in the middle of the bar that separates the Action toolbox from the script window (1.6).

When the Actions toolbox is not minimized, the arrow on this button will point left. When the Actions toolbox is minimized, the arrow will point right (1.7). You can expand the Actions toolbox by clicking the button again. You're going to leave the Actions toolbox minimized from now on.

Writing a Simple Script

At this point, this chapter's example consists of three instances of the Fading Spoke clip, each fading at different times. Now you'll make it more interesting by adding some code. What this simple demonstration program does, however, is not as important as what it can show you about the Flash MX interface to ActionScript. You'll use these few lines of code to become more familiar with the Actions panel. In particular, you'll explore two more features that provide information: the Reference panel and code hints.

In the first exercise, you applied some simple ActionScript to a keyframe on the timeline (by double-clicking the stop action in the Actions toolbox). In this exercise, you'll also use another way of applying ActionScript.

Keyframes on a timeline (both on the main timeline or on a timeline within a movie clip) are one of three places that you can assign ActionScript. The other places that you can apply ActionScript are directly on movie clips or buttons. As you will see in this exercise, when you apply ActionScript to a movie clip, you can control how that movie clip behaves programmatically.

Beginning the Script

In this example, you're going to write a relatively simple script that will control the Fading Spoke movie clips in two ways. First, the code will scale the movie clip instances, and then it will randomly rotate the movie clip instances. You will use the same script for all three instances of the Fading Spoke movie clip.

1. Select the Movie Clip

Move to frame 1 on the main timeline and select the Fading Spoke movie clip instance on the MC1 layer. You will apply ActionScript to this movie clip.

2. Assign ActionScript to Movie Clip

If the Actions panel is not open, press F9 to open it. Notice that the Actions panel is now labeled Actions - Movie Clip (1.8). This is an affirmation that you're now assigning Action- Script to a movie clip, rather than to a keyframe.


If the Actions panel is labeled Actions - Frame, you will be assigning the ActionScript to the keyframe on frame 1 on the MC1 layer, not the movie clip on frame 1. Make sure the Actions panel says Actions - Movie Clip before continuing with the exercise.

Enter the following code in the Actions panel:

onClipEvent() {

This is the first line of your code. Before you finish entering the code, let's look at a few useful features in the Actions panel.

Using the Actions Panel for Reference

If you are wondering what onClipEvent() does, Flash MX offers an easy way to find out. The Reference panel, accessed by clicking the Reference button in the Actions panel, lets you look up what a particular action does.

1. Use the Reference Panel

Use your mouse to drag over just the text onClipEvent() (don't select the parentheses and the open bracket).

Click the Reference button, which is the button with a little blue book icon on the right side of the Actions panel toolbar panel (see the sidebar "Un-nesting the Actions Panel"). When you click the Reference button with an ActionScript keyword selected, Flash will open the Reference panel with that code already selected (1.9).

The left side of the Reference panel works similarly to the Actions toolbox in the Actions panel. You can select any action to get detailed information about it. The right panel displays information about that action.

You might have noticed that Flash MX does not come with an ActionScript reference guide. Now you know why: Flash MX has the reference guide built into it. In this example, you can see that the Reference panel displays a lot of information about onClipEvent(). If you scan through the information to the end, you'll notice some cross-linked topics that take you to information about related actions.

The Reference panel is particularly useful when you need information about various parameters for a specific action. For example, in this case, you'll be using the load parameter for the onClipEvent() action. Scroll down in the Reference panel until you see the load parameter and read up on what it does. But don't type load into the onClipEvent() action just yet. When you're finished, close the Reference panel.

2. View Code Hints

Now let's look at another useful feature in the Actions panel-code hints. Clicking the Show Code Hint button in the Actions panel toolbar produces a hint pop-up window, whose contents depend on the location of your cursor when you click the button. The Show Code Hint button is particularly useful if you need to know what parameters an action supports.

1. Place your mouse cursor between the opening and closing parentheses in the line of code in the Actions panel: onClipEvent(){
2. Click the Show Code Hint button in the Actions panel toolbar (1.10). In this case, the code hints show the various parameters available for the onClipEvent() action.
3. Double-click the load parameter to select it.
4. In some cases, clicking the Show Code Hint button will show you a series of hints. For instance, type the following in the Actions panel: do { } for () { }
5. Place your cursor between the parentheses after for and click the Show Code Hint button. The hint pop-up window window will feature left- and right-pointing buttons that allow you to cycle through two hints for the for() action (1.11).
6. Delete the do/for code, leaving only the onClipEvent(load) { line of code.
7. Code hints don't always provide useful information. For example, type getTimer(), place your cursor between the parentheses, and click the Show Code Hint button. Flash will just repeat the action-getTimer()-in the pop-up hint window.
8. Delete the line getTimer().


Usually, you will not see any hints if you click the Show Code Hints button when the cursor is anywhere outside the parentheses that go with an action that has parameters.


Excerpted from Flash MX ActionScript by J. Scott Hamlin Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Table of Contents

Chapter One • ActionScript for Non-Programmers
Getting Comfortable with the Actions Panel
Writing a Simple Script
Using Other Actions Panel Features
Creating Two Movie Clips

Chapter Two • Flash Communication
Getting Oriented
Placing Movie Clips with ActionScript
Communication between Scenes

Chapter Three • Cursor Interactions
Programming Buttons
Using Movie Clips As Buttons
Programming Custom Mouse Cursors
Programming Repetition

Chapter Four • Used and Reused ActionScript
Coding Flash Preloaders
Using the Date and Sound Objects to Code a Clock
Using the GetTimer() Function and the Stage Object to Code a Game
Using the setInterval() Function to Call a Function Periodically

Chapter Five • Coded Animation Techniques
Animating Marching Circles
Enlarging a Diamond
Working with Angles and Rotation
Changing Colors

Chapter Six • Working with Text
Working with the TextField Object
Creating User-Defined Objects and Extending Existing Objects
Using Text Fields and Arrays

Chapter Seven • ActionScript Trigonometry
Trigonometry and ActionScript
Animating Circular Motion
Creating Wave Animations
Rotating Flowers with the Sine Function
Joining Two Sine Waves

Chapter Eight • Games: Responding to Events
Detecting Collisions
Adding Keyboard Movement Controls
Firing Bullets
Ending the Game

Chapter Nine • Drawing with ActionScript
Drawing a Simple Line
Drawing Curves
Creating an Interface with Lines

Chapter Ten • Flash Components
Understanding Components
Creating a Basic Component
Create a Sine Wave Component

Chapter Eleven • Debugging and Troubleshooting
Tips for Writing (Mostly) Bug-Free Code
Debugging Tools
Fixing Problematic ActionScript

Exchanging Data with Servers
Getting ASCII and Keycode Values

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews