Hi all, is it possible to create a custom button with or without using the button tool? One that is a custom shape like a star or something?
I’m intending for each state to have its own microanimations built in to at least one of the states.
Any thoughts? Thank you!
Each button could have its own timeline, or be its own symbol.
Then, just use events/actions…
On mouse over – do something (Play Timeline)
On mouse out – do something else (Play Different Timeline, or play in reverse)
The problem is that most mobile devices don’t work well with mouse events.
This could also work with click events, since Hype events would be used.
Thank you!! Also as I understand this, it would not be a good idea to implement this if it will be used on mobile devices – instead only on desktop/laptops?
And would a mouse event in Hype be recognized as a touch/tap?
I feel like I could use the responsive layout feature to have different buttons then for mobile… Is that a feasible idea?
The problem when using mouse over is that sometimes Mobile will detect it — and then not turn it off.
One of the reasons to use Hype is because it manages both mouse and touch events together. I was having this problem just tonight. Then I was like… what am I doing writing code? HA HA!
As you can see in the events, it has the mobile equivalent in parentheses… such as “On Mouse Click (Tap)” …and… “On Mouse Up (Touch End)”. Still, you’ll need to test on mobile to see if it’s actually doing what you want it to do.
To bring some details into this:
A “button” element is just a normal element that has default styling of rounded corners, centered text, and Edit > Show Button Controls selected. You can actually do this on just about any element.
The way a button works under-the-hood is that it makes animations on hidden timelines for the button states, triggered on mouse over/mouse out for “hover” and mouse down/mouse up for “pressed.” These have instant timing functions. So in that notion, you can fully replicate buttons even without the button controls if you want to, and add much more interesting effects.
All mobile browsers support mouse events, but do so in a semi-convoluted way. At one point it would even introduce delays and special highlighting, so Hype makes use of more responsive touch events when possible. There’s this chart I googled which shows how mouse events are specifically handled on iOS. If you want to see what it is like only using mouse events on mobile, you can uncheck “Use touch events” in the Document Inspector. You’ll notice the event names in the Action Inspector now no longer have the touch names on them! But the default of it being checked is usually preferred.
I hope that helps clarify buttons – they basically are nothing special and just a little bit of sugar to make a common case easier.
Thanks for the explanation Jonathan. I figured I could have multiple timelines within each button state, and this confirms it. Any chance of Tumult conferences in the future? Would be nice if so.
Now is probably not the best time to plan conferences! I doubt we'll do a "big" one like a single Hype Conference that was done in 2016/2017, but we may do more local events or seminars. We've also been looking into online-only conferences (via webapps like hopin or run the world). There's also users who have done local meetups; we try to share these on our twitter account as much as we hear about them.
