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.png file.

dot_hollow = new Layer
    width: 16
    height: 16
    image: "images/dot_hollow.png"

Since width and height are equal, we might as well set both of them to 8 using the size property.

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 for…in loop.

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 8 points wide, so allDots holds the combined width of all four of them.
• There are four indicators, but only three spaces between them (each also 8 points), that’s why allSpaces is calculated with amount - 1.
• These two variables together make allDotsAndSpaces.
• So now we grab the middle of the screen: Screen.midX…
• And subtract half the width of allDotsAndSpaces from it.

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 0 to amount” (excluding amount itself). So the for…in loop will run four times, with i being 0, 1, 2 and 3.

The bottom of each dot, maxY, should be 50 points from the bottom of the screen (Screen.height).

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 dot_filled.png.

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 for…in loop.

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 allSolidDots array.

The first one will always be visible so we can make it "active" right now.

Add this line under the for…in block:

# Make first page indicator active
allSolidDots[0].stateSwitch "active"

We’ll trigger the state changes on the other indicators later, after adding the music. (You’ll see why.)