package {
    import flash.display.Sprite;

    public class SimpleButtonExample extends Sprite {
        public function SimpleButtonExample() {
            var button:CustomSimpleButton = new CustomSimpleButton();
            addChild(button);
        }
    }
}

import flash.display.DisplayObject;
import flash.display.Shape;
import flash.display.SimpleButton;

class CustomSimpleButton extends SimpleButton {
    private var upColor:uint   = 0xFFCC00;
    private var overColor:uint = 0xCCFF00;
    private var downColor:uint = 0x00CCFF;
    private var size:uint      = 80;

    public function CustomSimpleButton() {
        downState      = new ButtonDisplayState(downColor, size);
        overState      = new ButtonDisplayState(overColor, size);
        upState        = new ButtonDisplayState(upColor, size);
        hitTestState   = new ButtonDisplayState(upColor, size * 2);
        hitTestState.x = -(size / 4);
        hitTestState.y = hitTestState.x;
        useHandCursor  = true;
    }
}

class ButtonDisplayState extends Shape {
    private var bgColor:uint;
    private var size:uint;

    public function ButtonDisplayState(bgColor:uint, size:uint) {
        this.bgColor = bgColor;
        this.size    = size;
        draw();
    }

    private function draw():void {
        graphics.beginFill(bgColor);
        graphics.drawRect(0, 0, size, size);
        graphics.endFill();
    }
}

Comments

harikj said on Jun 18, 2007 at 12:40 AM :

I was able to use the above mentioned package. But the hitarea is more than what is specified. How can this be controlled.

tderich said on Jun 20, 2007 at 2:26 PM :

This is working correctly as coded. To "control it" try this variation:
public function CustomSimpleButton() {
downState = new ButtonDisplayState(downColor, size);
overState = new ButtonDisplayState(overColor, size);
upState = new ButtonDisplayState(upColor, size);
hitTestState = new ButtonDisplayState(upColor, size);
useHandCursor = true;
}

or replace the hitTestState property with this one:

hitTestState = new ButtonDisplayState(upColor, size / 2);

harikj said on Jul 4, 2007 at 5:56 AM :

Even when I tried

hitTestState = new ButtonDisplayState(upColor, size / 2);

the hitarea is correct widthwise, but heightwise its still double of what its supposed to be.

Bilyk said on Sep 2, 2007 at 10:24 AM :

I'm having trouble with creating a menu. I'm trying to have nested SimpleButtons, but the children don't receive events. I set trackAsMenu to true, but that doesn't seem to help.

TessandraFae said on Oct 1, 2007 at 2:33 PM :

Ok, I've created a button using this, and added a drop and bevel filter to it.
Now I need to add an icon or Text on top of it, not affected by the filters.
How do I add an icon on top of the button in code?

Preferably in a Template Pattern please.

adbe_paul said on Oct 2, 2007 at 2:28 PM :

What you're wanting to do is starting to go beyond the ability of a SimpleButton.

The SimpleButton class really exists to support the Button library symbols that you create in the Flash authoring tool. If you want something with multiple layers and filters applied to some of them, you'd be better off creating a display object to serve as a button.

You'll want to use a display object container such as a Sprite to surround all the graphic parts (or a Movie Clip if you're creating it visually in Flash). The structure will be something like this:

Sprite (or MovieClip)
-- icon/text/unfiltered content (each as a child of the parent container)
-- background or image to which filter is applied (also a child of the container)

Then if you want to apply the filters using ActionScript, you'd apply them only to the child object that you want filtered, but in writing the code for the click event (or other events) you'd add event listeners to the container object.

TessandraFae said on Oct 2, 2007 at 4:15 PM :

So if I use a Sprite/Movieclip object as my button, can I implement a button's behavior, like over, up, and down states?

Can I do something like this?

class myButton extends Sprite implements SimpleButton() {
}

TessandraFae said on Oct 3, 2007 at 11:09 AM :

Please disregard the class implementation question.
I figured out that the LabelButton class (which inherits all behavior from the BaseButton class) has all the behaviors and skin flexibility I needed.
Thank you for your help though!

adbe_paul said on Oct 3, 2007 at 11:57 AM :

Really, the easiest way to accomplish what you're describing is to just create the button visually in Flash. I'm assuming that you can't or don't want to do that for some reason.

You can't use "implements SimpleButton" because SimpleButton is a class, not an interface.

You can easily use the *events* that SimpleButton provides in a Sprite, because both SimpleButton and Sprite are subclasses of the InteractiveObject class, and the events like click, over, up, etc. are inherited from InteractiveObject. However, for a Sprite it does take a bit more work to implement different visual states for up, over, and down. This is because SimpleButton adds the overState, upState, and downState properties that automatically "wire up" the visual changes with the mouse interaction. For a Sprite, you have do do that work yourself. You would just write functions that change the content of the Sprite (e.g. swaps out one background image for another one, or applies or removes a filter). You would then register those functions as listeners to the appropriate events of the Sprite.

Another approach would be to use a SimpleButton and Sprites together to accomplish the desired effect. For instance, if the button background should change depending on the state, you could create a Sprite for each state, with the icon and text on top and the background beneath. Then you could assign those Sprite instances to the upState, overState, and downState properties of the SimpleButton instance.

john anon said on Mar 25, 2008 at 2:51 PM :

Hi, this is all well and good but i prefer to program in Flash visually then code it up to do what I want. The problem I have with simplebutton is how do I get the following to work? i.e.

[code]
Button1_btn.addEventListener(MouseEvent.CLICK, onClickedButton1);

function onClickedButton1(event : MouseEvent) : void
{
trace(event.target);
}
[/code]

why does this just give me [object simpleButton] and not 'Button1_btn' like with movieClips?

Its really annoying not being able to know which button called the function, or have I just to use movieClips?

Thanks

John.

harikj said on Mar 27, 2008 at 8:32 PM :

Hi John,

You can access the button instance by giving it as

trace(event.currentTarget);

which would give you the instance of the button.

target would refer to the listener object

nolty said on Mar 28, 2008 at 11:53 AM :

Hi John -- everything that inherits from DisplayObject has a name property, so I think

trace(event.target.name)

will give you what you want -- Bob

mykal23 said on Apr 17, 2008 at 10:47 AM :

john anon,

Event.target when used in actionscript 3.0 code returns the specific class object that the listener is targeted to. You can use the properties and methods available to that class object to manipulate the targeted object.

I myself expected what we used to get in actionscript 2.0 but I've grown to enjoy being able to know the object type since I can then know immediately what object properties and methods are available to be manipulated.

So what you really want is the instance name of your targeted object which corresponds to the 'name' property of a [SimpleButton] object. This can simply be referenced by using event.target.name.

I personally now much rather having the object returned as the target(or event.currentTarget) than the name of the instance since you don't have to add code to do any type checking to see what methods are available that can be applied to the object.

No screen name said on May 4, 2008 at 1:32 AM :

I don't understand mean of soundTransform and trackAsMenu properties.
How I can use it?

DrewLeSueur said on May 9, 2008 at 1:10 PM :

I am making a banner ad that has a SimpleButton across the whole thing.
I have actionscript generate graphics dynamically on the stage. My problem is that wherever those graphics are, the click button does not work!