Adobe Flash chuyên nghiệp - p 24 potx

6 Select the first frame of the actions layer and open the Actions panel... 222 Lesson 6 Creating Interactive navigation 7 In your ActionScript code, change all the fixed frame numbers

Trang 1

keyframes To reference frame labels in ActionScript, you must enclose them in

quotation marks The command gotoAndStop("label1") makes the playhead go

to the keyframe with the label called label1

1 Select frame 10 on the content layer

2 In the Properties inspector, enter label1 in the Label Name field

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

3 Select frame 20 on the content layer

4 In the Properties inspector, enter label2 in the Label Name field

5 Select frames 30 and 40, and in the Properties inspector, enter corresponding

names in the Label Name field: label3 and label4.

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

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

Trang 2

222 Lesson 6 Creating Interactive navigation

7 In your ActionScript code, change all the fixed frame numbers in each of the

gotoAndStop() commands to the corresponding frame labels:

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

The ActionScript code now directs the playhead to a particular frame label instead of a particular frame number

8 Test your movie by choosing Control > Test Movie > in Flash Professional

Each button moves the playhead to a different labeled keyframe on the Timeline, where a different movie clip is displayed The user can choose to see any restaurant in any order However, since the restaurant information covers the buttons, you can’t return to the original menu screen to choose another restaurant You’ll need to provide another button to return to the first frame, which you’ll do in the next section

Creating a Home Button

A home button simply makes the playhead go back to the first frame of the Timeline, or to a keyframe where an original set of choices, or the main menu, are presented to the viewer Creating a button that goes to frame 1 is the same process

as creating the four restaurant buttons However, in this section, you’ll learn to use the new Code Snippets panel to add ActionScript to your project

Download from Library of Wow! ebook

Trang 3

adding another button instance

A home, or main menu, button is provided for you in the Library panel

1 Select the Buttons layer and unlock it if it is locked

2 Drag the button called mainmenu from the Library panel to the Stage Position

the button instance at the top-right corner

3 In the Properties inspector, set the X value to 726 and the Y value to 60.

Using the Code Snippets panel to add actionScript

The Code Snippets panel provides commonly used ActionScript code for you to

easily add simple interactivity to your Flash project If you are unsure of coding

your own buttons, you can use the Code Snippets panel to learn how to add

inter-activity You can also save, import, and share code between a team of developers to

make the development and production process more efficient

1 Choose Window > Code Snippets, or if your Actions panel is already open, click

the Code Snippets button ( ) at the top right of the Actions panel

The Code Snippets panel appears The code snippets are organized in folders

that describe their function

Trang 4

2 Select the Main Menu button on the Stage

3 In the Code Snippets panel, expand the folder called Timeline Navigation and select Click to Go To Frame and Stop

4 Click the Add to Current Frame button at the top-left corner of the Code Snippets panel

Flash creates the code necessary to add the selected interactivity If the button has not been given an instance name, a dialog box appears to warn you that the instance will automatically be given a name Click OK to dismiss the dialog box

Trang 5

The Actions panel opens to show you the code that is generated Flash adds the

code to your existing code in the actions layer If you don’t have existing code,

Flash will create a new layer for you The code in gray (between the /* and the */

symbols) describes how the code works and any instructions for customizing it

to fit your situation

5 Within the function called fl_ClickToGoToAndStopAtFrame, replace the

gotoAndStop(5) action with gotoAndStop(1)

You want the playhead to return to frame 1 when the viewer clicks the Main

Menu button, so you need to replace the argument in the gotoAndStop() action

6 Choose Control > Test Movie > in Flash Professional

Clicking on each button moves the playhead to a different labeled keyframe on

the Timeline, where a different movie clip is displayed Clicking the Main Menu

button returns to the first frame, which displays the original four restaurant

choices

Trang 6

Playing animation at the Destination

So far, this interactive restaurant guide works by using the gotoAndStop() command to show information in different keyframes along the Timeline But how would you play an animation after a user clicks a button? The answer is to use the command gotoAndPlay(), which moves the playhead to the frame number or frame label specified by its parameter and plays from that point

Creating transition animations

Next, you will create a short transition animation for each of the restaurant guides

Then you’ll change your ActionScript code to direct Flash to go to each of the key-frames and play the animation

1 Move the playhead to the label1 frame label

2 Right-click/Ctrl-click on the instance of the restaurant information on the Stage and choose Create Motion Tween

Trang 7

Flash creates a separate Tween layer for the instance so that it can proceed with

the motion tween

3 In the Properties inspector, select Alpha from the Style pull-down menu in the

Color Effect section

4 Set the Alpha slider to 0%.

The instance on the Stage becomes

totally transparent

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

6 Select the transparent instance on the Stage

7 In the Properties inspector, set the

Alpha slider to 100%.

The instance is displayed at a normal

opacity level The motion tween from

frame 10 to frame 19 shows a smooth

fade-in effect

Trang 8

8 Create similar motion tweens for the remaining restaurants in the keyframes labeled label2, label3, and label4

Using the gotoandPlay command

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

1 Select the first frame of the actions layer and open the Actions panel

2 In your ActionScript code, change all the first four gotoAndStop() commands

to gotoAndPlay() commands Leave the parameter unchanged:

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

gotoAndPlay("label1");

Make sure you keep the function for your Main Menu button unchanged

You’ll want that function to remain a gotoAndStop() command

For each of the restaurant buttons, the ActionScript code now directs the playhead to a particular frame label and begins playing at that point

 Note: A fast and easy way of doing multiple replacements is to use the Find and Replace

command in the Actions panel From the options menu in the upper-right corner, select Find and Replace.

 Note: Recall that

you can use the Motion

Presets panel to save

a motion tween and

apply it to other objects

to save you time and

effort Select the first

motion tween on the

Timeline and click Save

selection as preset

Once saved, you can

apply the same motion

tween to another

instance.

Trang 9

Stopping the animations

If you test your movie now (Control > Test Movie > in Flash Professional), you’ll

see that each button goes to its corresponding frame label and plays from that

point, but it keeps playing, showing all the remaining animations in the Timeline

The next step is to tell Flash when to stop

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

the image layer

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

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

Trang 10

3 Open the Actions panel

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

4 In the Script pane, enter stop();

Flash will stop playing when it reaches frame 19

5 Insert keyframes at frames 29, 39, and 50

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

7 Test your movie by choosing Control > Test Movie > in Flash Professional

Each button takes you to a different keyframe and plays a short fade-in animation At the end of the animation, the movie stops and waits for the viewer to click the Main Menu button

animated Buttons

Animated buttons display an animation in the Up, Over, or Down keyframes

When you hover your mouse cursor over one of the restaurant buttons, the gray additional information box appears But imagine if that gray information box were animated It would give more life and sophistication to the interaction between the user and the button

The key to creating an animated button is to create an animation inside a movie clip symbol, and then place that movie clip symbol inside the Up, Over, or Down keyframes of a button symbol When one of those button keyframes is displayed, the animation in the movie clip plays

 Note: If you want a

quick and easy way to

duplicate the keyframe

containing the stop

command, hold down

the Alt/Option key

while you move it to

a new location on the

Timeline.

Định dạng
Số trang	10
Dung lượng	5,57 MB