I noticed that some AIR apps on my iPad2 show their splash screen instantly, whereas others (Politifact, Neptune) show a blank black screen for 2-3 seconds before their splash screen. The latter are using the Flex framework, although this is not completely a Flex issue, but rather any AIR app that uses a Flash preloader. Interestingly, the excellent Machinarium app shows its “Amanita Designs” splash screen instantly, but then shows a blank black screen for 10 seconds (!) before showing the next splash screen.
A client’s app I am developing is using the Flex framework, so that is what I will be posting about.
In a Flex app, you specify a splash screen image like this:
Or, for a more advanced method, you can extend spark.preloaders.SplashScreen as described by Jason San Jose’s article in order to provide a different splash screen based on dpi, orientation, or device.
However, if you want an instant splash screen on iOS, you have to make use of their launch image method. For my client’s iPad app, it meant creating Default-Portrait.png and Default-Landscape.png files as described in this Adobe documentation on iOS launch Images. You place those images directly in the src folder of your Flex mobile application.
So having those launch images results in an instant splash screen, but it will be followed by a blank black screen if you do not also specify a splash screen image in Flex (or have some Flash preloader display a splash screen image, which is what the non-Flex Machinarium app is lacking).
My single splash image was 1280 x 1280 in order to support both iPad and Android in both orientations. I made the Default-Portrait.png 768 x 1004 and the Default-Landscape.png 1004 x 768 as specified in the Adobe documentation above.
After doing this, however, I noticed that my launch image and my splash screen image were not positioned exactly the same. This produced a noticeable jump of 20 pixels when the launch image became the splash image.
When doing a search, I found this documentation that states:
“For an application that is not full-screen, the top 20 pixels of the default image art are ignored. The iPhone displays its status bar over the 20 pixel-wide rectangle at the top of the default image. In a landscape-orientation application, this region corresponds to the left 20 pixel-wide rectangle of the Default.png file (which displays on the top in landscape mode). In a portait-orientation application, this region is the top 20 pixel-wide rectangle of the Default.png file.”
So what I had to do was open my 1280 x 1280 splash screen image, and clip it to 768 x 1024 (not 1004) at point 256, 118. Then save that as my Default-Portrait.png. For the landscape launch image, I clipped it to 1024 x 768 at point 128, 246.
That made it so that the launch image and the splash screen image were positioned exactly the same. The user could not see a difference as the app changed between the two. This removed the 2-3 seconds of having a blank black screen before the splash screen appeared.