I see it a lot in Flash games: Buttons that aren’t quite finished. It’s an easy addition to any user interface (UI) that beginning game developers should learn early on.
The trick with buttons is to understand that a button is more than just a button graphic. It’s the player’s opportunity to interact with the UI. When the UI doesn’t respond to the player’s action, the UI isn’t actually “interactive.” Buttons are a great place to learn about interactivity.
A button is a graphic, glyph, or text element that can be pressed for some effect. Most buttons look like buttons to help the player understand their purpose. If you’re starting out creating games, don’t get too innovative with your buttons. This isn’t where a player wants to be challenged. Make them easy to see and use. How? Well, like this…
Your button has several states:
UP
The button is ready to be pressed. The effect is available. (By that, I mean that it will perform some expected action.) This is typically indicated by the button graphic appearing raised and fully illuminated.
ON (or ACTIVE)
The button is up but the effect is unavailable. Maybe the power-up is still charging, or maybe the conditions for that map haven’t been met yet, (it’s still locked). This is typically indicated by the button graphic appearing raised but not fully illuminated. This is the least typical state and may be considered ancillary to the other three because it involves additional information. (The other three states are typical to all buttons, while this one involves meta information.)
HOVER
This is the state of the button when the mouse cursor is hovering over it. This generally affects only ON-state buttons. This state is important as it reinforces the mouse’s position over the button. This state is frequently overlooked in flash games, but it should be included. The typical over state is a slightly intensified illumination in the raised appearance.
DOWN
This is the state of the button when the mouse is clicked down. This state is often overlooked in amateur flash productions. This state reflects the player’s action that they pressed down on the button… it gives the player feedback. It’s important. The appearance is generally handed as the appearance of a lowered button. The simplest way to handle this is to reverse the shadow characteristics. If the other states feature a cast shadow, the down state has an inner shadow, (or a shadow cast on the face of the graphic). The illumination may be reduced.
ACTIVE
If you are designed tab-key navigation, it’s important that the button has a state that indicates that it has focus. This isn’t generally done in Flash games. It’s usually handled by a keyline surrounding the button.