Botones

Creating InteractiveCreating InteractiveNavigationNavigation

ObjetivosObjetivos

• • Create button symbolsCreate button symbols

• • Add sound effects to buttonsAdd sound effects to buttons

• • Duplicate symbolsDuplicate symbols

• • Swap symbols and bitmapsSwap symbols and bitmaps

• • Name button instancesName button instances

• • Write ActionScript to create nonlinear Write ActionScript to create nonlinear navigationnavigation

• • Create and use frame labelsCreate and use frame labels

• • Create animated buttonsCreate animated buttons

Creating InteractiveCreating InteractiveNavigationNavigation

1 1 Double-click the 06End.swf file in the Double-click the 06End.swf file in the Lesson06/06End folder to play the Lesson06/06End folder to play the animation.animation.

Creating InteractiveCreating InteractiveNavigationNavigation

2 2 Close the 06End.swf file.Close the 06End.swf file.

3 3 Double-click the 06Start.fla file in the Double-click the 06Start.fla file in the Lesson06/06Start folder to open the Lesson06/06Start folder to open the initial project file in Flash. The file initial project file in Flash. The file includes several assets already in the includes several assets already in the Library and on the Stage.Library and on the Stage.

Creating InteractiveCreating InteractiveNavigationNavigation

4 4 Choose File > Save As. Name the file Choose File > Save As. Name the file 06_workingcopy.fla 06_workingcopy.fla and save it in and save it in the 06Start folder. Saving a working the 06Start folder. Saving a working copy ensures that the original start copy ensures that the original start file will be available if you want to file will be available if you want to start over.start over.

Adding a Simple Adding a Simple Design ElementDesign Element

Lesson 6Lesson 6

Adding a Simple Design Adding a Simple Design ElementElement

1 1 Select the existing layer.Select the existing layer.

2 2 Click the Insert New Layer button Click the Insert New Layer button and rename it and rename it navbarnavbar..

3 3 In the Tools panel, select the In the Tools panel, select the Rectangle tool.Rectangle tool.

Adding a Simple Design Adding a Simple Design ElementElement

4 4 Select a black fill and black for a Select a black fill and black for a stroke color.stroke color.

5 5 Draw a rectangle on the Stage Draw a rectangle on the Stage starting at the top corner of the starting at the top corner of the Stage.Stage.

Adding a Simple Design Adding a Simple Design ElementElement

6 6 In the Property inspector, set the In the Property inspector, set the width to width to 800800, the height to , the height to 130130, the , the X value to X value to 00, and the Y value to , and the Y value to 00..

Adding a Simple Design Adding a Simple Design ElementElement

7 7 Lock the navbar layer so you don’t Lock the navbar layer so you don’t accidentally move it. A horizontal accidentally move it. A horizontal black bar sits atop a large gradient.black bar sits atop a large gradient.

Adding a Title and Adding a Title and Introductory TextIntroductory Text

Adding a Title and Introductory Adding a Title and Introductory TextText

1 1 Select the topmost layer.Select the topmost layer. 2 2 Click the Insert New Layer button Click the Insert New Layer button

and rename it and rename it titletitle..

Adding a Title and Introductory Adding a Title and Introductory TextText

3 3 Select the Text tool and click an Select the Text tool and click an insertion point in the upper-left insertion point in the upper-left corner of the Stage.corner of the Stage.

4 4 Type Type Leon Kritch PhotographyLeon Kritch Photography..

Adding a Title and Introductory Adding a Title and Introductory TextText

5 5 Select all the Select all the text. In the text. In the Property inspector, Property inspector, select Static Text select Static Text from the pop-up from the pop-up menu, select Arial menu, select Arial for the typeface, for the typeface, and select 42 for and select 42 for the text size. Click the text size. Click the Left Align icon.the Left Align icon.

Adding a Title and Introductory Adding a Title and Introductory TextText

6 6 Select just Select just Leon Kritch Leon Kritch and change and change the text color to the text color to #FFCC00#FFCC00..

7 7 Select just Select just Photography Photography and and change the text color to change the text color to #333333#333333..

8 8 Select the text with the Selection Select the text with the Selection tool. In the Property inspector, set tool. In the Property inspector, set the X value to the X value to 30 30 and the Y value to and the Y value to 1010..

Adding a Title and Introductory Adding a Title and Introductory TextText

The finished title appears with gold The finished title appears with gold and gray lettering at the top of the and gray lettering at the top of the black rectangle.black rectangle.

Adding a Title and Introductory Adding a Title and Introductory TextText

9 9 Click the Insert New Layer button Click the Insert New Layer button again and rename it again and rename it texttext..

Adding a Title and Introductory Adding a Title and Introductory TextText

10 10 Select the Text tool again and Select the Text tool again and drag out a text box on the Stage in drag out a text box on the Stage in the gradient area.the gradient area.

11 11 Enter some introductory text as in Enter some introductory text as in the 06End.swf file and as shown in the 06End.swf file and as shown in the following figure. Make the title of the following figure. Make the title of the exhibition italic and a different the exhibition italic and a different color.color.

Adding a Title and Introductory Adding a Title and Introductory TextText

Adding a Title and Introductory Adding a Title and Introductory TextText

12 12 Select the text with Select the text with the Selection tool and the Selection tool and use the Align panel use the Align panel (Window > Align) to (Window > Align) to position the position the introductory text in the introductory text in the middle of the Stage. middle of the Stage. Make sure the To Make sure the To Stage option is Stage option is selected before selected before aligning the text.aligning the text.

13 13 Lock the title layer Lock the title layer so you don’t so you don’t accidentally move it.accidentally move it.

Creating a Button Creating a Button SymbolSymbol

Creating a Button SymbolCreating a Button Symbol

Up keyframe. Shows the button as it appears Up keyframe. Shows the button as it appears when the mouse is not interacting with it.when the mouse is not interacting with it.

Over keyframe. Shows the button as it Over keyframe. Shows the button as it appears when the mouse is hovering over the appears when the mouse is hovering over the button.button.

Down keyframe. Shows the button as it Down keyframe. Shows the button as it appears when the mouse button isdepressed.appears when the mouse button isdepressed.

Hit keyframe. Indicates the clickable area of Hit keyframe. Indicates the clickable area of the button.the button.

Creating a Button SymbolCreating a Button Symbol

1 1 Choose Insert > New Symbol.Choose Insert > New Symbol.

2 2 In the Create New Symbol dialog In the Create New Symbol dialog box, select Button and name the box, select Button and name the symbol symbol button1button1. Click OK.. Click OK.

Creating a Button SymbolCreating a Button Symbol

3 3 Flash brings you to symbol-editing Flash brings you to symbol-editing mode for your new button.mode for your new button.

4 4 In the Up keyframe of the Timeline, In the Up keyframe of the Timeline, drag the small image Photo1.bmp drag the small image Photo1.bmp from the Library to the middle of the from the Library to the middle of the Stage.Stage.

Creating a Button SymbolCreating a Button Symbol

5 5 In the Property In the Property inspector, set the X inspector, set the X value to value to 0 0 and the and the Y value to Y value to 00..

The upper-left The upper-left corner of the small corner of the small thumbnail image is thumbnail image is now aligned to the now aligned to the center point of the center point of the symbol.symbol.

Creating a Button SymbolCreating a Button Symbol

6 6 Select the Hit keyframe in the Select the Hit keyframe in the Timeline and choose Insert > Timeline and choose Insert > Timeline > Frame to extend the Timeline > Frame to extend the Timeline.Timeline.

The peacock image now extends The peacock image now extends through the Up, Over, Down, and Hit through the Up, Over, Down, and Hit keyframes.keyframes.

Creating a Button SymbolCreating a Button Symbol

7 7 Insert a new layer.Insert a new layer.

Creating a Button SymbolCreating a Button Symbol

8 8 Select the Over keyframe and Select the Over keyframe and choose Insert > Timeline > choose Insert > Timeline > Keyframe.Keyframe.

A new keyframe is inserted in the A new keyframe is inserted in the Over keyframe of the top layer.Over keyframe of the top layer.

Creating a Button SymbolCreating a Button Symbol

9 9 Drag the yellow line movie clip Drag the yellow line movie clip symbol from the Library to the Stage.symbol from the Library to the Stage.

Creating a Button SymbolCreating a Button Symbol

10 10 In the Property inspector, set the In the Property inspector, set the X value to X value to 0 0 and the Y value to and the Y value to -7-7. . The yellow horizontal line appears The yellow horizontal line appears over the thumbnail image whenever over the thumbnail image whenever the mouse cursor rolls over the the mouse cursor rolls over the button.button.

11 11 Select the Down keyframe and Select the Down keyframe and choose Insert > Timeline > choose Insert > Timeline > Keyframe.Keyframe.

Creating a Button SymbolCreating a Button Symbol

12 12 Select the yellow Select the yellow horizontal line, and in horizontal line, and in the Property the Property inspector, expand the inspector, expand the Color Effect section.Color Effect section.

13 13 Choose Brightness Choose Brightness from the Style pull-from the Style pull-down menu and down menu and change the change the brightness value to brightness value to 100%100%..

Creating a Button SymbolCreating a Button Symbol

A bright, white, horizontal line A bright, white, horizontal line appears whenever the mouse button appears whenever the mouse button is pressed over the button.is pressed over the button.

Creating a Button SymbolCreating a Button Symbol

14 14 Insert a third layer.Insert a third layer.

Creating a Button SymbolCreating a Button Symbol

15 15 Select the Down keyframe on the Select the Down keyframe on the new layer and choose Insert > new layer and choose Insert > Timeline > Keyframe.Timeline > Keyframe.

Creating a Button SymbolCreating a Button Symbol

16 16 Drag the sound Drag the sound file called file called Camera_shutter.waCamera_shutter.wav from the Library v from the Library to the Stage.to the Stage.

Creating a Button SymbolCreating a Button Symbol

17 17 Select the Select the Down keyframe Down keyframe where the sound where the sound form appears, and form appears, and in the Property in the Property inspector, make inspector, make sure that the Sync sure that the Sync is set to Event.is set to Event.

Creating a Button SymbolCreating a Button Symbol

18 18 Select the Hit keyframe and Select the Hit keyframe and choose Insert > Timeline > Blank choose Insert > Timeline > Blank Keyframe.Keyframe.

The sound of a camera shutter will The sound of a camera shutter will play only when a viewer clicks the play only when a viewer clicks the button.button.

Creating a Button SymbolCreating a Button Symbol

19 19 Click Scene 1 Click Scene 1 above the Stage to above the Stage to exit symbol-editing exit symbol-editing mode and return to mode and return to the main Timeline. the main Timeline. Your first button Your first button symbol is complete! symbol is complete! Look in your Library Look in your Library to see the new to see the new button symbol button symbol stored there.stored there.

Invisible Buttons andInvisible Buttons andthe Hit Keyframethe Hit Keyframe

Invisible Buttons andInvisible Buttons andthe Hit Keyframethe Hit Keyframe

Your button symbol’s Hit keyframe Your button symbol’s Hit keyframe indicates the area that is “hot,” or indicates the area that is “hot,” or clickable, to the user. Normally, the clickable, to the user. Normally, the Hit keyframe contains a shape that is Hit keyframe contains a shape that is the exact same size and location as the exact same size and location as the shape in your Up keyframe. the shape in your Up keyframe.

Invisible Buttons andInvisible Buttons andthe Hit Keyframethe Hit Keyframe

In most cases, you want the graphics In most cases, you want the graphics that users see to be the same area that users see to be the same area where they click. However, in certain where they click. However, in certain advanced applications, you may advanced applications, you may want the Hit keyframe and the Up want the Hit keyframe and the Up keyframe to be different. keyframe to be different.

If your Up keyframe is empty, the If your Up keyframe is empty, the resulting button is known as an resulting button is known as an invisible button.invisible button.

Invisible Buttons andInvisible Buttons andthe Hit Keyframethe Hit Keyframe

Invisible Buttons andInvisible Buttons andthe Hit Keyframethe Hit Keyframe

Users can’t see invisible buttons, but because the Users can’t see invisible buttons, but because the Hit keyframe still defines a clickableHit keyframe still defines a clickable

area, invisible buttons remain active. Hence, you area, invisible buttons remain active. Hence, you can place invisible buttonscan place invisible buttons

over any part of the Stage and use ActionScript to over any part of the Stage and use ActionScript to program them to respond toprogram them to respond to

users. Invisible buttons are useful for creating users. Invisible buttons are useful for creating generic hotspots. For example, placinggeneric hotspots. For example, placing

them on top of different photos can help you them on top of different photos can help you make each photo respond to amake each photo respond to a

mouse click without having to make each photo a mouse click without having to make each photo a different button symbol.different button symbol.

Duplicating ButtonsDuplicating Buttons

Duplicating ButtonsDuplicating Buttons

1 1 In the Library In the Library panel, panel, right-click/Ctrl-click right-click/Ctrl-click the button1 symbol. the button1 symbol. Select Duplicate Select Duplicate from the context from the context menu. You can also menu. You can also click the options click the options menu at the top-right menu at the top-right corner of the Library corner of the Library and select Duplicate.and select Duplicate.

Duplicating ButtonsDuplicating Buttons

2 2 In the Duplicate Symbol dialog box, In the Duplicate Symbol dialog box, select Button, and name it select Button, and name it button2button2. . Click OK.Click OK.

Swapping BitmapsSwapping Bitmaps

Swapping BitmapsSwapping Bitmaps

1 1 In the Library panel, double-click the In the Library panel, double-click the icon for the button2 symbol to edit it.icon for the button2 symbol to edit it.

2 2 Select the thumbnail image of the Select the thumbnail image of the peacock.peacock.

Swapping BitmapsSwapping Bitmaps

3 3 In the Property inspector, click Swap.In the Property inspector, click Swap.

Swapping BitmapsSwapping Bitmaps

4 4 In the Swap Bitmap dialog box, In the Swap Bitmap dialog box, select the next thumbnail image, select the next thumbnail image, called Photo2. bmp, and click OK.called Photo2. bmp, and click OK.

Swapping BitmapsSwapping Bitmaps

The original thumbnail is swapped for The original thumbnail is swapped for the one you selected. Because they the one you selected. Because they are both the same size, the are both the same size, the replacement is seamless.replacement is seamless.

Swapping BitmapsSwapping Bitmaps

5 5 Click Scene 1 to Click Scene 1 to return to the mai return to the mai Timeline.Timeline.

6 6 Continue Continue duplicating your duplicating your buttons an buttons an swapping the swapping the bitmaps until you bitmaps until you have si different have si different button symbols in button symbols in your Library.your Library.

Placing the Button Placing the Button InstancesInstances

Placing the Button InstancesPlacing the Button Instances

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

Placing the Button InstancesPlacing the Button Instances

2 2 Drag each of your buttons from the Drag each of your buttons from the Library to the Stage, placing them in Library to the Stage, placing them in a horizontal row. Don’t worry about a horizontal row. Don’t worry about their exact position because you’ll their exact position because you’ll align them nicely in the next few align them nicely in the next few steps.steps.

Placing the Button InstancesPlacing the Button Instances

3 3 Select the first button, and in the Select the first button, and in the Property inspector, set the X value to Property inspector, set the X value to 3535..

4 4 Select the last button, and in the Select the last button, and in the Property inspector, set the X value to Property inspector, set the X value to 664664..

Placing the Button InstancesPlacing the Button Instances

5 5 Select all six buttons. In the Align Select all six buttons. In the Align panel (Window > Align), deselect the panel (Window > Align), deselect the To Stage option, click the Space To Stage option, click the Space Evenly Horizontally button, and then Evenly Horizontally button, and then click the Align Top Edge button.click the Align Top Edge button.

Placing the Button InstancesPlacing the Button Instances

6 6 With all the With all the buttons still buttons still selected, in the selected, in the Property inspector, Property inspector, enter enter 72 72 for the Y for the Y value.value.

Placing the Button InstancesPlacing the Button Instances

7 7 You can now test your movie to see You can now test your movie to see how the buttons behave. Choose how the buttons behave. Choose Control > Test Movie. Roll over and Control > Test Movie. Roll over and click each button to see how the Over click each button to see how the Over and Down keyframes of each button and Down keyframes of each button appear. At this point, however, you appear. At this point, however, you haven’t provided any instructions for haven’t provided any instructions for the buttons to actually do anything. the buttons to actually do anything. That part comes after you name the That part comes after you name the buttons and learn a little about buttons and learn a little about ActionScript.ActionScript.

Placing the Button InstancesPlacing the Button Instances

Naming the Button Naming the Button InstancesInstances

Naming the Button Naming the Button InstancesInstances

1 1 Select the first button on the Stage.Select the first button on the Stage.

Naming the Button Naming the Button InstancesInstances

2 2 Type Type btn1_btn btn1_btn in the Instance in the Instance Name field in the Property inspector.Name field in the Property inspector.

Naming the Button Naming the Button InstancesInstances

3 3 Name each of the other buttons Name each of the other buttons btn2_btnbtn2_btn, , btn3_btnbtn3_btn, , btn4_btnbtn4_btn, , btn5_btnbtn5_btn, and , and btn6_btnbtn6_btn..

4 4 Lock all the layers.Lock all the layers.

Naming RulesNaming Rules

Naming RulesNaming Rules

Naming instances is a critical step in Naming instances is a critical step in creating interactive Flash projects. creating interactive Flash projects. The most common mistake made by The most common mistake made by novices is not to name, or to novices is not to name, or to incorrectly name, a button instance.incorrectly name, a button instance.

Naming RulesNaming Rules

The instance names are important The instance names are important because ActionScript uses the names because ActionScript uses the names to reference those objects. Instance to reference those objects. Instance names are not the same as the names are not the same as the symbol names in the Library. The symbol names in the Library. The names in the Library are simply names in the Library are simply organizational reminders.organizational reminders.

Naming RulesNaming Rules

Instance naming follows these simple rules:Instance naming follows these simple rules:

1 1 Do not use spaces or special punctuation. Do not use spaces or special punctuation. Underscores are okay to use.Underscores are okay to use.

2 2 Do not begin a name with a number.Do not begin a name with a number.

3 3 End your button name with _btn. Although End your button name with _btn. Although it is not required, it helps identify those it is not required, it helps identify those objects as buttons.objects as buttons.

4 4 Do not use any word that is reserved for a Do not use any word that is reserved for a Flash ActionScript command.Flash ActionScript command.