Looking for pointers on how to achieve rotation depending on different click areas

1

Hi everyone,

I have a question that hopefully someone may be able to help with…

In the attached image, you will see that I have a wheel that I would like to rotate to a marker when a segment is clicked on. The marker would then change colour to highlight it and the information in 2 boxes would update to match the subject of the segment clicked on.

I thought I could do it with multiple scenes, but then realised that it would have to be a lot of scenes to accommodate the updated position of each segment after being clicked.

If anyone has any thoughts on the best way to go about this I would really appreciate it.

Best,
Craig

2020-06-04_10-29-20
2020-06-04_10-29-201024×640 117 KB

2

On the fly example of a timeline with a small bit of JS.

Use vector shapes as buttons over the segments.
One key thing is if a vector shape is set to background colour none in the UI, when you click in the transparent area the click will pass through. So the trick is to set a color and then use the colour picker’s opacity slider and set it to 0 (zero)

Screenshot 2020-06-04 at 13.07.12

Each segment has a data attribute indicating it’s time in the timeline. 0-7s

The timeline does the rotation on the group.

when we click. we run a function

	hypeDocument.customData.check =  Number(element.dataset.seg) 
	 
	hypeDocument.continueTimelineNamed('rotate', hypeDocument.kDirectionForward, false)

The timeline also has timeline actions that fire at the natural pause points.

These actions run a function to check the timeline time against the now stored segment number.

	if (Math.floor(hypeDocument.currentTimeInTimelineNamed('rotate')) == (hypeDocument.customData.check ) ){
	
	hypeDocument.pauseTimelineNamed('rotate')
	} else {
	
	hypeDocument.continueTimelineNamed('rotate', hypeDocument.kDirectionForward, false)
	
	}

rotating disc.hype.zip (116.0 KB)

3 Likes
3

Another method for doing it without code, would be to use Relative Timelines. Basically each button would have a timeline set to use relative keyframes that will rotate to the spot with the marker and change the background color at the end of the rotation. It would also have keyframes which change back the rotation color of all the other wedges.

3 Likes
4

Hi Mark,

Thank you so much for taking the time to explain how all this works, and providing a sample file for me to study and replicate.

I am working on a prototype based on your pointers and will post what I come up with here once complete.

Many thanks again for your valued support.

Kind regards,
Craig

1 Like
5

Hi Jonathan,

I will definitely look into using Relative Timelines. After looking at the examples, it kind of makes sense, but I really want to try and get my head around it all, so I will try and replicate my project this way too.

Cheers,
Craig

2 Likes
6

Relative timeline are timelines that take the current value as a starting point. Only the end keyframe is absolute. Powerful concept.

2 Likes