I am creating an app, need help with scrolling please


(Xin Guo) #1

Hi I am new to Hype3, I want to use Hype3 to do an interactive prototype for my app design project.
However, I can’t find a proper way to do scroll action in iPhone. Like the natural way of using finger to scroll down content.

<img

And if I want to slide “Buy it again” bar and “What’s on sale” bar, what should I do?

Thank you thank you.


(Mark Hunte) #2

It may be difficult to find a way to have one scene do it all.

You can control a timeline with drag actions. So create a timeline for example Scroll up in scene one.
And in scene 2 create two timelines , one for each row to scroll across.

Some one may have a better way/idea but here is a simple example.
ScrollAppTest.hype.zip (1.2 MB)


(Xin Guo) #3

Thank you for the prompt reply Mark! The example is really thoughtful and helpful, I copied what you did in the exmaple it works nearly perfect. :grin:


(Mark Hunte) #4

I had a play with this and have it working in a single Scene.

I use some Javascript to determine the drag direction. The code is pretty simple.

		//console.log(event.hypeGesturePhase);
	//console.log(event);
//console.log(	event.hypeGestureXPosition);
//hypeGestureYPosition


/*   
********************************************************************************

(Note: Notice the return command at the end of each if clause for the timeline actions.

If you want a diagonal type Touch Drag action removing the Returns give something similar)

********************************************************************************
*/


var image = hypeDocument.getElementById('image');



/*
*******************************************************************************
 we look for the drag gesture start
*******************************************************************************
*/
if (event.hypeGesturePhase == "start" ){
/*
*******************************************************************************
 we get the X &  Y  of the drag touch position. Where your finger started the drag.
*******************************************************************************

*/


window.startXPosition = event.hypeGestureXPosition;
window.startYPosition = event.hypeGestureYPosition;

//console.log(image.style.top);
//console.log(image.style.left);
}

/*
*******************************************************************************
 we look for the drag gesture end
*******************************************************************************
*/
if (event.hypeGesturePhase == "end" ){

/*
*******************************************************************************
 we get the X &  Y  of the drag touch position. Where your finger ended the drag.
*******************************************************************************
*/



window.endXPosition = event.hypeGestureXPosition;
window.endYPosition = event.hypeGestureYPosition;


 
 /*
*******************************************************************************
   We deduct  the end X position from the start X position. If we have a + greater than 30px left we 
 scroll left -right
*******************************************************************************
*/
 
if ( (window.endXPosition  - window.startXPosition ) > 30 ){

 /*
*******************************************************************************
we want to limit trying to go beyound the left edge and looping the timeline to the start.
*******************************************************************************
*/

  if ( parseInt(image.style.left) < 3   ){
hypeDocument.continueTimelineNamed('scrollAcross', hypeDocument.kDirectionForward )
 
 return;
 }
}

/*
*******************************************************************************
 We deduct  the end X position from the start X position. If we have a - greater than 30px left we 
  scroll   right - left
*******************************************************************************
*/
 
if ( (window.endXPosition  - window.startXPosition ) < -30 ){


/*
*******************************************************************************
 we want to limit trying to go beyound the right edge and looping the timeline to the start.
*******************************************************************************
*/
 if ( parseInt(image.style.left) > -349    ){
 
 
hypeDocument.continueTimelineNamed('scrollAcross', hypeDocument.kDirectionReverse)
return;
 }
 
}
 
 /*
*******************************************************************************
   We deduct  the end  Y position from the start Y position. If we have a + greater than 30px left we 
 scroll down
*******************************************************************************
*/
 
if ( (window.endYPosition  - window.startYPosition ) > 30 ){



/*
*******************************************************************************
we want to limit trying to go beyound the top edge and looping the timeline to the start.
*******************************************************************************
*/

 if ( parseInt(image.style.top) < -118  ){
hypeDocument.continueTimelineNamed('scrollUp', hypeDocument.kDirectionReverse)
 return;
 }
 
 
}
 
 /*
*******************************************************************************
 We deduct  the end  Y position from the start Y position. If we have a - greater than 30px left we  
 scroll Up
*******************************************************************************
*/

if ( (window.endYPosition  - window.startYPosition ) < -30 ){

/*
*******************************************************************************
//-- we want to limit trying to go beyound the bottom edge and looping the timeline to the start.
*******************************************************************************
*/
 
 if ( parseInt(image.style.top) > -608  ){
hypeDocument.continueTimelineNamed('scrollUp', hypeDocument.kDirectionForward)
 return;
 }
}

}

SlideTestFunction-1.hypetemplate.zip (571.5 KB)

(Note: Notice the return command at the end of each if clause for the timeline actions.

If you want a diagonal type Touch Drag action removing the Returns give something similar)


#5

That’s really cool! Would it be possible to have the scrollAcross work with being able to normally scroll down? Or just in a way that the up/down animation stops at the moment the drag stops, and doesn’t continue the timeline?


Scroll right and left, start in middle (drag timeline?)
(Mark Hunte) #6

I just did a Slight update.

I had forgot to set the scroll up top max settings to the correct number. it should be 118 I had it at 120

A quick explanation:

When the image is first loaded it’s Top Property is 118 px and it’s Left Property is -349 px.

We used this in if clauses to get the current Top & Left properties after a drag ends.

We then only move the image Down if the current Top property is less than 118 or Up if it is greater than -608

We only move Right if the current Left is greater than -349 or Left if the current Left is les than 3

So if you adjust the image position you need to make sure these numbers are correct.


Can you explain a bit more on what you mean on your last post