Adding Navigation Elements to the Main Timeline Flash

We inserted content placeholder for the welcome, services, and contactInfo sections of the timeline, and we made a Movie Clip with product graphics to place in the product section. However, we had no way of actually getting to any section except the welcome frame. In this section, we create a menu that will control the position of the playhead on the Main Timeline.

Creating text buttons for a menu
In this part of the exercise, you make menu buttons that will enable the user to navigate to the different areas of the Flash movie.

  1. On the Main Timeline of your mainMovie.fla movie, add a new layer and rename it menu. On this layer, we create text buttons to navigate the site.
  2. Insert a keyframe on frame 10 of the menu layer. Select the Text Tool, and, with a 16-point Verdana font face, type the word Home. Place this text underneath the company logo graphic, on the left-hand side of the Stage .
  3. The homeButton instance will always take us to the welcome area of the site.

    The homeButton instance will always take us to the welcome area of the site.

  4. With the Arrow Tool, select the Home text block. Press F8 to convert this text into a symbol. In the Symbol Properties dialog, name the symbol homeButton. Assign it a Button behavior.
  5. Now we need to add a Hit state to the homeButton timeline. By default, Flash will use the last frame of a Button symbol timeline for the Hit state, unless content is added to the Hit state keyframe. Double-click the homeButton instance on the Main Timeline to switch to Symbol Editing Mode.
  6. Select the Hit frame of Layer 1 on the homeButton timeline, and press F7 to insert an empty keyframe.
  7. Click the Onion Skin Outlines button in the timeline window toolbar. This enables you to view the previous frames of the homeButton timeline, as shown below.
  8. Onion skinning enables you to accurately align the contents of several keyframes.

    Onion skinning enables you to accurately align the contents of several keyframes.

  9. Select the Rectangle Tool, and draw a filled rectangle that covers the same area of the Home text block. You can use any fill color because the user never sees the Hit state. Your button’s timeline should resemble the one shown below.
  10. The Hit state defines the “active” area of the Button instance in the movie. If the user’s mouse pointer enters this area, then the Over frame of the Buttonwill be displayed.

    The Hit state defines the “active” area of the Button instance in the movie

  11. Next we add an Over state to the homeButton, so that the user knows it’s an active button. Select the Over frame of Layer 1, and press F6. This copies the contents of the previous keyframe into the new one. Select the Home text block with the Arrow Tool, and change the fill color to blue. You can also turn off Onion Skin Outlines at this point.
  12. Return to the Main Timeline of your movie, and save your Flash movie file.Select Control➪Test Movie to test the states of the homeButton. You can also use Control➪Enable Simple Buttons to preview the graphical states of a Button instance.
  13. Now we put an action on the homeButton instance. Select the homeButton instance, and open the Actions Panel. In Normal Mode, double-click the Go To action in the Basic Actions booklet. Flash automatically adds the on(release){} code to store the Go To action, in the right-hand Actions list. In the parameter area of the Actions Panel, uncheck the Go to and Play option.In the Type drop-down menu, select Frame Label. In the Frame drop-down menu (located at the end of the field), select welcome. Your Actions Panel options should match those shown below.
  14. With these actions, the homeButton instance will move the Main Timeline playhead to the welcome frame label.

    With these actions, the homeButton instance will move the Main Timeline playhead to the welcome frame label.

  15. If we test our movie at this point, our homeButton won’t do anything our playhead is already on the welcome frame label. Let’s add a button for each section on the site. Repeat Steps 2 to 8 for each section name in our movie. You should end up with four buttons: Home, Products, Services, and Contact Us.
  16. Repeat Step 10 for each new button instance. For each button instance, change the Frame drop-down menu selection to match the name of the button’s area (for example, gotoAndStop(“products”); on the productsButton).
  17. Save your Flash movie, and test it (Ctrl+Enter or Command+Enter).When you test your Flash movie, you should be able to click each button to go to each area of the movie. If a button isn’t functioning, double-check the code on the instance. Make sure that each Button instance has a Button behavior in the Instance Panel. In the next section, we add buttons to the productMovie Movie Clip symbol, so that the user can browse the pictures of the computer parts.

Browsing the product catalog
In this section, we go inside the productMovie symbol and add some navigation buttons for our product catalog.

  1. From the Main Timeline of our mainMovie.fla, double-click the productMovie instance on frame 20 of the productMovie layer. Flash switches to Symbol Editing Mode.
  2. Make a new layer on the productMovie timeline, and rename the layer to buttons.
  3. Open the Buttons Library (Window➪Common Libraries➪Buttons). In the Buttons Library window, double-click the (circle) Button Set folder. Drag the Circle with arrow Button symbol to the productMovie Stage. Place the Button instance below and to the right of the monitor_1 Graphic symbol.
  4. With the Circle with Arrow instance selected, open the Actions Panel. Doubleclick the Go To action to add this action to the Actions list. In the parameters area of the panel, change the Type menu option to Next Frame. This action moves the productMovie playhead one frame forward with each mouse click on the Button instance.
  5. With the Circle with Arrow instance selected, press Ctrl+D (Command+D) to duplicate the instance on the Stage. Move the duplicate instance to the left of the original arrow button. With the Arrow Tool selected, enable the Rotate modifier in the Toolbar. Rotate the duplicated button 180 degrees. Press the Shift key while rotating, to lock in 45-degree steps.
  6. Select both arrow buttons, and align them horizontally to each other, by using the Align Panel.
  7. Position the arrow Buttons underneath the product graphic.

    Position the arrow Buttons underneath the product graphic.

  8. Select the left arrow, and open the Actions Panel. Select the nextFrame(); action in the Actions list. In the parameter area, change the Go To action’s Type menu option to Previous Frame.
  9. Save your Flash movie, and test it. Click the Products button, and try the new navigation arrows for your product catalog.

You can further enhance your presentation by adding more information in the productMovie Movie Clip symbol. After the following Expert Tutorial, we add a scrolling text window to the catalog that displays text descriptions of the products. The topic of Flash usability has received a lot of press lately, particularly because many Flash interfaces are considered experimental or nonintuitive to the average Web user. In December 2000, Macromedia released a new section to their Web site Macromedia Flash Usability.



Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics