Steering Wheel Turning Left or Right?

Using JavaScript with Hype
1

I currently have an opening Scene that completes and goes to another Scene, then jumps to 4 seconds in the timeline of that Scene. There is a steering wheel, if they drag it left it drags the timeline left 4 seconds, if they drag it right it drags the timeline right 2 seconds. The problem is that if the User lets go of the wheel when turning left before the 4 seconds of going left on the timeline are finished the animation doesn’t complete despite the fact that “Continue After Drag” is clicked, it works going Forward as that is the direction in the Drag command, but not in reverse.

SO. If I want to do it in JavaScript how do I do it? In other words I need a formula that says; what is the X at the beginning of the Drag? what’s the X now as I drag? If X now is less than X at the beginning then go to Timeline “steerLeft”; if X now is greater than X at the beginning then go to Timeline “steerRight”. That eliminates needing to go backwards in the timeline. I know I use the command, op = event['hypeGestureXPosition']; to get the position when the user originally begins the Drag command, how does it update and react from there and how do I code it?

Thanks for any help on this!

2

What is “X”? a number? A coord? I’m assuming number.

Can you share the doc? would make it easier to see what’s going on. I understand that you’ve taken the time to explain but it would still help.

3

X is the X coordinate of the mouse position. My file is torn apart right now, will send when I can. Thanks for the help.

4

Hi @gthroop

In Hype’s API there is an event that you can capture on drag which you’ve already mentioned.

event['hypeGestureXposition']

This event also contains the phases which the drag goes through. Start, Move, End and Cancel.

If you run a function at the same time as your “Control Timeline” you can record your “X” coord at the different phases and run an if statement to see if the position is less than or greater than it’s start. (Like you wanted). Here is the code to run:

phase = event['hypeGesturePhase'];
	
op = event['hypeGestureXPosition'];
	
if (phase === "start") {
		
	startPos = op;
	
}
	
if (phase === "end") {
	
    if (op < startPos) {
	hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse, false)
    }
		
    if (op > startPos) {
	hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false)
    }
	
}

As you can hopefully see. At the start of the phase we record the “op” (X position). Then at the end of the phase (when user lets go of the button after the drag) we check for a condition. If “op” is less than the start position continue the timeline in reverse. If “op” is greater than the start position continue forward. If you run this function in line with the control timeline then you will still get the control effect and when the user lets go it will go in whichever direction according to the conditional statement.

Hope that helps!

1 Like