#AS3 Buttons#
This library provides an easy way to handle timeline based graphics as buttons in ActionScript 3. Some frame labels are required, but beside this, the button can be very simple with only one graphical state. The library extends this graphical representation with the usual button behavior (buttonMode, enable/disable) and an optional heavy click protection.
But the classical meaning of this library is represented by the FrameButton. It controls the graphical states of the button for MOUSE.ROLL_OVER, MOUSE.ROLL_OUT, MOUSE.MOUSE_DOWN and MOUSE.MOUSE_UP events as well as for a disabled state. If the graphical states for MOUSE.ROLL_OVER and MOUSE.ROLL_OUT events contain animations the library calculates the appropriate frame of the next label. This is done by taking the position of the playhead in the current label into consideration.
Furthermore the library contains a ToggleFrameButton which handles a selection state in addition to the FrameButton. This class manages the graphical states for mouse events and the disabled state if the button is selected true or false.
With LabeledFrameButton and LabeledToggleFrameButton a label text field can be set and managed. The text field has to have the name labelText. It is possible to place this text field directly on the timeline or wrap it in an other MovieClip named textContainer.
Moreover the label text can be centered vertically, if the text field is bigger than required.
The most important classes are:
- FrameButton
- ToggleFrameButton
- LabeledFrameButton
- LabeledToggleFrameButton
###Usage###
####Graphical button representation####
The timeline based button graphics have to contain some required labels. A FrameButton representation has to contain "default" as a label on the timeline. And for a ToggleFrameButton it has to be "default" as well as "selected_default".
Typical timeline representation of a FrameButton:
Simple timeline representation of a FrameButton:
Typical timeline representation of a ToggleFrameButton:
Simple timeline representation of a ToggleFrameButton:
####Basic usage####
FrameButton
var frameButton : FrameButton = FrameButton.createFromClass( ExampleButton );
addChild( frameButton );
ToggleFrameButton
var toggleFrameButton : ToggleFrameButton = ToggleFrameButton.createFromClass( ExampleToggleButton );
addChild( toggleFrameButton );
LabeledFrameButton
var labeledFrameButton : LabeledFrameButton = LabeledFrameButton.createFromClass( ExampleLabelButton, "Test" );
addChild( labeledFrameButton );
LabeledToggleFrameButton
var labeledToggleFrameButton : LabeledToggleFrameButton = LabeledToggleFrameButton.createFromClass( ExampleLabelButton, "Test" );
addChild( labeledToggleFrameButton );
The FrameButton, ToggleFrameButton, LabeledFrameButton as well as the LabeledToggleFrameButton can be used like normal MovieClips because nearly everything is delegated to the graphical button representation which is managed these button classes.
frameButton.x = 100;
frameButton.rotationX = 20;
frameButton.addEventListener( MouseEvent.CLICK, handleFrameButtonClicked );
###Known issues###
Nested animations
If the button MovieClip contains a nested animation (another MovieClip) you have to make sure that this animation ends two frames before the label is over. One empty label is required to reset the nested animation. Otherwise the nested animation will play only once. A different solution is to leave empty the first frame of the label that contains the nested animation.