Need help with this! [solved]


(james koh) #1

I am trying to make some kind of mobile web magazine.
i want to move one wide image in single scene.
i can make it work so far but after putting on drag timeline action,
i can no longer use swipe left jump to nextscene.
can anyone help me with this?
here is a sample work.
widepages.hype.zip (24.0 KB)


(Warren Adams-Ockrassa) #2

I’m not 100% certain, but I believe what happens is that the drag function traps and overrides the user action, which is preventing the swipe from being registered.

With a button, for instance, the topmost button on the timeline traps the user click first, which prevents the click from passing along to other buttons lower on the timeline. I think something similar is happening with your drag action.

As for how to correct that … hopefully someone will have a good suggestion for you.


(Lucky) #3

you could use the hype event states on drag and do a transition event based on that. In this example it moves to the next scene when you swipe left(and on swipe right does the normal thing)
This isn’t solved yet but it’s a start, there may be a way simpler way
widepages.hype 2.zip (24.8 KB)
Code i did for the swipe

	if(event['hypeGesturePhase']=='start'){
 if(window.startInt==undefined){
 window.startInt = event.pageX 

 }
}
if(event['hypeGesturePhase']=='move'){
	if((event.pageX -window.startInt)>20 && window.onlyonce==undefined){
		window.onlyonce=true;
		console.log('right'); 
		hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushLeftToRight, 1.1)
	}
}
if(event['hypeGesturePhase']=='end'){
window.onlyonce=undefined;
}

20 is the distance gap where it figures out it’s a swipe right, if you make it <-20 it will work left instead of right


(james koh) #4

Thank you Lucky
it is working great.
but one more thing.
if i want to swipe left and right to jump next and previous scenes,
do i need to make another function with <-20 ?

i tried this but it does not work.

if(event['hypeGesturePhase']=='start'){
 if(window.startInt==undefined){
 window.startInt = event.pageX 

 }
}
if(event['hypeGesturePhase']=='move'){
	if((event.pageX -window.startInt)>10 && window.onlyonce==undefined){
		window.onlyonce=true;
		console.log('right'); 
		hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft, 0.3)
	}
}
if(event['hypeGesturePhase']=='end'){
window.onlyonce=undefined;
}


 else if(event['hypeGesturePhase']=='start'){
 if(window.startInt==undefined){
 window.startInt = event.pageX 

 }
}
if(event['hypeGesturePhase']=='move'){
	if((event.pageX -window.startInt)<-10 && window.onlyonce==undefined){
		window.onlyonce=true;
		console.log('right'); 
		hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushLeftToRight, 0.3)
	}
}
if(event['hypeGesturePhase']=='end'){
window.onlyonce=undefined;
}

(Lucky) #5

you can shorten that, but the issue here is once it gets to a second scene you need to tell it to go to the end of the scene to match second page right , right? Because if you do transitionLeftToRight or RightToLeft and then go to 3 seconds it will transition there and afterwords snap to the end frame. So I don’t know how to fix that. But apart from that bug

	if(event['hypeGesturePhase']=='start'){
 if(window.startInt==undefined){
 window.startInt = event.pageX 

 }
}
if(event['hypeGesturePhase']=='move'){
	//check frame
	//if 0 go left
	if(hypeDocument.currentTimeInTimelineNamed('Main Timeline')==0){
		//execute once 
		if((event.pageX -window.startInt)>20 && window.onlyonce==undefined){
		window.onlyonce=true;
		console.log('left'); 
		window.swapped='left'; 
		hypeDocument.goToTimeInTimelineNamed(3, 'Main Timeline')
		}
	}
	//if equals to lenght go right
	else if(hypeDocument.currentTimeInTimelineNamed('Main Timeline')>(hypeDocument.durationForTimelineNamed('Main Timeline')-0.2)){
		//execute once 
		if((event.pageX -window.startInt)<(-20) && window.onlyonce==undefined){
		window.onlyonce=true;
		console.log('right'); 
		window.swapped='right';
		hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft, 1.1)
		}
	} 
	
}
if(event['hypeGesturePhase']=='end'){
window.onlyonce=undefined;
}

Will do what you’re looking for, i passed window.swapped so that on the next scene you can do

if(window.swapped=='left'){
hypeDocument.goToTimeInTimelineNamed(3, 'Main Timeline')
}
else 
if(window.swapped=='left'){
hypeDocument.goToTimeInTimelineNamed(3, 'Main Timeline')
}

But again this will snap to frame 3 after the transition’s finished so I don’t know a way around it.
Checked out
http://hype.desk.com/customer/portal/questions/54937-jump-to-scene-at-a-specified-time-
And it didn’t help, but maybe that’s just old


(james koh) #6

thanks again, Lucky.
i will try it.