Adding the page indicators
There’s one last thing missing on the video pages: the indicators that make it clear that there are four pages.
We’ll start with the hollow ones which are always visible. Drag in the
dot_hollow = new Layer width: 16 height: 16 image: "images/dot_hollow.png"
height are equal, we might as well set both of them to
8 using the
dot_hollow = new Layer size: 8 image: "images/dot_hollow.png"
The dots are all equal just with different positions on the x-axis, so we can create them collectively in a single
In the loop, we will place each dot 16 points farther to the right (there are 8 points of space between them). That’ll be the easy part.
Figuring out where to put the first one is a bit harder. The code for it looks like this:
# Page indicators amount = 4 dotWidth = 8 spaceWidth = 8 allDots = amount * dotWidth allSpaces = ( amount - 1 ) * spaceWidth allDotsAndSpaces = allDots + allSpaces first_x = Screen.midX - ( allDotsAndSpaces / 2 )
I’ll explain the calculation:
- Each indicator is
8points wide, so
allDotsholds the combined width of all four of them.
- There are four indicators, but only three spaces between them (each also
8points), that’s why
allSpacesis calculated with
amount - 1.
- These two variables together make
- So now we grab the middle of the screen:
- And subtract half the width of
That last variable,
first_x, now has the
x position for our first indicator. And every consecutive indicator is placed 16 points (
dotWidth + spaceWidth) farther to the right.
for i in [0...amount] # empty page indicators dot_hollow = new Layer size: 8 image: "images/dot_hollow.png" x: first_x + ( i * (dotWidth + spaceWidth) ) maxY: Screen.height - 50 parent: page
The range expression,
[0...amount], means: “the numbers from
amount itself). So the
for…in loop will run four times, with
The bottom of each dot,
maxY, should be
50 points from the bottom of the screen (
And by making
page their parent (instead of
page.content), the dots will not scroll but hold their position.
Next up: The solid white dots. Drag in
Since there are also four, and they’re placed in the same spots, we can use the same loop and values:
for i in [0...amount] # empty page indicators dot_hollow = new Layer size: 8 image: "images/dot_hollow.png" x: first_x + ( i * (dotWidth + spaceWidth) ) maxY: Screen.height - 50 parent: page # filled page indicators dot_filled = new Layer size: 8 image: "images/dot_filled.png" x: first_x + ( i * (dotWidth + spaceWidth) ) maxY: Screen.height - 50 parent: page
The solid dots become visible when the user advances through the videos.
By keeping them in an
allSolidDots array, we’ll be able to refer to the dots that need to appear at a given time.
Create the array before the start of the
allSolidDots =  for i in [0...amount] # empty page indicators dot_hollow = new Layer size: 8 …
At this point, we can also hide the solid dots by adding
opacity: 0 to their properties.
We add an
"active" state to every solid dot; its single property
opacity: 1 will make the dot fade in.
The default animation time of one second is too slow, so we make it half a second.
# filled page indicators dot_filled = new Layer size: 8 image: "images/dot_filled.png" x: first_x + ( i * (dotWidth + spaceWidth) ) maxY: Screen.height - 50 parent: page opacity: 0 dot_filled.states.active = opacity: 1 dot_filled.animationOptions = time: 0.5 # Store solid dot in the array allSolidDots.push dot_filled
And of course, every instance of
dot_filled is added to the
The first one will always be visible so we can make it
"active" right now.
Add this line under the
# Make first page indicator active allSolidDots.stateSwitch "active"
We’ll trigger the state changes on the other indicators later, after adding the music. (You’ll see why.)