Professional Documents
Culture Documents
60 Action Script Tutorial
60 Action Script Tutorial
Home > Products > Flash > Support > Using ActionScript
ActionScript tutorial
ActionScript is the scripting language of Macromedia Flash. A scripting language is a way to communicate with a program; you can use it to tell Flash what to do and to ask Flash what is happening as a movie runs. This two-way communication lets you create interactive movies. In this tutorial, you will examine the tasks involved in creating an interactive puzzle. To complete the ActionScript tutorial, you'll take advantage of Flash 5 features beyond what you learned in the lessons and the Using Flash tutorial, and you'll learn more about creating an interactive movie. The tutorial is designed for Flash users who are ActionScript beginners but who want to work towards advanced abilities. You should already be familiar with basic actions and know how to assign them in the Actions panel. To get the most out of this tutorial, you should first complete the tutorial in the Using Flash manual. You should also be comfortable with the concepts presented in the chapter "Creating Interactive Movies" in the Using Flash manual. To complete the Using Flash tutorial, in Flash choose Help > Using Flash and select the Tutorial. Before you begin, you will need to download either of the following files: Download the Windows source file actionscript_tutorial.zip (1.7MB) Download the Macintosh source file actionscript_tutorial.sea.hqx (2.4MB) The tutorial takes approximately 1 hour to complete, depending upon your experience, and focuses on the following tasks: View the completed movie Initialize the movie Set movie clip properties Save and retrieve information Declare a variable and assign it a value Display information in a dynamic text box Write an expression Control the flow of the movie Write a conditional statement Create commands and reuse code Write a function Call a function Use a built-in object Test the movie The next steps
10 September 2001
-------------------------------------------------------------------------------------------------
ActionScript, tutorial, expression, object, actions, variables, properties, code, value, functions
-------------------------------------------------------------------------------------------------
9840
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
Click the OK button. Notice that the puzzle pieces scramble when you click the OK button.
Click one of the Show/Hide buttons. Notice how the different patterns and piece numbers are displayed to guide you in completing the puzzle.
Click a puzzle piece and drag it to the solution area. Notice that the piece snaps into place.
Shift-click a puzzle piece. Notice that the piece number appears in the circle under the solution area. You can match the piece number to its location in the piece number guide if you get stuck.
To locate all of the actions in the movie, choose Window > Movie Explorer or click the Movie Explorer tab. In the Movie Explorer, deselect all the filtering buttons except the ActionScript button. In addition to the actions clip, there are actions on each of the Show/Hide buttons, on the buttons in the various dialogs boxes that appear, and inside each puzzle piece.
Close the Puzzle.fla movie when you're finished (Choose File > Close) without saving changes to the finished file.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
1 2
Choose File > Open and choose the version of the MyPuzzle.fla file that you saved in the previous procedure. Select the actions clip on the Stage in frame 1 and choose Window > Actions. The Object Actions panel opens.
Select the pop-up menu in the upper right corner and choose GoTo Line. Enter 3 and click OK.
From the Actions category in the Toolbox list on the left, double-click the evaluate action to add an empty line of code ending with a semicolon. A semicolon (;) in an ActionScript statement is like a period (.) in an ordinary sentence.
With the insertion point in the Expression box, choose the Insert Target Path button from the bottom right of the Actions panel.
A target path tells ActionScript the location of a movie clip within the overall structure of a Flash movie. The _root property refers to the main Timeline and the edges movie clip lives on the Stage of the main Timeline. Any target path that begins with _root is called an absolute path because it gives the complete path to a movie clip from the main Timeline. 6 With the insertion point in the Expression text box after _root.edges , enter ._visible=false. You can enter the code manually, or you can choose ActionScript items from the Properties and Operators folders in the Toolbox list. 7 Repeat steps 2-4 choosing the pattern , image , piecenumbers , scramblebutton , areYouSure , and congrats movie clips in the Insert Target Path dialog box. These lines of code make each of these movie clips invisible on the Stage. 8 Choose File > Save As and enter a new filename. For example, if your file is called Jean_Puzzle.fla, you could name it Jean_Puzzle1.fla. This allows you to revert to earlier versions of the file.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
1 2
Choose File > Open and choose the version of MyPuzzle.fla that you last saved. Select the actions clip on the Stage and choose Window > Actions. The Object Actions panel opens.
Select the last line of code in the Initialize section and double-click the set variable action in the Action category in the Toolbox list. Enter dialog in the Variable text box. Enter true in the Value text box and select its Expression check box. In the movie's initial state a dialog box is visible on the Stage. Therefore, the dialog variable must be set to true at the start of the movie, otherwise a user can move the puzzle pieces before they are scrambled.
4 5
Choose File > Save As and enter a new filename. Use a consecutive naming scheme so you can revert to earlier versions of the file.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
Double-click the Piece number circle button on the Stage under the bottom right corner of the puzzle solution area. This opens the Piece number circle in symbol-editing mode.
4 5 6 7
Select the text layer in the Timeline. You should see a pencil next to the layer name, this selects the text field on the Stage. Choose Window > Panels > Text Options to open the Text Options panel. Select Dynamic Text from the pop-up menu. Choose Single Line. Enter _root.actions.pieceNumber in the Variable text box. All variables, like functions and movie clips, must be referenced by their path. By entering the path as the variable name, the value of the pieceNumber variable that lives in the actions movie clip is displayed in the text box. The pieceNumber variable is declared and updated in the RotateDisplayOrDrag function in the actions movie clip.
8 9
Close the Text Options panel. Click Scene 1 at the top of the document window to return to the main Timeline.
10 Choose Edit > Edit Movie to return to the main Timeline. 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.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
Write an expression
If you have added two numbers together in a math equation, you have used an operator. An operator is a symbol that performs a task, or operation, on a piece, or pieces, of data, or operands. For example, in the expression 2 + 2 , the plus sign ( +) is the operator and each number is an operand. An expression is any ActionScript code that can be evaluated to produce a single value. For example, the code myAge + 17 is an expression because when the code runs, ActionScript looks up the value of the myAge variable, adds it to the number 17 , and produces a new single value. If the value of myAge is 47 , the new value would be 64 . Operators allow you to take the information you collect and store in variables and manipulate it in expressions to create or determine other values. For example, you may know that a user has dropped a puzzle piece onto the solution area, but how do you determine if the piece is in the correct place? And if the piece is in the correct place, how do you determine if the puzzle has been solved? To examine expressions built with arithmetic operators in such a scenario, select the actions clip on the Stage, open the Actions panel, and look at the IsItDone function. ActionScript has numeric, or arithmetic, operators but it also has other types of operators that perform different types of operations. For example, a comparison operator compares values to determine if one operand is greater than, less than, or equal to the other, and a logical operator calculates a true or false value, also called a Boolean value, for an expression. Now you'll use an operator called the logical NOT operator to write an expression that shows and hides the puzzle pattern. The logical NOT operator, which is represented by an exclamation mark ( ! ), calculates the opposite Boolean value of its operand. For example, the expression !true yields the value false .
1 2 3
Choose File > Open and choose the version of the MyPuzzle.fla file that you last saved. Click the Show/Hide pattern edges button on the Stage and open the Actions panel. Select the following line of code in the Actions list:
// ENTER code here
Select the evaluate action from the Action category in the Toolbox and drag it to the Actions list. When the action is added, it is enclosed in an piece of code called an event handler. The code looks like this:
on (release) { ; }
Select the evaluate action again to add another empty line of code. The code looks like this:
on (release) { ; ; }
6 7
Select the first empty line and place the insertion point in the Expression box. In the Expression box, enter _root.pattern._visible = false.
10 Place the insertion point in the Expression text box after the equals sign and double-click the logical NOT operator ( ! ) in the Operators folder of the Toolbox list to add it to the Expression text box. You can also type ! into the Expression text box. 11 Enter _root.edges._visible in the Expression text box after the operator. The code looks like this:
on (release){ _root.pattern._visible = false; _root.edges._visible = !_root.edges._visible; }
The first line of code inside the event handler sets the visibility of the pattern movie clip to false . The second line of code sets the visibility of the edges movie clip to the opposite of what it currently is. This creates a toggle that either shows or hides the movie clip. 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.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
The if action lets Flash check a condition in the movie and run certain actions if that condition is true. The else statement tells Flash to run a different set of actions if the if condition is false. The else if statement lets Flash checks for another condition before running yet a different set of actions.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
1 2 3
Choose File > Open and choose the version of the MyPuzzle.fla movie that you last saved. Click the Show/Hide Piece number guide button and Choose Window > Actions. Double-click the if action in the Actions category in the Toolbox list. The following code appears in the Actions panel:
on (release) { if (<not set yet>) { } }
Select the second line of code (the line that contains the if action) and double-click the else action in the Toolbox list. The code looks like the following:
on (release) { if (<not set yet>) { } else { } }
Select the second line of code and, with the insertion point in the Condition text box, click the Insert Target Path button. Choose the
piecenumbers movie clip, Dots notation and Absolute path and click OK. The following code appears in the Condition text box: _root.piecenumbers
With the insertion point in the Condition text box, enter ._visible. You can enter the code manually, or you can choose _visible from the Properties category in the Toolbox list.
7 8
From the Actions category in the Toolbox list, double-click the evaluate action to add an empty line of code. Enter _root.piecenumbers._visible = false in the Expression text box. You can use the Insert Target Path button or enter the code manually. The code now looks like the following:
on (release) { if (_root.piecenumbers._visible) { _root.piecenumbers._visible = false; } else { } }
When the movie plays, Flash evaluates the expression inside the condition parentheses. The expression must equal one of the Boolean values: true or false . This example uses the condition of the if action to check if the piecenumbers movie clip is visible on the Stage. If the _visible property is true , ActionScript runs the code inside the curly brackets and sets the _visible property to false , which hides the movie clip on the Stage. 9 Select the line of code with the else action and double-click the evaluate action.
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.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
Write a function
Now you'll declare a function that will rotate, display, or drag each puzzle piece when the user clicks on it. 1 2 3 Choose File > Open and choose the version of the MyPuzzle.fla file that you last saved. Select the actions clip on the Stage and choose Window > Actions. Select the pop-up menu in the upper right corner of the Object Actions panel and choose GoTo Line. Enter 31 and click OK. The following commented line should be highlighted:
// ENTER RotateDisplayOrDrag() function here
Double-click the function action in the Action category in the Toolbox list. Enter RotateDisplayOrDrag in the Name text box. Enter whichOne in the Parameters text box. The code for line 32 now looks like this:
function RotateDisplayOrDrag (whichOne) { }
The whichOne parameter will be called three times in the body of the function. When the function is called, the passed parameter is substituted for whichOne in each statement. 5 From the Toolbox list or the plus (+) pop-up menu, click the if action, the else if action, and the else action. The code looks like this:
function RotateDisplayOrDrag (whichOne) { 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 and enter Key.isDown(18) in the Condition text box. Key is a built-in ActionScript object. It lets you determine what key a player pressed on the keyboard. This line of code checks whether a player pressed the Alt (Windows) or Option (Mac) key. You will learn more about built-in objects in "Use a built-in object" . 7 Double-click the evaluate action to enter a new line of code. Enter _root[whichOne]._rotation += 90 in the Expression text box. This line of code rotates the selected piece if the player presses the Alt (Windows) or Option (Mac) key. 8 Select the else if line of code and enter Key.isDown(Key.SHIFT) in the Condition text box. This line of code checks whether a player pressed the Shift key. 9 Double-click the evaluate action to enter a new line of code. Enter pieceNumber = whichOne.slice(5) in the Expression text box. This line of code displays the piece number in the text field on the Stage when a player presses the Shift key. The slice method of the String object removes every character from the piece number's instance name except the number. It assigns that number to the pieceNumber variable which is assigned to the text field on the Stage.
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.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
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 actions clip so the absolute path to each begins with _root.action . Now you'll call the function that scrambles the puzzle pieces on the Stage. 1 Choose File > Open and choose the version of the MyPuzzle.fla file that you last saved. 2 Hide all the dialog layers except the Congrats dialog layer. Select the Congrats dialog layer. Click in the eye column to the right of a layer's name to hide it. A red X indicates a hidden layer. 3 Double-click the Dialog - Congratulations symbol on the Stage to edit it.
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 step. 8 Add two evaluate actions to add the following two lines of code under the function call. The first line shows the scramble button on the bottom right of the Stage and the second line sets the dialog variable to indicate that there are no dialog boxes currently open on the Stage:
_root.scramblebutton._visible = true; _root.actions.dialog=false;
Select Scene 1 at the top of the document window to return to the main Timeline.
10 Choose File > Save As and enter a new filename. For example, if your file is called Jean_Puzzle6.fla, you could name it Jean_Puzzle7.fla. This allows you to revert to earlier versions of the file. Note: As you complete the tutorial, remember to save your work frequently.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
The Piece actions movie clip opens in symbol-editing mode. 3 Choose Window > Actions to open the Actions panel. 4 In the Actions panel, select the following line of code:
// ENTER code here
5 Double-click the onClipEvent action in the Action category. Choose the Mouse down event. The onClipEvent action is a special type of action called an event handler, or just handler. A handler allows you to write code that runs when a certain event occurs. For example, when the mouse button is pressed, the playhead enters a frame, and a movie clip loads.
the movie clip two levels above the current clip. The _parent property allows you to reuse this script in each of the 50 puzzle pieces because it acts on movie clips relative to it and doesn't require you to know the instance name of each clip. For this purpose, the _parent property allows you to create relative paths. 8 Double-click the if action in the Toolbox list. 9 With the insertion point in the Condition box, click Objects in the Toolbox to open the Objects category. Then click MovieClip and double-click hitTest in the Toolbox list. The following code appears in the Condition box:
.hitTest( x, y, shapeFlag )
13 Place the insertion point after the parentheses that enclose the hitTest arguments and enter && _root.actions.dialog == false. You need to check that the dialog variable is false because you don't want this function to be called if a dialog box is visible on the Stage. Players shouldn't be able to rotate or drag a piece, or display its piece number if a dialog box is showing. 14 Double-click the evaluate action in the Action category in the Toolbox list to add it inside the curly brackets of the if statement. 15 In the Expression box, enter _root.actions.RotateDisplayOrDrag(_name). The final code looks like this:
onClipEvent (mouseDown) { with (whichOne) { if (hittest(_root._xmouse, _root._ymouse, true) && _root.actions.dialog == false) { _root.actions.RotateDisplayOrDrag(_name); } } }
16 Choose Edit > Movie to return to the main Timeline. 17 Choose File > Save As and enter a new filename. For example, if your file is called Jean_Puzzle7.fla, you could name it Jean_Puzzle8.fla. This allows you to revert to earlier versions of the file.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
This path indicates that the function was declared on the main Timeline. However, all the functions in Puzzle.fla are declared in the actions movie clip which has the instance name actions .
15 Place the insertion point after _root. and enter actions. 16 Choose Control > Test Movie to test the new path. The puzzle pieces scramble and the Output window opens and displays the message in the trace action that you placed inside the
Scramble function.
17 Click the box in the upper left corner of the movie to close the SWF and return to authoring mode. 18 Choose File > Save As and enter a new filename. Use a consecutive naming scheme so you can revert to earlier versions of the file.
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy
Home > Products > Flash > Support > Using ActionScript
1995-2002 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Privacy | Site Map | Contact us | Accessibility | Report Piracy