Hello-- I’ve read the earlier form entries on this topic but am hoping the latest version of Hype offers us non-coders an easier solution. Is it possible to create a shaped graphic and have it work as a button within the shape, not within the background rectangle? I’ve tried both drawing an irregular shape and importing an irregularly shaped SVG graphic, but the button actions are triggered by the shape and its background rectangle.
So I was going to say simply use a vector shape.
These should map to clicks within its shape.
All the on click stuff works.
I was also going to say if you want to have the Bo=utton controls, normal,hover, pressed
The just select the vector shape and use the Edit-> Show Button Controls Menu.
But oddly it is greyed out.? @jonathan.
But what does work is if you add a element like a rect.
Use the Edit-> Show Button Controls Menu on it, then convert it to a vector shape.
The Button Controls will then persist.
Thanks! It works! Just change a circle or rectangle to a vector shape and button actions apply only to the shape, not the background square.
1 Like
Hmm… it is intentional this is disabled but I can’t think of the particular reason off the top of my head. Perhaps it was done for future compatibility where vector shapes might not be able to work correctly as buttons, at least with the current implementation. The workaround you found is an interesting one, but I’d probably consider it a bug as it stands right now.
@graphicsgeezer it sounds like you just need something that only has specific click regions and doesn’t need the button states, correct?
Yup-- very irregular shapes but don’t need button states. I want to make different blocks of text visible for each shape. Currently this works by making the timeline move to a specific time for each shape, but it’s a bit laborious.
Glad you have it working.
I’d probably have to see the document itself and your current approach to see if there was an easier way. The only thing I can think of given current details would be a coding approach, as the hypeDocument.setElementProperty() API allows setting a final location, but you can also add in a duration/timing function to transition the element to it.
The funny think is, straight after id worked the work around out this came up…
So if the workaround is a bug should they not use it…
I've come back to this post after more than a year because I'm trying to do the same thing as before-- make an electoral map with oddly shaped buttons which move the animation from one scene to anther. I've already tried all the suggestions here, but still can't make it work very well. Please have a look at the file and let me know if you can help. Otherwise, I'll have to learn Animate which is impossible for people with ordinary brains.
Here's the process I'm following:
Create rectangle or ellipse
Add interactivity
Convert to Vector Shape and alter shape to suit.
Copy shape in edit mode.
Create rectangle
Paste shape into rectangle
Make into Persistent Symbol
Here's the basic animation, only partly complete.
interactive2.zip (218.1 KB)
Here's how it should look: Test electoral map – Words & Pictures
I think you're probably hitting issues due to the structure and nature of scene changes. What's generally happening here is that you have on mouse over/out actions to change a scene. While the element is in a persistent symbol, these persistent symbols really operate by moving out of a scene and into a new one. Thus upon being in a new scene, they are considered "fresh" and a mouse over will be triggered again. If you jump to a scene that is the existing scene, it will reload the scene (instead of doing nothing, which is just how Hype has decided to operate). So in the course of moving a mouse over a vector shape region, you are constantly reloading the scene.
I am not sure of your end goal, but I would not use scenes nor persistent symbols for this. Instead I would have mouse over/outs run alternate timelines that animate certain aspects of the singular scene. It sounds like you tried this previously, but it was just a bit more work than you wanted?
(Buttons are just timelines under-the-hood for mouse over/out anyways)
Thanks-- made a timeline as you suggested and it works perfectly! Really appreciate it!
1 Like