Buttons. how the chuff can i make them?

HA. well i hope the title says it all.

im looking through the documentian, but am not finding an answer, wihch is a basic one really.
just how the chuff do i make a button? :wink:

im currently looking thorugh simpleButton, since it seems to be exactly what i need. something simple ;). its just going to be for a simple menu i want to do, have made a class etc. and did sort out a click method and all that, but thats linked to the entire screen. which is ok, but needs some tending to :wink:

many thanks :wink:

If you create a SimpleButton, it includes a few options in the constructor, you can pass different objects (like Sprites) for the different button states (over, down, hit, up)

I prefer to make my own, because SimpleButton (by design) does no transition between the states.

Create a graphic (can be invisible) to be the hit area. Make the whole object mouseChildren = false; and buttonMode = true so that all events trigger as the whole button (and not a child within) and so it gives you the nice little clicking hand when you roll over.

When mouse is over the button, you can Actuate.tween (upState, 1, { alpha: 0 }); (or whatever you prefer) while Actuate.tween (overState, 1, { alpha: 1 });

You can do similar between other states, handle MouseEvent.MOUSE_OUT as well

1 Like

if you don’t need an over state, just try doing the sprite.mouseChildren = false; and sprite.buttonMode = true to give yourself the basics for a button, add sprite.addEventListener (MouseEvent.MOUSE_DOWN, sprite_onMouseDown); to handle clicks (I personally prefer down events over up or click events, it seems more responsive to me)

1 Like

a button can be made with any Sprite and a listener

mysprite.addEventListener(MouseEvent.CLICK, onButtonClick);

function onButtonClick(e:MouseEvent) {
    trace('you clicked me!');
}

also, if you use the events MOUSE_OVER and MOUSE_OUT you can show when the user pass over the button for a cool interface feedback. fancy!

there are zillion ways to make a button, what I wrote is just the easiest one.

more complex implementation could support custom styles, fancy text + icons, custom shape (not rectangular buttons).

but if you need a more complete GUI you should look at the cool libraries around for that purpose.

if you just need a button, read again the first line of this post :wink:

1 Like

Adding

mysprite.mouseChildren = false;
mysprite.buttonMode = true;

Will make sure that the e.currentTarget in the onButtonClick always refers to mysprite (and not some child of it) and gives you the little click hand so users know to click there, but of course it’s all up to your design

2 Likes

oooh wow. didnt get an email people had replied.
but ill give these a good look and practice on, see what i can muster up.

simple button looks right for. i dont want anything too drastic. just something… well… simple :wink:

tahnks again both of you :wink:

just to say again. these have been brilliant

@singmajesty
yours explained a deeper part of it

@yupswing
yours explained a simple method of doing it, which is great

both great. since info is a little light online and on the examples, it most welcome. thanks :wink:

By the way, this is classical actionscript flash question , witch openfl mirror. There is huge amount of information about this. Not saying this to discourage you to ask in this forum, but if you next time can’t find the answer with openfl, try adding “actionscript 3” to the query.

Openfl’s goal is to replicate the api and the work flow of flash, and it does this beautifully. So not only you can ask this forum, but you can search the Web for more then 8 years of flash actionscript development experience.

1 Like

AH HA HA. i completely forget about AS3, though i have done AS2 many moons ago :wink:

ill give that a look actually. plenty more questions to ask really, but would think a lot of them have been answered with flash stuff.
thanks. just slipped my mind completely :wink:

well ive gotten somewhere. and has been damn helpful. think its the destroying of buttons once clicked or once moving to the next scene per-se to then destroy buttons. but these all have been really helpful

ok. now lastly to post on this :wink:

so i have been able to make a button using @yupswing example, thank you. that was really helpful :wink:
but i am having trouble with SimpleButton setup. im close, but loosing at some points

so my setup is just this. actually its way bigger due to it being a game. but you get the idea :wink:

import openfl.display.Sprite;
import openfl.display.SimpleButton;
import openfl.event.MouseEvent;
import openfl.display.DisplayObject;

class Main extends Sprite {
	private var myButton:SimpleButton;

	public function init () {
		myButton = new SimpleButton(50,50,"clickME", onClickDown);
		addChild(myButton);

		stage.addEventListener(MouseEvent.MOUSE_DOWN, onClickDown);
	}

	private function onClickDown():Void {
		trace("ITS PRESSED");
	}
```
now i have been following not only flash ones but also a flixel one as well. just to see, but im running into errors on both. and does run into an erros of ```int should be openfl.display.DisplayObject```
so i feel close, but still far away from getting my simple button ;)

thanks again

You’re not calling the constructor of the SimpleButton properly
.
The arguments should be four DisplayObject instances: up state (not hovered or clicked), over state (mouse over), down state (mouse clicked), and the hit state (for collision, I think).

You’ll just have to set the position of the button manually afterwards.

ah ok. fair enough.

but with things like the upstate, downstate, etc etc, are these set the same way as say when you make do an addEventListener?
or is it just as simple as

upstate:DisplayObject;
downState:DisplayObject;
overState:DisplayObject;
hitState:DisplayObject;

simpleButton = new SimpleButton(upState, downState,overState,hitState);

and even with the displayobject, how would those be used properly to incorporate SimpleButton?

just things needed clearing up since im finding minimal info on this here internet :wink:

many thanks

EDIT
just to add. this isnt a crushing defeat if i dont get this right away :wink:
the example @yupswing gave has done wonders really. just need to work on using classes with it and making sure things speak to each other :slight_smile:

You would most likely use one of the subclasses of DisplayObject (Bitmap, Sprite, etc) as the faces for your button.

I enjoy these questions, though, I think it helps provide answers to the same questions others may be asking, hopefully in a way that’s even more relevant and applicable :smile:

1 Like