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:
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:
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:
function RotateDisplayOrDrag (whichPiece) { if (Key.isDown(18)) { _root[whichPiece]._rotation += 90; } else if (Key.isDown(Key.SHIFT)) { pieceNumber = whichPiece.slice(5); } else { startDrag(_root[whichPiece],false, 20, 20, 780, 580); } }
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:
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.
.
.
==============================================
.
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
.
==============================================
.
==============================================
.
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
.
==============================================
