Saturday, 10 December 2011


This is a simple tip about how to do buttons in Flash. You can make them however you like, using code (as I usually do) or in Flash CS's editor. But always make them dynamic.

By this I mean use a button to show the user what state it's in. The simplest case is show the user when the mouse is over a button, by highlighting on mouse-over. But if a button is not available at the moment disable it, turning off the highlighting and dimming the button.

If a button toggles a state then change the button as it does so, from 'Hi' to 'Lo' [quality] for example. If a button is no longer needed remove it to de-clutter the screen and reinforce that whatever that button was for is no longer an option. If buttons can be disabled for different reasons then show this on them by using different disabled states, or by grouping the effect if they are disabled as a group by e.g. the game being paused.

Most of this is easy to do. The state information is usually a simple check. The highlighting and dimming can be done in a line, by adding a GlowFilter, changing a button's alpha or setting its transform.colorTransform, although there's nothing to stop you swapping in other art or running an animation. Another technique is to make the button 10% bigger on non-disabled MOUSE_OVER, though be careful when doing this that the mouse-over region doesn't move as this happens, which can make the state alternate rapidly between on and off.

What's surprising is how many games don't bother with this: even some very good games have static buttons that you have no idea if they are working until they are clicked, which have non-obvious or no indication that they are disabled, or otherwise give you no feedback.

No comments:

Post a Comment