Is there a way to make an object clickable AFTER something else has happened? To stop its active state waiting for an event…
This is what I’m trying to do:
I have a scene in which the user is supposed to make a choice, and then move to the next scene. For that reason I have a “button” (graphic) that is dimmed down until a choice is made. The “button” should not become an active link until the choice is made. The underlying logic all works, and I’m using a timeline for showing a dimmed down or an up lit “button”. But, as mentioned, there should be no active surface on top of it UNTIL a choice is made.
I made an active button surface (a rectangle with alpha = 0) allowing to use as the link for the move to next scene, but I don’t seem to have a way of letting this button surface NOT showing until the check is OK. Any attempt to use a timeline only means that the object is either invisible or moved out of the way, but it is always an active surface on stage and clickable.
You could add a data attribute to the object, I am guessing it’s an element. Then attach a listener on scene load which checks for any changes, and then changes the alpha ?
you can do this by using transparent elements above the button. when ok ist clicked, the transparent is gone (moves to side) and the button below will be clickable.
This is our recommended way of doing this. Instead of creating a mouse click action on the button itself, create a rectangle which has a 'mouse click' action associated with it and only move it over the button which will be clicked after the choice has been made.
Strmiska: but of course… so obvious! That would work beautiful. I’ll give it a go for now.
Daniel: But this is what I tried and can’t seem to make the rectangle with the associated click on it to disappear. The surface is still clickable outside the canvas (if you have a big enough browser window)… or… I will have a look at it again.
MrAddy, I think you’re right and will try to dig deeper into the javascript bit of it. Not very good at javascript though so was hoping for a “simpler” solution.
I agree on that MrAddy, however you can group them up so they resize in the same way and therefor never move away from each other. Data attribute however is cleaner way of doing it.
“Button-Play” is a unique element ID that you’ve assigned in Identity Inspector. This JS could be assigned to this button itself, or through another script. It not only makes the button visually disappear, but also keeps it from being clickable.
If you ever need this reversed and need to show that button again, you would use:
Hi @kerguelen - sorry for the delay…deadline yesterday!
Here’s a very simple example with a Play and Pause button. These are made as Hype Button elements, but the same thing can be done with images as buttons as Peter was wanting to do in the original post - I use images with this method in many of my projects. Note that you could have several actions occur when clicking the buttons, like playing a timeline or audio, etc. You’d do that either through additional JavaScript attached to the button script, or by adding additional actions with the Actions Inspector.
Here is another way of doing it using class and id in the Javascript and buttons
This example use two buttons. You only every have two buttons. There are no buttons sitting on top or each other.
Answer A and Answer b
When one or the other button is clicked it’s Title will change to Next Scene. The other button will become hidden.
When you then Click the Next Scene you will be taken to the appropriate scene for either Answer A or Answer B depending on what answer button was originally clicked.