Splash screen

Time to move the videos aside (literally) and create the splash screen.

Go back to the code that created the PageComponent and give it an x property equal to Screen.width.

# Carousel for the 4 video pages
page = new PageComponent
    size: Screen.size
    scrollVertical: no
    x: Screen.width

This will place the PageComponent (and the pages in it) just off the screen.

You can now add these images: splash_screen.png and spinning_wheel.png.

Make splash_screen take up the width and height of the screen, just like the videos.

The spinning_wheel should be bigger on an iPhone 6 or higher. Dividing Screen.width by 3.07 will give it the correct size for both a 4.0″ and 4.7″ screen (and probably larger screens as well). And we use a similar calculation with Screen.height to set the wheel’s y position.

The full-screen image, splash_screen, should be spinning_wheel’s parent.

# Splash screen
splash_screen = new Layer
    size: Screen.size
    image: "images/splash_screen.png"

spinning_wheel = new Layer
    size: Screen.width / 3.07
    image: "images/spinning_wheel.png"
    x: Align.center
    y: Screen.height / 2.84
    parent: splash_screen