Becoming a Flash 5 Master Lesson 2 by Michael Kay

Page 1 — The Button Symbol In Lesson 1, we created some objects and then animated them with Flash 5. You may recall that we accomplished this through the magic of symbols. And remember how I told you that it's possible to edit these symbols? Well, that's where we're going to start this time around. If you haven't made your way through Lesson 1 yet, you might want to do this first, as we'll be building on the example animation I talked about in that article. When you created your symbols, you may have noticed that there were three different types you could have selected. The kind of symbol we created in Lesson 1 was the most basic type: a Graphic symbol. The second type is a Button symbol (and the third is the Movie Clip symbol, which will be covered in the next lesson). The Button symbol infuses your Flash animation with interactivity, so it responds to a mouseover or a click and can trigger an action. You've already learned how to create a simple Flash movie. Well, making a basic Button in Flash is like making a four-frame movie. In the previous lesson, we created images on the Stage and then defined them as symbols. Now we're going to create a symbol with the symbol editor. Open the Library palette for your movie by choosing Library from the Window menu. See the Options pulldown menu in the upper-right corner? Select New Symbol, name it something easy like "Click-me" or "Button" and then select Button Behavior. After hitting OK, you'll be able to edit the symbol. While you edit the symbol, the movie will be hidden. Select Grid from the View menu to help you with alignment. Choose the Text Tool and use the Character panel to select a bold font of 18 points. Type "CLICK ME" in the center of the Stage. Next, add another layer and name it "rectangle". Select the Rectangle tool and set the Stroke height to 2.0 points and the color to black. Select a light color for the Fill Color, and draw a rectangle on the new layer. If you can't see the text, make sure the "rectangle" layer is below the text layer in the timeline. If it's not, just click and drag that layer name to change the order. You'll notice the Button Symbol Timeline has a label above each of the four frame cells: Up, Over, Down, and Hit. A different user action triggers each of these states. We've just drawn the image for the Up state, which is what the button looks like when it's just sitting there. Over is what it looks like when the user rolls the mouse over the button. When the user clicks down on it, that's Down. And Hit defines the hot area of the button — like an image map; it indicates where the mouse needs to be to trigger the button. To create an Over state, simply insert Keyframes for both layers in the Over frame. Select the text and change its color to pale yellow (#FFFFCC). Also, change the fill color of the rectangle to a deep purple (#330066) or blue. Next, insert a Keyframe in the Down frame. Using the Arrow tool, draw a marquee around the button objects and drag it down and to the right about a quarter of an inch each way. This will give the illusion that the button depresses when your user clicks on it. Above is the Button symbol-editing window. There's a pop-up menu on the side that leads to the other symbols in the Library, and the movie clapper icon just to the left brings you back to the movie editor. Note that I've added another layer to give the Down state a drop shadow. To define what's hot (and what's not), you need to create a solid black object in the Hit frame. First, insert a Blank Keyframe in the Hit frame. Then go to the Up frame and copy the rectangle there. Return to the Hit frame and select Paste in Place from the Edit menu. This will paste the rectangle into the same location as in the Up frame. You don't have to create all four states for every button, but doing so can make for more dynamic buttons. Another thing to note: Symbols can contain other symbols. This allows you to create more effects and even smaller files. Each state of the button could contain other graphic symbols. Now let's place the button into the movie. Return to the movie by selecting Edit Movie from the Edit menu. Alternately, you can hit command-E (Ctrl-E on Windows) or select Scene 1 from the Edit Scene pop-up menu. next page»