Flex/AIR on Devices: From Flash Builder to iOS

This post is a part of my series “One Developer Platform, Many Devices“.

In this post, we will cover the workflow for delivering a solution from development in Flash Builder through publishing in Apple’s App Store.

You can start developing apps for iOS without an Apple developer account by using the debugging simulator built into Flash Builder. However, a critical step in your development process is that you must test and evaluate your applications on a physical device (preferably before you try to ship it). :)

To get from Flash Builder onto an iOS device, the first thing that you will need to do is create a developer account with Apple and setup your signing certificates and mobile provisioning profiles. To register for a developer account, visit developer.apple.com and walk through the registration process. Note: You can register for free, but you can’t access any of the iOS deployment tools without the paid enrollment into the iOS developer program.

After you have an active iOS developer account, you will need to create a signing certificate and distribution profiles. From the iOS developer center’s home page, click on the “iOS Provisioning Portal” link as shown below.

iOS Developer Home

Next, click on the “Certificates” link on the left side of the screen, as shown in the next screen capture. This will direct you to the certificate management area.

iOS Provisioning Portal

If you are only concerned about developing and not about distribution (or if you are not the iOS account team agent and can’t access distribution profiles), then you simply follow the steps for creating a development certificate.

If you will be distributing your application in the app store, via the enterprise distribution model (if you qualify for the enterprise program), or if you will be using ad-hoc distribution, then you will have a “Distribution” tab, as shown in the screen below. Distribution certificates are required for distribution profiles. Go ahead and click on the “Distribution” tab and follow the instructions for setting up a certificate. You will need to create a certificate signing request through Keychain Access, and then you will need to submit it through the Apple developer portal.

iOS Provisioning Certificates

Once you have successfully created a certificate, it will display under your “Current Distribution Certificate” heading within the “Distribution Certificates” tab, as shown below.

iOS Provisioning Certificates - With Certificate

Download the certificate and either drag or import the “distribution_identity.cer” file into the Keychain Access application. Once you have imported it, you should see the profile listed.  In the next screenshot, you can see that I have selected my “iPhone Distribution” certificate.  You will need to export the certificate to a .p12 file so that it can be used by Flash Builder.   Just select the certificate at the root level (be sure to not just select the key).  Next, go to the file menu and click “Export Items” and save the certificate to a file.

iOS Provisioning Certificates - With Certificate

Obviously, I’m showing these steps on a mac.  To create a certificate on Windows, follow the instructions available here.

Once you have created your signing certificate, you’ll next need to obtain your provisioning profile from Apple, in order to be able to actually deploy on any iOS devices.   If you are only using your registered iOS devices for local development and do not plan to distribute your application yet, then you can go to the Provisioning section of the iOS developer portal and download the development “Team Provisioning Profile”.  Click on the download link and save you .mobileprovision file locally, and then proceed on to setting up your debugging environment.

Download Development Profile

If you will be distributing your application, then you will need to first create an application ID.   All distribution provisioning requires an application ID.  Within the iOS Provisioning Portal, click on the “App IDs” navigation on the left sidebar, and then click on the “New App ID” button on the right side of the screen.

Create Application ID

From here, you need to create the actually application ID.  You need to enter a description (what you commonly refer to the app as), and enter a bundle identifier.   For the description on my application, I entered “URL Monitor” for my description , and the bundle identifier is “com.tricedesigns.URLMonitor”.  The bundle identifier is the unique reference to your application.

Create Application ID

Once you’ve create an App ID, next you will need to create a distribution provisioning profile.   Click on the “Provisioning” navigation item on the left sidebar, and then click on the “Distribution” tab across the top.   To create a new distribution profile, click on the “New Profile” button on the right side of the screen.

New Distribution Profile

Next, select your distribution type.  For most of us, this will only contain “App Store” and “Ad Hoc”.  For developers who have access to the enterprise developer program, there will be a third “Enterprise” option.  Note:  “Ad Hoc” distribution means that you can only distribute to a limited number of devices; all of which need to be registered within your developer account.   Give your distribution profile a name (I called mine “URL Monitor App Store”), and select the application ID that you just created.   Once you click submit, the distribution profile will be created.

Create New Distribution Profile
Create New Distribution Profile

Once created, download and save the .mobileprovision file for future use.

Download Distribution Profile

Debugging:
First things first, let’s cover debugging. I mean, c’mon… you can’t distribute an app if you haven’t debugged it first… right?  To debug, go the the debug menu and select the “Debug Configurations…” option to create a new device configuration.

New Debug Configuration

Select the target platform “Apple iOS”, and then select the “on device” launch method.

Debug Configuration

From that same screen, cick on the “Configure packaging settings” link to show iOS signing options.  In the screen shown below, select the .p12 certificate file that you created earlier, and select the debug .mobileprovision provisioning file that you also just downloaded.

Apple Debug Settings

Click “Apply” to save these settings, then click “OK” to close this dialog.  You will be returned to the “Debug Configurations” dialog, and you can now click “Debug” to actually debug your application on your iOS device.   Flash Builder will not automatically deploy to your device.  It will create an IPA file, which you will need to drag into iTunes, and then synch your device to deploy it.   However, you can still actively debug your application over the local network, directly within Flash Builder.

Deployment Packaging:

First things first, setup your application’s metadata within your app.xml file.   In particular, you will need to specify an application name, version number, and ID.  The ID MUST match the bundle identifier that you specified when creating the App ID through the iOS Provisioning Portal, and the version number must be a valid number.

Flex Project App.xml

Next, right click on your project and select the “Export” menu option, as shown below:

Export

Select the “Release Build” option, and continue the wizard steps:

Export Release Build

Next, you will need to specify the export location (“export to folder”) and enter a filename.  Also, be sure to have the “Signed packages for each target platform” option selected.

iOS Export

Next, you will need to configure your distribution options.  Specify your certificate (.p12) file location, your provisioning file (.mobileprovision) location, and select the correct package type.   If you use an App Store or Enterprise provisioning profile, select the “Final release package for Apple App Store” option.   If you use an Ad-Hoc provisioning profile, select the “Ad hoc package for limited distribution” option.   Keep in mind that you must provision specific devices in the Apple App Store before creating the build.  Next, click “Finish”, and out will come an IPA file ready for distribution.  Note: If you are using a developer certificate, you will not be able to distribute an IPa file.

iOS Export IPA

Distribution:

If you are using Ad Hoc distribution, you can now simply send the IPA file to your users, and they will be able to deploy the application to any provisioned devices.   If you are using the enterprise provisioning option, you can just send the IPA without worrying about specific device IDs.   However, keep in mind that you can only distribute those files according to Apple’s rules surrounding the Enterprise deployment model.

If you’ve be “chomping at the bit” to upload your application to Apple’s app store, then this next section is for you.   First things first, you must go to iTunes Connect to setup your application with the App Store.   Simply navigate to itunesconnect.apple.com and l0g in using the same credentials that you used for the iOS Portal.   iTunes connect allows you to manage and monitor your applications, including sales trends, #downloads, etc…

To get started,click on the “Manage Your Applications” link shown in the screenshot below:

iTunes Connect - Home

You will be brought to the “manage” screen; from which you can edit metadata for all of your applications.  To create a new application, click on the blue “Add New App” button in the top left corner.

iTunes Connect - Manage Apps

iTunes connect will now walk you through a series of questions that will provide appropriate metadata for your application.  First, select your language, and enter your company name.  If you are submitting as an individual (not a company), just put your name.

iTunes Connect - New Application

Next, you need to create the primary metadata about you application: The application name, the sku number (stock keeping unit), and select the bundle identifier.  Make sure you select the bundle ID that matches your App Store provisioning profile.  DOUBLE-CHECK THIS SCREEN TO MAKE SURE IT IS CORRECT!  Once submitted, the bundle ID information cannot be changed.  When you’re absoultely sure it is correct, click on “Continue” to proceed.

iTunes Connect - App Information

Next, enter the availability date and pricing for your application.   Keep in mind that the availability date only applies after the application has been approved by Apple.  If you back-date this, it will not speed up your time into the app store.  When ready, click “Continue” to proceed.

iTunes Connect - Availability and Pricing

Now, enter the primary metadata that describes your application.  This includes the version number (try to keep this in synch with your app.xml in your Flex project for organization purposes – although not required to match), description, primary and secondary categories, keywords, contact information, and review notes (for the team at Apple that will review your application).

iTunes Connect - Primary Metadata

Next, rate the content within your application.   Apple will verify your app against these ratings, and if they do not match, your app will not make it into the app store.  Mine was actually rejected for this… No, I do not have crude content in this case.  For example, if you provide unrestricted access to the internet, such as allowing a user to type in any URL, and you show that content via a stageWebView, then you are rated 17+.  No “ifs”, “ands”, or “buts”.  My only options were to remove the unrestricted access (remove stageWebView), or to have the app rated 17+.  I chose 17+.   Don’t be confused by this though;  If you use StageWebView, that doesn’t mean your app will always be rejected – this is only b/c I had unrestricted access to the StageWebView control.  In my app, you can enter any URL, and click on the “view” button to view the content of that URL.

iTunes Connect - Content Ratings

Next, upload your application images.   The large icon is 512×512, and the phone screenshots should match actual device resolutions.  Note: Your main “large icon” must match the one embedded in your application – I also got rejected b/c it didn’t match initially, as shown in the screenshot below.

Image requirements from Apple:

iPhone and iPod touch Screenshots must be .jpeg, .jpg, .tif, .tiff, or .png file that is 960×640, 960×600, 640×960, 640×920, 480×320, 480×300, 320×480 or 320×460 pixels, at least 72 DPI, and in the RGB color space.

iTunes Connect - Images

Hit “Continue” to save all of your changes, and now you are ready to start uploading your application binary.   Click on one of the “Ready To Upload Binary” buttons on either the top of bottom of the screen to move the process along…

iOS Distribution - Ready to Upload

Once you click on the “Ready to Upload” button, you will walk through several questions around export compliance and encryption.  Answer these questions, then hit “Save” to proceed.

iOS Distribution - Export Compliance

Once you have completed all of the questions, your application will now be ready to upload.   After this point, we will be leaving iTunes Connect, and jumping to the OSX desktop to actually upload the application.

iOS Distribution - Application Ready to Upload

Now, we are ready to upload the application.   In OSX, launch the “Application Uploader” program, which is a part of the XCode developer tools.   When the application loads, you will need to sign in using your iOS developer credentials.

iOS Provisioning Certificates - With Certificate

Upon login, the Application Loader tool will allow you to chose which application you want to upload a new build for.   Choose the desired application, and then click on the “Next” button.

iOS Provisioning Certificates - With Certificate

The Application Loader tool will display metadata about the application that you have selected, and you will need to choose an IPA file from your local filesystem for distribution.   Be sure to select your release-compiled, App Store provisioned IPA, or else the upload process will fail.

iOS Provisioning Certificates - With Certificate

Once you’ve selected the IPA file, click “Send” to being the upload process.

iOS Provisioning Certificates - With Certificate

After the upload process is complete, there will be a verification step, and then you will receive a message “Uploaded package to iTunes Store”.

iOS Provisioning Certificates - With Certificate

Click “Next”, and you will be presented with a “Thank You” message, and the upload process is done.

iOS Provisioning Certificates - With Certificate

Now, comes the Apple approval process.  Generally, this takes about a week for new applications, and only a few days for application updates.  However, there are not guaranteed timelines.   Once the application is approved, it can be ready for immediate consumption within Apple’s App Store.

You can check it out live in Apple’s App store at:

http://itunes.apple.com/us/app/mobile-url-monitor/id456005674?mt=8

Mobile URL Monitor in Apple's Store
  • Dan

    Hi Andrew,

    Thanks for posting this series – there’s some great info here that will come in handy to me and no doubt many others.

    I did install your app on a couple of devices..

    Unrelated to your app specifically and more of a general FB issue, but I found the iOS version had a couple of areas for improvement:

    1. It’s a bit slow and the button clicks can be a little bit unresponsive – it’s certainly a way off native at the moment.

    2. The display isn’t quite as sharp as I’d hope for – I found the black on white font rendering appears a bit fuzzy or dirty.

    Do you know whether these issue can/will be addressed in a the next version or a future update, or are my expectations unreasonably high for a non-native app?

    Thanks for sharing and hope my comments aren’t seen in a negative light.

    Dan

    • http://www.tricedesigns.com Andrew

      Hi Dan,
      Thanks for the feedback. The engineering teams are actively working to improve performance. It has come a long way, and it will continue to get better in future iterations. I’ll pass your feedback along. With that said, what devices did you test on (make/model/generation)? Some of the older devices have some known issues, but the latest generation smartphones and tablets should run quite well. For the fuzzy text, were you on an iPhone 4 or iPod Touch? I actually have this in low resolution/legacy (non-retina) mode at the moment. You can have this display at the full 960×640 as well – it is a setting in the app.xml that can be easily changed.
      Andy

  • Dan

    Andy,

    Thanks for the quick reply – the fuzzy text was on my iPhone 4, so maybe this is the retina display.

    Since posting, I have packaged and installed an app that I am developing (using your instructions – thanks) and the text looks pretty crisp.

    I have a few other differences between Android and iOS to work through, but I’m getting there… thanks again!

    • http://www.tricedesigns.com Andrew

      No problem. Glad to hear that you are making with the tools!

  • Dimitri K

    Hi Andrew,
    thank you for this very useful series.
    By the way, I’m glad you’re now part of the evengelist team, because you’ve always produced quality content, and now that you work for Adobe, I know I’ll be coming back here frequently.

    I have just one request: can make the same Flex/AIR on iOS post but with the same process on Windows? I know we can’t upload on a PC, but we can do everything else, and there are subtle differences that caused me a lot of headache…

  • http://www.virtsa.com Siddharth

    Hi Andrew,

    I must say the post is very informative and gives complete understanding of the process.

    I founded a media company in India and lot of my client wants us to develop Ipad apps for them. We have strong capabilities in AS3 Flash, Flex technology but none in Xcode. We are planning to propose our client’s to develop apps in Flash and deploy it on iTunes.

    However my fear is… How certain it is that the app developed using AS3 will be accepted by Apple… is there any risk an app developed in AS3 will not be approved?

    Please suggest.

    Regards,
    Sidd

  • Pingback: Cool Stuff with the Flash Platform - 9/19/2011 | Remote Synthesis()

  • Saravanan

    Hi,

    Is there any requirement in application loader version.I am trying in application loader 1.3 but it doesn’t seems to be working.

    Regards,
    Saravanan.

    • http://www.tricedesigns.com Andrew

      I am not aware of any AIR-specific dependency, however I know that Apple sometimes requires you to have the latest version of Application Loader in order to actually upload to the store. I have 1.4.1, which works fine for me. I vaguely recall that when iOS 4 was released, you had to update to the latest version to be able to upload to the app store.

  • Avatarchik

    Hi! How did things get out but this error Application failed codesign verification The singature was invalid or it was not signed with an Application submission certificate
    I app.xml
    <! [CDATA [
    UIDeviceFamily

    2

    ]]>
    that is, only Ipad
    Also made the team codesign-dvvv name.app
    This is what has given
    Executable = / Users / user / Desktop / name.app / Journal With God
    Identifier = com.journalwgod.journalwithgod
    Format = bundle with Mach-O thin (armv7)
    CodeDirectory v = 20 001 size = 106 795 flags = 0x0 (none) hashes = 5331 location = embedded 5
    CDHash = 436f75bf75f8f3d30512da8fd5edb937de0fde48
    Signature size = 4274
    Authority = iPhone Distribution: curtis maybin
    Authority = Apple Worldwide Developer Relations Certification Authority
    Authority = Apple Root CA
    Signed Time = Nov 19. 2011 17:27:42
    Info.plist entries = 34
    Sealed Resources rules = 5 files = 32
    Internal requirements count = 0 size = 12
    Build do in Windows.
    Really need help!
    During the earlier thanks!
    Sorry for my english)

    • http://www.tricedesigns.com Andrew

      Are you trying to submit your app to Apple’s app store? If so, you must make sure that you you have a valid distribution certificate, that the IPA file was compiled using the “Final release package for Apple App Store” packaging option in the “Export Release Build” wizard, and also make sure that you application’s id within the main-app.xml file matches your distribution certificate’s “app id”.

  • zach

    hi..I am working with flash builder 4.6 and I am new to it. I want to make an application which is similar to a web-conferencing tool and contains a whiteboard which must be shared to other users connected in real time. There are two entities here the presenter and a number of listeners. When the presenter writes something on the whiteboard it must be reflected to others in the network. How can this be achieved using flash builder? Which protocol should I use and how do I go about it?

  • http://www.brainnook.com Abhi

    Thanks for this great article. I’m following these steps, however, I’m getting an error when trying to build an application using an ad hoc distribution certificate.

    1. If I build the application without uncommenting the block in the application descriptor XML file, I am able to compile the app, but when I install it on my iPod using iTunes, it simply disappears from the iPod desktop. This seems to be related to a missing Entitlements.plist file in the output package.

    2. To generate an Entitlements.plist file, it seems necessary to have an block in the application descriptor file, so I uncommented that block. However, I now get the following error when compiling the application: “application.iPhone is an unexpected element/attribute”.

    Any ideas on how to build and deploy an application to a device using an ad hoc distribution certificate? I am able to build and deploy fine to the same device if I build the app with a development certificate.

  • http://www.brainnook.com Abhi

    Please note, in the comment above, the comment system has stripped out some text because it was within angled brackets. I am referring to the “iPhone” element in the application descriptor XML file.

    • http://www.tricedesigns.com Andrew

      Hi Abhi, are you using Flash Builder to build the application? You should only have to add your signature certificate and provisioning files in the “digital signature” tab for either a debug or release build. The iOS packager will create the Entitlements.plist file for you. Perhaps there is malformed XML in your application descriptor, or you have a duplicate iPhone element?

  • http://www.brainnook.com Abhi

    Hi Andrew, this was indeed because of a duplicate iPhone element in the application descriptor XML file. Thanks for your reply!

  • matteo

    Hi,
    really great post!
    I’m going to build an application not in Xcode, but in Adobe Flash Builder so in ActionScript 3.0. Do you have some experience with it?
    Im afraid to have some problems when publish for approve in apple store! Is the process the same? Thanks a lot.

    • http://www.tricedesigns.com Andrew

      The process is identical. Flash Builder will export an APK file (which has to be signed using your provisioning files). You then use the Application Loader tool from Apple to upload the IPA file to the app store.

  • http://www.letsgomobile.it daniele

    nice! really nice tutorial!

    listen, I want to recycle the apple p12 certificate for android development, but it doesn’t work and I have to go with self signing on android. is there a way?

    thanks a million!

    • http://www.tricedesigns.com Andrew

      No, you can’t reuse it on another platform (at least, I was not able to). I just created a self-signed certificate for my Android apps.

  • Daniele

    that’s nice to know. I’m not really into Android, so if it’s a common practice to simply self sign the app, the better

  • Patrick

    Hello,

    I am looking for a method to build my Flex ios App for my customers enterprise app store. Do you know how to do it?
    I am working on a windows PC but I also have got a mac with the latest XCode if needed.

    Thanks,
    Patrick.

    • http://www.tricedesigns.com Andrew

      You just need to sign the app using the Enterprise certificate and provisioning profile from Apple (from the Apple Developer portal). The signing process is exactly the same. Details about Apple’s enterprise program here: https://developer.apple.com/programs/ios/enterprise/

      • Patrick

        Thanks for the quick reply. It turned out that the customer sent me the wrong p12 file :-)
        After using the correct p12 file everything worked like a charm.

  • Supriya

    Hi Andrew,

    really nice post. I am using a windows pc and completed building my app by using Adobe Flash Builder 4.6. I have generated the .ipa file by Export Release build. Now i want to upload it using Application Uploader. But it needa a zip file, would you please guide, what i need to zip and how to have it in the application loader.

    • http://www.tricedesigns.com Andrew

      According to Apple, you must have a Mac. However, you can use a virtual machine with OSX for submission, or there area also third-party services that will upload it for you from a web interface. Though, I’ve never tried any of those services, and have no idea how well they work.

  • yousuf

    Hi Andrew ,

    I’m using Flex 4.6 version to develop IOS app. Everything is fine but when i submitting my app to istore i’m getting error message like below image .I’m updated my AIR SDK to 4.0 .still having same problem can please help to sort out this problem