The Button Symbol
In Flash Tutorial for Beginners – Lesson 1, we created some objects and then animated them with Flash. 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.Continue Reading “Flash Tutorial for Beginners – Lesson 2″ »