Flash to iOS: A Step-by-Step Tutorial (Part 4)

Flash to iOS: A Step-by-Step Tutorial

This is the fourth part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

In this section of the tutorial, the rubber meets the road. You’ll make all the finicky adjustments to FlashDevelop and the AIR bundling files to get your Hello Planet app up and running on your testing device.

Point FlashDevelop to the Merged SDK Folder

Now that your (cr)app is successfully up and running, you have to make a few tweaks and adjustments to FlashDevelop. You’ll start by telling FlashDevelop all about that merged SDK folder you created in Part 3.

  1. In the Project panel on the right, you’ll see a file called AIR_iOS_readme.txt. Double click that file to open it.

    This txt file lists a number of settings needed to get your ipa file working. The ipa file is the Holy Grail- the native app file that you’ll send to your testing device to see everything working properly. A window pops up with a bunch of options.

  2. Click the Project Properties button at the top of the Properties Panel (alternately, you can use the menus to navigate to Project>Properties).

    FlashDevelop Project Properties

  3. Change the version of your AIR SDK from 2.7 to 3.0 because (at the time of this writing), that is the latest version.

    FlashDevelop Project Properties Options

  4. Click on the SDK tab, and click Manage.

    FlashDevelop Project Properties Options - Manage

  5. On the next screen you will see list of installed Flex SDKs. Click the ellipsis (…) button at the end of that line. An InstalledSDK Collection Editor window pops up.

    FlashDevelop Project Properties Options - Flex SDK Location

  6. You’re going to point FlashDevelop to the location of our recently-downloaded Flex SDK (the same folder that contains both the Flex SDK and AIR SDK that you created earlier in this tutorial). First click the Add button, and then click on the Path line to get another ellipsis. Click on THAT ellipsis to browse your computer.

    Add

  7. Once you have clicked the ellipsis button, a Windows File Browser appears. Navigate to the merged SDK directory. Select that folder and click OK.

    Navigate to your merged SDK folder

  8. Click OK again to exit the InstalledSDK Collection Editor window.
  9. Click Close.
  10. In the drop-down menu, you should see the Default option. Click on the drop-down list and choose the SDK location you just told FlashDevelop about.

    Choose your Merged SDK profile from the drop-down menu.

  11. Click Apply.
  12. Click OK. Voila! Your SDK is now setup for your FlashDevelop Project.

    Let’s just test it out quickly to see if it works. The code you pasted in the previous tutorial prints out the words “Hello Planet” within your app. Well, I’m going to change mine to say “Sina is Cool”, just because I can, and also because I AM COOL. (You may be tempted to replace “Sina” with your own name. Please don’t, because uh … your code won’t work.)

    Your resulting app should look like this:

    Breaking: Sina is cool.

    A beautiful sight, isn’t it?

    (At this point, Sina actually is pretty damned cool. – Ed.)

Delete the Extra Icons Folder

Now you have FlashDevelop set up to create mobile-formatted AIR apps. Your app compiles, and you have your Mobile Provisioning Profile and your .p12 Signing Certificate waiting in the wings. All you need to do is combine all these amazing files together to create the Holy Grail .ipa file.

The .ipa file is the Holy Grail of this tutorial series

Ah – this is truly the .ipa of a FlashDeveloper.

An .ipa file is like the program file – the Windows executable (.exe) – that you need to test your iPhone/iPad App on a device, and ultimately upload it to the Apple App Store.

The creators of FlashDevelop 4 made a minor error when they created the Mobile App template: the template generates a duplicate icons folder that will cause a conflict when you try to bundle your .ipa file. You need to get rid of this extra folder to make sure your .ipa file to builds properly.

  1. Look in the right sidebar that lists your files and folders. You’ll see a folder called bin. (This is one of the folders that FlashDevelop created for you automatically when you created your project.)
  2. Click on the little plus sign beside the bin folder to expand it. You will see a folder called icons tucked inside. Right-click the icons folder and click Delete. Problem solved.

    Delete the icons folder to avoid a conflict later

Integrate Your Cert Files

  • Copy your Mobile Provisioning Profile and your .p12 Signing Certificate into the certs folder of your project. If you’ve been following along with this tutorial from the beginning, you probably saved these two files in the bin folder of your OpenSSL install.

    Once the files are in the right place, they should show up in your Project sidebar:

    You put yer WEED in there.

    To create the .ipa, you have to edit a couple of lines in a batch file so that the app compiles properly. Don’t be scared: a batch file (.bat) is simply a text file that runs a script when you double-click it in Windows. You can open up a batch file by using a text editor of any kind. Since you’ve already got FlashDevelop open, it makes a lot of sense to use it to edit the batch files.

    In the following screenshot, I’ve opened up the ReadMe file that describes the iOS compilation steps. Step 5 talks about editing a batch file. Take a read if you’re nervous.

    iOS compilation readme

  • In the sidebar, find the bat folder and expand it.
  • Double-click the SetupApplication.bat file. The file should open in FlashDevelop.
  • In the batch file, you should see some green text that says ios packaging, and a bunch of set options beneath it. This is where you have to add or adjust some text. In the IOS_DEV_CERT_FILE line, type the path to your .p12 Signing Certificate file (the one you just copied into the certs folder). You only have to use a relative path (one that describes where the file is in relation to the compilation target), so just copy what I have and you should be fine:
    cert\iphone_dev.p12
  • In the IOS_DEV_CERT_PASS line, you have to enter password that you set when you made your Signing Certificate. (Don’t come crying to me if you don’t remember it – i told you to write it down – Ed.)
  • In the IOS_PROVISION line, type the name of your Mobile Provisioning Profile.

    All in all your SetupApplication.bat should look like this:

    SetupApplication.bat

    Note: Make sure you have the path properly setup as well as the same exact filename. If you have any sort of typo, it’s not going to work.

    Get Your Ducks in a Row

    You’re almost there! All you have to do is edit the SetupSDK.bat file.

    1. Double-click the SetupSDK.bat file to open it in FlashDevelop.
    2. At the top of the file, you’ll see a line that says path to Flex SDK in green. Right under that line is the path to the SDK. However, it’s not pointing to the merged SDK folder that we created earlier. Replace the default path with the path to your merged SDK folder. It might look similar to this:

      SetupSDK.bat

      Note: Remember to save often!

    3. Open the application.xml file. This xml file is the descriptor file for your application. You have to double-check to ensure everything in there is correct. Everything from your App name to the version of your App is located in this file.

      Application.xml

    4. Change the version number at the end of the xmlns parameter of the root application node to the version of AIR you’re running. In this case (and at the time of this writing), it’s 3.0.
    5. In the id node, enter the package name that you created for your Mobile Provisioning Profile.

      Application.xml changes

      If you don’t remember what your Bundle ID was, go to the Provisioning Portal on the iOS developer website and click on Provisioning.

    Compile Time

    After all that, you’re finally ready to compile your .ipa file to test on an iOS device.

    1. In the sidebar, right-click the PackageApp.bat file and select Execute.

      Execute!

    2. You’ll see a bunch of options. Since this is only a test, you can pick the fast test option. This option will quickly create an .ipa file for you to throw onto your iWhatever. Once you choose fast test, sit back and relax.

      Choices

    3. Look in the dist folder in the sidebar. You now have an .ipa file!

      Success!

    Test Your New App

    Take a moment and soak in what you’ve accomplished. You’re in the final steps of your epic journey of iEnlightenment. All you have to do now is load the hard-fought .ipa file up on your iWhatever.

    I made a copy of my Mobile Provisioning Profile and my .ipa file and put them in a separate folder. I suggest you do the same as a backup measure … better safe than sorry. Now let’s get that sucker onto your device.

    1. Plug in your iPhone/iPad/iPod Touch/iEtCetera and let it sync in iTunes.
    2. After it’s synced, go to Library -> Apps.

      iTunes

    3. To add your Mobile Provisioning Profile, click and drag it from your folder into the iTunes Library.
    4. Follow the same process to add your .ipa file.

      Note: You have to add your Mobile Provisioning Profile before you add your .ipa file! If you add these files in the wrong order, you may get errors!

      Drag and drop your files into iTunes

      After dragging your .ipa file into iTunes, you’ll see a generic App icon that FlashDevelop/AIR generated for you.

      Generic Apple App Icon

    5. In the left sidebar, click on Devices -> Your iPad/iPod/iPhone.
    6. Click on the little Apps button at the top of iTunes. You’ll see a screen that displays all your Apps. Within that screen, you should be able to find your App (you may have to scroll around a little to find it).
    7. Click the Apply button to transfer everything to your device.

      iTunes will go through the syncing process, and will add your App to your device. You can click sync a few more times just to make sure everything is good – iTunes doesn’t always behave perfectly on a PC.

      Note: If you get an error saying that the App failed to install, your Bundle ID or something within your Application.xml may be wrong. Double-check everything! There is no harm in deleting your App and from iTunes and transferring it again. You can also overwrite your Mobile Provision Profile with a corrected one.

      DOUBLE NOTE: If you change anything in your project, you must compile your .ipa file again, because it contains all the new information necessary for iTunes to run your App.

    8. Fire up your iPad/iPhone and BAM!

      AIR on iOS

      It’s so … beautiful. *sniff*

    To the App Store … and Beyond!

    In this section of the tutorial, you:

    • Pointed FlashDevelop to your merged AIR/Flex SDK folder
    • Corrected an error with the Mobile AIR template by deleting an extraneous icons folder
    • Copied your Mobile Provisioning Profile and your .p12 Signing Certificate into your project and pointed FlashDevelop to them
    • Pointed the SetupSDK.bat file to the merged SDK folder
    • Modified the application.xml descriptor file to match your project settings
    • Compiled your project and created an .ipa file
    • Copied your .ipa file and Mobile Provisioning Profile into iTunes
    • Synced your app and ran it on your testing device!

    With your project set up, you can continue developing your application until you have an amazing thing that you’re ready to foist on the app-buying public. There are still a few more things you need to know to deploy your app to the live iTunes store. What about that generic AIR icon? Wouldn’t you like to see something nicer in its place? And how do you get your .ipa file in front of the app-approvers at Apple to get it to show up in iTunes? And are we finished with certificates and profiles, or is there more to do?

    Short answer? There’s more to do.

  • 11 thoughts on “Flash to iOS: A Step-by-Step Tutorial (Part 4)

    1. Delfeld

      If you use iTunes for the first time, there is no “Apps” folder in the Library. Also, you do not have to sync up the iThingy before you add an app . . . so you can upload your app to the Library and have it available later when you are at Best Buy hacking the iPads.

      Reply
    2. piedema

      First of all, cool tutorial, thank you. I like the way you write, much sarcasm towards the world with a blink of the eye ;)
      Second, I noticed a little error on the about untold button of this website, click outside the website, your scrollbar for example, en hover the button.

      Keep up the work and greetings from Holland!

      Reply
      1. Ryan Henson Creighton

        Thanks, piedma! It’s tough to keep the site functional … things seem to magically break without us even touching them. We’re due for a patch job in the spring.

        Reply
    3. Pingback: ??iOS????Flash????????4? | GamerBoom.com ???

    4. Rahil Patel

      THANK YOU. Without this tutorial (including the comedic writing), I would have given up. I wished all tutorials were this fun!

      I only encountered one major problem, and it was when I strayed away from the tutorial due to laziness. I tried to skip some of tutorial by using the p12 file from Mac Keychain but failed. I had to convert it, following the answer from http://stackoverflow.com/questions/6642170/error-could-not-retreive-certificate-chain-from-keystore.

      Reply
    5. Andrew

      I’ve successfully deployed to a test device and it works 100%, I repeat the signing process for distribution, it got approved, but when the app is downloaded and installed, it completely breaks, the same way a compile time error flickers through an exported SWF. Do you, or anyone know what would cause this to break?

      Reply
    6. mj

      Excellent overview. cheers. Damn, so much to sort out. Think I’d be best off hiring one of you dudes to build my apps.

      Reply
    7. Pdj

      Thanks for this nice tutorial,
      I have one problem Can you please help me on this error

      Installing application for testing on iOS ()
      Installation Error: ApplicationVerificationFailed.
      Installing the app on the device failed

      Thanks in advance.

      Reply

    Leave a Reply

    Your email address will not be published. Required fields are marked *