Section 4.4. Navigation

4.4. Navigation

The Web wouldn't be what it is today without navigation. The basic ability to link from one page to another is such an essential part of the Internet experience that it's difficult to imagine what the Web would be like without it.

In many Flash projects, the ability for the user to navigate through a series of frames is also essential. Without the ability to jump around between frames, you'd be forced to design every project as a rigid linear path. In this section, you'll create three buttons, each of which will navigate to another part of the movie, displaying different shapes on the Stage.

The first thing you need is a button, so use one from a prior file to speed things along:

  1. Create a new Flash document and save it as navigation.fla in the 04 folder.

  2. Choose File Import Open External Library and open the simple_button_02.fla file provided in the same directory. This technique is a handy way to make all of the Library assets of one file available to other files during authoring.


    As highlighted in the text, you'll see that lines 2 and 4 of the Go to Web Page behavior include two forward slashes (//) at the beginning. These two slashes indicate a comment in ActionScripta line that is not executed as part of the script. Comments can be used to write notes about your code (so you or someone else can easily discern the operation or purpose of the code). Comments initiated with // are automatically terminated by the next carriage return.

    In this case, when Macromedia developed the behavior, they added the two comment lines as notes about how the script was created and where it ends. If you decided to add code to this script, either on your own or with additional behaviors, these comments would help segment the code that came from each behavior.

    Since the code is attached directly to the button and the script is brief, a developer could interpret the code easily without the comments. However, as scripts become more numerous and lengthy, comments make the code more discernible.

    As a best practice, you should add comments to your code. They not only help others understand your intent, but may even help you remember details if you should revisit the code later.

    Comment marks can also be used to temporarily or permanently disable a line of code. Simply precede a line of code with // to "comment out" the line, or remove the slashes to re-enable it. To disable multiple lines of code or write a long comment, start the comment with /* and terminate it with */, like this:

     /* This is a multiline comment */ 

    Your comments should always be descriptive and not simply reiterate what is obvious from the code. This comment is not very helpful:

     // play movie clip from frame 10 myClip_mc.gotoAndPlay(10); 

    This comment explains the code at a higher conceptual level:

     // play sample animation before asking user to respond myClip_mc.gotoAndPlay(10); 

  3. Drag an instance of the btn symbol to the Stage. It's now a part of your new navigation.fla file, so you don't need the external Library anymore.

  4. Save your work now, but don't save again until instructed. This will allow you to revert to this previously saved point later and save a step or two.

    Now you have a button, but you need to change the text inside it:

  5. Double-click the button to edit it in place, and replace the word Button on each frame with the word Box.

  6. Return to Scene 1.

    The first button is complete, but you still need two others:

  7. Open the Library, double-click on the btn symbol name to make it editable, and change the name to box_btn.

  8. Click on the Options menu in the upper-right corner of the Library panel and choose Duplicate. The Duplicate Symbol dialog box appears.

  9. Enter circle_btn for the name of the new symbol and click OK to close the dialog box.

  10. Drag circle_btn to the Stage and double-click on it to edit it in place.

  11. On every frame of the circle_btn timeline, change the word Box to Circle.

4.4.1. Reusable Buttons

Before you repeat that last group of steps for the third button, feel free to mutter, "This isn't any fun." It's a lot of redundant work just to make a few buttons this way. There is, however, a better way:

  1. Use File Revert to revert to the last saved state. If you accidentally saved along the way, open the

    Double-click on the btn symbol instance to edit it in place, and delete the text layer from the button symbol's timeline. This will leave only the multi-state artwork.

    Do you see where you're going? Instead of embedding the text within the btn symbol, you'll keep it separate, so that the button is unlabeled and can be reused easily. Now you'll add the text separately from the button:

  2. Return to Scene 1.

  3. Alt-drag (Win) or Option-drag (Mac) the btn instance to create a second instance, and align the new instance directly to the right of the first one. Repeat this process for a third box. There are now three buttons lined up at the top of the Stage, in a horizontal row.

  4. To make sure the btn instances are aligned perfectly, Shift-select the three boxes and choose Align Top Edge and Distribute Horizontal Center in the Align panel.

  5. On Layer 1, activate the Text tool and type Box. Click elsewhere twice (so you're no longer editing the previous text) to create another text field, and type the word Circle. Then click twice again and type the word Polygon.

  6. Position the word Box in the center of the first btn instance on the left. Then position Circle in the center of the second btn instance and Polygon in the center of the third, as shown in Figure 4-10.

  7. Save your work and test your file.

Figure 4-10. Align the text in front of the btn instances

Now you have three buttons, made from only one button symbol. Not only is this easier than duplicating buttons and changing the text inside them, but using only one symbol decreases the file size for the published movie.

Now create the content for the three screens in the project:

  1. Draw a square on the Stage, then draw a circle. Convert both to graphic symbols, naming them box and circle.

  2. Delete them both from the Stage. You will be adding them later, in specific frames, from the Library.

  3. In the Tools panel, click on the Rectangle tool, holding down the mouse button until a menu appears, as shown in Figure 4-11. Choose the PolyStar tool from the menu. This tool allows you to draw polygons or stars, and you can configure the number and size of the points. (Later, feel free to explore the tool's options in the Properties panel.)

    Figure 4-11. Choose the PolyStar tool from the Rectangle tool menu in the Tools panel

  4. Draw a polygon on the Stage, convert it to a symbol named polygon, and delete the instance from the Stage.

Now, you need to divide the movie into three different sections. You'll do this by using frame labels. Frame labels allow you to mark a frame with a string that is easy to remember. More importantly, if you add or delete frames before or after a label, the label stays with the frame you marked, making navigation scripts more reliable.

Note: Unlike labels that move with your content, frame numbers are fixed; frame 10 will always be frame 10 even if you add frames before or after. A navigation script that uses frame numbers may work when you write it but cease to work after you've added or deleted frames, because the new frames may have moved your content.

Start by setting up your layers and labels:

  1. Rename Layer 1 to buttons.

  2. Create a new layer and name it content.

  3. Create another layer named labels and drag it to the top of the layer stack.

  4. Create a final layer named actions and drag it to the top of the layer stack, so it is above the labels layer.

  5. Select frame 40 on every layer and press F5 to insert frames.

  6. Select frame 1 on the labels layer and, in the Frame Label field in the Properties panel, enter home. Press Enter/Return to commit the name to the selected frame. The frame label home now appears in the timeline, as shown in Figure 4-12.

    Note: Just as you place all your ActionScript on a layer named actions created for that purpose, you can reserve a layer for frame labels. This is not mandatory, but rather a way to improve the organization and legibility of your timelines.

  7. Choose Anchor from the Label Type drop-down list in the Properties panel. Much like an HTML link anchor, Flash frame anchors allow a browser's Back and Forward buttons to work when navigating through Flash movies, improving usability (currently Windows only).

  8. In the labels layer, insert keyframes at frames 10, 20, and 30, and add named anchors to these frames, just as you did with frame 1. Name the frame anchors box, circle, and polygon, respectively, as shown in Figure 4-12.

Figure 4-12. The timeline with layers and labels in place

Now you have four discrete frameshome, box, circle, and polygonthat will serve as different destinations in the published movie. You can jump to each section using gotoAndStop() for a static destination or gotoAndPlay() for an animated destination. Add those scripts now:

  1. Select the content layer and insert keyframes at frames 10, 20, and 30 to correspond with the labels in these frames.

  2. At frame 10, drag a box instance to the Stage and position it at the center of the Stage (using the Align panel).

  3. At frame 20, position a circle instance at the center of the Stage. Then, at frame 30, position a polygon instance at the center of the Stage. Each labeled frame now contains the shape that corresponds to the label's name.

  4. Save and test the movie.

All 40 frames of the movie play without stopping, so each shape flashes by, and the buttons don't control any of it. It's time to write some ActionScript to tame the playhead:

  1. Select frame 1 of the actions layer and open the Actions panel (F9).

  2. Enter a stop() command in frame 1 to stop the playhead there:


And now it's time to stop and think for a moment. As you saw earlier, there are two different ways to code the buttons. You can either attach ActionScript directly to the buttons, or keep the code separate by putting it in the actions layer.

It may be easier to use a behavior and attach the script directly to the button. However, you'll quickly discover that there are too few behaviors to solve all your scripting needs. Also, writing the code yourself allows you to keep it in fewer locations, making it easier to edit later.

Note: Remember, any code that accesses movie clips, buttons, or text fields via ActionScript won't work unless you assign the item an instance name. Make sure your instance names are unique so that Flash knows which instance to target when you refer to it from your ActionScript code.

To add the scripts that control the buttons to the actions layer:

  1. Select each btn instance on the buttons layer in turn, from left to right, and assign instance names of box_btn, circle_btn, and polygon_btn to them using the Properties panel.

  2. Beneath the stop() command on frame 1 of the actions layer, create an event handler that sends the playhead to the box frame label when the user clicks the box_btn button:

     box_btn.onRelease = function() {   gotoAndStop("box"); }; 

  3. Copy and paste this handler below the existing script. You need to alter just two words to make it work with the circle_btn clip instance.

  4. In the copy of the handler, change box_btn.onRelease to circle_btn. onRelease.

  5. Next, change gotoAndStop("box") to gotoAndStop("circle").

  6. Repeat this process for the script to react to the polygon_btn clip instance.

  7. Your code on frame 1 of the Actions panel should now look like this:

     stop(); box_btn.onRelease = function() { gotoAndStop("box"); }; circle_btn.onRelease = function() {     gotoAndStop("circle"); }; polygon_btn.onRelease = function() {     gotoAndStop("polygon"); }; 

  8. Save and test the movie.

Hooray! You now have a functioning movie. When you click each button, the playhead jumps to the appropriate frame and displays the content on that frame. This is a common way of navigating movie content.

In fact, you can also use this technique to control movie clips. Simply by adding the movie clip instance name before the method, so the method is controlling the movie clip rather than the root movie, you can manipulate the movie clip timeline. You'll do this in Chapter 6, but there are a few more things to accomplish here first.

4.4.2. Improved Usability

Most interactive projects have more than one section, each with different functionality. It's easy for the user to become lost among the many sections, so to remedy this, most developers use visual cues to guide the user. A navigation bar, for example, may show the current section in addition to the available buttons.

In the navigation project you just completed, each button sends the playhead to a different frame in the timeline and displays a shape, but there is no indication of what screen we're currently viewing. It's fairly obvious, because the content resembles the section name, but a real-world project would likely not be this clear.

Improve the usability of your project by adding a generic indicator of which screen the user is on:

  1. In the box frame in the content layer, use the Rectangle tool to draw a small bar, 100 x 5 pixels, directly underneath the box button. Make it any color you like, but choose a color that will not blend into the button unseen. A fill with no border is particularly appropriate.

  2. Select the bar and convert it to a movie clip called active_bar.

  3. Copy this instance and move to the circle content frame. You will see that the box bar has disappeared. This is because you placed it in the box content keyframe, and this is exactly the behavior you want. Paste the instance into the circle keyframe, but this time position it under the circle button.

  4. Repeat the last step for the polygon keyframe.

  5. Save and test the movie.

This is a simple solution for creating an "active" state for multi-section projects. Even if the content does not resemble the name of the section, the presence of the active_bar instance directly below the relevant button, as seen in Figure 4-13, helps the user remember where he or she is at any time.

Figure 4-13. Indicators that reveal the user's current location improve usability

For additional advice on how to make your projects more usable, check out the following books:

  • Don't Make Me Think! A Common Sense Approach to Web Usability, by Steve Krug (New Riders)

  • The Big Red Fez: How to Make Any Web Site Better, by Seth Godin (Fireside)

These books are both focused around web usability, but the knowledge gained can (and should) be applied to every project you create.

Flash 8(c) Projects for Learning Animation and Interactivity
Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)
ISBN: 0596102232
EAN: 2147483647
Year: 2006
Pages: 117

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: