AIR 2.6 and iOS


In this post, I’m going to show how to take a normal Flash project made in FlashDevelop and make it work for your iDevices.

First, you’ll need to download Adobe AIR 2.6 and start a project using it.  Then, you can simply copy-paste your game with all of it’s contents into this new project and compile.  Starting with this new, AIR 2.6 compiled SWF, you can start the process of making it work for an iPhone/iPod Touch/iPad device.  At the very end of the tutorial, I will have packaging .bat files and an example XML app descriptor file.

Another tutorial for this development process can be found here.  Yet another using Flash Builder instead of FlashDevelop can be found here.

1.  You’re going to need to become an Apple Developer to get this to work; it costs $99 for app development.  You will not need an actual Mac to do any of the following sections, except for the final upload of the app, as that must be done using the App Loader that only works on Mac computers.  I personally just used Windows for the whole of development, and simply had a friend of mine do the actual uploading of the App.

2.  Install OpenSSL for Windows.  This will be needed in order to make a Certificate Signing Request (CSR). Here is a .bat file you can run that will accomplish this for you:

path %PATH%;C:\OPENSSL FILEPATH\bin
openssl genrsa -out -passout pass:YOURPASSWORD mykey.key 2048
openssl req -new -key mykey.key ^
-out CERTIFICATESIGNINGREQUESTFILENAME.certSigningRequest ^
-subj “/emailAddress=YOUREMAIL@example.com, CN=YOUR NAME, C=US”

3.  Using your new CSR, you can upload it to your Apple Developer Provisioning Portal (under “Certificates”) to get a certificate.  If you are working individually (essentially, there’s no team admin who will need to approve your certificate) just reload the page and you should be able to download the certificate file.  This file will be named “developer_identity.cer”.  Using this, you can now attach provisioning profiles to it (we haven’t made any yet, so don’t be surprised if you can’t!), as shown below with the attached “Home” and “Connor Ullmann” profiles attached to mine.

4.  Next, plug in a device you want to test your program with and open up iTunes.  Click on the device’s name, and open up the summary.  There, you will see the Name, Capacity, Software Version, and the Serial Number.  Click on the serial number, and you will see the Unique Device ID (UDID) appear in its place.

Now, go to the “Devices” tab in the Provisioning Portal and click “Add Devices.”  Enter the name of your device, and enter in the 40-character UDID.

5.  Let’s make an App ID!  Go to the “App ID” section in the Provisioning Portal and click “New App ID” in the upper-right.  Fill out the form with a name like “Quietus” for my game Quietus, have a new seed be generated in the drop-down menu, and make a suffix that goes by the form of “com.yourname.appname”.

6.  We can now make a provisioning profile that will allow this device to run a program you put on it; you can’t simply put your app on any device, as with the Android App Store without it making it through a review by Apple in the Apple App Store.  To make a provisioning profile, go to the “Provisioning” tab in the Provisioning Portal and click on the “New Profile” button, or simply click here.  Add any device you wish to allow to run with this provisioning profile, and click submit.  Then, you can now hit “Download” to the right of the profile table to download the provisioning profile (it’s file-extension is .mobileprovision).

7.  With iTunes open and synced with your device, open up the folder with the newly downloaded provisioning profile and drop it into iTunes.  Now, sync your device with iTunes again.

8.  Execute this .bat with the path for you OpenSSL’s bin directory, and you will get a p12 certificate.

path %PATH%;C:\OPENSSL FILEPATH\bin
openssl x509 -in developer_identity.cer -inform DER ^
-out developer_pem_identity.pem -outform PEM
set RANDOM=.rnd
openssl pkcs12 -export -inkey mykey.key ^
-in developer_pem_identity.pem -out iphone_dev.p12

9.  At this point, you will have a plethora of different files, like your CSR, your CER, your .mobileprovision, your mykey.key, your iphone_dev.p12, etc.  For the most part, you will be able to ignore all of them except for the .p12, which will be packaged with all of your files (the SWF, the p12, the app descriptor XML file, the default start-up images, and the icon images) in the final .ipa which will run on your device.  Make the appropriate changes to this template below for your application descriptor file (save as “application.xml”, for example):
More information about the XML document can be found here.

<?xml version=”1.0″ encoding=”utf-8″ ?>
<application xmlns=”http://ns.adobe.com/air/application/2.6″>

<id>com.yournamefromappid.appnamefromappid</id>
<versionNumber>1.0</versionNumber>
<filename>APP NAME (put what you like, like “MyAppiOS”)</filename>
<name>NAME (this shows on the actual iPod as the name)</name>
<description>APP DESCRIPTION</description>
<copyright>YOUR NAME</copyright>

<initialWindow>
<title>ARBITRARYWINDOWNAME</title>
<content>INPUTSWFFILENAME.swf</content>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
<minimizable>true</minimizable>
<autoOrients>false</autoOrients>
<resizable>false</resizable>
<renderMode>gpu</renderMode>
<fullScreen>true</fullScreen>
<aspectRatio>landscape</aspectRatio>
</initialWindow>

<icon>
<image29x29>ICON29x29.png</image29x29>
<image48x48>ICON48x48.png</image48x48>
<image57x57>ICON57x57.png</image57x57>
<image72x72>ICON72x72.png</image72x72>
<image512x512>ICON512x512.png</image512x512>
</icon>

<supportedProfiles>mobileDevice desktop</supportedProfiles>

<iPhone>
<InfoAdditions>
<![CDATA[
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleBlackOpaque</string>
<key>UIRequiresPersistentWiFi</key>
<string>NO</string>
<key>UIDeviceFamily</key>
<array>
<string>1</string>
<string>2</string>
</array>
]]>
</InfoAdditions>
</iPhone>

</application>

10.  When you have compiled your SWF file and have finished all of the previous steps, you will be able to package your application.  In the same folder that you run the final packaging .bat file from, you will need the SWF, the p12, you app descriptor XML, your .mobileprovision file, your icon images (size 29×29, 48×48, 57×57, 72×72, and 512×512), and default images to show just before start-up (called Default.png, Default-Portrait.png, and Default-Landscape.png; these will make your app seem as though it’s loading faster by showing an image directly before the app actually starts). Below is an example image of my project “Quietus” before packaging with all of the necessary files:

Here is a .bat that you will run, with the necessary changes:
Note: when executing this .bat file, if you are asked for a password, use the password you entered when making your key in step 2.

path %PATH%;C:\AIR 2.6 FILEPATH\bin\
adt -package ^
-target ipa-test -provisioning-profile MOBILEPROVISIONFILENAME.mobileprovision ^
-keystore P12FILENAME.p12 -storetype pkcs12 ^
OUTPUTIPAFILENAME.ipa APPINFOXMLFILENAME.xml INPUTSWFFILENAME.swf ^
ICON29x29.png ICON48x48.png ICON57x57.png ICON72x72.png ICON512x512.png ^
Default.png Default-Landscape.png Default-Portrait.png

11. This .bat will output a .ipa file; this is the final app file that you will be able to play on a device that is allowed to use it, as given when you set up the provisioning profile. To try this out, just drag and drop the .ipa file into your iTunes and sync your device. If everything works out, your device should now have your app on it, and it should run!

Final Notes: Here’s a little bit of iPod/iPhone/iPad information. AIR 2.6 only works on iPhone/iPod Touch 3GS+, and works on both iPads, so iPhone 3G isn’t supported. Also, the iPod/iPhone resolution is 960×640 with the retina display, and the iPad is 1024×768.

I hope you enjoy making iOS apps, and I will be happy to answer any questions in the comments!

Posted in Uncategorized · 24 Comments

Responses

  1. Steven says:

    This could help motivate me to learn flash :D

    • Connor says:

      I hope so! It’s not terribly difficult; just give Flashpunk a try and you’ll be fine :)

      • andrew says:

        Connor! Hey, I was just trying this out, and I’m up to part 8, and whenever I try and execute the .bat, I get:
        “Error opening input file developer_pem_identity.pem
        developer_pem_identity.pem: No such file or directory
        unable to write ‘random state’”

        I’m still kinda dumb when it comes to this, so it’s probably an easy answer… but how would I work this out?

        Thanks, :)

        • Connor says:

          Hmm, well first you need developer_pem_identity.pem in the same directory as the place you’re executing the .bat from, and if that’s true, then try putting the set RANDOM=.rnd at the very start of the .bat. I’m not sure if this will fix it, but we’ll see! Let me know how it goes!

          • Andrew says:

            Hmm, it’s still not working. It’s now returning:
            “unable to load private key
            unamble to write ‘random state’”.

            Am I mean to have the files it puts out in the same folder as the .bat before I execute it? As in, make just empty files for them? Or am I meant to get them from the first .bat I executed at the start?

            Sorry to be such a pain!

          • Connor says:

            Hmm. You don’t need to make empty files for them; the .bat will make them if it needs to. You do need to have all of the files specified as “-in” for the .bat in the same folder you’re executing from, which includes your key file and the password you set for it. Other than that, I’m not exactly sure what’s wrong!

  2. Andrei says:

    Thanks man! you helped me a lot :)

  3. Ricky says:

    Do I need a mac in order to do this?

    • Connor says:

      Yes and no. Most of the process is simpler on a mac and much of this tutorial is made up of work-arounds to make it functional for windows; you’ll need a mac to do the final upload, but that can be done by simply using any mac, downloading the uploader, and uploading the file. It’s a simple process that doesn’t involve much at all, so even a mac at a library or somewhere should be able to do it, assuming you can install the uploader. Other than that final step, everything is windows-working.

  4. Jose Manuel says:

    I think you don´t need a Mac to upload your app to the Apple Store. This can be done with iTunes Connect.

    • Connor says:

      Was this changed recently? I remember looking around and hearing that they’d changed it so iTunes Connect couldn’t and that you had to download the app uploader to do it, but maybe they changed it back.

  5. Jose Manuel says:

    Yes, you´re right. After seeing the Lee Brimelow´s tutorial, I thought I could do the entire process from Windows, but fifteen minutes ago, reading a book I just bought ( iOS development with Flash ) I see that I have to use app uploader to do it.

    • Connor says:

      Alright, because I remember thinking that the app loader worked for windows, but then everywhere I went online basically said that this was the choke-point that required mac. Stinks that it’s necessary…

  6. andrew says:

    Connor! Sorry to keep bugging you about this, but I have two more questions about this (I haven’t had the ability to test this yet, so my problem may lie elsewhere). Basically, I was wondering if the game had to be the exact resolution you posted and does the batch file have to be run on the computer that the iTunes you synced your iPhone to is on?

    I’m getting some xml error (I think its error code is 100, but I can’t remember), and I have yet to figure out why…

    • Connor says:

      I don’t think the game has to be the exact resolution (it might auto-scale it), but I’m not positive about that. As for the batch, it only packages the files all into one .ipa, so it can be done on any PC so long as you sync the .ipa to your iPhone on the computer you synced with. I actually did this with my computer, as I was using my dad’s iPhone 4 by packaging on my computer and sending the file to his computer to sync.

      I’m not so sure about error code 100, wish I could help!

  7. Billy says:

    Hi Conner

    Super useful post, I have been following through and have a test app up and running.

    Howeverm I have a problem which wonder if you can help with. I can’t get the “Full Screen” option to work!

    I set the fullScreen node to full exactly like in your example descriptor above, but as soon as the loading screen vanishes the toolbar appears.

    So am I doing something wrong, or is this a bug in the adt? Have you been able to get a game running full screen?

    Cheers

    Billy

    • Billy says:

      Hey

      Found the solution so thought I’d post back here in case anyone else has the same problem. It was nothing to do with the descriptor XML or the packaging process, but was actually a setting in FlashPunk Engine.as

      stage.displayState = StageDisplayState.NORMAL;

      …was preventing the game running at full screen, but changing to this works:

      stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

  8. stephen lavelle says:

    Thanks so much for this!

    A note for people who might be confused:

    copied + pasted the application.xml file from here, but the quotes were clogging up adt, I was getting an error message “descriptor cannot be parsed”. Search/replacing the left/right-double-quotes to be normal double-quotes fixed it.

  9. Just wanna ask you about the resolution of the game (Quietus) did u change it from 640×480 to 960×640 or u kept it the same size and if u kept it same size does the game looked centered in the middle of screen or it is rendered in right upper corner ??

  10. Sos says:

    This was seriously helpful! I love how usefull this is because of no flash support on iStuffs.

    Also, a tip:
    If you’re using AIR 3.0 with Flex 4.5.1 publishing for FP11, you can get hardware accelerated FlashPunk drawing. It is probably fast, but messes up transparency and scaling. Remove the renderMode property from the XMl to avoid this.

    Cheers!

  11. Sina Kashanizadeh says:

    Hello
    I seem to be getting the error 100 descriptor cannot be parsed.
    However my quotes are fine. I have validated my xml too. Any suggestions?

  12. [...] not own any iOS devices so I can’t share my knowledge on that topic, but there is a great tutorial here which covers the [...]

  13. rewb0rn says:

    Hi,

    there is an error in the bat file for generating the csr. It has to be

    openssl genrsa -out mykey.key -passout pass:YOURPASSWORD 2048
    instead of
    openssl genrsa -out -passout pass:YOURPASSWORD mykey.key 2048

    Cheers