Using mx.controls.SimpleButton

Posted on Sunday 21 May 2006

It seems a bit of overkill that Adobe should include a 'SimpleButton' component when Flash already has a Button primitive type that does the job for what most of us consider a 'simple' button, and a Button component for most advanced functions. However, Button doesn't support toggling and a visually different disabled state, and mx.controls. Button is impossible to skin on a per-button basis. That is why there is a well hidden class deep inside the component framework known as SimpleButton.

The mx.controls.SimpleButton component is perfect for creating buttons with a custom look and toggling states. It is meant to be used in code and not using the IDE. You need to include a component in your library that uses or subclasses SimpleButton, such as Button or CheckBox (incidentally, this will add around 25k to your movie, but I'm assuming you're already using at least one of those components anyway so it shouldn't add any real weight). Here's a little usage example:


import mx.controls.SimpleButton;

var settings:Object = {
        falseDisabledSkin: "SimpleButton.falseDisabled",
        falseDownSkin: "SimpleButton.falseDown",
        falseOverSkin: "SimpleButton.falseOver",
        falseUpSkin: "SimpleButton.falseUp",
        trueDisabledSkin: "SimpleButton.trueDisabled",
        trueDownSkin: "SimpleButton.trueDown",
        trueOverSkin: "SimpleButton.trueOver",
        trueUpSkin: "SimpleButton.trueUp",
        falseDisabledIcon: "SimpleButton.icon",
        falseDownIcon: "SimpleButton.icon",
        falseOverIcon: "SimpleButton.icon",
        falseUpIcon: "SimpleButton.icon",
        trueDisabledIcon: "SimpleButton.icon",
        trueDownIcon: "SimpleButton.icon",
        trueOverIcon: "SimpleButton.icon",
        trueUpIcon: "SimpleButton.icon",
        toggle:true
}
var btn:SimpleButton = SimpleButton(attachMovie('SimpleButton', 'btn', 0, settings));
 

This creates a SimpleButton instance with toggling behaviour based on 8 skins, where the false skins are for when the button is not selected and the true skins are for the selected states. In addition, I have set all the icons to the same value here, as you would probably do yourself. The values are the linkage names of the various movieclips used as skins.

Using SimpleButton provides a simple alternative to rolling out your own custom button class when you need something a little more complicated than usual, while requiring pre-button skinning support.

You can retrieve the selected state using the selected property. The component dispatches the click event. That much is documented. However, the SimpleButton class also has another event, buttonDown. Now this wouldn't be a big deal, since it seems it equivalent to onPress. However, if you set the member autoRepeat to true, you will receive the buttonDown event periodically while the button is still down. There are associated styles for the delays, namely repeatDelay and repeatInterval. This is how the UIScrollbar up and down buttons work.

Documentation on the class is available here.


WordPress database error: [Can't open file: 'wp_comments.MYD'. (errno: 145)]
SELECT * FROM wp_comments WHERE comment_post_ID = '198' AND comment_approved = '1' ORDER BY comment_date

No comments have been added to this post yet.

Leave a comment




Your e-mail address is never displayed. If you run into issues with SpamKarma blocking you, email me at $patrick->5etdemi(com)


RSS feed for comments on this post | TrackBack URI