Buttons Pressed State

General Discussion
#1

What’s the easiest way to make a button (which is a plane using an image) change to another image (pressed image) when pressed?

1 Like
#2

Hi @hendra.susanto,

The easiest way to do this would be to change the plane’s materials(..) property within the button’s pointerdown event handler.

Once implemented your code would look something like this:

// Reference to your button node. Get this by dragging your button into the top of your script and selecting Insert Local Variable
const myButton = symbol.nodes.myButton;

parent.on("pointerdown", () => {
    myButton.materials(mySecondImage);
});

In the example above, mySecondImage is a reference to your media file, which can be created in the same way as the reference to your button i.e. by dragging it into your script.

Also, make sure the pointerdown event handler was added to your button in the Hierarchy.

Hope this helps. If you have any other questions feel free to let us know.

All the best,
Seb

1 Like
#3

Hi, thanks for the answer. I ended up using pointerenter and pointerleave to change the states of the button, since I want to use the pointerdown to open the URL in the browser.

parent.on("pointerenter", (e) => {
	symbol.controllers.websiteButtonController.elements.pressed.activate();
});

parent.on("pointerleave", (e) => {
	symbol.controllers.websiteButtonController.elements.normal.activate();
});
1 Like