Note: This file is adapted from a demo about controlling video timeline by @jonathanhere.
The following overview gives You the general layout of things. The “Demo” file itself should then be mostly self-explanatory.
Over View:
The “Scrubber Group” controls two timelines:
• “Scrubber” timeline: The “Thumb” element on the “Slider”.
• “Element Move” timeline: Moves the “Element” circle in correspondence with the “Thumb”.
You will notice that the distance moved is not the same for the “Element” and the “Thumb”.
While both timelines are the same duration (2 seconds) - the “Left” property of the “Element” is set to move much farther in pixels (“Left” property) in this amount of time than the “Thumb”.
By adjusting the “Left” position of the “Element” at the 2 second mark You can create a much shorter or longer range in relationship to the “Left” position of the “Thumb” at the same point in time… i.e. the sliding range.
It works for me! It is really very important to pay attention to the relationship between the width of the slider and time: 100px=1 sec. Also it's need to set "Linear" effect instead of "Ease Out" and "Ease In" to the knob!
Now I need to make my slider more complicated, can you help me with that?
I need setup these things:
The user cannot continue forward in the webpage if he has not fully dragged the slider to the end of the line;
After the user successful reach the end point of the slider, then the webpage automatically move down with 200/300 px with ease out effect;
If the users let down the slider knob somewhere in the middle of the line them the knob goes back to the start point, again with ease out effect;
Can I set sound effect when the knob reach the end of the line?
To clarify this point since there's not a mechanism in the document currently: do you want to restrict moving on until the slider has moved to the end, or do you want to always be able to continue forward (and if so via what mechanism)?
You can add a timeline action at the end of the scrubber timeline to start an additional timeline or run other actions, like playing a sound.
If you chose "continue after drag" on the On Drag actions, it can snap back if it is at less than 50% done, and will snap forward in other cases.
Otherwise you'll need a little bit of JavaScript to determine if you want to snap back; this would be an extra action on your On Drag handler:
if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
if(hypeDocument.currentTimeInTimelineNamed('Scrubber') != hypeDocument.durationForTimelineNamed('Scrubber')) {
hypeDocument.continueTimelineNamed('Scrubber', hypeDocument.kDirectionReverse);
hypeDocument.continueTimelineNamed('Element Move', hypeDocument.kDirectionReverse);
} else {
/* optional -- add code here if you want to do something on completion */
}
}
This snapback will be slow though, so you may either want to change the timeline duration (and adjust the speed percentage in the on drag handler to match those changes), or do another timeline that is faster/snaps back.
Yes, you can use the play sound with the timeline action suggested to solve point #2 or trigger something in the else block in the code above.
I need to create a long page where there will be such sliders in several places. But they will tear the page into separate, smaller pieces. When the user reaches a slider but does not drag it all the way, he should not be able to proceed to the next part of the page, ie. to scroll down. Only when he slides the slider successfully, then the ability to scroll further will be unlocked.
Yes, how can I do that? Where can I find lesson about it?
"Continue after drag" is very cool option, but I'm still wondering how can I set this breaking point between snapping back and continue straight to be for example on 80% not 50%?
Maybe I can do that with the code you mentioned but I didn't understand where to put it and how to control it.
if a document is longer than the viewport it'll be scrollable. the easiest way to disable this is to set the body to overflow hidden, but i guess it'll be kind of ugly cause the scrollbar will appear and disappear.
you'd be better to go with scenes to enable progress ...
Instead of saying != (not equals), you can test to see if it is greater than the duration multiplied by a certain amount like 0.8. The new line would be: