Timeline scrubber

1

Hi,

New Hype user here. Coming from Flash and Actionscript. I’m trying to create a time line scrubber for a pupil dilation animation.

I’d like to to create something similar to http://tumult.com/hype/gallery/LakeMead/LakeMead.html. Are there any online tutorials for creating this? I don’t know Javascript. I’d also be willing to pay a freelancer. I’ve created the animation on the timeline, all I need now is to create the scrubber. Thanks for any help!

Steve

1 Like
2

Hi Steve (@SteveB)

What you need to do is pay me a million dollars!! … I’m kidding :smile:

Create a timeline for your Slider (make it the same length as your timeline you want to control),
Animate the ellipse on the slider left to right.

Then with the ellipse on your slider selected make this draggable by choosing Actions->On Drag->Control Timeline and restrict it to horizontal and uncheck continue after drag.

Then in the same Actions inspector choose another On Drag action but this time choose Javascript->New Javascript…

In this function you want to write something like the following (note this is pseudo code, replace the values with your own)

var time = hypeDocument.currentTimeInTimelineNamed('slider-timeline')
hypeDocument.goToTimeInTimelineNamed(time, 'timeline to control');

If you want to PM me you can. I’ll send you a message.

3

I tried your instructions and it works indeed @DBear . Great. I was wondering how to accomplish this too.
One question. How can you let the slider be synchronised with the cursor. It now is going a bit faster than my cursor slides.

Slider.hypetemplate.zip (13.7 KB)

4

Try reducing the speed, above the option to continue after timeline.

I find a speed of 55% is almost perfect. :wink:

Or increase the time in the timelines.

2 Likes
5

Awesome! Thank you so much!!!

Steve

6

Thanks from me too!
I’ll try to finetune the speed.

7

Is there a way to make the a slider responsive? When I resize my browser window the scale for the slider gets all screwed up and does not follow my mouse.

8

Try changing the transition from ease in out, to linear. I found that helps.

2 Likes
9

Hey guys. I have followed the instructions here and come up with a semi working prototype. However when dragging the timeline scrubber it is not fluid and I believe provides a pretty bad UX. The mouse quickly goes beyond the button and you have to keep redragging it to get to the end of the timeline. I have adjusted the speed and tried everything I could think of. Any help would be appreciated. <a class=“attachment”

href="/uploads/db2156/original/2X/c/c8afaa50e7a871905b464a512426dbb852622b65.zip">egypt-sinai-2015.hype.zip (1.7 MB)

10

Hi Peter!

The following thread might prove useful for You:

2 Likes
11

I found a better method to fix this! :wink: I will post it soon!

2 Likes
12

Thanks Im reading through other posts right now it seems very complicated for something that should be easy lol

13

the flex slider method you presented in the other thread doesnt work for this instance. I followed the steps and tried it but it doesnt seem to work. I think because I have multiple lay outs and need this to be responsive. I dont know.

14

Well, in the end it's a bug, they will solve it in the next release I hope...in the meanwhile at least we've a workaround: I just posted the version 2.0 :wink: I spent many hours to build it and it takes a while to understand the logic and how to integrate it into a project! Hope you can find it useful! :smiley:

2 Likes