Anatomy of a Button in GuggaFF

The gugga.components.Button class in GuggaFF is designed to provide functionality for managing the visual states of a button and to inform for mouse events over it.

Mouse events which the Button dispatches are “click”, “press”, “rollOver”, “rollOut”. On all of them it can change its appearance. In addition the button can be in one of its selection states which also determines certain visualization.

Selection states:

off – button is not selected

on – button is selected

offDisable – button is disabled and is not selected

onDisable – button is disabled and selected

Mouse states:

Roll – mouse is rolled over the button

Down – button is pressed

Normal – none of the above is happening

In each moment of its life a button is in one of its selection states and one of the mouse states. Selection and mouse states are combined together to represent the unified button state. Here is the table of all possible states:




Let's take a closer look at some of the button states:

offRoll is when button is not selected but is rolled

onDisableRoll is when button is selected, disabled and rolled

offDisableDown, onDisableDown – the only two combinations which are impossible because when button is disabled it can’t be pressed

Now if we want to transit from one state to another we can create transition. Its name is generated with this pattern: oldState_newState, for example - off_offRoll.

Each button is a MovieClip with linked gugga.components.Button class to it. Button states and transitions are placed on the button’s timeline. They are marked with frame labels named as the state or transition’s name. On the end of each of these timeline segments, where the certain animation is finished, the stopPlaying() function should be called. If we want two, three or more states to be identical, we don’t need to create portions of the timeline for each of them. Despite this we could simply put several labels on the frame where the desired state or transition animation starts.

There are 10 button states and because it is possible to go from each state to all others, we have 9*10=90 transitions. Do we have to create all of them?
Of course not.

The main idea in the implementation of GuggaFF Button is that we should create only those states and transitions which we need. When the button goes to another state, it first tries to play transition with name made by the pattern oldState_newState. If there is such a transition the button plays it and when it is finished the button tries to play the newState.
If this transition does not exist then newState is played directly.
If we have neighter transition, nor state – nothing happens.