Control timeline with iPad Scrolling


(Wolfgang Wunderlich) #1

Hi there
I´m running the script of Bjarne Bülow, of surveylegend.com to move my timeline.
It works fine on MAC but not on iPads.
What do I have to change, to adapt this to iPad ?

function wheel2(event) { // other browsers
    		event.preventDefault();
    		if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
    			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
    		} else {
    			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)		}
    	}
    	function wheel(event) { // Firefox
    		event.preventDefault();
    		if (event.wheelDeltaY > 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
    			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
    		} else {
    			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)		}
    	}
    	window.onmousewheel = document.onmousewheel = wheel;
    	window.addEventListener("DOMMouseScroll", wheel2, false);
    	document.addEventListener("DOMMouseScroll", wheel2, false);

#2

Try formatting your code using the preformatted text using the code icon at the top (</>).

If that does not work, you can wrap the code in html pre tags. It is hard to read.


#3

Can you share a document? I edited your post to show code correctly.

(I selected your text and clicked this icon in the editor: )


(Wolfgang Wunderlich) #4

Hi Daniel & TutDoc
thanks for your help.
You´ll find the document here:

Sorry, I´m not so familiar with these procedures.


(Mark Hunte) #5

The code you are using does not take into account swipes.

You can add swipe event actions in the Scene Inspector the same way you added the call to your code with on sceneload

Add a Run Javascript to the Swipt left event and use a New function.

In the function add this code:

 if (event.type == "HypeSwipeRightAction"){
	
		hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
	} else if (event.type == "HypeSwipeLeftAction"){
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)		}

Now go back to the Scene Inspector and call the same function with Swipe Right


(Wolfgang Wunderlich) #6

Hi Mark,
thanks a lot for you´re reply.
It works fine, if you run it on a MAC, like MAC Book Pro, but as soon as I spin it via Reflect into an iPAD … no response on any swipes.
No swipe moves the timeline on a PAD.
Any idea ?

Thanks again,
Wolfgang


(Mark Hunte) #7

It does work on my iPad.

single finger swipe.

iPad- Kopie.hype 2.zip (870.7 KB)


(Wolfgang Wunderlich) #8

Mark,
let me find out, what I´ve done work.
you´re file also runs on my PAD.

Great help. Thank you so much.


(Wolfgang Wunderlich) #9

The Reflect console gives me an
ERROR: Script error. URL: L:0
and a black screen… as soon as I copy you’re script into the active file.
And even though, when I erase t again … remains that error so I have to change to my backup file.

Safari in MacBooks OS X still works.

EDIT:

OK, Mark,
I made everything fresh from the start … and it works.
Thank you so much for U´r help.
Wolfgang


(Wolfgang Wunderlich) #10

@ Mark

Is his also possible to make such swipes for use in vertical direction on iPad too ?
I´ve been trying a few combinations, but no success. How ever, I´m not experienced enough to make such changes on my own. Sorry, to bather you ones more.


(Mark Hunte) #11

Get the swipe Up and Down Actions to call the same Javascript.

And use this updated version: ( change what up and down does. )

	if (event.type == "HypeSwipeRightAction"){
	
		hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
		return;
	} 
	
	if (event.type == "HypeSwipeLeftAction"){
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)
			return;
			
					}
					
	if (event.type == "HypeSwipeUpAction"){
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)
			return;
			
					}	
					
	if (event.type == "HypeSwipeDownAction"){
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)
			return;
			
					}

On a side note the way you can find out what event to look for is to log it to the console.

When I wanted to get what the swipe event names were I hooked them up to a js function that would print the event details in the console.

console.log(event);

If I just want the event name I would use:

 console.log(event.type);

Type being the name of the event.


(Wolfgang Wunderlich) #12

Hmm, the difference ist just “Up” and “Down” thats, what I already guessed.
I+ve traed this before … but without any success.
The swipes didn’t work anymore at all.

I just changed the Js and started the scene anew and changes the the calls from left and right to up and down.
nada …
Js is not friendly to me.
But I keep on trying :smile:


(Mark Hunte) #13

Works here.

iPad- Kopie 2.hype.zip (860.6 KB)


(kerguelen) #14

Strange, your file won’t open, it says it’s been made with a newer version of Hype (mine is 3.5.1 - 524)


(Wolfgang Wunderlich) #15

Hmm, i have Version 3.5.1 (526) Professional Edition

@mark,
You´re zip version works here too.
I have to figure out, what I´m doing wrong in changing those commands.
I´m sure, its my fault.


#16

You may be trying to open it with the beta – make sure you’re using the non-beta version.