How to create rollover buttons for this situation

1

I have a Hype document which has imported sliced photoshop .pngs in a circle diagram. I need to make each slice a rollover button. How can I do if using an image as a button will ONLY have the button in a rectangle position, I know I can play with the skew but this seems unlikely it can be done correctly. please see the screenshot of the diagram.

Anyone with any ideas here?

2

Are you talking pizza slice or onion slice. I.e each wedge, each ring or ring edge.

Can you post a copy of the hype document…

3

Ye I wonder that too. However, wouldn’t this be much easier to do with .svg?

4

Here is the Hype doc with all the resources

HUDWHEEL.zip (1.5 MB)

5

Looks like ralphiedee is taking about each ring edge..

How do you do that,
I have never played with them let alone know how to make one.?

7

Start a timeline on mouse click or roll-over
Or copy parts and play with opacity.

8

The problem with that ( I had tried it with saturation) is the images are in rects. Therefor some will overlap and trigger early or late.

9

As you can see this is a challenging situation when I read this could be done with an .svg I’m not understanding. All I know is in Hype you have to select the button element which is quadrilateral. The button CANNOT be skewed or shaped into the proper size because there are curves in the sliced circles. I was wondering if there is a way to make a shape into a button in Hype?

I would only need it to be in the shape of each slice so there are 5 circles I believe? So one button shaped like one slice per circle then I can make that shape invisible and place right over the image.

I was really hoping to use Hype for this and hope there is a way to do this as its a snap if I had to do this in Flash but no such luck anyone with any experience in doing this in Hype?

R

10

Make one slice for each ring in a drawing app. like Adobe Illustrator, import them as an image and you can use them as a button. Use the timeline and mouse options.

11

I'm not clear on what you want to do here.

  1. What do you mean by "slice"?

  2. Does it have to be a "Button"?

12

I think I understand what they mean and also want to know if it can be done- so for example, if i had a rainbow image and i wanted that rainbow image to be a symbol where i can add an ‘on click’ action… when you convert to a symbol or button the bounding box for the symbol or button is a rectangle around the rainbow shape, meaning that if you click on the blank space beside the rectangle you are still clicking on the symbol/button, but I want to know how to make it so the symbol/button can only be clicked if the mouse is inside the rainbow shape alone. not the bounding box

13

Hi Katie, again :smile:

May I suggest a new post if you need help on a particular project but if this is for information …

I believe the discussion here was gearing towards creating SVG’s to accomplish the goal.

If you create an SVG with paths to map a shape you can give those “paths” an ID and then create an onclick action using the specific ID’s. for example …

<path id="area1" fill="#467..."

var area1 = document.getElementById("area1");
area1.onclick = function () {
    /// whatever action you need. hypeDocument.startTimelineNamed.... etc
}

this way the path (shape of your image) can be clickable.

Hope this helps!

D

2 Likes
14

and thanks for this! its exactly what i wanted to hear and will come in very useful for me, I’m wondering though how to get the paths recognised in hype, I have created an svg in illustrator using paths and saved it as an svg and imported into hype but it just imports as a whole image with no definable paths, sorry to be a pain!

15

• Create an element
• goto Edit->Edit Element’s innerHTML
• then paste the .svg code into the element. (to get the code open the .svg in your favourite text editor)

I’m not sure if the code is already in your svg import. Check the element’s innerHTML (as above) to see if it’s there.

D

16

ok Ive pasted the svg code into the elements inner html, would you be able to tell me the next step in the process to giving the paths an id? as i can’t find the paths…describe it like you’re telling a stupid person if you can :slight_smile:

17

can you post the .svg?

D

18

svg-help.hype.zip (16.1 KB)

19

Hi

You will find the <path> tag inside the .svg code. then you just put in an ID. id="..."

Then you create a new function on scene load and place in your click code, etc.

D

svg-help-edited.hype.zip (19.5 KB)

3 Likes
20

thank you so much :slight_smile: