Monday, November 2, 2009

Buttons

Buttons
Buttons could be considered the core interactive element in any Flash project you might create. Buttons can take so many different forms that for this discussion we'll consider just about anything you can click on a Button.

There's a lot that can be done with buttons. We'll divide this into two categories. What the button does itself when you interact with it, and what actions the button invokes in your application when you interact with it.

For example, a button might glow, scale up and reflection might play across it's surface when you move the cursor over the button. These things happen tothe button. When you click the button your application might load an image. This is an action that your button is invoking in your application.

Flash provides several different ways to create buttons. The two most common options are the Button Symbol and the MovieClip Symbol. Each has it's own options. For most situations the MovieClip provides more options.


The Button Symbol
The Button symbol can be used to create a Button in flash. The Button Symbol is similar the MovieClip Symbol but only has 4 frames. These frames are labeled Up, Over, Down and Hit. The Button Symbol automatically jumps to these frames as the cursor interacts with the Symbol.

  • Up - Frame is shown when the cursor is not over the clip
  • Over - Frame is shown when the cursor is over the clip but not pressed
  • Down - Frame is shown when the mouse is pressed over the clip
  • Hit - Frame is never displayed, it sets the clickable area for the clip

Create a new Button by choosing Modify > Convert to Symbol or Insert > New Symbol. And then choosing Button from the Type menu. At this point you can draw your artwork on the various frames.

Note: Be sure to set the Hit frame. Best to use a filled rectangle. Do not use an odd shape or text for the Hit frame. This will make your button difficult to interact with.

Note: Buttons can use layers just like MovieClips. Feel free to use as many layers as you like to create the art that you envision.

Note: You can nest animated MovieClip Symbols at the Over and Down frames within a a Button and those clips will play when the button reaches their frame. But, this is not a good method to create buttons with animated states. Better to use one of the MovieClip buttons described later.

Note: Button clips only support a limited amount of Actionscript.


MovieClip Buttons
The MovieClip is the King of symbols n Flash it can do everything. It can also mimic all of the functionality of the Button symbol and more.

To create a basic Button with Up, Over and Down frames, create a new MovieClip Symbol with Insert > New Symbol or Modify > Convert to Symbol and set the Type to MovieClip. Inside the new Symbol add three key frames and set the Frame Label at each of these frames to _up, _over and _down. These names must be spelled exactly as they appear here.

  • _up
  • _over
  • _down

These combined with the MovieClip's buttonMode property allows the MovieClip to jump these key frames as the cursor interacts with the clip, much in the same way the Button Symbol works.

Note: The MovieClip will automatically play unless you stop it with a stop() action. This can be done by targeting the clip or it can be placed on the first frame of the clip.

The MovieClip doesn't provide a Hit frame. But you can easily simulate this by adding a layer containing a filled shape with a transparent color. Make sure this layer is below the other layers and extends across all of the frames you are using.













No comments:

Post a Comment