Macromedia Flash 8 ActionScript: Training from the Source

You know that you can add ActionScript to your Flash application, but you might wonder how you add it. There is a panel, called the Actions panel, for just that purpose.

The Actions panel allows you to view or edit the code on anything that you have selected. If you have a frame selected, the Actions panel shows you the code that is on that frame and lets you edit code on that frame. If you have a symbol on the stage selected, such as a button or a movie clip, the Actions panel allows you to view/edit the code that is on this symbol. A later section in this lesson, called "Code Placement," discusses in greater detail where you can add code in your application.

Launching the Actions Panel

The Actions panel can be opened in three ways.

  • Use the toolbar in Flash; choose Window > Actions.

  • Use the hotkey F9.

  • If the Actions panel is already open, but minimized, you can click the word Actions to expand the panel.

Many people prefer to undock the Actions panel so that it can be easily dragged around as needed. You can do this by clicking and dragging the panel by its gripper, which is the small area just to the left of the panel title Actions. Just drag the gripper onto the Stage area until you see a ghosted image of the panel appear to be undocked, and then release.

The Actions panel is made up of several pieces shown in the screen shot. They are explained in the following sections.

Script Pane

The Script pane is where you manage ActionScript. If a frame is selected and there is code on that frame, it can be viewed and edited through the Script pane. You can select another frame that does not yet contain ActionScript and then add ActionScript to it.

In this image, Frame 1 in the actions layer is selected. That frame contains some ActionScript, so it is visible in the Script pane of the Actions panel.

Toolbar

The Actions panel toolbar is found at the top of the Actions panel. It contains several buttons that can be useful while writing and debugging ActionScript. We'll briefly cover them here.

Add a New Item to the Script

This button provides a way for you to add pieces of ActionScript into the Script pane without having to remember exactly how to type it. You'll see this in action, along with the Script Assist option, in the exercise at the end of this section.

Find

This button launches a search window. You can search your ActionScript to find certain words or variables. You can also use this window to find and replace one grouping of characters for another! As a developer of ActionScript, you'll find that this tool comes in quite handy.

Check Syntax

If you have programmed using improper syntax, when you test or publish, you will be informed of a syntax error. If you want to check for syntax errors before publishing, just click the Check Syntax button. It checks the syntax of the currently selected script. If it finds errors, you'll be informed. The Output panel appears and displays an error message.

Auto Format

Formatting your code with tabs, carriage returns, and spaces is considered by many to be a good practice. It makes your code more easily readable. If you would like to have Flash search through your currently selected script and auto format it by placing tabs, carriage returns, and spaces where it thinks is best, then click this button.

Insert a Target Path

When you want to use code to control a symbol, you must refer to its instance name. You can type in the path to this symbol instance or you can use this button to launch a window to help you do this visually. This window allows you to navigate to the symbol of interest and to select that symbol. Once you have selected the symbol, the target path is automatically inserted for you.

Show Code Hint

Code hints help you easily select from a list of methods and properties of a class instance stored in a variable. They are discussed briefly in the section on creating variables.

Debug Options

The Actions panel allows you to set a breakpoint in code. A breakpoint helps you when you are trying to debug your application. With this toolbar option, you can set a breakpoint, remove a breakpoint, and remove all breakpoints.

Script Assist

By default, you add code to the Actions panel by typing it in. If you click the Script Assist button, the Actions panel no longer lets you manually enter code into the Script pane. You edit code another way. This is discussed in greater detail as follows and in the exercise at the end of this section.

Reference

This button is used to launch the Help panel. If something is highlighted in the Actions toolbox area of the Actions panel when this button is clicked, help for that item is displayed. The Help panel is a very useful tool.

Menu

There is a menu button found on the far right of the toolbar. If you click it, you see a long list of options, many of which are also represented in the toolbar.

Here are a few of the other options and what they do:

Import Script

This option allows you to browse to a text file that contains ActionScript. This script is then loaded and added to the Script pane.

Export Script

This option allows you to easily save the script currently showing in the Script pane to a text file.

Line Numbers

If selected, line numbers show in the Script pane to the left of each line of code. This can come in handy when you are communicating with another programmer about the ActionScript or if you just like to know how many lines of code you write.

Word Wrap

Sometimes lines of ActionScript can be quite long, extending wider than the visible area of the Script pane. If you don't want to have to scroll horizontally to be able to read that line of code, you can select Word Wrap. The entire script is then word-wrapped into the visible area in the Script pane.

Preferences

Selecting this option launches a new window that allows you to configure ActionScript preferences. Keywords, comments, and other special cases are colored in the Script pane. You can customize these colors as well as the preferred font and font size. In addition, you can also customize how the ActionScript is autoformatted.

Actions Toolbox

The Actions toolbox is found in the upper-left corner of the Actions panel. It contains a highly organized list of all built-in functions; classes; and the methods, properties, and events of those classes. We'll look into this a bit more in Lesson 5, "Built-in Classes."

A drop-down list at the top of the Actions toolbox lets you select which version(s) of ActionScript you want to appear in the list. By default, it is set to display ActionScript 1.0 and ActionScript 2.0.

The Actions toolbox is used as an easy way for you to drill down to find what ActionScript is available for specific classes. It can be used to add code to the Script pane by double-clicking an action. I personally use it the most to highlight a specific action and then get help on that action by clicking the Reference button in the toolbar.

Script Navigator

In some Flash files, ActionScript is placed in a number of areas. If it is your job to open such a file and edit the ActionScript, you might find it difficult to locate exactly where the ActionScript exists. The Script navigator, found in the bottom-left area of the Actions panel, helps you see at a glance where code exists.

The Script navigator shows you a tree view of the elements that contain ActionScript in your current file. You can click anything in that tree to view/edit the code that is attached to it. The previous image shows a frame that contains some ActionScript and a button that contains some ActionScript. In the Script navigator, you can see that both Frame 1 and home page button appear. If you click home page button, you would see the ActionScript on that button.

Script Assist

The default setting for the Actions panel allows you to type all of the ActionScript that you need right into the Script pane. If you are new to programming, remembering all the syntax rules can be daunting. There is an alternative to writing code manually: Script Assist.

The Actions panel is switched to Script Assist mode by clicking the Script Assist button. This mode helps you to add ActionScript in an easy way so that you don't have to worry about the syntax or formatting rules. Using the Add a New Item to the Script button in the Actions panel toolbar, you can add lines of code. Script Assist then gives you fields to fill out to customize the script.

To create a new variable using the Add a New Item to the Script button, select Statements > Variables > var. A blank variable template appears in the Script pane with fields to fill out above the Script pane.

The first field is called Variables. Type the name of the variable, an equal sign, and the value of that variable. On the next line, you'll find a field called Type. You can type the name of the data type or you can find it in the drop-down list. To add a second variable, follow the same process. The Script Assist tool helps you by enforcing proper syntax and formatting.

You've now been formally introduced to the Actions panel. The various areas on the panel as well as its buttons have been explained. So now, it's time to use it! In this exercise, you use Script Assist to add ActionScript to a frame.

1.

Open AnsweringMachine1.fla from the Lesson01/Start directory.

This Flash application is a simple answering machine. When the application is complete, you'll click a button to have your phone messages played back to you. You'll be able to click another button to stop the message playback and another one to rewind the messages.

The file has five layers. The topmost layer, called actions, is where you'll add the ActionScript. The second layer is sound clip, which contains a movie clip with an instance name of messages_mc. That movie clip holds the sounds of the answering machine messages. There are four answering machine messages.

The third layer down holds a movie clip that plays an animation of a blinking number 4. The next layer, called buttons, contains three buttons with instance names of play_btn, stop_btn, and rewind_btn. These buttons will be used to control the answering machine playback. The final layer simply holds the rest of the images.

2.

Click Frame 1 in the actions layer. Open the Actions panel by selecting Window > Actions, or by using the hotkey F9. Click the Script Assist button.

The Actions panel should now be open and showing no ActionScript because none has yet been added.

Over the next few steps, you'll be making this application interactive by adding ActionScript to handle the user interacting with the play, stop, and rewind buttons. So far, you only typed ActionScript into the Script pane. In this exercise, you'll be using Script Assist to add ActionScript. This is the only exercise in the book in which Script Assist is used.

You'll use the Add a New Item to the Script button to add chunks of ActionScript to the Script pane.

3.

Click the Add a New Item to the Script button.

Move the cursor over ActionScript 2.0 Classes > Movie > Button > Event Handlers > onRelease and click it.

Two lines of ActionScript have been added to the Script pane. They are templates that need to be filled out. In Script Assist mode, you can select any line of code and see the custom fields for that code above the Script pane.

4.

Click the first line of ActionScript and then click the Object field. On the Actions toolbar, click the Insert a Target Path button.

Select play_btn and click OK.

The ActionScript that you added in the previous step is a template for capturing an onRelease event; that is, when a button is clicked and released. This template needs to know which button instance to work with. You just told it to use the play_btn button. Any ActionScript that you add between the curly braces will be executed when the play button is clicked.

5.

Click the Add a New Item to the Script button. Move the cursor over ActionScript 2.0 Classes > Movie > MovieClip > Methods > play and click it.

A new line of ActionScript has just been added between the curly braces. When the play button is clicked, this line of ActionScript will be executed. It is a template to play a movie clip. It will be filled out in the next step.

6.

Click line 2 and then click in the Object field. Click the Insert a Target Path button and choose the Absolute radio button. Find messages_mc and click OK.

This line of ActionScript is executed when the play button is clicked. It tells the messages_mc movie clip to play. That movie clip contains the sounds for the answering machine. As the movie clip plays, you can hear the messages.

You chose the Absolute radio button when locating messages_mc. When you learn more about ActionScript and scope, this choice will make sense. But here is a brief explanation.

The event handler that you added to the play_btn instance is scoped to that instance. By default, that button only sees itself. For the event handler on that button to talk to another movie clip, it must look outside of itself. By choosing Absolute, the target path put _root in front of the instance name, which tells the event handler that the messages_mc instance is on the main Timeline.

Tip

In this exercise, you will see that we use _root three times. For this exercise, that is ok. But it is considered a best practice to avoid using absolute paths unless absolutely necessary.

The Script pane should now show this ActionScript:

this.play_btn.onRelease = function() { _root.messages_mc.play(); };

7.

Click line 3 of ActionScript and then click the Add a New Item to the Script button. Move the cursor over ActionScript 2.0 Classes > Movie > Button > Event Handlers > onRelease and click it. Fill out the Object field to point to stop_btn.

In this step, you're doing the same thing that you did several steps ago. You first add an event handler template and then you associate it with a button instance. So you are capturing the onRelease event of the stop_btn instance. Now let's give it something to do.

8.

Click line 4 and then click the Add a New Item to the Script button. Move the cursor over ActionScript 2.0 Classes > Movie > MovieClip > Methods > stop and click it. Click the Object field and add an absolute path to messages_mc.

You just added a new line of ActionScript between the curly braces of the stop_btn onRelease event handler. When the stop button is clicked, the messages will stop playing. If you click the play button again, the messages will continue where they left off.

9.

Click line 6 and then click the Add a New Item to the Script button. Move the cursor over ActionScript 2.0 Classes > Movie > Button > Event Handlers > onRelease and click it. Fill out the Object field to point to rewind_btn.

Just as with the play and stop buttons, you have added an onRelease event handler for the rewind button. In the next step, you'll make it do something useful.

10.

Click line 7 and then click the Add a New Item to the Script button. Move the cursor over ActionScript 2.0 Classes > Movie > MovieClip > Methods > gotoAndStop and click it. Click the Object field and add an absolute path to messages_mc. Click the Frame field and type the number 1.

This line of ActionScript that you just added sends the messages_mc movie clip back to the first frame. That essentially rewinds the messages. To play the messages again, you'll have to click the play button.

11.

Choose Control > Test Movie to test the application. Use the buttons to test your work. When you click the play button, you should hear a beep and then the first message. After the first message, there will be a slight pause, and then another beep and the second message. There are four messages in total.

If you click the stop button, the messages will stop playing. If you then click the play button, the messages should continue playing from where they left off. Finally, if you click the rewind button, the messages should rewind to the beginning, but not automatically play.

12.

Close and save your work as AnsweringMachine2.fla.

In this exercise, you added button event handlers and gained some experience using Script Assist in the Actions panel. We will not be using it for the remainder of the book. But at least you know it's there if you need a little extra help when programming!

Related

Категории