Flash MX Tutorials

Saturday, March 14, 2009

CHAPTER 1

Introduction to Flash MX Tutorial
What you should know
View the completed movie
Analyze the stiletto.fla file
Define properties for a new document and create a gradient background
Create and mask vector art
Tween bitmap effects within a movie clip
Load dynamic text at runtime
Add animation and navigation to buttons
Add streaming and event sounds
Organize your Library panel
Test download performance and publish the movie
The next steps

CHAPTER 2

Introduction to ActionScript Tutorial
View a completed movie
Initialize the movie
Save and retrieve information
Display information in a dynamic text box
Write an expression
Control the flow ofthe movie
Create commands and reuse code
Use a built-in object
Test the movie
The next steps

CHAPTER 3

Introduction to Components Tutorial
Types of components
View the completed form
Create a form
The next steps

.

Friday, March 13, 2009

CHAPTER 3 - The next steps

This tutorial has presented the basic steps for creating a simple group of components and then displaying the results. For more information, see Using Flash and the ActionScript Dictionary, both found in the Help menu.

=========================================

Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps

CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps

CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps

CHAPTER 3 - Create a form

In this tutorial, you will use components to create a simple two-page form to enter a sweepstakes to win a free Stiletto electric car. The first page is used to gather the information, and the second page is used to display the results. You will follow these three steps to complete the form:

• Add components to the form
• Configure the components
• Add ActionScript to the document to make the components work

To get you started, we have included the background, text fields, and graphics for the form. You will add and configure components and ActionScript to make it an interactive form.

Add components

The first step is to add the components to the Stage and place them on the form. You will add a check box, a combo box, and a push button to the first page of the form. You will also add a push button to the second page.

To add components to a document, you can either drag elements from the Components panel to the Stage, or double-click them in the Components panel to place them in the center of the Stage. After you add a component to a document, it appears in the document’s Library panel.

It is a good idea to create a new layer for the components.

1 Choose File > Open and navigate to the Flash MX program directory. Open Tutorials/ Components/my_sweepstakes/mysweepstakes.fla.

2 Choose File > Save As and save the file with a new name, such as newsweepstakes.

3 Create a new layer and name it UI. You will place the components on this layer.

4 Click Frame 6 in the UI layer of the Timeline. Choose Insert > Blank keyframe to add a blank keyframe. This will be used for components on the second page.

5 Make sure the following panels are open:

• (Window > Library)
• Components panel (Window > Components)
• Property inspector (Window > Properties)

Add a check box

Use the CheckBox component to create a box with a value of either true or false.

1 Select Frame 1 in the UI layer.

2 Drag the CheckBox component from the Components panel to the Stage. Place it under the paragraph that asks if the user wants to enter the sweepstakes.

The component appears in the Flash UI Components folder in the Library panel.

Add a combo box

Use the ComboBox component to create a simple drop-down menu of items that can be selected by users. You can also use a ComboBox to build a more complex drop-down menu that automatically scrolls to a menu item starting with the letter or letters entered into the text field by the user.

• Drag the ComboBox component from the Components panel to the Stage. Place it under “Select your favorite color:”.

The component appears in the Flash UI Components folder in the Library panel.

Add push buttons

Use the PushButton component to create two push buttons. One button will be on the first page and will be used to submit the information on the form. The next button will be on the second page and will be used to return to the first page and repopulate it with the values that were previously submitted.

1 Drag the PushButton component from the Components panel to the Stage. Place it in the lower right corner of the form so it lines up horizontally with the name and e-mail text fields.

The component appears in the Flash UI Components folder in the Library panel.

After you have dragged a component from the Components panel to the Stage, you select additional instances of it from the Library panel.

2 Go to the blank keyframe at Frame 6. In the Library panel, open the Flash UI Components folder and drag the PushButton component from the Library panel to the Stage. Place it in the lower right corner.

Configure the components

The next step is to configure the components so they are set up with the correct information for a user to select.

You set the parameters for a component using the Parameters tab of the Property inspector or the Components Parameters panel.

Advanced users can use API methods and properties for each component to set the parameters, size, appearance, and other properties of the component. The methods and properties available for each component element are listed in the ActionScript Dictionary under the name of the component.

Configure the check box

Select Frame 1 on the UI layer, then select the CheckBox component on the Stage. Its parameters are displayed in the Property inspector.

2 Type sweepstakes_box in the Instance Name text box.

3 Type Absolutely! in the Label text box.

4 In the Initial Value parameter pop-up menu, select True. This specifies whether the initial state of the CheckBox component is selected (True) or unselected (False).

5 In the Label Placement parameter pop-up menu, leave the default value set to right alignment. The label will be displayed to the right of the check box.

6 Do not alter the Change Handler parameter.

The Change Handler parameter is the function that you want to execute when the user selects an item. This function must be defined in the same Timeline as the component instance. This parameter is optional and needs to be specified only if you want an action to take place as soon as the user accesses a component.

When you finish, the Property inspector should look like the following:

For more information about using the API methods of the FCheckBox component to set additional options for the component, see the FCheckBox (component) entry in the online ActionScript Dictionary in Flash Help.

Configure the combo box

Select the ComboBox component on the Stage. Its parameters are displayed in the Property inspector.

2 Type color_box in the Instance Name text box.

3 Make sure the Editable parameter is set to False. This prevents users from typing in their own text.

4 The Labels parameter displays a list of values users can select. Click the Labels field, then click the magnifying glass to open the Values pop-up window. Click the Plus (+) button to enter a new value.

5 Click in the default value field, then type Lightning for the first value.

6 Click the Plus (+) button to enter the next value. Click in the default value field, then type Cobalt for the next value.

7 In the same manner, add Emerald to the list. When you are finished, the Values pop-up window should look like the following:

8 Click OK to close the Values pop-up window.

The Data parameter is optional. It is used to specify the values associated with the items (labels) in the list box. There is no need to do that for this tutorial.

9 The Row Count parameter specifies how many rows are displayed in the window. Since there are three options, change the value to 3. There is no need to enter a Change Handler parameter name. When you are finished, the Property inspector should look like the following:

For more information about using API methods to change additional properties, see the FComboBox (component) entry in the online ActionScript Dictionary in Flash Help.

Configure the push buttons

Select the PushButton component in Frame 1.

The component’s parameters are displayed in the Property inspector.

2 Type submit_btn in the Property inspector Instance Name text box.

3 Type Submit in the Property inspector Label text box.

This text is displayed in the body of the button.

4 Type onClick for the Click Handler name. Later you will write ActionScript to define what the
Click Handler should do.

When you are finished, the Property inspector should look like the following:

5 Select the PushButton component in Frame 6.

6 Type return_btn in the Property inspector Instance Name text box.

7 Type Return in the Property inspector Label text box. 8 Type onClick for the Click Handler name.

For more information about using the API methods of the FPushButton component to change additional properties, see the FPushButton (component) entry in the online ActionScript Dictionary in Flash Help.

Write ActionScript to gather the data

Some of the ActionScript will be for the entire movie, while some will be related to a particular frame. The following table will help you keep track of instance names.

Instance name - Description
color_box - Color combo box on page 1
sweepstakes_box - sweepstakes check box on page 1
submit_btn - Submit push button on page 1
name - Input text box for name on page 1
email - Input text box for e-mail address on page 1
return_btn - Return push button on page 2
name_result - Dynamic text box on page 2 to display the user’s name
email_result - Dynamic text box on page 2 to display the user’s e-mail address.
color_result - Dynamic text box on page 2 to display the user’s color selection
sweepstakes_text - Dynamic text box on page 2 that displays different text if the user has chosen or not chosen to enter the sweepstakes

Write ActionScript for the entire movie

ActionScript for components is placed in keyframes. The Click Handler parameter specifies what happens when the PushButton component is activated. The default value is onClick, which means that when the user clicks one of the push buttons, it is activated. We will begin by creating a function for onClick. This will be a branching function that will first determine whether the button pushed was the Submit or the Return button, then carry out actions accordingly.

1 Create a new layer and name it All Actions. This will be used for ActionScript that should run throughout the movie.

2 If the Actions panel is not open, choose Window > Actions.

3 Switch to expert mode by pressing Control+Shift+E (Windows) or Command+Shift+E (Macintosh), or by clicking the control in the upper right corner (a triangle with a check mark above it) and selecting Expert Mode from the pop-up menu.

4 First, enter the callback function for the push buttons. This is a conditional statement that branches depending on which button is clicked. If the Submit button is clicked, it will branch to the getResultsfunction and go to page 2. If the Return button is clicked, it will go to page 1.

Enter the following code in the Actions panel.

// push button callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}

Note: Although it is not recommended, if you don’t want to write the ActionScript, you can copy the text from this tutorial and paste it into the Actions panel.

5 Now, write the getResults function. This gets the results from the sweepstakes check box and the color combo box. It gets the results from the combo box as a label so it can show the results.

// get results from pg 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}

6 Next, write the initValues function. This initializes the values on page 1 with the values the user has previously selected. It is run when the user clicks the Return button.

// initialize the values on pg 1 with the values the user has previously selected
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
} else {
color_box.setSelectedIndex(selectedItem);
}
}

7 Finally, add a call to the initValues function to the beginning of the ActionScript. When you finish, the ActionScript should look like this:

InitValues();
// push button callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn)
{ gotoAndStop("pg1");
}
}
// initialize the values on pg 1 with the values the user has previously selected
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true; }
else {
color_box.setSelectedIndex(selectedItem);
}
}
// get results from pg 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}

You have completed the script that needs to run for the entire movie. However, you still need to add script for the frames in page 1 and page 2.

Add ActionScript to each keyframe

Some of the ActionScript needs to be executed only when a user selects a particular frame. In order to make the ActionScript work, you need to name each keyframe.

1 Create a new layer and name it Frame Actions. Select Frame 1, then choose Insert > Blank Keyframe to insert a keyframe. Use the Property inspector to name the keyframe pg1. In the same manner, insert a keyframe at Frame 6 and name it pg2.

2 Select the keyframe in Frame 1 of the Frame Actions layer and write the following ActionScript to stop the movie at Frame 1 (pg1):
stop();

3 (Optional) If you want to display certain text if the user has selected the sweepstakes check box and other text if the user has not, you can write a conditional statement with text that will go into the sweepstakes_text dynamic text field on page 2. Select the keyframe named pg2 in the Frame Actions layer and enter the following in the Actions panel:

// sweepstakes text
if (sweepstakes_result==true) {
sweepstakes_text = "You have been entered in the Stiletto Fantasy sweepstakes. Winners are announced at the end of each month.";
} else {
sweepstakes_text = "You have not been entered in the Stiletto Fantasy sweepstakes.";
}

Note: Do not cut and paste this ActionScript into the Actions panel. It will not work properly, because there are line breaks between the first and second lines of text.

Test your movie

To see what the components look like, run your movie in the Flash Player 6.

1 Select Control > Test Movie.

The movie is run in the Flash Player.

2 Select and deselect the check box to be sure it works.

3 Select a color and make sure it appears on page 2.

4 When you are finished, select File > Close to close the movie in the player.

5 If you noticed any errors, use the Arrow tool to select the component, then make the corrections in the Property inspector. If necessary, retest the movie.

==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================

CHAPTER 3 - View the completed form

You can navigate through components in a form by doing the following:

• Click the component to select it.
• Press Tab to move forward; press Shift+Tab to move backward.
• Use the arrow keys to navigate through menu items.

1 Choose File > Open and navigate to the Flash MX program directory. Open Tutorials/ Components/Finished/sweepstakes.swf. This is the completed movie.

2 Use the navigation techniques described above to test each of the buttons and boxes on the form.

3 Now open sweepstakes.fla. Choose File > Open and navigate to the Flash MX program directory. Open Tutorials/Components/Finished/sweepstakes.swf. This is the Flash document that generated the movie. Two keyframes are included in the Timeline.

4 Examine page 1. It contains the check box, combo box, and push buttons that are used to gather information. It also has two input text fields for the user’s name and e-mail address.

5 Examine page 2. It is the results page and contains several dynamic text boxes to show the results of the information gathered on page 1. To save time, we have already created them for you.

.
.
==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================

CHAPTER 3 - Types of components

Flash MX provides the following components:

Radio button - Represents a single choice in a group of mutually exclusive choices
Check box - Represents a single choice
Push button - Carries out a command when the user clicks it or presses Enter or Return
Combo box - Displays a list of choices
List box - Displays a list of choices
Scroll pane - Provides a scrollable window pane for viewing movie clips
Text scroll bar - Adds a scroll bar to a text field.

How you can use components

Here are some ways you can use components:

Web form Design a form that asks for a user’s address, telephone, e-mail address, and other personal information, then validates the data before submitting it to a server.

Build your car Create a Web form that allows users to order a car by selecting various graphic options instead of typing in the information. The fields are generated from the graphical interactions.

Survey Build a multiple-question, multiple-part survey that instantly tallies the results and charts the resulting survey data.

Photo album Create a personal photo album that takes a directory of images and thumbnails and wraps them with the Flash interface and navigation elements.

Loan calculator Design an online amortization calculator that calculates loan payments.
Web-based presentation template Create a template for slide-based presentations with simple, prebuilt navigation elements and a layout for images and text.

.
.
==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================
.

CHAPTER 3 - Introduction to Components Tutorial

You can use Macromedia Flash UI components to quickly and easily add simple user interface elements to your Flash document.

This tutorial is designed to introduce components to beginner and intermediate Flash users and show how they can be used to easily create a simple application. Before taking this tutorial, you should complete the Introduction to Flash MX Tutorial and the Introduction to ActionScript Tutorial, which you can access by selecting Help > Tutorials.

After completing this tutorial, you will know how to do the following tasks:

• Add components to a Flash document
• Configure the components
• Add ActionScript to make the components work

.
.
==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================
.

CHAPTER 2 - The next steps

By completing the tutorial, you’ve accomplished a great deal in a relatively short amount of time. You’ve learned how to use ActionScript to set up a Flash movie’s starting point, how to create commands and reuse code to make actions recur, and how to precisely control the flow of the movie. Using ActionScript variables and expressions, you know how to keep track of user activity in your movie and how to display changing content to your users. Finally, you’ve learned how to test your movie.

To continue learning about ActionScript, see the online ActionScript Dictionary in the Help menu and articles in the Flash Support Center. From the Samples folder within your Flash MX application folder, you can also open an advanced version of the puzzle.fla movie and deconstruct the ActionScript that was used to create a timer and animated puzzle piece.

CHAPTER 2 - Test the movie

“Test early and test often” is a mantra for Web developers. The sooner you test your movie, the easier it is to determine the cause of unexpected results. It’s a good idea to save multiple versions of your file using sequential names—for example, mypuzzle1.fla, mypuzzle2.fla, and so on, as you’ve been doing in this tutorial. This way, the highest numbered file is always the newest and it’s easy to revert to an earlier version.

As you learned in the Introduction to Flash MX Tutorial, the Flash authoring tool includes a version of the Flash Player that lets you test your movie at any point during authoring by choosing Control > Test Movie. This version of the Flash Player has several commands and tools to help you troubleshoot your movie.

The most common reason for unexpected results in a Flash movie is an incorrect path to a variable, function, object, or movie clip. This can cause a variable to contain the wrong value, prevent a function from being called, or prevent a movie clip from playing correctly.

The trace action allows you to write notes and expressions in your scripts whose results are sent to a window called the Output window.

Now you’ll add a trace action to test if a function was called successfully.

Note: Flash also includes a Debugger, which lets you examine the values of global and local variables, including when they change as the movie plays. Additionally, with the Debugger you can use breakpoints to stop the movie and test ActionScript line by line. For more information, see “Using the Debugger” under Help > Using Flash.

1 Choose File > Open and choose the version of the mypuzzle.fla file that you last saved.

Note: You can also browse to your Flash MX application folder and open Tutorials/ActionScript/Finished/ puzzle8.fla. If you do use the puzzle8.fla file, save the file with a new name in your My_Puzzle folder to maintain an unadulterated version of the original file.

When the user clicks the OK button in the SWF movie, the puzzle pieces should scramble. You can use a trace action to test if the Scramble function is being called.

2 In the Actions layer in the Timeline, select Frame 1 and open the Actions panel.

3 In the Script pane, scroll to and select line 18, the commented line that says // enter trace action here.

4 In the Actions toolbox, double-click the trace action from the Actions > Miscellaneous Actions category.

5 Type Scramble function has been called in the Message text box. You are placing this message within the Scramble function. 6 Save your document, then choose Control > Test Movie.

7 Click the OK button in the SWF movie.

The Output window appears, which traces events in your movie. Enlarge the window, as necessary, to read the messages. The message Scramble function has been called appears in the Output window.

If the message did not appear, your next step would be to determine the reason why. The most likely reason is that you specified an incorrect path to the function.

8 Close the Output window and SWF file and return to authoring mode.

9 Choose File > Save As and enter a new filename. Use a consecutive naming scheme so you can revert to earlier versions of the file, if necessary.

You’ve made great progress in learning ActionScript!

CHAPTER 2 - Use a built-in object

ActionScript has variables that let you store information; it has functions that let you create special commands and reuse code; it has actions that let you control the flow of a movie; and it has movie clips with properties that you can change.

ActionScript also has another type of element called a built-in object. Objects provide a way of grouping information so that you can use it in a script. Objects can have properties, methods (which are like functions), and constants (for example, the numeric value of Pi).

In the RotateDisplayOrDrag function that you created in “Create commands and reuse code” on page 68, you used the Key object to determine the last key a user pressed on the keyboard. The Key object is built into ActionScript to allow you to access information about the keyboard.

Another ActionScript object is the MovieClip object. The MovieClip object is a collection of methods that you can use to manipulate movie clips, which are the most fundamental and powerful elements of Flash. To learn more about the special characteristics of the MovieClip object and using movie clips, see “Working with Movie Clips and Buttons” under Help > Using Flash.

You will now use the onPress method of the MovieClip object to check whether the mouse pointer is touching a puzzle piece.

1 If necessary, choose File > Open and choose the version of the mypuzzle.fla file that you last saved.

Note: You can also browse to your Flash MX application folder and open Tutorials/ActionScript/Finished/ puzzle7.fla. If you do use the puzzle7.fla file, save the file with a new name in your My_Puzzle folder to maintain an unadulterated version of the original file.

2 Piece actions is a movie clip nested within each instance of a puzzle piece. To select the Piece actions movie clip from the Library panel hierarchy, click the Edit Symbols button in the lower right corner of the Timeline and choose Misc > Piece actions.

The Piece actions movie clip opens in symbol-editing mode. 3 In the Piece actions Timeline, select Frame 1 of the Actions layer.

4 If the Actions panel is not already open, choose Window > Actions. In the Script pane, select line 3 with the following line of code:

// ENTER code here

5 In the Objects > Movie > MovieClip > Events category of the Actions toolbox, double-click the onPress action.

The onPress method is a special type of action called an event handler, or simply an event. An event allows you to write a function that runs when a certain event occurs. Types of events include when the mouse button is pressed, when the playhead enters a frame, and when a movie clip loads.

In this procedure, the code within the curly brackets that follow onPress runs when a user presses the mouse button in the movie.

6 Type _parent in the Object text box.

Because Piece actions is nested within the movie clip, _parent specifies that onPress should
execute on code one level up, at the same level as the puzzle piece.

7 In the Actions > Conditions/Loops category of the Actions toolbox, double-click the if action.

8 Type !_root.dialog in the Condition text box. The code appears as follows:

_parent.onPress = function(){
if (!_root.dialog) {
{
};

The code that you added in this step tests whether the value of the variable named dialog is true (visible) or false (not visible). If the value is true, then the next script to rotate and drag the puzzle piece will not run. If the value of the variable is false, then the following script will run. Users can’t rotate or drag a piece, or display its piece number, if the dialog box is showing.

9 In the Actions toolbox, double-click the evaluate action in the Actions > Miscellaneous Actions category to add it inside the curly brackets of the if statement.

10 Type _root.RotateDisplayOrDrag(_parent._name) in the Expression box.

_name is the property for the name of the puzzle piece instance that the user clicks.

The final code looks like this:

_parent.onPress = function(){
if (!_root.dialog) {
_root.RotateDisplayOrDrag(_parent._name);
}
};

11 Do one of the following to return to the main Timeline:

• Edit Document.
• Click the Back button.
• Click Scene 1.

12 Choose File > Save As and enter a new filename. Use a consecutive naming scheme so you can revert to earlier versions of the file, if necessary.

CHAPTER 2 - Create commands and reuse code

ActionScript has actions that let you control a movie in specific ways. For example, the play action moves the playhead forward in the Timeline, and the loadMovie action loads another Flash movie into the Flash Player. Each of these actions instructs Flash to perform a certain task. You may want to create your own commands in your movies. For example, in puzzle.fla, you need a command to scramble the puzzle pieces. To figure out how to write such a command with ActionScript, you must determine each step required to scramble the puzzle pieces and determine which ActionScript elements can be used to achieve those goals.

First, the pieces must be spread out within a certain area on the Stage; each movie clip has an _x and _y property that you can use to set its position and a _rotation property that you can use to set its rotation. To place and rotate each piece randomly, you need to generate a random number to use in an expression. ActionScript has a built-in Math object with a random method that you can use for this purpose.

A command in ActionScript is called a function. A function is a script that you can use over and over again in a movie to perform a certain task. For example, in puzzle.fla, every time a user clicks a Scramble Pieces button, the function Scramble is run, or called. This function places the puzzle pieces in random positions on the Stage. Instead of rewriting that same script on each of the two Scramble Pieces buttons, the function is written, or declared, once and called from each button. To examine the Scramble function, select Frame 1 in the main Timeline and open the Actions panel. Scroll down the Script pane until you see the Scramble function.

You can think of a function as a machine that does extra work for you. The machine can produce different results depending on what you put into it. For example, if you put bananas in a blender, you get mashed bananas, not mashed peaches. The elements you pass to a function to work on are called parameters or arguments. Parameters are passed inside the parentheses that follow the function. For example, the function RotateDisplayOrDrag(whichPiece) is passed the name of a puzzle piece, and it operates only on that piece. Parameters allow you to reuse functions in many different situations.

Functions are usually declared in the first frame of a movie. In the puzzle.fla files, the functions are declared in Frame 1.

Write a function

Now you’ll declare a function that will rotate, display, or drag each puzzle piece when the user clicks it.

1 If necessary, choose File > Open and choose the version of the mypuzzle.fla file that you last saved.

Note: You can also browse to your Flash MX application folder and open Tutorials/ActionScript/Finished/ puzzle6.fla. If you do use the puzzle6.fla file, save the file with a new name in your My_Puzzle folder to maintain an unadulterated version of the original file.

2 Select the first frame of the Actions layer and open the Actions panel if it’s not already open.

3 Scroll down the Script pane and select line 31. The following commented line should be highlighted:

// ENTER RotateDisplayOrDrag() function here

4 From the Actions > User Defined Functions category in the Actions toolbox, double-click the function action.

Type RotateDisplayOrDrag in the Name text box. Type whichPiece in the Parameters text
box. The code for line 32 now looks like this:

function RotateDisplayOrDrag (whichPiece) {
}

The whichPiece parameter, which identifies the selected puzzle piece, will be called three times in the body of the function. When the function is called, the passed parameter is substituted for whichPiece in each statement.

5 From the Actions > Conditions/Loop category in the Actions toolbox, double-click the if action, the else if action, and the else action.

Note: You can also select the actions from the Plus (+) pop-up menu

The code looks like this:

function RotateDisplayOrDrag (whichPiece) {
if () {
} else if () {
} else {
}
}

This code creates the logical structure of the function. You will fill in the conditions to be checked in each if statement. You will also fill in the code within each set of curly brackets that is executed when the conditions are true.

6 Select the if statement line of code. Enter Key.isDown(18) in the Condition text box.

Key is a built-in ActionScript object, which you can also find in the Objects > Movie > Key > Methods category. Key lets you determine what key a user pressed on the keyboard. The number 18 is the numerical representation of the Alt (Windows) and Option (Macintosh) keys.

This line of code checks whether a user pressed those keys.

To learn more about built-in objects, see “Use a built-in object” .

7 From the Actions > Miscellaneous Actions category in the Actions toolbox, double-click the evaluate action to enter a new line of code. Type _root[whichPiece]._rotation += 90 in the Expression text box, with no space between the + and =.

This line of code rotates the selected piece 90° if the user presses the Alt (Windows) or Option (Macintosh) key. The brackets let you dynamically retrieve the value of an instance name. For more information, see “Dot and array access operators” under Help > Using Flash.

8 Select the else if line of code. Type Key.isDown(Key.SHIFT) in the Condition text box.
This line of code checks whether a user pressed the Shift key.

9 In the Actions > Miscellaneous Actions category in the Actions toolbox, double-click the evaluate action to enter a new line of code. Type pieceNumber = whichPiece.slice(5) in the Expression text box.

This line of code displays the piece number in the text box on the Stage when a user presses the Shift key. The slice method of the String object removes a specified number of characters (in this case, 5) from the piece number’s instance, so that just the number of the piece appears. In effect, the method “slices” off the first five characters, then assigns the resulting number to the pieceNumber variable, which is in turn assigned to the text field on the Stage.

10 Select the else line of code. In the Actions > Movie Clip Control category in the Actions toolbox, double-click the startDrag action.

11 Type _root[whichPiece] in the Target text box and click Expression.

12 Select Constrain to rectangle. Type 20 in the L (left) and T (top) text boxes. In the R (right) and B (bottom) text boxes, type 780 and 580, respectively.

The word false in the script indicates that lockCenter (which indicates that the puzzle piece will always snap to the center of the mouse pointer when clicked) is not specified. The numbers 20, 20, 780, and 580 specify the left, top, right, and bottom coordinates of the text box on the Stage.
When a user clicks a piece, the following function that you wrote is called. The function uses the Key object to determine if the Shift, Alt, or Option key is pressed when a piece is clicked. If the Shift key is pressed while a piece is clicked, a dynamic text box displays the puzzle piece number; if the key pressed is Alt (Windows) or Option (Mac), the puzzle piece rotates 90°. If Shift, Alt, or Option keys are not pressed, the user can drag the piece. Your code should look like this:

Note: As you complete the tutorial, remember to save your work frequently.

Call a function

Functions can be called from any frame in a movie where you need a task completed. You must use a target path to call a function, just as you must use a path to access a variable or a movie clip. All functions in the puzzle.fla movie are declared in the first frame of the Actions layer, in the main Timeline, so the absolute path to each begins with _root.

Now you’ll call the function that scrambles the puzzle pieces on the Stage.

In the Timeline, hide the Scramble dialog and Start dialog layers, if they’re not already hidden. Select the Congrats dialog layer.

2 On the Stage, double-click the Dialog—Congratulations symbol.

3 On the Stage, select the OK button. If the Actions panel isn’t open, choose Window > Actions.

4 In the Actions > User-Defined Functions category of the Actions toolbox, double-click the call function action.

5 With the insertion point in the Object text box of the Actions panel, click the Insert Target Path button. Verify Dots and Absolute are selected. Select _root and click OK.

6 Type Scramble in the Method text box.

The Scramble function doesn’t require any parameters; you can leave the Parameters text box empty. The code now looks like this:

on (release) { _root.Scramble(); }

This is the ActionScript that calls the function. You’ll also need to add a few additional lines of code that belong inside the on(release) handler. You’ll do that in the next steps.

With the _root.Scramble... line of code selected in the Script pane, double-click evaluate from the Actions > Miscellaneous Actions category in the Actions toolbox. Type _root.scramblebutton._visible = true in the Expression text box.

7 Double-click the evaluate action again, to add another blank line. Type _root.dialog = false in the Expression text box.

8 From the Actions > Miscellaneous Actions category of the Actions toolbox, double-click the evaluate action.

9 From the Properties category in the Actions toolbox, double-click _visible. With the insertion point after _visible, type = 0 in the Expression text box.

This code specifies that the dialog box is not visible after the user clicks the OK button.
The final code appears as follows:

on (release) { _root.Scramble(); _root.scramblebutton._visible = true; _root.dialog = false; _visible = 0
}

10 Do one of the following to return to the main Timeline:

• Choose Edit > Edit Document.
• Click the Back button.
• Click Scene 1.

11 Choose File > Save As and enter a new filename. Use a consecutive naming scheme so you can revert to earlier versions of the file, if necessary.

Note: As you complete the tutorial, remember to save your work frequently.

Saturday, March 14, 2009

Friday, March 13, 2009

Blog Archive