Making an App: Adobe AIR for iOS – Flash to iOS Walkthrough

Following is a tutorial for walking you through all the things you need to set up, and start developing an Adobe AIR iOS app with Flash (on OS X). It’s a summary of my forays into the world of mobile Flash development.


Screenshot of Offender on iOS.

This is a resource that will take you through the development process of converting an .swf to .ipa (the file that will run on your iPad/iPhone), and some notes about submitting to the app store.
Technical documentation can be found at Adobe AIR documentation
Or the Adobe AIR Developer Center

I have tried other options such as Autodesk Scaleform MobileAutodesk Scaleform for Mobile iOS. For converting a .swf file to an app (putting it simple), it was not a functional/workable solution for me. I found their marketing to be very convoluted – not noticing that they don’t have sound support (out of the box) until I bought it, and started working with it.
As far as I can tell, you have to buy your own FMOD license (contact FMOD for licensing, which is way too expensive). Alternatively you have to incorporate your own sound library. Aside from lack of sound support, the solution itself was a bit too buggy. Understandably their software is still very new, and they say that they are working on sound support for iOS. It seems to be going in an exciting direction, and is worth keeping an eye on despite its present shortcomings. Their Actionscript 2.0 support (which was one of the appealing factors) would be a noteworthy solution for porting legacy content to mobile devices.
In the end it’s no-good it if you just want to put your Flash game on a mobile device, because you have to buy a separate license for Android (apparently that does have sound support), and another for iOS.
Flash with Adobe AIR, can handle both.

Further links that where helpful to me:
Flex/AIR for iOS Development Process Explained!
Getting Started building AIR applications for the iPhone
Flash Professional Help / Publishing for Adobe AIR for desktop
Using Flash Builder 4.5 to package applications for Apple iOS devices
Can all flash games be readily ported to adobe air for deployment on ios?
How to create an iPhone app from a Flash .swf file with Adobe AIR SDK
Packaging a mobile AIR application
Step-by-Step Guide to Publishing in the Apple App Store Using a Mac
Adobe AIR Quick Starts for ActionScript developers
Using the GameCenter Adobe AIR native extension for iOS
Developing Adobe AIR 1.5 Applications with HTML and Ajax
A sample Actionscript Native Extension for iAds capabilities on iOS.
Native extensions for Adobe AIR
AIR application descriptor elements
Working with File objects in AIR
Enable the Latest AIR SDK in Flash Professional CS5.5+
Signing AIR Applications – About The Colorful World Of Certificates And Signing
Multitouch and gesture support on the Flash Platform (which is important to get to know before you start coding an app…)

So… Getting started!

From Apple

Go to:
https://developer.apple.com

Register, and then find your way to the iOS Provisioning Portal.
Once in the iOS Provisioning Portal, familiarize yourself with it. The most important sections are “Certificates“, and “Provisioning“. They can also cause you the most issues.
Creating an app takes place in two tiers. DEVELOPMENT, this if when you want to test and run your app on your phone. DISTRIBUTION, when you’re ready to submit the app.
When you are ready for launch you have to create, and download a Distribution “Certificate”, and Distribution “Provisioning Profile” for the app. The same steps apply for that as in the Development stage.

Certificates:

First, you will need to download, and install, the WWDR intermediate certificate. There’s an alert, and link to it, at the bottom of the “Your Certificate” list.

To get a Developer Certificate or Distribution Certificate you’ll have to go through the Certificate Signing Request process:
*Open Keychain Access. It’s in Applications > Utilities.
*From the menu select “Keychain Access” > “Certificate Assistant” > “Request a Certificate From a Certificate Authority”.

Fill out:
*User Email Address – with your email address (same one as you used for your developer account).
*Common Name – with your name.
*CA Email Address – leave blank.
*Request is – Saved to disk.

Save the “CertificateSigningRequest.certSigningRequest” to a memorable location.

*Return to the iOS Provisioning Portal in your browser.
*Go to the “Certificates” section.
*”Choose File” and upload your CertificateSigningRequest.

Wait a moment and refresh the browser and your certificate should be available for download.

*Download your new certificate. It will be a .cer file.
*Open it, and it will automatically open in keychain access.
It should be under “Certificates”, and have a key icon underneath it with your name.

It’s important that it has a key underneath it with your name. I got stuck a few times with it (the key) not being there. I haven’t figured out how to get that to work, except with a lot of clicking and re-adding. Good luck if that happens.

*Select the certificate, and the key.
*Right click and “Export 2 items…”
*Give it a password that you will remember.

It will create a .p12 file. This (as well as the selected password) is the file you will use for developing. You will need this. Flash will need this when selecting an iOS Digital Signature > Use an iOS certificate.

Devices:

You need to register your device (or your team’s devices) in the Provisioning Portal. Click the “Devices” tab. Fill out the necessary information — Enter your Device Name, and Device ID.
Alternatively, make sure your phone is hooked up to your mac, and open Xcode and go to Window > Organizer.

You handle most of the device adding / Provisioning through there. Select your phone from the Devices tab to get the device ID. It’s under “Identifier” in that window…
In the iOS Provisioning Portal add the device ID, and your Device Name, then Submit.
It should show up under Devices now.

Once you have your phone added to the iOS Provisioning PortalDevices” section you’re ready to set up the Provisioning Profiles

App IDs:

You need these for your application. This is probably one of the easiest steps.

*Select App IDs, and then “New App ID“.
*Fill out all necessary information, and then “Submit”.

Provisioning Profiles:

After adding your device, you need to create a Provisioning Profile for your phone and application.
There are a few types of Provisioning Profiles.
Development Provisioning Profiles are (like Certificates) profiles for your phone so you can run, and test, the software you’re developing on your phone.
Then there are Distribution Provisioning Profiles. These are “live” profiles for finished products (“live”, for a lack of a better term). This is what confused me at first, if you use these provisioning profiles with the software you’re building, and try to install the final build on your phone IT WILL FAIL. The only builds using Distribution Provisioning Profiles, that you can install on you device, are builds that have been built with the Ad Hoc Provisioning Profile. Builds for app store distribution will not run on your phone, ever, unless approved and installed through the store. They are specific to the store, and app store submission.
If you use an Ad Hoc Provisioning Profile you will still need to add it/register/sync-it/etc with each phone that you intend to run it on (Use the “Organizer” for this). It’s very specific.

Like I said, you use a Provisioning Profile in two places:
*When building the application.
*Add it to your phone so you can RUN the built application. (only phones with the provisioning profile added can run the application.)

To create a provisioning profile:

*Select the Provisioning section, and then select “New Profile” in the Development Provisioning Profiles, or Distribution Provisioning Profiles tab.
*Fill out all necessary information, and make sure you hook it to the right App ID & Devices it is to run on.
*Your profile should become available for download in Provisioning. Once it is, “Download” it. It will give you a .mobileprovision file.
You will use this in Flash (the Deployment – Provisioning profile section):

As well as add it to your phone, so you can run the build.

To add a provisioning profile to your phone:

*Connect your iPhone to your Mac.
*Open Xcode.
*Select Window > Organizer.
*Select your phone in the “Devices” section.
*Select “Provisioning Profiles“.
*Select “Add” button.
*Browse to the provisioning profile you downloaded from the iOS Provisioning Portal (the .mobileprovision file).
Done! If you did it right, and if it’s a valid profile it should say “Valid profile” in the “Status” tab.

To Flash

Now that the worst is over with, open Flash!
Start a new file and select AIR for iOS.

Side Note: You can always download the latest AIR SDK. If you did so you can add it to the Target Publish settings by selecting Help > Manage AIR SDK… and navigating to the newest version you just got. Link to tutorial here.

Create your Flash file, and all it’s Flashy coded up contents. Once you’re ready to test it on your device click on “Edit Application Setings” next to the “Target: Air for iOS” in the Properties Panel.

You will see the window that handles most necessary settings for exporting to an .ipa (the file that will eventually run on your device).

General:

Everything is pretty self explanatory.
The “Include files” area are where you add all necessary dependable files your .swf needs.

Note: The newest version of AIR (I think it’s still in beta) allows for external .swfs loaded into your main .swf to execute code. Up until now (before said beta) only the main .swf could execute code. Actionscript that is executing from an external .swf will be ignored.

Default.png is the image that will display as your app’s boot up screen. Make it the same dimensions as your .fla, and keep the name “Default.png“.

the YOURFILE-app.xml file contains your apps settings. You can customize a lot of it there. Visit the Adobe AIR * iOS Settings docs for more information.

Deployment:

*Browse to, and select, your .p12 file (see the “Certificates” section of this tutorial on how to create it, or visit Converting a developer certificate into a P12 file ).
*Enter the .p12 file’s password.
*Browse to, and select, your Provisioning profile (.mobileprovision file).
*In iOS deployment type, select your desired deployment.

Icons:

Create icons following the instructed dimensions, and browse to them for each icon selection.

Languages:

For one, choose English…

And that’s it! Hit “Publish”.
It will output an .ipa file. Sync that to your phone with iTunes.

Submitting to the App Store!

You will need to start an account with iTunes Connect.
If you want to sell applications, you need to sign up with their iOS Developer Program. It will cost you $99 a year.

Add an app by going to “Manage Your Applications” in your iTunes Connect account.
The submission process is pretty straight forward, and they have a good help video on it (navigation at the bottom of the screen).
The site times out a lot so save your information on your desktop, or in notepad, or something…

What you will need to have prepared is as follows:

*Support URL (a url for support for the app)

*Marketing URL (more about the app, the website for the app)

*A description of the app you are adding, detailing features and functionality. Descriptions cannot be longer than 4000 characters.

*Keywords (separated by commas – there is a 100 character limit, you can not change them until you do an update.)

*Review Notes (further notes or things that Apple may need to know when they test your file)

*Icon and Screenshots:

Large App Icon: A large version of your app icon that will be used on the App Store. It must be at least 72 DPI, in the RGB color space, and 1024 x 1024 pixels (it cannot be scaled up). The file type must be .jpeg, .jpg, .tif, .tiff, or .png. It must be flat artwork without rounded corners.

3.5-Inch Retina Display Screenshots: Screenshots for 3.5-inch iPhone and iPod touch Retina display must be 960×640, 960×600, 640×960 or 640×920 pixels, at least 72 DPI, in the RGB color space, and in the JPG or PNG format.

4-Inch Retina Display Screenshots: Screenshots for 4-inch iPhone 5 and iPod touch (5th generation) Retina display must be 1136×640, 1136×600, 640×1136 or 640×1096 pixels, at least 72 DPI, in the RGB color space, and in the JPG or PNG format.

iPad Screenshots iPad Screenshots: must be .jpeg, .jpg, .tif, .tiff, or .png file that is 1024×768, 1024×748, 768×1024, 768×1004, 2048×1536, 2048×1496, 1536×2048 or 1536×2008 pixels, at least 72 DPI, and in the RGB color space.

Note: You can take screenshots of your app, as displayed on your mobile device, in Xcode’s Organizer. First connect your device, then go to Window > Organizer. Select your connected device in the Devices area to the left, and go to Screenshots. Hit New Screenshot, and voila!

Routing App Coverage File (Optional)

Once you have everything set up, and your application status is “Waiting For Upload”, you upload your App to iTunes Connect with the Application Loader. This is part of XCode.

And that’s about it. Good luck with the approval process!
Hopefully this tutorial was helpful.