Flash to iOS: A Step-by-Step Tutorial (Part 4)
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:
- Part 1 – Sign up for an Apple iOS Developer Account
- Part 2 – Obtain your Signing Certificate & Mobile Provisioning Profile, and create your App ID
- Part 3 -Use FlashDevelop to build your mobile AIR app
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.
- 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.
- Click the Project Properties button at the top of the Properties Panel (alternately, you can use the menus to navigate to Project>Properties).
- 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.
- Click on the SDK tab, and click Manage.
- 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.
- 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.
- Once you have clicked the ellipsis button, a Windows File Browser appears. Navigate to the merged SDK directory. Select that folder and click OK.
- Click OK again to exit the InstalledSDK Collection Editor window.
- Click Close.
- 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.
- Click Apply.
- 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:
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.
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.
- 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.)
- 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.
Integrate Your Cert Files
Once the files are in the right place, they should show up in your Project sidebar:
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.
All in all your SetupApplication.bat should look like this:
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.
- Double-click the SetupSDK.bat file to open it in FlashDevelop.
- 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:
Note: Remember to save often!
- 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.
- 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.
- In the id node, enter the package name that you created for your Mobile Provisioning Profile.
If you don’t remember what your Bundle ID was, go to the Provisioning Portal on the iOS developer website and click on Provisioning.
After all that, you’re finally ready to compile your .ipa file to test on an iOS device.
- In the sidebar, right-click the PackageApp.bat file and select Execute.
- 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.
- Look in the dist folder in the sidebar. You now have an .ipa file!
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.
- Plug in your iPhone/iPad/iPod Touch/iEtCetera and let it sync in iTunes.
- After it’s synced, go to Library -> Apps.
- To add your Mobile Provisioning Profile, click and drag it from your folder into the iTunes Library.
- 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!
After dragging your .ipa file into iTunes, you’ll see a generic App icon that FlashDevelop/AIR generated for you.
- In the left sidebar, click on Devices -> Your iPad/iPod/iPhone.
- 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).
- 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.
- Fire up your iPad/iPhone and BAM!
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.
Popularity: 4% [?]