Button Symbols Flash

Button symbols have four states, based on the mouse states, which are:

  • Up: The mouse is neither over nor clicking on the button
  • Over: The mouse is over the button
  • Down: The mouse is clicking on the button
  • Hit: This represents the active area of the button

Each button state can present a different image. Buttons can also have actions assigned to them for each of the four mouse states. The images are set inside of the button symbol, while the actions are set in each of the button’s instances. Actions cannot be assigned directly to the button symbol itself only to an instance (or instances) of the symbol. Instances are discussed later.

The timeline for a Button symbol, is different from other symbols. It consists of four frames, each one labeled for a mouse state: Up, Over, Down, and Hit. These are the only frames that can be used when creating a button; but you can use as many layers as you like go ahead, get crazy.

The Button symbol timeline always consists of four keyframes labeled Up, Over, Down, and Hit. This button has sounds associated with the Over and the Down states.

Button symbol timeline always consists of four keyframes labeled Up

Creating a button
Here are the steps for creating a simple button:

  1. Select Insert➪New Symbol to create a new (empty) symbol and launch the Symbol Properties dialog. Name the button and set the Behavior to Button.
  2. Click OK.
  3. A Button Symbol Editing window opens. It displays each of the four states as a separate frame: Up, Over, Down, and Hit. By default, the initial state automatically has a keyframe. Draw a graphic for this initial state of the button—the Up state. Note that a Graphic symbol or imported graphic (including a bitmap) may also be used or pasted into the keyframe for the Up state.
  4. Next, insert a keyframe (Insert➪Keyframe) in the Over state. This is the frame that appears when the mouse passes over the button. If you’d like your button to do something interesting on mouseover, this is where you make it happen. A Graphic symbol, imported graphic, or bitmap (or even a Movie Clip) may also be used or pasted into this keyframe for the Over state—as well as for the next two states.
  5. Insert a keyframe in the Down state. This is the frame that appears when the button is clicked. If you don’t want the button to change when it’s clicked, just insert a frame here instead of a keyframe.
  6. Finally, insert a keyframe in the Hit state. This frame defines the effective hit area of the button. If you’re only using text for your button, this is particularly important, because without a Hit state the effective hit area is limited to the letter shapes of the text itself—which makes it very hard to hit the button. So, in this frame, draw a shape to define the hit area. Because the user never sees this state, it doesn’t matter what it looks like, as long as it defines a usable hit area. It’s good practice to add a Hit state to every button you make this way you won’t forget to add one when it’s necessary.

Adding animation to a button
To add an animated state to a button:

  1. Follow the procedure outlined previously to make a new button.
  2. Next, follow the procedures outlined earlier to create a Movie Clip for the animated state.
  3. Now, open the Library with Window➪Library (Ctrl+L or Command+L) and select the button that you’ve just made, and then open it in Symbol Editing Mode by right-clicking it and then selecting Edit from the contextual menu.
  4. For the sake of clarity, add a new layer to the button and name it MC, for Movie Clip. Give it four keyframes to match the keyframes of the button states.
  5. Select the frame to which you want to add an animated state. This can be the Up, Over, or Down state. (As you already know, the Hit state is never seen in the movie, so there’s no reason to animate it.)
  6. Now, return to the Library with Window➪Library (Command+L or Ctrl+L), and select the Movie Clip that you created for the animated state. Then, with the appropriate keyframe active for the desired state, drag the Movie Clip into place.
  7. Finally, test your work by selecting Control➪Test Movie (Ctrl+Enter or Command+Enter ).
  8. A Movie Clip added to the Over state of a Button symbol.

    Movie Clip added to the Over state of a Button symbol.

Adding sound to a button
Here’s how to add sound to a button:

  1. Make a button with all the necessary states, as described previously, and then add an animated state or two if you want.
  2. Now, create a second layer to put your sounds in. Although this isn’t absolutely necessary, it’s recommended because it keeps the button organized.
  3. In the new layer, add a keyframe to each state for which you want a sound.
  4. Import the sound(s) that you’d like to add to the button state(s).
  5. Add the appropriate sound to each state that requires sound. A button with a sound in both the Over and Down states. Commonly, the Over and Down states have sounds associated with them, but you can add sound to the Up state too.
  6. This is the Button to which we previously added the animated state. Now, it also has a sound in the Over and Down states.

    Button to which we previously added the animated state. Now, it also has a sound in the Over and Down states.

    Follow these steps for each state that you want associated with a sound:

    1. Select the keyframe in the sound layer of the desired Button state.
    2. Open the Library and drag the sound onto the Stage.
    3. Open the Sound Panel (Window➪Panels➪Sound), select your sound in the Sound drop-down menu, and set the Synch to Event (it’s actually the default).
  7. After you’ve added all your sounds, test the Button (Control➪Test Movie) to see how well it works with the sounds.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics