Page 1 of 1

iPod Like Scrolling/Dragging Screen Example

PostPosted: Thu Oct 20, 2016 2:19 pm
by thomas
Storyboard provides a number of standard screen transition effects, however if you want to have some sort of an interactive screen transition then the standard screen transitions are not what you are looking for. Instead you will want to program in your custom behaviour using a series of animations, timers or direct event responses.

This example demonstrates how you can track the user input events at an application level and route them through a Lua handler that will detect a drag operation and start moving the screen's layers based on a set of pre-determined layouts. Your applications may have more than a single layer, but the concept will be the same.

The idea here is that we are globally tracking the press/release/motion events. Usually there would be some threshold towards the edge of the screen that would trigger the 'drag a screen behaviour'. To keep the example simple I have not done that, but there is a comment in the Lua script where this would normally occur.

Then as a drag is encountered, we look up what the expected left/right screen content would be and position the layers of those screens appropriately. As the user is dragging then we move the layer offsets accordingly. In my sample I am assuming a screen sequence of [Blue,]Red,Green,Blue[,Red] where you can continuously 'scroll' from one screen to the next. If you do not scroll a screen at least 1/3 of the width of the display, then there is no screen transition. If you scroll more than that then we identify the screen we want to switch to and immediately transition to that screen by generating an event.

When we receive the screen hide Storyboard event, or if the user doesn't scroll over far enough, we reset all of the layer content for the screen back to its 'origin' so that the display goes back to the way it was.

Hopefully this provides enough understanding of the mechanics so that you can create your own custom interactive screen transitions.
Screen Shot 2016-10-20 at 3.17.13 PM.png
Screen Shot 2016-10-20 at 3.17.13 PM.png (148.08 KiB) Viewed 4502 times