Botones

Creating Interactive Navigation

Objetivos • Create button symbols • Add sound effects to buttons • Duplicate symbols • Swap symbols and bitmaps • Name button instances • Write ActionScript to create nonlinear navigation • Create and use frame labels • Create animated buttons

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

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

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

Adding a Simple Design Element Lesson 6

Adding a Simple Design Element 1 Select the existing layer. 2 Click the Insert New Layer button and rename it navbar . 3 In the Tools panel, select the Rectangle tool.

Adding a Simple Design Element 4 Select a black fill and black for a stroke color. 5 Draw a rectangle on the Stage starting at the top corner of the Stage.

Adding a Simple Design Element 6 In the Property inspector, set the width to 800 , the height to 130 , the X value to 0 , and the Y value to 0 .

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

Adding a Title and Introductory Text

Adding a Title and Introductory Text 1 Select the topmost layer. 2 Click the Insert New Layer button and rename it title .

Adding a Title and Introductory Text 3 Select the Text tool and click an insertion point in the upper-left corner of the Stage. 4 Type Leon Kritch Photography .

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

Adding a Title and Introductory Text 6 Select just Leon Kritch and change the text color to #FFCC00 . 7 Select just Photography and change the text color to #333333 . 8 Select the text with the Selection tool. In the Property inspector, set the X value to 30 and the Y value to 10 .

Adding a Title and Introductory Text The finished title appears with gold and gray lettering at the top of the black rectangle.

Adding a Title and Introductory Text 9 Click the Insert New Layer button again and rename it text .

Adding a Title and Introductory Text 10 Select the Text tool again and drag out a text box on the Stage in the gradient area. 11 Enter some introductory text as in the 06End.swf file and as shown in the following figure. Make the title of the exhibition italic and a different color.

Adding a Title and Introductory Text 12 Select the text with the Selection tool and use the Align panel (Window > Align) to position the introductory text in the middle of the Stage. Make sure the To Stage option is selected before aligning the text. 13 Lock the title layer so you don’t accidentally move it.

Creating a Button Symbol Up keyframe. Shows the button as it appears when the mouse is not interacting with it. Over keyframe. Shows the button as it appears when the mouse is hovering over the button. Down keyframe. Shows the button as it appears when the mouse button isdepressed. Hit keyframe. Indicates the clickable area of the button.

Creating a Button Symbol 1 Choose Insert > New Symbol. 2 In the Create New Symbol dialog box, select Button and name the symbol button1 . Click OK.

Creating a Button Symbol 3 Flash brings you to symbol-editing mode for your new button. 4 In the Up keyframe of the Timeline, drag the small image Photo1.bmp from the Library to the middle of the Stage.

Creating a Button Symbol 5 In the Property inspector, set the X value to 0 and the Y value to 0 . The upper-left corner of the small thumbnail image is now aligned to the center point of the symbol.

Creating a Button Symbol 6 Select the Hit keyframe in the Timeline and choose Insert > Timeline > Frame to extend the Timeline. The peacock image now extends through the Up, Over, Down, and Hit keyframes.

Creating a Button Symbol 7 Insert a new layer.

Creating a Button Symbol 8 Select the Over keyframe and choose Insert > Timeline > Keyframe. A new keyframe is inserted in the Over keyframe of the top layer.

Creating a Button Symbol 9 Drag the yellow line movie clip symbol from the Library to the Stage.

Creating a Button Symbol 10 In the Property inspector, set the X value to 0 and the Y value to -7 . The yellow horizontal line appears over the thumbnail image whenever the mouse cursor rolls over the button. 11 Select the Down keyframe and choose Insert > Timeline > Keyframe.

Creating a Button Symbol 12 Select the yellow horizontal line, and in the Property inspector, expand the Color Effect section. 13 Choose Brightness from the Style pull-down menu and change the brightness value to 100% .

Creating a Button Symbol A bright, white, horizontal line appears whenever the mouse button is pressed over the button.

Creating a Button Symbol 14 Insert a third layer.

Creating a Button Symbol 15 Select the Down keyframe on the new layer and choose Insert > Timeline > Keyframe.

Creating a Button Symbol 16 Drag the sound file called Camera_shutter.wav from the Library to the Stage.

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

Creating a Button Symbol 18 Select the Hit keyframe and choose Insert > Timeline > Blank Keyframe. The sound of a camera shutter will play only when a viewer clicks the button.

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

Invisible Buttons and the Hit Keyframe

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

Invisible Buttons and the Hit Keyframe In most cases, you want the graphics that users see to be the same area where they click. However, in certain advanced applications, you may want the Hit keyframe and the Up keyframe to be different. If your Up keyframe is empty, the resulting button is known as an invisible button.

Invisible Buttons and the Hit Keyframe Users can’t see invisible buttons, but because the Hit keyframe still defines a clickable area, invisible buttons remain active. Hence, you can place invisible buttons over any part of the Stage and use ActionScript to program them to respond to users. Invisible buttons are useful for creating generic hotspots. For example, placing them on top of different photos can help you make each photo respond to a mouse click without having to make each photo a different button symbol.

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

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

Swapping Bitmaps 1 In the Library panel, double-click the icon for the button2 symbol to edit it. 2 Select the thumbnail image of the peacock.

Swapping Bitmaps 3 In the Property inspector, click Swap.

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

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

Swapping Bitmaps 5 Click Scene 1 to return to the mai Timeline. 6 Continue duplicating your buttons an swapping the bitmaps until you have si different button symbols in your Library.

Placing the Button Instances 1 Insert a new layer and rename it buttons .

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

Placing the Button Instances 3 Select the first button, and in the Property inspector, set the X value to 35 . 4 Select the last button, and in the Property inspector, set the X value to 664 .

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

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

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

Naming the Button Instances 1 Select the first button on the Stage.

Naming the Button Instances 2 Type btn1_btn in the Instance Name field in the Property inspector.

Naming the Button Instances 3 Name each of the other buttons btn2_btn , btn3_btn , btn4_btn , btn5_btn , and btn6_btn . 4 Lock all the layers.

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

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

Naming Rules Instance naming follows these simple rules: 1 Do not use spaces or special punctuation. Underscores are okay to use. 2 Do not begin a name with a number. 3 End your button name with _btn. Although it is not required, it helps identify those objects as buttons. 4 Do not use any word that is reserved for a Flash ActionScript command.

Botones

More Related Content

What's hot

Viewers also liked

Similar to Botones

More from Francisco Javier Arce Anguiano

Botones