Creating a splash screen - An easy method

[rodo...@gmail.com]

Hey guys, I have used this forum a lot asking questions and not fully contributing to the cause. As a result, I would like to play it forward with this tip/tutorial.

For this, we use the App Inventor 2 and create multiple splashscreens on AI screen1. You will need a single clock to get this done (rather than the multiple suggested elsewhere - https://groups.google.com/forum/#!searchin/mitappinventortest/splashscreen/mitappinventortest/ohK67Vr3Gro/unHWUn9inI0J)

For this example, lets have 2 splashscreens and then a menu screen. This will be done with just screen1 of the AI project.

1. First thing to do is add 3 layouts to the project, I use vertical arrangements so i can have the components sit on top each other
   
2. Rename them how you like, I normally use Splashscreen1, Splashscreen2 and Menu
   
3. In splashscreen1, drag all the components you want to show in it. I use an image component to load and image file in (image1)
   
4. Do the same for splashscreen 2 and menu, keep in mind that the menu screen should be what the main screen that contains your control buttons, etc
   
5. Add a clock component (leave the properties as default)
   
6. Go to the blocks editor and add the screen.initialize block
   
7. Add the following blocks
1. "Set clock.interval to" and connect a math block with a number like 5000 (for a 5 second fire speed)
2. "Set clock timer enabled" to true
3. Then set splashscreen1.visible to true, splashscreen2.visible to false and menu.visible to false
8. Add a clock.timer block and add the following if else statement
1. If splashscreen1.visible equals true then set splashscreen1.visible to false, splashscreen2.visible to true and menu.visible to false
2. Elseif splashscreen2.visible equals true then set splashscreen1.visible to false, splashscreen2.visible to false and menu.visible to true
3. Elseif menu.visible equals true then set clock timer enabled to false

So in recap, when you open the app, it will display only the components in layout1 then after 5 seconds, display only the components in layout 2, then after another 5 seconds, display the components in menu and the clock stops firing allowing the app to stay on this layout.

You can be creative with the splashscreens by adding sound which fires with each layout or you can try the webget function for internet enabled apps and load an animated gif with the webviewer component. Hope someone found this helpful.

[Keacey]

This is really very helpful. And the steps are really easy to follow through. Thank you.