Make Simple Splash Screen With MIT Inventor Framework


splash screen

splash screen

2splash

This is an alternative editor/application to develop a mobile application for android, it called App Inventor from MIT.

This is a step to build your first application in app inventor, example splash screen:

  1. Open your browser and fill the url with http://ai2.appinventor.mit.edu/, if you don’t have an account, you must register first.
  2. if already done, you can start your project, with the component in web dekstop.
  3. in screen 1, you can drag a horizontalarrangement to the screen in the middle. the horizontalarrangement is coming from the widget is name layout.
  4. Next, you can configure the horizontalarrangement’s properties in right coloumn is width and height. Width fill with “Fill Parent” and height fill with “Fill Parent”. It purposes to synchronize the width and height from the emulator. Don’t forget to uncheck “Visible” option.
  5. After finish, drag an image icon from left widget, it names “User Interface”, the widget content one of icon is image. that can fill image, and drag it to screen in the middle. the structure of the component is automatically inherit under horizontalarrangement.
  6. An image must be configured, because later when the splash screen shows up, an image shows first. Click the image icon and configure the image from the right widget. Fill the width with “Fill Parent” and height with “Fill Parent”.
  7. Then, make a canvas. Canvas can take from the left widget is name “Drawing and Animation”, drag it to the screen above the horizontalarrangement.

    Canvas

    Canvas Splash

  8. You can configure that image like my preview image (above)
  9. After that, drag clock form Sensor widget (left widget) and bring it to screen. Then set your clock for timer splash screen,

    clock

    clock

  10. Finish clock’s configuration, then step to Script editing. In app inventor, the script is modeling like block diagram. Click block’s button is contained in the upper right corner.

    block button

    block button

  11. In short, i will show you the block diagram that can make splash screen work.

    all block diagram

    all block diagram

  12. Thanks for attention, next time i will show you another tutorial from app inventor.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s