ActionScriptActionScript

Adding a Stop ActionAdding a Stop Action

Adding a Stop ActionAdding a Stop Action

1 1 Insert a new layer and rename it Insert a new layer and rename it actionsactions..

Adding a Stop ActionAdding a Stop Action

2 2 Select the first keyframe of the Select the first keyframe of the actions layer and open the Actions actions layer and open the Actions panel (Window > Actions).panel (Window > Actions).

3 3 In the Script pane, enter stop();In the Script pane, enter stop();

Adding a Stop ActionAdding a Stop Action

The code appears in the Script pane The code appears in the Script pane and a tiny lowercase “a” appears in and a tiny lowercase “a” appears in the first keyframe of the actions the first keyframe of the actions layer to indicate it contains some layer to indicate it contains some ActionScript. The movie will now stop ActionScript. The movie will now stop at frame 1.at frame 1.

Creating Event Creating Event Handlers for ButtonsHandlers for Buttons

Creating Event Handlers for Creating Event Handlers for ButtonsButtons

1 1 Select the first frame of the actions Select the first frame of the actions layer.layer.

2 2 Open the Actions panel.Open the Actions panel.

Creating Event Handlers for Creating Event Handlers for ButtonsButtons

3 3 In the Script pane of the Actions In the Script pane of the Actions panel, beginning on the second line, panel, beginning on the second line, type type btn1_btn.addEventListener(MouseEvbtn1_btn.addEventListener(MouseEvent.CLICK, showimage1);ent.CLICK, showimage1);

Creating Event Handlers for Creating Event Handlers for ButtonsButtons

4 4 On the next line of the Script pane, On the next line of the Script pane, type function type function showimage1(event:MouseEvent):void showimage1(event:MouseEvent):void { gotoAndStop(10); }{ gotoAndStop(10); }

Creating Event Handlers for Creating Event Handlers for ButtonsButtons

5 5 On the next line of the Script pane, On the next line of the Script pane, enter additional code for the enter additional code for the remaining five buttons. You can copy remaining five buttons. You can copy and paste lines 2 and 3, and simply and paste lines 2 and 3, and simply change the names of the button, the change the names of the button, the name of the function (in two places), name of the function (in two places), and the destination frame. The full and the destination frame. The full script should be as follows:script should be as follows:

Creating Event Handlers for Creating Event Handlers for ButtonsButtons

stop();stop();

btn1_btn.addEventListener(MouseEvent.CLICK, showimage1);btn1_btn.addEventListener(MouseEvent.CLICK, showimage1);

function showimage1(event:MouseEvent):void {function showimage1(event:MouseEvent):void {

gotoAndStop(10);gotoAndStop(10);

}}

btn2_btn.addEventListener(MouseEvent.CLICK, showimage2);btn2_btn.addEventListener(MouseEvent.CLICK, showimage2);

function showimage2(event:MouseEvent):void {function showimage2(event:MouseEvent):void {

gotoAndStop(20);gotoAndStop(20);

}}

btn3_btn.addEventListener(MouseEvent.CLICK, showimage3);btn3_btn.addEventListener(MouseEvent.CLICK, showimage3);

function showimage3(event:MouseEvent):void {function showimage3(event:MouseEvent):void {

gotoAndStop(30);gotoAndStop(30);

}}

Creating Event Handlers for Creating Event Handlers for ButtonsButtons

btn4_btn.addEventListener(MouseEvent.CLICK, showimage4);btn4_btn.addEventListener(MouseEvent.CLICK, showimage4);function showimage4(event:MouseEvent):void {function showimage4(event:MouseEvent):void {

gotoAndStop(40);gotoAndStop(40);}}

btn5_btn.addEventListener(MouseEvent.CLICK, showimage5);btn5_btn.addEventListener(MouseEvent.CLICK, showimage5);function showimage5(event:MouseEvent):void {function showimage5(event:MouseEvent):void {

gotoAndStop(50);gotoAndStop(50);}}

btn6_btn.addEventListener(MouseEvent.CLICK, showimage6);btn6_btn.addEventListener(MouseEvent.CLICK, showimage6);function showimage6(event:MouseEvent):void {function showimage6(event:MouseEvent):void {

gotoAndStop(60);gotoAndStop(60);}}

Checking Syntax and Checking Syntax and Formatting CodeFormatting Code

Checking Syntax and Checking Syntax and Formatting CodeFormatting Code

1 1 Select the first frame of your actions Select the first frame of your actions layer and open the Actions panel if it layer and open the Actions panel if it is no already open.is no already open.

2 2 Click the Check Syntax button at the Click the Check Syntax button at the top of the Actions panel.top of the Actions panel.

Checking Syntax and Checking Syntax and Formatting CodeFormatting Code

Flash checks the syntax of your Flash checks the syntax of your ActionScript code. Flash notifies you ActionScript code. Flash notifies you if there are errors or if your code is if there are errors or if your code is error free.error free.

Checking Syntax and Checking Syntax and Formatting CodeFormatting Code

3 3 Click the AutoFormat icon at the top Click the AutoFormat icon at the top of the Actions panel.of the Actions panel.

Creating Destination Creating Destination KeyframesKeyframes

Creating Destination Creating Destination KeyframesKeyframes

When the user clicks each button, When the user clicks each button, Flash moves the playhead to a new Flash moves the playhead to a new spot on the Timeline. However, you spot on the Timeline. However, you haven’t yet placed anything different haven’t yet placed anything different at those particular frames. That’s the at those particular frames. That’s the next step.next step.

Inserting Keyframes Inserting Keyframes with Different with Different

ContentContent

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

You will create six keyframes in a You will create six keyframes in a new layer and place a different large new layer and place a different large photo in each of the keyframes.photo in each of the keyframes.

1 1 Insert a new layer at the top of the Insert a new layer at the top of the layer stack but below the actions layer stack but below the actions layer and rename it layer and rename it imagesimages..

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

2 2 Select frame 10 of the images layer.Select frame 10 of the images layer.

3 3 Insert a new keyframe at frame 10 Insert a new keyframe at frame 10 (Insert > Timeline > Keyframe, or (Insert > Timeline > Keyframe, or F6).F6).

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

4 4 Insert new keyframes at frames 20, Insert new keyframes at frames 20, 30, 40, 50, and 60. Your Timeline has 30, 40, 50, and 60. Your Timeline has seven empty keyframes in the seven empty keyframes in the images layer.images layer.

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

5 5 Select the keyframe at frame 10.Select the keyframe at frame 10.

6 6 Drag the bitmap image called Drag the bitmap image called Photo1.jpg from the Library to the Photo1.jpg from the Library to the Stage. Photo1. jpg is a large photo of Stage. Photo1. jpg is a large photo of a peacock.a peacock.

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

7 7 In the Property inspector, set the X In the Property inspector, set the X value to value to 35 35 and the Y value to and the Y value to 138138. . The keyframe at frame 10 contains a The keyframe at frame 10 contains a large photo of a peacock.large photo of a peacock.

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

8 8 Select the keyframe at frame 20.Select the keyframe at frame 20.

9 9 Drag the bitmap image called Drag the bitmap image called Photo2.jpg from the Library to the Photo2.jpg from the Library to the Stage.Stage.

10 10 In the Property inspector, set the X In the Property inspector, set the X value to value to 35 35 and the Y value to and the Y value to 138138. . The keyframe at frame 20 contains a The keyframe at frame 20 contains a large photo of the head of a peacock large photo of the head of a peacock (see figure at top of next page).(see figure at top of next page).

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

11 11 Place each of the large bitmaps Place each of the large bitmaps from the Library in the corresponding from the Library in the corresponding keyframes in the images layer. Each keyframes in the images layer. Each keyframe should contain a different keyframe should contain a different photo from this photographer’s photo from this photographer’s portfolio.portfolio.

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

12 12 Choose Control > Test Movie and Choose Control > Test Movie and click any of the buttons. Each button click any of the buttons. Each button on the top row moves the playhead on the top row moves the playhead to a different frame on the Timeline, to a different frame on the Timeline, where a different photo is displayed. where a different photo is displayed. The user can choose to see any The user can choose to see any photo in any order.photo in any order.

Inserting Keyframes with Inserting Keyframes with Different ContentDifferent Content

Using Labels on Using Labels on KeyframesKeyframes

Using Labels on KeyframesUsing Labels on Keyframes

1 1 Select frame 10 on the images layer.Select frame 10 on the images layer.

Using Labels on KeyframesUsing Labels on Keyframes

2 2 In the Property In the Property inspector, enter inspector, enter label1 label1 in the Label in the Label Name field.Name field.

Using Labels on KeyframesUsing Labels on Keyframes

A tiny flag icon appears on each of A tiny flag icon appears on each of the keyframes that have labels.the keyframes that have labels.

Using Labels on KeyframesUsing Labels on Keyframes

3 3 Select frame 20 on the images layer.Select frame 20 on the images layer.

4 4 In the Property inspector, enter In the Property inspector, enter label2 label2 in the Label Name field.in the Label Name field.

5 5 Select frames 30, 40, 50, and 60, Select frames 30, 40, 50, and 60, and in the Property inspector, enter and in the Property inspector, enter corresponding names in the Label corresponding names in the Label Name field: Name field: label3label3, , label4label4, , label5label5, , and and label6label6..

Using Labels on KeyframesUsing Labels on Keyframes

A tiny flag icon appears on each of A tiny flag icon appears on each of the keyframes that have labels.the keyframes that have labels.

Using Labels on KeyframesUsing Labels on Keyframes

6 6 Select the first frame of the actions Select the first frame of the actions layer and open the Actions panel.layer and open the Actions panel.

7 7 In your ActionScript code, change all In your ActionScript code, change all the fixed frame numbers in each of the fixed frame numbers in each of the gotoAndStop() commands to the the gotoAndStop() commands to the corresponding frame labels:corresponding frame labels:

Using Labels on KeyframesUsing Labels on Keyframes• • gotoAndStop(10); should be changed to gotoAndStop(10); should be changed to

gotoAndStop("label1");gotoAndStop("label1");• • gotoAndStop(20); should be changed to gotoAndStop(20); should be changed to

gotoAndStop("label2");gotoAndStop("label2");• • gotoAndStop(30); should be changed to gotoAndStop(30); should be changed to

gotoAndStop("label3");gotoAndStop("label3");• • gotoAndStop(40); should be changed to gotoAndStop(40); should be changed to

gotoAndStop("label4");gotoAndStop("label4");• • gotoAndStop(50); should be changed to gotoAndStop(50); should be changed to

gotoAndStop("label5");gotoAndStop("label5");• • gotoAndStop(60); should be changed to gotoAndStop(60); should be changed to

gotoAndStop("label6");gotoAndStop("label6");

Using Labels on KeyframesUsing Labels on Keyframes

Using Labels on KeyframesUsing Labels on Keyframes

The ActionScript code now directs the The ActionScript code now directs the playhead to a particular frame labelplayhead to a particular frame label

instead of a particular frame number.instead of a particular frame number.

8 8 Test your movie by choosing Control Test your movie by choosing Control > Test Movie. The functionality of > Test Movie. The functionality of your interactive movie remains the your interactive movie remains the same, but future edits to the same, but future edits to the Timeline will be easier to make.Timeline will be easier to make.

Creating Transition Creating Transition AnimationsAnimations

Creating Transition Creating Transition AnimationsAnimations

1 1 Move the playhead to the label1 Move the playhead to the label1 frame label.frame label.

Creating Transition Creating Transition AnimationsAnimations

2 2 Right-click/Ctrl-click on the photo on Right-click/Ctrl-click on the photo on the Stage and choose Create Motion the Stage and choose Create Motion Tween.Tween.

Creating Transition Creating Transition AnimationsAnimations

Flash asks to convert the photo to a Flash asks to convert the photo to a symbol so that it can proceed with symbol so that it can proceed with the motion tween. Click OK.the motion tween. Click OK.

Creating Transition Creating Transition AnimationsAnimations

3 3 In the Property inspector, select In the Property inspector, select Brightness from the Style pull-down Brightness from the Style pull-down menu in the Color Effect section.menu in the Color Effect section.

Creating Transition Creating Transition AnimationsAnimations

4 4 Set the Bright Set the Bright slider to slider to 100%100%..

The instance on The instance on the Stage becomes the Stage becomes bright white.bright white.

Creating Transition Creating Transition AnimationsAnimations

5 5 Move the playhead to the end of the Move the playhead to the end of the tween span at frame 19.tween span at frame 19.

Creating Transition Creating Transition AnimationsAnimations

6 6 Select the bright Select the bright white instance on the white instance on the Stage.Stage.

7 7 In the Property In the Property inspector, set the inspector, set the Bright slider to Bright slider to 0%0%..

The instance is The instance is displayed at a normal displayed at a normal brightness level. Th e brightness level. Th e motion tween from motion tween from frame 10 to frame 19 frame 10 to frame 19 shows a smooth shows a smooth transition from a transition from a bright white photo to a bright white photo to a normal photo.normal photo.

Creating Transition Creating Transition AnimationsAnimations

8 8 Create similar motion tweens for Create similar motion tweens for the remaining photos in the the remaining photos in the keyframes labeled label2, label3, keyframes labeled label2, label3, label4, label5, and label6.label4, label5, and label6.

Note: Note: Recall that you can use the Recall that you can use the Motion Presets panel to save a motion Motion Presets panel to save a motion tween and apply it to other objects to tween and apply it to other objects to save you time and eff ort. Select the fi save you time and eff ort. Select the fi rst motion tween on the Timeline and rst motion tween on the Timeline and click Save selection as preset.click Save selection as preset.

Creating Transition Creating Transition AnimationsAnimations

Using the Using the gotoAndPlay gotoAndPlay CommandCommand

Using the gotoAndPlay Using the gotoAndPlay CommandCommand

The gotoAndPlay command makes The gotoAndPlay command makes the Flash playhead move to a specifi the Flash playhead move to a specifi c frame on the Timeline and begin c frame on the Timeline and begin playing from that point.playing from that point.

Using the gotoAndPlay Using the gotoAndPlay CommandCommand

1 1 Select the fi rst frame of the actions Select the fi rst frame of the actions layer and open the Actions panel.layer and open the Actions panel.

2 2 In your ActionScript code, change all In your ActionScript code, change all the gotoAndStop() commands to the gotoAndStop() commands to gotoAndPlay() commands. Leave the gotoAndPlay() commands. Leave the parameter unchanged:parameter unchanged:

Using the gotoAndPlay Using the gotoAndPlay CommandCommand

• • gotoAndStop("label1"); should be changed to gotoAndStop("label1"); should be changed to gotoAndPlay("label1");gotoAndPlay("label1");

• • gotoAndStop("label2"); should be changed to gotoAndStop("label2"); should be changed to gotoAndPlay("label2");gotoAndPlay("label2");

• • gotoAndStop("label3"); should be changed to gotoAndStop("label3"); should be changed to gotoAndPlay("label3");gotoAndPlay("label3");

• • gotoAndStop("label4"); should be changed to gotoAndStop("label4"); should be changed to gotoAndPlay("label4");gotoAndPlay("label4");

• • gotoAndStop("label5"); should be changed to gotoAndStop("label5"); should be changed to gotoAndPlay("label5");gotoAndPlay("label5");

• • gotoAndStop("label6"); should be changed to gotoAndStop("label6"); should be changed to gotoAndPlay("label6");gotoAndPlay("label6");

Using the gotoAndPlay Using the gotoAndPlay CommandCommand

Using the gotoAndPlay Using the gotoAndPlay CommandCommand

The ActionScript code now directs the The ActionScript code now directs the playhead to a particular frame label and playhead to a particular frame label and begins playing at that point.begins playing at that point.

Note: Note: A fast and easy way of doing A fast and easy way of doing multiple replacements is to use the Find multiple replacements is to use the Find and Replace command in the Actions and Replace command in the Actions panel. From the options menu in the upper-panel. From the options menu in the upper-right corner, select Find and Replace.In the right corner, select Find and Replace.In the Find field, enter gotoAndStop, and in the Find field, enter gotoAndStop, and in the Replace field, enter gotoAndPlay.Replace field, enter gotoAndPlay.

Using the gotoAndPlay Using the gotoAndPlay CommandCommand

Stopping the Stopping the AnimationsAnimations

Stopping the AnimationsStopping the Animations

If you test your movie now (Control > If you test your movie now (Control > Test Movie), you’ll see that each Test Movie), you’ll see that each button goes to its corresponding button goes to its corresponding frame label and plays from that frame label and plays from that point, but it keeps playing, showing point, but it keeps playing, showing all the remaining animations in the all the remaining animations in the Timeline. The next step is to tell Timeline. The next step is to tell Flash when to stop.Flash when to stop.

Stopping the AnimationsStopping the Animations

1 1 Select frame 19 of the actions Select frame 19 of the actions layer, the frame just before the layer, the frame just before the label2 keyframe on the image layer.label2 keyframe on the image layer.

2 2 Right-click/Ctrl-click and choose Right-click/Ctrl-click and choose Insert Keyframe.Insert Keyframe.

Stopping the AnimationsStopping the Animations

A new keyframe is inserted in frame A new keyframe is inserted in frame 19 of the actions layer.19 of the actions layer.

Stopping the AnimationsStopping the Animations

3 3 Open the Actions panel. The Script Open the Actions panel. The Script pane in the Actions panel is blank. pane in the Actions panel is blank. Don’t panic! Your code has not Don’t panic! Your code has not disappeared. Your code for the event disappeared. Your code for the event listeners is on the first keyframe of listeners is on the first keyframe of the actions layer. You have selected the actions layer. You have selected a new keyframe in which you will add a new keyframe in which you will add a stop command.a stop command.

Stopping the AnimationsStopping the Animations

4 4 In the Script pane, enter stop();In the Script pane, enter stop(); Flash will stop playing when it Flash will stop playing when it

reaches frame 19.reaches frame 19.

Stopping the AnimationsStopping the Animations

5 5 Insert keyframes at frames 29, 39, Insert keyframes at frames 29, 39, 49, 59, and 6949, 59, and 69

Stopping the AnimationsStopping the Animations

6 6 In each of those keyframes, add a In each of those keyframes, add a stop command in the Actions panel.stop command in the Actions panel.

7 7 Test your movie by choosing Control Test your movie by choosing Control > Test Movie. Each button takes you > Test Movie. Each button takes you to a different keyframe and plays a to a different keyframe and plays a short animation. At the end of the short animation. At the end of the animation, the movie stops and waits animation, the movie stops and waits for you to click another button.for you to click another button.

Creating the Creating the Animation in a Movie Animation in a Movie

Clip SymbolClip Symbol

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

Your button symbols in this portfolio Your button symbols in this portfolio project already contain the yellow project already contain the yellow line movie clip symbol. You will edit line movie clip symbol. You will edit the movie clip symbol to add an the movie clip symbol to add an animation inside it.animation inside it.

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

1 1 In the Library, double-click the In the Library, double-click the yellow line movie clip symbol icon.yellow line movie clip symbol icon.

Flash puts you in symbol-editing Flash puts you in symbol-editing mode for the yellow line movie clip mode for the yellow line movie clip symbol.symbol.

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

2 2 Right-click/Ctrl-click on the yellow Right-click/Ctrl-click on the yellow rectangular shape on the Stage and rectangular shape on the Stage and choose Create Motion Tween.choose Create Motion Tween.

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

3 3 In the dialog box that appears In the dialog box that appears asking for confirmation to convert asking for confirmation to convert the selection to a symbol, click OK.the selection to a symbol, click OK.

Flash creates a Tween layer and Flash creates a Tween layer and adds one second worth of frames to adds one second worth of frames to the movie clip Timeline.the movie clip Timeline.

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

4 4 Select the Free Transform tool.Select the Free Transform tool. 5 5 Click on the yellow rectangle on Click on the yellow rectangle on

the Stage.the Stage.

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

6 6 Drag the control handles on the side Drag the control handles on the side to reduce the width to about 10 to reduce the width to about 10 pixels.pixels.

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

7 7 Exit symbol-editing mode by clicking Exit symbol-editing mode by clicking the Scene 1 button above the Stage.the Scene 1 button above the Stage.

8 8 Choose Control > Test Movie.Choose Control > Test Movie.

Creating the Animation in a Creating the Animation in a Movie Clip SymbolMovie Clip Symbol

As your mouse cursor hovers over As your mouse cursor hovers over any of the buttons, the yellow any of the buttons, the yellow rectangle pulses from wide to rectangle pulses from wide to narrow. The motion tween inside the narrow. The motion tween inside the movie clip symbol plays continuously movie clip symbol plays continuously in a loop, and the movie clip symbol in a loop, and the movie clip symbol is placed inside the button symbol.is placed inside the button symbol.