Quick Tip: SimpleButton to SelectableButton

sk.yoz.ui.SelectableButton class may be handy for you if you decided to drop framework and make your own lightweight components. It extends SimpleButton (basic ActionScript 3 component) and ads selected state and toggle functionality by switching states on click event. You may want to extend it for selectedUpState, selectedOverState, selectedDownState, feel free to do that.


import sk.yoz.ui.SelectableButton;

// any graphics here
var upState:DisplayObject;
var overState:DisplayObject;
var downState:DisplayObject
var hitTestState:DisplayObject;

// changes selected state on mouse click
var toggle:Boolean = true;

var button:SelectableButton;
button = SelectableButton(upState, overState, downState, hitTestState, toggle);

// toggle select button without user interaction
button.selected = true;

Size comparision of empty instances of mx Button, spark Button and SelectableButton:

trace(getSize(new mx.controls.Button()));
// 1408 bytes

trace(getSize(new spark.components.Button()));
// 1248 bytes

trace(getSize(new sk.yoz.ui.SelectableButton()));
// 324 bytes

2 comments so far

  1. Edgar July 27, 2010 22:12

    How that works in terms of Focus management, Layout management, accessibility and so on 🙂 ?

  2. Jozef Chúťka July 28, 2010 10:45

    @Edgar, I see your point Martin 😀 however I will try to be polite: it is a simple component not a part of framework, thus it does not use frameworks focus/layout nor any other framework management. However you can use TAB key to switch between SimpleButton/SelectableButton instances on runtime. Beautiful, isn’t it? 🙂

Leave a comment

Please be polite and on topic. Your e-mail will never be published.