Chapter 13: Creating Interactive Presentations with Slides in Flash MX Professional 2004

Overview

At this point, you should know what behaviors are and should understand some of the basic components of the ActionScript language. What is missing is something to put all of this knowledge to use. Behaviors allow your audience to control the movie ”but control it with what? Your movie needs some kind of switch or button to unlock its interactive potential.

Building controls in Flash is an essential step toward creating a movie that is both great to look at and easy to experience or play. At the most basic level, you can create simple buttons to turn a movie on or off and to skip to different sections. Flash controls can be as simple as those found on a VCR. They can also become an integral part of the overall design of your movie. As you progress to a more advanced stage, you will be able to create robust interfaces with flexible navigation options and a savvy look and feel.

 

Adding Interactivity with Simple Buttons

Flash is capable of managing complex and dynamic interactivity, but it's not always necessary to pull out all the stops for your movie. Sometimes you might find that simple elements are just as effective as complex ones. Designing a movie for interactivity is no exception. For Flash developers or designers who are just learning the program or want to keep things easy, there are many options for adding interactive controls. The good news is that these options don't demand a lot of work or experience, and the results can be very satisfying .

Selecting Buttons from the Flash Common Library

Flash has several Common Libraries to offer its users. These Libraries include things such as sounds, Movie Clips, and, yes, buttons. They are resources that are linked to the program and thus will be available every time you use Flash. The buttons in the Common Library are great for quick mock-ups or tests. Although some of the buttons in the Library might not fit your personal standards or design goals, all of them are very functional and can prove to be valuable assets in the Flash environment.

To open the button Library, select Window Other Panels Common Libraries Buttons (see Figure 15.1). This Library looks like any other in Flash. The only exception is its contents. It contains a wide assortment of buttons that are designed and ready for use in a movie.

Figure 15.1: The Common Library for buttons

 

Tip  

For more information about working with Libraries and shared assets in Flash, see Chapter 7.

The Library is organized with a series of individual folders that contain button families . Each family of buttons contains a group of graphics that originate from a common background and have a similar look and feel. This allows you to use the family as a set and maintain a consistent look for all navigational or interactive elements.

To use a Common Library button in your movie:

1.     Select Window Other Panels Common Libraries Buttons to display the Library if it's not open already.

2.     Open the folders within the Common Library panel to find the button you want. Folders in the panel can be opened and closed by double-clicking the folder icon (see Figure 15.2).

Figure 15.2: The Common Library folder structure

3.     Do either of the following:

§                               Drag a button from the Common Library to the main Library for your movie. If your movie Library isn't visible, you can display it by selecting Window Library or pressing F11.

§                               Drag a button from the Common Library directly to the Stage. It will automatically appear in your main movie Library.

At this point, the button is a symbol in your movie, either on the Stage or in your main Library, waiting to take the Stage.

From here, there are many different options for your button. If you put it directly onto the Stage, it becomes an instance in your movie and can have ActionScript or behaviors attached to it. To learn more about attaching ActionScript and behaviors to a button, see Chapter 14. If you would like to change the color, size, or any other attributes of the button and customize it to better fit your movie, see the section "Editing Buttons in Your Movie" later in this chapter.

Creating Your Own Buttons

Although using buttons in the Common Library is convenient , you will likely want to create some of your own. After all, this is why we're here; working in Flash is fun! But beyond the fun factor, the process of creating your own buttons has some specific advantages as well. The greatest of these, of course, is that with some effort, you will get exactly what you want. A custom button can be built to your exact specifications so that it fits the specific design goals of your movie. Interactive controls are a big part of a Flash movie, and it's important to get them right.

So, in Flash, what exactly is a button? It is a short, interactive movie with only four frames. Each of the frames represents a different appearance, or "state," of the button that reflects user interaction. These different states are saved as separate images in keyframes along the Timeline of the button movie. As you move the mouse over the button and click it, it changes states accordingly by displaying the correct keyframe image.

By making a button change appearance while it's being manipulated, you show your audience that it is more than just a graphic. The simple animation lets them know that the button is "active" in the movie and that clicking it will produce a change in your movie.

Like Movie Clips, buttons are another kind of symbol. You can create a single button and use it repeatedly. Every instance of a button will be treated independently throughout an animation or interactive movie.

The four states of a button are as follows :

Up       This first state represents the appearance of the button when the cursor is not over it. This can also be considered the "inactive" state.

Over       The second keyframe of the button Timeline represents the Over state. This creates the appearance of the button when the cursor is positioned over it. Note also that when the cursor is moved over a button, the Flash Player changes it from the standard arrow-pointer to a hand with a finger-pointer.

Down       The third keyframe of the button Timeline shows the button graphic when it is clicked and held.

Hit       The fourth and final keyframe defines the area of the button that will respond to a mouse click. Think of the Hit state as the button's hot spot. It defines the area that must be clicked for the button to execute any scripts or behaviors attached to it.

Table 13.1 contains illustrations and descriptions of the four states of a typical button.

Table 13.1: The Four States of a Button
State	Illustration	Description
Up		Appearance when the cursor is not over the button
Over		Appearance when the cursor is over the button
Down		Appearance when the mouse clicks the button
Hit		Defines the button area that can respond to a click

Now that you know a bit more about what goes into a button, you are ready to create your own. Just follow these steps:

1.     Select Insert New Symbol (Cmd/Ctrl+F8) to display the Create New Symbol dialog box.

2.     Choose Button as your behavior and enter a name for the button in the Name field.

3.     Click OK, and you are switched to Symbol Editing mode (see Figure 15.3). Notice that there are several changes to the appearance of Flash in this mode. The title of your symbol appears beside a button icon in the Scene and Symbol bar. The frames of the main Timeline disappear and are replaced by the new frames of your button. Also, the frames of the new Timeline are labeled to show the four states of your new button. The first frame for the Up state contains a blank keyframe.

Figure 15.3: The Timeline in Symbol Editing mode

4.     Create an Up state for the button by doing any one of the following:

§                               Use the Flash drawing tools to create a graphic.

§                               Import a graphic file and drag it onto the button's Stage.

§                               Drag an instance of another graphic or Movie Clip symbol to the Stage to create an instance within a button.

The crosshairs in the middle of the Stage represent the registration point of the button.

It's possible to use Movie Clips within Button symbols, but you are not allowed to put a button within a button. Using a Movie Clip as part of a button creates an animated button. For more on this, see the section "Creating Animated Buttons" later in this chapter.

5.     To create a new keyframe for the Over state, click the Over state frame and then select Insert Timeline Keyframe. Flash automatically duplicates the previous frame in the new keyframe. Alternatively, if you know that the graphic for the Over state is going to be completely different from that of the Up state, select Insert Timeline Blank Keyframe.

6.     Create or make changes to the graphic in frame 2, or use any of the methods outlined above to alter the appearance of the Over state.

7.     Repeat steps 5 and 6 for both the Down and Hit states.

The Hit state is unique and constitutes a very important part of the button. It defines the area that will respond to any mouse clicks on the button. It's important that the Hit state has a solid graphic so that clicks don't "slip through the cracks" in the button. It's also important to be sure that the Hit state is large enough to be clicked. If it's too small, your audience might have a difficult time trying to click the right spot.

 

Tip  

If you are creating a button that consists solely of text, the Hit state graphic is extremely important. Letters such as o have "holes"; a mouse click in the middle of an o -shaped button will not be recognized if the Hit state is also shaped like an o. To avoid this potential problem, create a rectangular-shaped Hit state that is approximately the same size as the chunk of text that makes up your button. Because the button Hit state is invisible, this will not have an undesirable effect on the appearance of the button, and will make the button much easier for your audience to use. If you plan to use lots of text buttons, there is an even easier way to approach this. To learn more, see the section "Creating Invisible Buttons" later in this chapter.

8.     With graphics for the four states in place, your button is ready to go. To leave Symbol Editing mode, either select Edit Edit Document (Cmd/Ctrl+ E ) or simply click the Timeline icon for the current scene of your movie.

9.     Drag your button from the Library to the Stage to create a button instance in your movie.

10.     As needed, attach ActionScript or behaviors to the button so that it can be used to control various elements of your movie. For a discussion of behaviors, see Chapter 14. If you are interested in more advanced button- related ActionScript, refer to Chapter 20.

These are the fundamental steps for creating a simple button for your Flash movie. From this point on, the possibilities are virtually limitless. For a discussion of how to add sound to a button in your movie, see Chapter 23. If you want to continue to work with your movie and explore the potential of buttons as interactive control sources, read on. In the next section, we will discuss the ins and outs of testing your buttons and making any changes or edits to their components.

 

Previewing, Testing, and Editing Buttons

Once you have created your buttons, it's a good idea to test them to be sure that they work properly and look the way you want. Flash offers two main techniques for testing buttons: You can work in the authoring environment or use the Test Movie option. Depending on your movie project, one technique might suit you better than the other. Whatever the case, it's a good idea to become familiar with both so that you are able to work smoothly and efficiently .

Previewing Buttons in the Flash Authoring Environment

It's possible to preview your buttons while you are working in Flash's authoring environment (also known as authoring mode). By default, Flash keeps all buttons in an inactive state while you are creating your movie. If necessary, you can activate your buttons and test them while you create the rest of the movie.

To test buttons in authoring mode, select Control Enable Simple Buttons. A check mark appears next to the option, indicating that it is turned on. To turn it off again, simply repeat the process, and buttons will be disabled.

 

Tip  

Working in Flash with buttons activated can sometimes be difficult. For example, it can be tricky to select a button on the Stage when it is enabled. If you need to select an activated button, you can click outside the button and drag a selection around it. Flash highlights the button with a rectangular marquee to let you know it is selected.

Testing Buttons

Previewing buttons in authoring mode gives you a rough idea of what they will look like in your final movie. However, Movie Clips won't be visible when you preview your buttons in authoring mode. Also, most ActionScript and behaviors attached to the button are disabled in this mode. To get a sneak peek at any animated buttons or attached code, you must test your movie or scene. To preview animated buttons, select Control Test Movie (Cmd/Ctrl+Return/Enter) or Control Test Scene (Cmd/Ctrl+Option/Alt+Return/Enter). For more specifics on testing and previewing movies, see Chapter 30.

Editing Buttons in Your Movie

If your test or preview shows that a button needs some tweaking or fine-tuning, you will have to go back and edit the button. The good news is that if you have used a single Button symbol over and over (meaning that you used multiple instances of the button), any changes you make to the Button symbol will be updated in every instance. For more details on symbols and instances, see Chapter 7.

There are three ways to edit buttons in your Flash movie: You can edit a button on the Stage ("in place"), in Symbol Editing mode, or in a separate window. These options will achieve the same results, but you might find that one technique works better for you than the others.

To edit a button in place, do either of the following:

§                       Double-click the button instance.

§                       Ctrl+click (Mac) or right-click (Win) the instance and select Edit In Place from the context menu.

When you edit a button in place, items on the Stage will fade to the background. The Timeline and Edit bar will change appearance to reveal the button Timeline and keyframes. This option allows you to edit the button and see how it changes in relation to other items around it on the Stage.

You can edit a button in Symbol Editing mode in one of four ways:

§                       Select the name of the button you want to edit from the Edit Symbols menu in the Scene and Symbol bar.

§                       Ctrl+click (Mac) or right-click (Win) the instance and select Edit from the context menu.

§                       Select the symbol instance on the Stage and choose Edit Edit Symbols from the menu bar.

§                       In the Library panel, either double-click the symbol's button icon or highlight the symbol and choose Edit from the Library options menu.

To edit a button in a separate window, Ctrl+click (Mac) or right-click (Win) the instance and select Edit In New Window from the context menu. The new window will open directly over the window that contains your main Timeline.

All these options reveal basically the same thing: the button's Timeline and access to the four button states and keyframes. When you see this, you are free to make any necessary changes to the button. You can make changes using any of the tools available to you in Flash, by adding Movie Clip instances to the button and by importing bitmap graphics or other external files. Remember that any changes made here will affect all instances of the button in your movie.

When you are finished editing your button, do one of the following:

§                       Select Edit Edit Document (Cmd/Ctrl+ E ).

§                       Click either the Scene button or the Back button (see Figure 15.4) in the Scene and Symbol bar between the Stage and the Timeline to return to the main Timeline of a particular scene.

Figure 15.4: In the Scene and Symbol bar, both the Scene and Back buttons take you from Symbol Editing mode to the main Timeline.

For more information on moving around quickly and efficiently in the main Timeline, see Chapter 3.

 

Creating Complex Buttons

So far, we have covered all the basic steps for creating buttons and using them in your movie. With these essential skills, you are ready to move on to the next level: creating complex buttons and designing them to support the theme or concept of your movie. These buttons do more than serve as navigational icons. They allow you to give the audience a clear means of moving through your movie while offering visual interest and punch. Once you start to explore the possibilities outlined here, you will see the benefit that these techniques can bring to your Flash productions .

Creating Multilayered Buttons

Buttons are not only controllers in your movie ”they are graphics that have an impact on its overall look and feel. This presents you with several choices. On one hand, you can try to make the button as unobtrusive as possible, so that it is transparently woven into the fabric of your movie. On the other hand, you can play it up and allow the button to make a bold visual statement.

In the next example, you will see how to create a graphically dynamic button with components on several different layers . You can find the source files for this example on this book's companion CD. Look for the files named multilayer.fla and multilayer.swf in the Chapter 15 folder.

To create a multilayered button:

1.     Select Insert New Symbol or press Cmd/Ctrl+F8. The Create New Symbol dialog box opens.

2.     In the Create New Symbol dialog box, choose Button as the behavior and give the symbol a name. Then click OK.

3.     Flash automatically jumps into Symbol Editing mode. You will see the button Timeline and the Up, Over, Down, and Hit state keyframes.

4.     The beauty of the multilayered button is that each graphic layer is independent. One layer can change without affecting the others. To add another layer to the button Timeline, select Insert Timeline Layer or click the Insert Layer button in the Timeline. The new layer appears in the Timeline with an empty keyframe in the Up state frame.

5.     Begin by drawing a graphic on Layer 1 to represent the Up state of the button. When you are finished, click Layer 2 and draw an additional portion of the graphic. Because each part is on its own layer, you have more flexibility to change the various states of the button.

6.     If necessary, repeat steps 4 and 5 to create additional layers for the button.

7.     When the Up state is complete, click Layer 1 and select Insert Timeline Keyframe to add a keyframe for the Over state. When you do this, Flash automatically inserts a new frame in Layer 2 and duplicates the Up state graphics in the new frames (below left).

8.     Draw a new graphic for the Over state of Layer 1 or make changes to the duplicated frame as needed. Then click frame 2 of Layer 2, insert a new keyframe, and adjust this image as needed.

9.     Repeat the process outlined in steps 7 and 8 to create the appearance for the button's Down state (below right).

In the example on this book's companion CD, you can see that the button is a tomato. When it's rolled over, both the stem and the fruit change color. Then, when the tomato is clicked, it is squished and changed to a dark color. You can manipulate each element (stem and fruit) separately because each layer is autonomous and will not directly affect the other.

10.     Insert a new keyframe in Layer 1 to complete the button and give it a Hit state. Remember, the Hit state isn't visible; it's what enables the button to respond to mouse interaction. Even though the button has several layers, it's acceptable to put a Hit state keyframe in only one layer.

11.     When you have finished creating the button, select Edit Edit Document to return to the main Timeline. To preview your button, choose Control Enable Simple Buttons. This option allows you to see how the multilayered button looks when manipulated by the cursor.

Creating Animated Buttons

You have seen how multilayered buttons provide a new graphic dimension to your button controls. With each element on a separate layer, you can edit and control them independently. This technique also opens the door to a variety of additional possibilities that can add yet another layer of interest to your Button symbols.

Buttons are by default a kind of animation. When you roll over them, there is a graphic change. When you click them, there is another change. It's not a linear animation but rather one that demonstrates that the graphic is somehow significant; the animation begs you to click it. We can take this idea a step further by creating animated buttons. Such buttons use a Movie Clip or small animation to represent one of their states. Generally, this is done at the Over state, although it is certainly not a requirement. If a Movie Clip were used for the Up state, the animation could be distracting. If it were used as the Down state, there is a chance that the Movie Clip animation wouldn't be seen at the instant the button is clicked. The Over state presents the animation when the button is active (rolled over). It grabs your attention and adds more to the rollover effect than just a change of graphic.

 On the CD      In the next example, you will see how to create an animated button by using a Movie Clip. You can find this example on this book's companion CD. Look for the files named animated_button.fla and animated_button.swf in the Chapter 15 folder.

To create an animated button:

1.     Create a graphic on the Stage to use as your button. When it is complete, drag around it to select the entire graphic, and either choose Insert Convert to Symbol or press F8. In the Create New Symbol dialog box, select the Graphic behavior and give the symbol a name in the Name field. Click OK.

2.     The symbol appears in the Library. Delete the symbol from the main Timeline Stage.

This graphic symbol will be used as the starting point for each component of our button. We use a symbol so that instances of the symbol can be used repeatedly in the button animation.

3.     Select Insert New Symbol or press Cmd/Ctrl+F8. This time, choose the Movie Clip behavior, give the clip a name, and click OK when you are finished. Flash takes you immediately to Movie Clip Editing mode.

4.     You can now create the animation that will be used as the Over state of your button. Drag the graphic symbol from the Library to the Stage while you are in Movie Clip mode. Use the arrow keys to nudge the symbol so that its registration point lines up with the registration point of the new Movie Clip. To help with this, you can monitor the position of the graphic by looking at the X and Y coordinate fields in the Property Inspector.

 

Note  

Lining up the registration points is a good idea because you will use the graphic symbol several times in this process. This ensures that that each instance of the symbol is positioned in exactly the same place. Alternatively, you can use the Align panel (Cmd/Ctrl+ K ) and have Flash handle the registration for you automatically. To learn more about working with the Align panel, see Chapter 6.

5.     Create the animation using keyframes, tweening, and any other techniques that are available to you in Flash (see Figure 15.5). If you want the animation to play only once, is a good idea to add a stop() statement to the last frame of the Movie Clip's timeline. Otherwise , it will loop continuously (which might be desirable in certain situations). If you need to change the symbol, you can select Modify Break Apart (Cmd/Ctrl+ B ) and edit its characteristics directly. For more information on keyframes and animation concepts, see Chapter 10.

Figure 15.5: The Timeline for the Movie Clip in the file animated_button_.fla . Notice that there are instances of both tweened and frame-by-frame animation in the timeline.

6.     When you have finished creating your Movie Clip, select Edit Edit Document and return to the main Timeline.

7.     At this point, you are ready to create the button. You have a graphic and you have a Movie Clip; now is the time to bring it all together. Choose Insert New Symbol, and the Create New Symbol dialog box opens again. This time, choose the Button behavior and enter a name in the Name field.

8.     Click OK, and Flash jumps into Button Editing mode.

9.     Drag the graphic symbol to the Stage and use the arrow keys or Align panel to move it into place so that the registration points line up.

10.     After the Up state graphic is in place, you can move on to the Over state. Select Insert Timeline Keyframe to insert a new keyframe. The keyframe appears in frame 2 as the Over state graphic. Flash automatically copies the Up state graphic into the new keyframe. You will need to swap this with the Movie Clip you created in step 5. Select the graphic in the Over state frame and then click the Swap Symbols button on the Property Inspector.

The Swap Symbol dialog box opens and allows you to exchange graphics for the Movie Clip symbol. Be sure that the Property Inspector displays Movie Clip in the Symbol Behavior menu after you have swapped symbols; otherwise, the clip will not animate. For specifics on swapping symbols, see Chapter 7.

11.     The bulk of the work is now over. You have an Up state and an animated Over state. The next step presents a choice depending upon your intentions for this button:

§                               If the animation is all you need to complete the button, click in frame 3 of the button Timeline and choose Insert Timeline Frame. This will extend the Movie Clip instance one frame and allow it to serve as the Down state as well. This will not cause the animation to replay.

§                               If you want an additional change to the button when it is clicked, you need to create a keyframe for the Down state in frame 3 of the button Timeline. Flash will duplicate the contents of the previous keyframe in the new frame. Using any of the previously described techniques, insert a graphic for the Down state in this keyframe.

 

Note  

The example on this book's accompanying CD, animated_button.fla , demonstrates the results of the first choice. However, you can experiment with this file using the techniques described in the second. Look for the graphic symbol named light_down in the movie's Library. This graphic could work well as a Down state graphic for this particular animated button. Try it and see what you think.

12.     Click frame 4 of the Button Timeline and choose Insert Timeline Blank Keyframe. Use any of Flash's painting or drawing tools to create a Hit state that is appropriate to the shape and size of your animated button. With keyframes and graphics for each of the four states, your animated button is now ready to go.

13.     Select Edit Edit Document (Cmd/Ctrl+ E ) to return to the main Timeline and save your movie. Because we used a Movie Clip, Flash won't give us a true preview of our animated button in authoring mode. To see the button in action, add an instance of the animated button to the movie; then select Control Test Movie and give it a spin.

An animated button is a button like any other. Once it's in your Library as a Button symbol, you are free to use it throughout your movie. You can attach actions or behaviors to instances of the animated button and use it as a means of controlling other movie elements and playback.

Creating a Multiple-Button Interface

A multiple-button interface is somewhat self-explanatory: There are several buttons that compose a navigational scheme. This is useful in situations where you want to put all navigational elements in a single location, such as a menu bar running along the top or bottom of your movie. The cool thing about navigation bars is that the buttons can double as bookmarks, so that when you click one, it changes appearance and tells your audience "you are here."

 On the CD      In the next example, you will learn how to create a navigation bar with two buttons. Although it's a simple task, the concepts presented here can be used to build larger and more complicated interfaces. You can find the finished files for this example on this book's accompanying CD. Look for the file named navBar.fla in the Chapter 15 folder.

To create a navigation bar with multiple buttons:

1.      On the CD      Open nav_lesson.fla and save it to your computer's desktop. This file is also located in the Chapter 15 folder of this book's accompanying CD. This file contains a button that you will use to build the navigation bar.

2.     Use the Rectangle tool to draw a box that fills the width of your movie, making sure that the box is tall enough to accommodate your button.

3.     You are ready to add your button now. Select Insert Timeline Layer to add a layer to your movie Timeline. It isn't necessary to put items on different layers, but it can be helpful in keeping your movie organized. Name the new layer buttons . For more details on organizing and working with layers, see Chapter 8.

4.     Select the buttons layer in the Timeline. Drag the button from the Library to the left corner of the navigation bar graphic. Because you started this step by selecting the buttons layer, it will be the layer where the Button symbol is kept.

5.     Repeat step 4 to create a second instance of the button, only this time, drop the button farther to the right of the first button instance. These two buttons will serve as the controls for the navigation bar.

6.     Next you need to enter some text so that you can distinguish which button will connect with which part of the movie. Create a new layer (Insert Timeline Layer) and name it text . Then use the Text tool to enter text as follows (below right):

§                               Beside the first button, create a text box and enter Page 1 in a small point size.

§                               Enter Page 2 in a separate text box beside the second button.

§                               In a large point size, type Page 1 somewhere near the middle of the Stage. This will serve as a temporary marker to help you when testing the navigation bar buttons.

For more details about using the Text tool, see Chapter 5.

7.     Select Insert Timeline Layer and name the new layer markers . Enter page1 in the Frame Label field of the Property Inspector. The frame label will help with the ActionScript behaviors for the navigation.

8.     The final step in setting up the navigation bar involves adding a frame action so that the movie will play correctly. Choose Insert Timeline Layer and name the new layer actions . Click the keyframe in this new layer and select Window Development Panels Actions (F9) to display the Actions panel. Drag a stop() function from the Global Functions Timeline Control category to the Actions panel text box. If you are not yet acquainted with the Actions panel, see Figure 15.8 and Chapter 17.

Figure 15.6: The Actions panel

9.     All the basic elements for our movie and navigation bar are now set. Stop and save your movie (File Save). With these in place, we can create an additional section for the movie.

10.     Now you can add some additional content to the movie. Go to the main Timeline and click frame 10 of Layer 1. Hold down the Shift key and click frame 10 of your top-most layer (it should be named actions ). This makes a multiple selection across all layers.

11.     With a range of empty frames selected, you can create new frames. Choose Insert Timeline Keyframe. Because all layers were selected, all layers get new keyframes. Notice that layers that contain objects have a new instance of that object in the new keyframe. The frames between keyframes fill in accordingly.

12.     Use the Text tool to change the large text at frame 10 so that it reads Page 2 . We need to see some sort of contrast between one scene and the next so that we can test the movie later and determine whether or not it is working.

13.     Select the empty keyframe in the markers layer at frame 10. Enter page2 in the Frame Label field of the Property Inspector.

14.     You are now ready to make your navigation bar jump to a new location in the movie. Make sure that you are working with the main Timeline on frame 10. If it isn't open already, open the Behaviors panel (Window Development Panels Behaviors) and select the button on the left.

15.     Attach a behavior that will control the navigation of the main Timeline. In the Behaviors panel, click the Add Behavior button and choose Movie Clip Go To And Stop At Frame Or Label, and make the behavior go to the frame label page1 .

 

Note  

For specifics on attaching behaviors to button objects, see Chapter 14.

16.     Move the playback head of the main Timeline back to frame 1. Select the button on the right and attach a Go To And Stop At Frame Or Label behavior. Make this behavior go to the frame label page2 (see Figure 15.7).

Figure 15.7: Whereas the right button in frame 1 has a behavior that jumps to frame label "page2," the left button at frame 10 has a behavior that jumps to frame label "page1."

17.     Your movie should now have buttons that will take you from one scene to another. To test that everything is working correctly, select Control Test Movie.

18.     Provided that there are no problems with your movie, you should be ready to finish the last feature of the navigation bar. One of the best qualities of a navigation bar is that it can serve as a kind of bookmark to let your audience know where they are in your movie at all times. To create this feature, all you need to do is manipulate a few of the graphics in your movie. Choose Window Library to display the Library.

19.     Double-click the button icon in the Library to open the button in Symbol Editing mode. Click the third keyframe in the Timeline (the Down state) to select that portion of the button only.

20.     Choose Insert Convert to Symbol (F8) to display the Create New Symbol dialog box. Choose the Graphic behavior and name the new symbol bookmark . Be sure that the registration point is set to be in the middle of the symbol (see Figure 15.8). Click OK to return to Symbol Editing mode and select Edit Edit Document to return to the main Timeline.

Figure 15.8: When you create the graphic symbol from the button's Down state, be sure that the registration point is set to be in the middle. The button's registration point is also in the middle, so the two will line up exactly.

21.     With the new graphic in the Library, you are ready to add the bookmark feature to your navigation bar. Move the playback head to frame 1 in the main Timeline; then select the leftmost button on the navigation bar.

22.     Click the Swap Symbol button on the Property Inspector to display the Swap Symbol dialog box. Switch the Button symbol with the Bookmark symbol you just created. This puts the graphic symbol in place of the button and creates the effect of a bookmark in frame 1 of your movie. To read more about swapping symbols with the Property Inspector, see Chapter 7.

23.     Advance the main Timeline to frame 10 and repeat the previous step. Be sure to select the button on the right before you swap symbols.

24.     Your movie is complete! Or at least the navigation bar portion of it is. Select Control Test Movie to give your navigation bar a test drive. Notice how the Bookmark symbol acts like a real bookmark. When you click a button to move to a particular scene, the graphic doesn't change after it has been clicked. This is like a "permanent Down state" to signify which section of the movie is currently playing.

Although the steps outlined here are for a movie with only two locations, it's possible to use this technique to build a navigation bar for an entire Flash website. Using these ideas, and with the help of additional graphics, scenes, and behaviors, you will be able to create a navigational tool that meets the demands of any Flash movie.

Creating Invisible Buttons

The term invisible button probably sounds a little suspicious to you. After all, what's the use of a button if someone can't see it to click it? Good question; let's explain further.

An invisible button is transparent. It has no physical/onscreen attributes to speak of. It is purely functional. It lacks Up, Over, and Down states and has only a Hit state. This might seem to contradict any previous discussion of buttons, but it doesn't. Remember, the Hit state is the state that defines the active area of the button, the "hot spot," or the area that responds to mouse interaction. This characteristic makes it, in many ways, the most important state of a button. Invisible buttons use it exclusively to their advantage.

Put another way, an invisible button is a button that has only a Hit state and will respond to mouse interaction. When creating a movie in Flash MX 2004 and Flash MX Pro 2004, invisible buttons will not appear in your final, published SWF movie. However, they will be present as functional buttons that your audience can click to make choices and selections while interacting with your movie or application. Because of their uniqueness, invisible buttons are not practical in all situations. They are, however, extremely helpful and can save a lot of time under certain circumstances.

An invisible button, because it is transparent, can lie on top of any object in your movie without obscuring or hiding it. And because it is a button positioned over another object, that object seems to act like a button even though it might not be. Invisible buttons give you the flexibility to turn any object into a button by simply placing them over the object.

To create an invisible button:

1.     Select Insert New Symbol or press Cmd/Ctrl+F8. The Create New Symbol dialog box opens.

2.     In the Create New Symbol dialog box, choose Button as the behavior and give the symbol a name. Then click OK.

3.     Flash automatically switches to Symbol Editing mode. You will see the button Timeline and the Up, Over, Down, and Hit state keyframes.

4.     Click the fourth frame (the Hit state), and the frame will be highlighted. Choose Insert Timeline Blank Keyframe (or press F7) to create a blank keyframe for the button's Hit state.

5.     Use the Rectangle tool to draw a square button or the Oval tool to draw a round button. The size isn't all that important, but something around 25 pixels square or in diameter is a good starting point.

6.     Use the Align panel (Window Design Panels Align or Cmd/Ctrl+ K ) to position the upper-left corner of the button at the registration point or Stage coordinates (0,0). The Property Inspector can also help with the alignment. For an illustration of the finished invisible button, see Figure 15.9.

Figure 15.9: The invisible button has only a Hit state graphic that is registered at coordinates (0,0).

7.     When your button is aligned and finished, choose Edit Edit Document to return to the main Timeline Stage and save your movie.

Creating an invisible button is a snap. It's just like creating a regular button, with the exception that there are no Up, Over, or Down states to worry about. After the button has been created, Flash puts it in your movie's Library as a Button symbol for use later on. As a symbol, invisible buttons can turn many different graphic and animated elements of your movie into buttons.

To use an invisible button in your movie:

1.     Find the layer in the Timeline that holds the object you want to make work as a button. Create a new layer above this layer and name it buttons . To learn more about creating layers in the Timeline, see Chapter 8.

2.     Choose Insert Timeline Blank Keyframe to create a keyframe for the invisible button in the same frame as the object. If necessary, use the F5 key to extend the number of frames so that the new layer has enough frames to match that of the object.

3.     If it isn't open already, open your movie's Library (Window Library). Click the Invisible Button symbol and drag it into the newly created keyframe in the Buttons layer.

4.     Return to your movie's Stage. The invisible button appears as a semi-transparent blue box. Use your mouse and/or the arrow keys to nudge it into place so that it completely covers the object you wish to turn into a button.

5.     It is likely that your button does not exactly fit the size and shape of the other object. This is no problem. Use the Free Transform tool (as illustrated in Figure 15.10) to reshape or resize the button as necessary. Remember to make it large enough so that it isn't too difficult for your audience to locate and click it.

Figure 15.10: The Free Transform tool can be used to resize an invisible button. Here, it makes adjustments for a button to fit over the word home, thus making the word a button.

6.     Now that your button is positioned, you are free to attach behaviors or other ActionScripts as needed.

In addition to allowing you to turn any object into a button, invisible buttons have a few other benefits as well:

§                       Invisible buttons are Button Symbols, meaning that a single button can be reused over and over again in different instances with unique sizes and positions on the Stage.

§                       Invisible buttons can make any object act like a button: graphic, Movie Clip, text field, bitmap image, you name it.

§                       Making Hit states for text buttons can be tedious . Invisible buttons have a definable shape, making them perfect for text or other objects with irregular or uneven shapes .

 On the CD      To try your hand at invisible buttons, check out invis_buttons.fla in the Chapter 15 folder of this book's companion CD. This movie has two completed invisible buttons and all the trappings to complete three more. The buttons use behaviors to navigate to different frame markers of a Movie Clip. If you haven't learned how to do this, see Chapter 14.

 

Inspirational Design Model

Designing interactive media is so much more than just making "cool" stuff. Designers must take their audience into consideration so that their message is accessible and presented in the most effective manner. No matter how cool the animation or presentation of content, if an audience doesn't understand how to play or interact with the movie, you've lost them.

This is why intuitive interactive controls are so crucial to design. A naturally flowing , intuitive design will be much more appealing to your viewers than a confusing display of technical fireworks and animation prowess. Remember, your audience is seeing a movie for the first time. Things that might seem obvious to you as the movie's creator can be potentially confusing if the design isn't easily understood .

This chapter's feature is the Homestar Runner website, found at www. homestarrunner .com . The entire site is filled with hilarious games , comics, and animations. Of particular interest is their interface for the "Toons" section of the website (see Figure 15.11). Visitors can navigate through their offering of cartoons by using a TV Guide “style menu and a four-button remote control. Not only is this clever, but it presents a very familiar system that their audience will grasp immediately.

Figure 15.11: "Toons" section from the Homestar Runner website