Buttons not active in preview

I've only been using Hype for a couple of days, and I just created my first project with a button.

I believe I've done everything according to this tutorial I have. But when I preview the thing in the browser, it looks right but the buttons are not active. Not only do they not function, they don't even change when the mouse hovers over them.

Is there some setting that I likely overlooked to make my project open correctly in preview? Or is there possibly some other explanation?

An example hype file would be useful as there is no way we can guess what You have done - kinda like "What number am I thinking of?" (Zip your Hype example file and upload to this thread; 3MB max file size).

Also please include what your intent is in your example... i.e. the button should highlight "red" and run the "Main Timeline" when clicked, etc.

1 Like

File would be nice yes. :slight_smile: Your problem sounds a bit like there is some object above/over your button preventing the click to register. Try to put the button on top of the rest.

1 Like

no other element should be overlaying those buttons ... (or set the pointer-events for those overlaying elements to none)

1 Like

I had to go looking for instruction on how to make a Zip file.

And I hope I've done this correctly. hype - 3 buttons 3 timelines.zip (209.9 KB)

And the problem was indeed that the buttons were not the uppermost elements listed in the timeline.

Nothing was overlaying them in the sense of being on top of them visually on the screen, but there were things above them on the list of elements.

Odd: nowhere did the tutorial say "Buttons need to the top thing on the list to function."

As You discovered the "Text" object was covering the buttons (please see Fig.1 for references in this post). Objects can block other objects below them from mouse (aka "pointer") interaction even if they are transparent.

3 remedies:
• Move the text block below the buttons in the list of elements.
• Raise the lower part of the text box (i.e. adjust the height) so it is not covering the buttons.
• With the text box selected click on the "Ignore all pointer events" checkbox.


Fig.1

4 Likes

Thanks so much.

I just moved the buttons to the top of the list of elements.

2 Likes

That works too - there is often several different ways to solve an issue - one might be better than another in a particular instance.

So along the line of "transparency" ("Element" Inspector pane)... if You have an element - say a red rectangle and change its opacity to "0" it is still part of the scheme of things - much like a window, transparent but You can not touch what is on the other side.

If You wish to remove its interactivity when it is fully transparent (i.e. it is blocking something below it) You can use my third suggestion above ("Ignore all pointer events") OR You can select "Hidden" for that element. "Hidden" is immediately below the "Opacity" setting in the "Element" Inspector" pane.

An example of where these techniques are useful is fading out an element (transparency animates to "0") and wish to remove its influence from your scene.

Transparency Hidden

1 Like