Introduction to ActionScript Tutorial > Create commands and reuse code > Write a function

 

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 (<not set yet>) {
        } else if (<not set yet>) {
        } 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.

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.