Adding the ‘Swipe to continue’ coach mark

There’s one more item on the first video page: a coach mark that reminds the user to swipe. It appears after 10 seconds of inactivity.

Add the next file: Swipe_to_continue.png, and give it the following properties:

• A centered x position
• A maxY that’s 100 points from the bottom of the screen
• An originY of 1, because we will let it grow from its bottom center
• A parent of page_1

Swipe_to_continue = new Layer
    width: 400/2
    height: 115/2
    image: "images/Swipe_to_continue.png"
    x: Align.center
    maxY: Screen.height - 100
    originY: 1
    parent: page_1

Now make it half the original size by setting its scale to 0.5.

Swipe_to_continue = new Layer
    width: 400/2
    height: 115/2
    image: "images/Swipe_to_continue.png"
    x: Align.center
    maxY: Screen.height - 100
    originY: 1
    parent: page_1
    scale: .5

You’ll notice that it shrinks downwards. This happens because we’ve changed its transformation origin on the y-axis: the originY is now 1 (bottom) instead of the default 0.5 (center).

Okay, all set. We can hide the coach mark by setting its opacity to zero.

Swipe_to_continue = new Layer
    width: 400/2
    height: 115/2
    image: "images/Swipe_to_continue.png"
    x: Align.center
    maxY: Screen.height - 100
    originY: 1
    parent: page_1
    scale: .5
    opacity: 0

We now need two animations: one that fades-in Swipe_to_continue and grows it to its full size, and another one that does the reverse a few seconds later.

We’ll use Animation objects so that we can trigger them when needed.

The first one, showSwipeToContinue:

# Show ‘Swipe to continue’
showSwipeToContinue = new Animation Swipe_to_continue,
    scale: 1
    opacity: 1
    options:
        curve: Spring
        time: 0.7

The second animation, hideSwipeToContinue, brings it back to half the scale and zero opacity. It triggers with a three-second delay—you’ll see why in the next step.

# Hide ‘Swipe to continue’
hideSwipeToContinue = new Animation Swipe_to_continue,
    scale: .5
    opacity: 0
    options:
        curve: Spring
        time: 0.7
        delay: 3

We’ll trigger the ‘hide’ animation automatically when the ‘show’ animation ends. This way the coach mark will disappear again after having been visible for 3 seconds.

# Trigger “hideSwipeToContinue” when “showSwipeToContinue” ends
showSwipeToContinue.onAnimationEnd hideSwipeToContinue.start

You can test the animation by temporarily adding a tap event to page_1, like this:

page_1.onTap ->
    showSwipeToContinue.start()

You can delete this page_1.onTap -> event handler for now. Later on, we’ll trigger the animation with a timer.