How to create a scrolling group using a native scroller and the improved graphics architecture
The 'scrolling' layerMode can be used to good effect to cache scrolling group content. If a group is completely unadorned (no border, no scrollbars), then the engine will take the bounds of the group to be that of its contained objects and clip the rendering of those objects to the rect. In particular, it will be the unclipped content that is cached - thus eliminating redraw overhead for scrolling.
Create your group content
Create a new mainstack and add the content you want your scrolling group to contain. In this example we have used 3 images and 3 text fields.
Group the controls together and call the group 'gallery'.
Resize the group
Set the size of your stack, for this example I have made a stack that is 480 x 640. Resize your group, set the lockLocation of the group to 'true'.
Set the layerMode of the group
The engine determines what to cache based on the per-object layerMode property. This is one of static, dynamic or scrolling.
Scrolling applies only to group and is used where the group contains contents that will be scrolled so is ideal in this example.
set the layerMode of group "gallery" to "scrolling" Set the stack properties
To use the new 'accelerated rendering' feature we need to set some stack properties which control the accelerated rendering. The compositor properties are not persistent so they must be set in preOpenStack or preOpenCard.
on preOpenStack
if the platform is "iphone" then
set the compositorType of this stack to "opengl"
else
set the compositorType of this stack to "software"
end if
set the compositorTileSize of this stack to 32
set the compositorCacheLimit of this stack to (16 * 1024 * 1024)
end preOpenStack
Add script to allow scrolling
The group must handle scrolling by detecting touch gestures and setting the hScroll and vScroll properties of the group.
The basic method is
on mouseDown: record the scroll value of the group and postition of the touch
on mouseMove: calculate how far the gesture has moved horizontally and vertically, set the scroll values of the group
The contents of the group should be scrolled along with the gesture.
The "gallery" group script
local sScrolling
local sInitialMouseX, sInitialMouseY
local sInitialHScroll, sInitialVScroll
on mouseDown
## Allow the group to scroll
put true into sScrolling
## Record the initial touch position
put item 1 of the mouseLoc into sInitialMouseX
put item 2 of the mouseLoc into sInitialMouseY
## Record the initial hScroll and vScroll
put the vScroll of me into sInitialVScroll
put the hScroll of me into sInitialHScroll
end mouseDown
on mouseMove mouseX, mouseY
## If the screen is being touched then
if sScrolling then
## Calculate how far the touch has moved since it started
put mouseY - sInitialMouseY into tVChange
put mouseX- sInitialMouseX into tHChange
## Reset the hScroll and vScroll to follow the touch
lock screen
set the vScroll of me to sInitialVScroll - tVChange
set the hScroll of me to sInitialHScroll - tHChange
unlock screen
end if
end mouseMove
on mouseRelease
mouseUp
end mouseRelease
on mouseUp
put false into sScrolling
end mouseUpToggle accelerated rendering on/off
To see the difference when accelerated rendering is used add a button to the stack that switches it on and off.
on mouseUp
## Switch graphics properties on and off
if the label of me is "Off" then
set the label of me to "On"
if the platform is "iphone" then
set the compositorType of this stack to "opengl"
else
set the compositorType of this stack to "software"
end if
set the compositorTileSize of this stack to 32
set the compositorCacheLimit of this stack to (16 * 1024 * 1024)
set the layerMode of group "gallery" to "scrolling"
else
set the label of me to "Off"
set the compositorType of this stack to "none"
end if
end mouseUpTest scrolling
Set up the standalone application settings to build for your desired platform and test the stack.
The Example Stack
You can download the example stack from this url https://tinyurl.com/smf4frv
Thank you for the script for scrolling. My field is now scrolling perfectly.
I have another question for you, that is not related to this teaching. I cannot seem to find a tutorial or teaching on how to create a splash screen. I would like to make my first card my splash screen. How can I set it to automatically advance to next page after X number of seconds?
Is there anyway I can add a new page in front of page 1, or move a new page to be the first page?
Thank you,
Marilyn