Like rats in a lab, computer users–from gamers to Web surfers–know what to do when they see a button: click on it and wait for something to happen. With Macromedia’s Flash 3, a tool for creating vector-based animations, designers can create buttons that give users not just rewards but also real control over multimedia and Web environments.
In the filmmaking metaphor of Flash’s interface, you place objects and elements on a stage, make frame-by-frame animations in a timeline, and create scenes. When you’re done, you export your work as a movie. Flash buttons let users control the finished film by starting and stopping playback, going to a specific frame, and switching scenes.
But buttons are more than a mechanism for moving viewers from place to place; they can contain their own animations and form the foundation of sophisticated interface elements, such as pull-down menus. If you’ve already mastered the fundamentals of creating Flash movies, it’s time to bring your buttons to life.
Button BasicsTo make a button in Flash, you first create an object called a symbol, a reusable element stored in a movie’s library. You can modify the color, brightness, transparency, and other attributes of a symbol each time you use it, but Flash downloads the basic graphic just once.
Creating a button is similar to creating a regular Flash movie: you work with objects on a stage and frames in a timeline, and you change the look of those objects by using keyframes (see “Build a Basic Button”). But where regular movies may have hundreds of frames that play sequentially over time, buttons have four frames that play in response to certain mouse actions. The first three correspond to the three possible button states: Up (nothing is going on; the button is just sitting there waiting for someone to notice it), Over (the mouse has moved into the button area), and Down (the user has clicked on the button). The fourth frame, Hit, defines the boundary of the button.
Although it’s invisible to the end user, any solid graphic in the Hit frame becomes the active trigger for the button in the final movie. The Hit graphic can be a copy of the Up, Over, or Down graphic; you can also draw a shape enclosing all the elements that make up the button and then fill the shape with color. You can even draw a shape that doesn’t touch the Up, Over, and Down graphics at all. For example, an invisible square in the lower right corner of the stage could trigger a circular button that appears in the upper left corner.
Button FeedbackWe humans are like lab rats in another way: we rely on visual cues to tell us what constitutes a button. In a straightforward informational site, a button might look like something from the real world–say, a light switch or a volume knob. In more-whimsical sites or games, buttons might be camouflaged as part of the scenery. As the mouse moves over such a button, a slight change in appearance or the triggering of a sound might be the only indication of the graphic’s dual purpose.
Flash 3’s button symbols make it easy to provide visual feedback; you simply use a different graphic for each of the button states. Flash also lets you associate sounds with individual button frames. For buttons that emulate real-world switches or toggles, you can attach a clicking sound to the Down frame to add realism. For more-fanciful buttons, you might add sound to the rollover frame to alert users to the location of an interactive element.
Buttons on the MoveTo move beyond static three-frame buttons, you need Flash’s movie-clip symbols–looping, self-contained animations that play within a single movie frame. Place a movie clip in the Up frame of a button, and you’ve got an animation that responds to the user’s mouse.
You can vary the animations slightly for each button state or change them completely. For example, a blinking question mark might start to spin when the mouse rolls over it; clicking on the button might make the question mark change color or shape. The trick lies in creating a different movie clip for each frame of the button (see “Animated Buttons Starring Movie Clips”).
Movie clips are really mini Flash movies; they can contain all the elements of a regular movie. You can nest movie clips inside other movie clips and even nest buttons within movie clips. Because they loop continually within a single movie frame, you can use movie clips to create buttons that stay animated even when the movie containing them is paused.
Buttons in ActionBesides looking lively, buttons should do something. To make buttons work, you need to assign them actions–embedded commands that control such things as starting and stopping movie playback, going to a specific frame or screen, or linking to a specified URL (see “Actions Put Buttons to Work”).
You can assign actions to frames as well as to buttons. In the case of frames, Flash executes an action as soon as the movie reaches the frame containing the action. Buttons, however, respond to mouse events. That’s why buttons offer one action not available to frames–On MouseEvent–which lets you define the precise mouse movement that triggers the button’s actions. Note that you must attach actions to an instance of your button (a copy used in a movie), not to the frames that make up the button symbol itself.
To override the default On MouseEvent option, Release, select another parameter in the Actions tab of the Modify Instances dialog box. Press responds to the downward part of a click when the mouse is over a button. Release Outside responds when the user clicks the mouse inside the button area but then moves the mouse outside before letting go. Roll Over responds to the cursor’s rolling into the button area; Drag Over responds to the cursor’s moving into the button area while the mouse button is down. Roll Out responds to the cursor’s moving out of the button area; Drag Out responds to the cursor’s moving out while the mouse button is down.
Give Buttons a WhirlThe best way to get a handle on buttons is to build some yourself. Start with a simple, static button that looks different in each state, then add movie clips and actions. With a little practice, you’ll soon be building buttons that amaze even the most jaded multimedia rats.
KATHERINE ULRICH is a freelance writer and editor living in San Francisco.January 1999 page: 113
Build a Basic ButtonTo get a grip on how buttons work, jump right in and make your own simple button. You’ll need to create a new button symbol, then add graphics to its Up, Over, Down, and Hit frames.
Choose Insert: Create Symbol (F8). In the Symbol Properties dialog box, enter a name, select the Button behavior, and click on OK to enter Edit Symbols mode.
The button timeline has just four frames: Up, Over, Down, and Hit. By default, Flash puts a keyframe in the Up frame; you must add keyframes to place graphics in the Over, Down, and Hit frames. Click and hold in a frame to bring up the Frame menu.
Use a different graphic in each frame to give users feedback about the button. The Hit-frame graphic should be big enough to cover the graphics in the other button states (turn on onion skinning to check); this Hit-frame graphic needs to be enlarged.
To see the button in action, choose Edit: Edit Movie, drag a copy from the library to the stage (the visible area of your Flash movie), and select Control: Enable Buttons. The button is now live, changing as you move the mouse over it and click on it.
TIP Another way to preview a button is to select it in the Library window and click on the Play button (the right-pointing arrow at the top of the window).
Animated Buttons Starring Movie ClipsAt the heart of animated rollover buttons in Flash lie movie clips.
The process of making a movie clip is very similar to that of creating any animation in Flash; the difference is that you start by creating a symbol. Here, we’ll create a simple animation that transforms an oval into a star burst.
Choose Insert: Create Symbol (F8), enter a name, and select the Movie Clip behavior. Click on OK, and Flash brings up a new timeline and stage.
The status bar (A) displays the name of the symbol being edited; the filmstrip icon means that this symbol has movie-clip behavior. Select frame 5 in the timeline and choose Insert: Blank Keyframe (F7).
Place the oval in frame 1 of layer 1 and the star burst in frame 5. Turn on wireframe onion skinning (B) to help position the objects. Note: Shape tweens require that the beginning and ending objects sit directly on the stage. If you’re working with a grouped object or symbol, select it and choose Modify: Break Apart (command-B). (You may need to repeat the command several times until all components are at the stage level.)
Double-click on frame 1 to bring up Frame Properties. In the Tweening tab, select Shape tweening and the blend type Distributive (for rounded shapes) or Angular (for shapes with corners). The default Easing setting keeps the rate at which the shapes transform consistent.
Click on OK, and Flash creates the in-between frames necessary to animate this morphing oval. Press return to watch the animation.
Choose Edit: Edit Movie to return to Edit Movie mode. Create two more movie clips. Now follow the steps in “Build a Basic Button,” but this time place movie-clip symbols in the first three frames. (Check out http://www.macworld.com/more/ for a step-by-step tutorial on building a fully animated button.)
Actions Put Buttons to WorkHow do you give users mouse control over a Flash movie? add actions to your buttons. By definition, buttons always respond to certain mouse events: move the mouse into the button area and Flash displays the Over frame; click on the button and Flash displays the Down frame. You can make buttons respond to other mouse events by adding actions and setting the parameters of your choice.
Select an instance of the button on the stage and choose Modify: Instance (command-I). In the Actions tab of the Instance Properties dialog box, click on the plus sign and select On MouseEvent from the pop-up menu.
Select a mouse event under Parameters. You can set multiple parameters for a mouse event–f;r example, to make the button respond to rollover as well as drag over.
Once you’ve set up the On MouseEvent parameters, click on the plus sign again to choose the action the button will carry out. Stringing actions together allows the button to respond differently to different mouse events. For example, On (Release) might take you to the next scene in the movie, whereas On (Drag Out) loads a movie that displays a help window. A single mouse event can also trigger several actions–f;r example, moving to another frame or scene in the current movie and then loading a second movie.