iOS Launch images
- Using "Default.png" variants
- Using "LaunchScreen.storyboard"

iOS Launch images

While the application is starting up, iOS shows a launch image that is visible until all the initial setup code is ready (i.e. your first line of AS3 code is being executed).

There are two ways to set up that launch image:

Using "Default.png" variants

For each iOS resolution you are supporting, you need a PNG with a specific name and size. The following small Ruby script can be used to generate empty images with the correct size and filename. (You need to have the ImageMagick tool convert installed.)

Note that you typically only need portrait OR landscape (just one of them), depending on your app's orientation. If your app supports both orientations, of course, you should provide both variants.

#!/usr/bin/env ruby
 
launch_sizes = {
  "Default~iphone" => "320x480",                          # iPhone 3GS
  "Default@2x~iphone" => "640x960",                       # iPhone 4
  "Default-568h@2x~iphone" => "640x1136",                 # iPhone 5, SE
  "Default-375w-667h@2x~iphone" => "750x1334",            # iPhone 6, 7, 8
  "Default-414w-736h@3x~iphone" => "1242x2208",           # iPhone 6+, 7+, 8+
  "Default-812h@3x~iphone" => "1125x2436",                # iPhone X, Xs
  "Default-896h@2x~iphone" => "828x1792",                 # iPhone Xr
  "Default-1242h@3x~iphone" => "1242x2688",               # iPhone Xs Max
 
  "Default-Portrait~ipad" => "768x1024",                  # iPad
  "Default-Portrait@2x~ipad" => "1536x2048",              # iPad Air
  "Default-Portrait-834w-1112h@2x~ipad"  => "1668x2224",  # iPad Pro 10.5"
  "Default-Portrait-1194h@2x.png" => "1668x2388",         # iPad Pro 11"
  "Default-Portrait-1024w-1366h@2x~ipad" => "2048x2732",  # iPad Pro 12"
 
  "Default-Landscape-414w-736h@3x~iphone" => "2208x1242", # iPhone 6+ Landscape
  "Default-Landscape-812h@3x~iphone" => "2436x1125",      # iPhone X, Xs Landscape
  "Default-Landscape-896h@2x~iphone" => "1792x828",       # iPhone Xr Landscape
  "Default-Landscape-1242h@3x~iphone" => "2688x1242",     # iPhone Xs Max Landscape
 
  "Default-Landscape~ipad" => "1024x768",                 # iPad Landscape
  "Default-Landscape@2x~ipad" => "2048x1536",             # iPad Air Landscape
  "Default-Landscape-834w-1112h@2x~ipad"  => "2224x1668", # iPad Pro 10.5" Landscape
  "Default-Landscape-1194h@2x.png" => "2388x1668",        # iPad Pro 11"   Landscape
  "Default-Landscape-1024w-1366h@2x~ipad" => "2732x2048"  # iPad Pro 12"   Landscape
}
 
launch_sizes.each do |name, size|
  `convert -size #{size} xc:#FBF139 #{name}.png`
end

For some reason, I need to provide both “Portrait” and “Landscape” versions for iPad Pro. I couldn't get it to recognize the correct resolution if I used just one of the two.

Edit the “xc:…” part to use a custom color.

More information can be found in this Adobe document. However, it does not cover all the new devices. Another recent list is this one in the Adobe AIR Forum and this one in the Starling forum.

If you find an error in above's list, please edit this wiki document accordingly!

Using "LaunchScreen.storyboard"

As you can easily see, the sheer number of images you have to provide with the “Default.png” method is becoming ridiculous. Besides, it's hard to test if those file names are really all correct.

So, if you've got access to macOS, it's better to create a storyboard for the launch screen instead. Besides, you need Xcode to bundle your app icons into an “Assets.car” file anyway.

As you can see by scrolling down, it's quite a long list of steps you have to follow! Alternatively, there's a great script from distriqt that handles all this automatically.

First, we set up the project:

On your Mac, launch Xcode and open “File → New → Project → iOS Application → single View Application”.
Give any name to the app and click “create”.
In the general tab of your project (click on the project name in the navigator on the left) set “Deployment Target” to at least “9.0”.

Now we're adding some graphics:

Click on Assets.xcassets on the left column and create a New Image Set, name it “LaunchIcon” and add images to the image placeholder as needed. For this sample, we're going to add a Starling badge in three resolutions; we will later make sure it always appears right in the center of the screen.

BTW: this is also where you'd set up your app icons! Click on “AppIcon” inside “Assets.xcassets” and drag & drop the correctly sized icons.

Next up, create the storyboard:

Click on “LaunchScreen.storyboard” in the navigator on the left.
We want to add our Starling badge (or your company logo) to the launch screen.
To do that, click on the “Library” button in the menu bar.

Enter the text “image” in the filter text box that appears.
Drag and drop the Image View anywhere onto the LaunchScreen.
On the top right, in the “Attributes Inspector”, select the Image “LaunchIcon”.
Then click “Editor → Size to fit content”.
Move the logo to the center of the screen. Blue dashed lines will appear when you're right at the center.
On the bottom of the screen, click on the alignment constraints icon.

Select “Horizontally in Container”, “Vertically in Container”, then apply with “Add Constraints”.
To test if the log is really staying centered, test different device and orientation previews via the “View as:” panel at the bottom.
You can also choose a different background color if you want.
- To do that, click on the “View” object in the view hierarchy, and then select a “Background” color in the “Attributes Inspector”.

Finally, we can export that storyboard:

Optional: run this native app on a iOS device / simulator and make sure the launchscreen covers your screen.
Then change the build scheme so that it builds for “Generic iOS device”. That's found in the menu bar, right next to the “Build” and “Stop” buttons.
Click “Product → Build”.
In the “Products” folder in the project navigator, there will now be a “ProjectName.app” file.
Right-click on it → “Show in Finder”.
In the Finder, right click agan → “Show Package Contents”.
Copy the “Assets.car” file from the package and also the “LaunchScreen.storyboardc” (note the 'c' at the end!) file from Base.lproj folder.
Add those files to the other assets of your AIR projects.

It's important that those files appear in the root folder of the IPA package that you are creating with AIR.

Last step: update the AIR application descriptor XML file.

Add the following XML element to the “iPhone/InfoAdditions” element:

<iPhone>
  <InfoAdditions><![CDATA[            
    <!-- ... -->
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
  ]]></InfoAdditions>
</iPhone>

Now that badge should show up when you launch your app, right until the moment AIR and Starling take over rendering.

Cheers!

Table of Contents