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?
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)
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;
}
}
}
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?