RSS

3 How to: Making a Splash Screen

22 Dec

Most apps have a splash screen that loads before the app’s working screens and the splash screen can be used to describe the app, show an advert or just look cool. The splash screen can also serve as an About Box that shows whether the user has registered the app or not.

This post will show how to create a splash screen like the one below that will be visible for 10 seconds or the user can skip by touching the onscreen okay button.
Splashscreen on Android G1

A

Screens and Cards
Before creating our splash screen here is a brief overview about screens in HAC apps.

We use the terminology card to describe a screen in a HAC app. A HAC app is like a deck of playing cards with each card having its own set of controls. Only one card may be visible at a time and the app can move between cards using one of several types of GotoCard command.

The programmer doesn’t have to worry about displaying the controls as they are defined when you create your card inside the HAC designer. Furthermore the card size can be adjusted to automatically fit the screen so the programmer doesn’t have to worry about scaling etc.

The first card in any HAC app is called the Home Card (card 1) and as it always loads first it makes sense to use this card as your splash screen. As the app loads it is possible to immediately jump to another card but more on this later.

BR

Splash Screen
This splash screen will be on the Home Card and will lead to a second card that implements your app’s functionality. At any time the user can return back to the splash screen using a menu option.

Its a good idea when making a new project to create at least two cards, your Home Card splash screen and the second card for content.

1. Create a new project and give it a name you like.

Use the File menu and option New.

Create a new project

BR

2. Create a second card using the New Card button on the toolbar.

Creating a second card

3. Naming a card

You don’t have to rename a card but if your app has more than two cards it easier to recognise them in the toolbar card list. The picture above shows where a card’s name can be changed.

4. Filling in the Splash Screen

Add the command to preload the backdrop image by opening the Script Editor and in the MainCode’s Start Up section add the following command:-

CardLoadImage(1,'Local:splash.jpg',1)

The backdrop image is just an old one from the HyperNext Neural Network analyser project and the CardLoadImage command stretches it to fit the screen. Note, it needs to be placed in the project’s Local folder.
Splashscreen backdrop image

A

To add a text to a card just use a Text control and fill in it’s text value with something like “Our Simple SplashScreen”


To add a button to a card just use a Button control. Set the button’s text value to something like “Okay” and from the toolbar set its Goto target to card 2.

Adding a timer to  a card is similar to adding any other control, just select the timer from the Toolbar, use the New Timer button, then click on the card to place it.

This timer causes the app to go to the second card and in order to do this it needs some code. The code is simple, just one command, “GotoCard 2”. With the timer selected open its script and add this command to it:-


GotoCard 2

By default when a timer is created it will be in the off state. To activate a timer the TimerSetMode command is used. We need the timer to start counting when the home card opens so the TimerSetMode command should be placed in the card’s handler script. To do this, select the card and open its script then enter this command into it:-


TimerSetMode(1,1,10000)

5. Second Card
Just add some text or even leave it blank.

6. Menu option
We now need to modify the default About menu option so that it jumps to the home card. Open the Menu Designer and it should appear as in the image below. Next, select the About item, its in the yellow box, then click the About item as highlighted in blue, then open the Script Editor  using “Edit Script” button and enter the GotoCard command:-


GotoCard 1

Now close the Script Editor and the project should be ready to run or build.

MenuDesigner

BR

Running the Splash Screen Project
The picture below shows the built app running on an Android G1 phone:

Splashscreen on Android G1

BR

Overriding the Splash Screen
Some apps such as a file utility might not need the splash screen to show at startup as it could irritate the users. In that case you could either put your splash screen on a later card and let the Home Card contain the functionality or else have a GotoCard in the Home Card’s open handler so the splash screen flies by.

BR

Roundup
By now you should have an idea for making a splash screen for your app. Get into the habit of leaving the Home card free for use as a splash screen. Some apps don’t need a splash screen so in that case you could use one of the later cards for  info about your app. The complete project is available here: Splashscreen.zip

 
Leave a comment

Posted by on 22/12/2011 in How-to

 

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

 
%d bloggers like this: