Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs or learn how to Submit Your Own Blog Post
Put Flash games on iOS, and Steve Jobs be damned.
[this article is cross-posted from the Untold Entertainment blog, which is awesome]
This is the second 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.
Skip ahead to Part 3
Without a doubt, this section of our tutorial series on bundling your Adobe AIR App for Apple's iOS platform is the pits. You have to use a complicated command line interpreter, you have to juggle what may feel like a million different certificates and profiles, and you have to jump through a dizzying array of hoops just to get everything set up ... and you're not even going to start building your app at all! But trust me: once you've cleared these hurdles, the rest of the process is gravy.
Thick, delicious gravy.
The first goal of this tutorial is to create a signing certificate, which is used very much like a hot brand on cattle. It's the digital signature of you or your company that identifies an app as your own. We need to use a program called OpenSSL to create this signing certificate.
In order to turn your future AIR project into a native app, you need to create two important files: a Signing Certificate and a Mobile Provisioning Profile. If you are working on a Mac, you actually use a program called Keychain to do some fancy voodoo magic and get the certificate you need. We are working on a PC and we do not have that luxury, so there are a couple of confusing steps that we must go through.
The first thing you have to do is go to http://www.slproweb.com/products/Win32OpenSSL.html. Scroll down, and then download the Visual C++ 2008 Redistributables and install the resulting file.
Next, download the Win32 OpenSSL v1.0a Light file and install that after you have installed the first package. These two files will help you create the Signing Certificate Request you so richly deserve.
Be sure to keep track of where you installed those last two elements. Next, visit this site: http://help.adobe.com/en_US/as3/iphone/index.html. These are Adobe's help files for generating your signing certificate and then converting that certificate into a .P12 file. If you get lost in this tutorial, that page will be your safety net.
On that Adobe support page, you will see some instructions for Mac machines. Ignore them. Scroll down to the Windows instructions and give them a once-over.
The instructions say that you have to install Open SSL. You've already done that. Open a command prompt window. You can do this by going to your Start button and typing in cmd in the search field. (You can also hold the Windows key on your keyboard and hit the "R" key (for "Run"), then type cmd and hit Enter.)
Once you are in the command prompt, travel your way to your Open SSL bin folder. Depending on where you installed it you will have to travel to a different path than in this example. (For your sake, i hope you installed Open SSL in a location that you can remember!) If this is your first time using the command prompt, here's a quick primer on the commands that will help you get around:
cd This command means "Change Directory". If you are in a directory and you want to go into one of its sub-directories, use this command plus the directory name (example: cd directoryName)
cd.. This command will pull you up one level in your directory structure
dir Type this command to see a list of all of the files and folders within your current directory
dir /w The /w (wide) switch spreads a directory listing across multiple columns. This is useful for seeing all the folder names at a glance, instead of in one big long scrolling list.
You may have some problems getting some of the following commands to work. A fine commenter (and Ontario resident!) named Dan Zen mentioned on the Adobe guide's comments section that you may need to input set RANDFILE=.rnd in your command prompt before the following commands will work properly.
Generate a Signing Certificate Request File
With all of that taken care of, you can start inputting some commands to create your Signing Certificate Request file. Once you have that file, you'll use it to ask Apple for your proper Signing Certificate file that you'll use to identify your app.
Punch this command into your command line interpreter and hit the ENTER key when you're finished:
openssl genrsa -out mykey.key 2048
You should see this response:
Next, type (or highlight the line, right-click, choose "Copy", and right-click/"Paste" in the command line interpreter):
openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest
-subj "/[email protected], CN=John Doe, C=US"
Now, before you hit ENTER you'll want to edit a couple of things. First, replace "John Doe" with your own name or company name. Then replace the "[email protected]" email with your own email. Then press ENTER. You should get a message similar to this:
You just generated the Signing Certificate Request file that you'll use to ask Apple for your Signing Certificate. The Signing Certificate Request file is located in the bin folder of your Open SSL install. It has a .certSigningRequest file extension and should look like this:
You have to upload your Signing Certificate Request file to the Apple Provisioning Portal to get your signing certificate. Note: There have been instances where this upload does not work with Google Chrome. Just to be safe, use another browser like Firefox.
Navigate to the iOS Provisioning Portal after logging in with your developer account and click on Certificates.
Click Request Certificate.
Note: If you are a team member and/or you have not paid the annual developer fee of $99 dollars, then you cannot request a Signing Certificate. Only the Team Admin - the person who has paid the development fee - will be able make this request. On the next screen, you will upload the Signing Certificate Request file that you generated in the previous section.
Click the Browse button and navigate to the bin folder located within your OpenSSL folder.
Once you have selected the Signing Certificate Request file, click Submit. Your next screen should show this:
Just hit Refresh a couple of times on your browser and you should eventually see this:
It's your Signing Certificate! Go ahead and download it. Just to make things easier, you can save that certificate in the bin folder in the Open SSL folder, where your Certificate Signing Request file is sitting.
Are you having fun yet? Yeah, me neither. We are making good progress though. The next step is converting that Signing Certificate to a p12 certificate, because Apple loves certificates.
From the Adobe help page, visit the link describing the process of converting a developer certificate to a p12 file. You get a list of more commands that you'll have to punch into your trusty old command prompt.
Copy the first command (highlight the text, right-click and select "Copy" from the context menu):
openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem
-outform PEMOpen up your command prompt as I showed earlier, and navigate to the bin folder of your Open SSL directory.
Once you're there, paste in the first command (right-click and select "Paste" from the context menu), and press ENTER.
Skip ahead to Step 3 of the Adobe help guide and copy that command. (The command in Step 2 is for Macs only.)
openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem
-out iphone_dev.p12Once you punch in the command, enter a password and then verify that password. Make sure the password is something that you will remember. (Save it in a .txt file in that folder if you've got a lousy memory like me - Ed.) When you are typing in your password, the command prompt does not give you the luxury of seeing dots or asterisks to indicate how many letters you are typing in. Rest assured that the command is accepting your input. Note: You may get an error mentioning a "random state". Just type in the command set RANDFILE=.rnd and it should fix the problem for you.
Go into the bin folder in your Open SSL directory and you should see your .p12 file. Hooray!
Now that you have the precious file you need, it's finally time to create your Mobile Provisioning Profile. You'll start by setting up a unique ID for the app you're creating.
Navigate back to the Provisioning Portal in your web browser to create an App ID for your app. Log in, click on Provisioning Portal, and click on App IDs.
Click New App ID. Note: If you have not paid the developer fee, or if you are just a team member of the Team Admin, you will not see this option. Ask your Team Admin to complete this step.
On the next screen you'll start by writing a Description for your app, which can be anything you want. (This is what the player will see when he sees your app in the App Store. Obviously, there's a whole marketing concern here that's outside the scope of this tutorial. Since we're just building a test app, i recommend you punch SOME CRAZY NONSENSE in there for your description. Take THAT, marketing. -Ed) Within the Bundle Seed ID (App ID Prefix) you will have various options, depending on your account status.
If you are the Team Admin, you'll have a "Generate New" option. Team Members will only see a "Use Team ID" option. (If this is not your first App, you could also choose the Bundle Seed IDs for previous project). Either way, leave it at the default. The Bundle Identifier lets you create a specific package for your App. The standard way to make this package is to reverse the name of your website domain. I used com.sina.ipadtest. (Our team uses com.untoldentertainment.whatever - Ed.) Alternately, you can use a generic Bundle Identifier by just putting an "*" in the field. Note: There have been cases where the asterisk does not work for some people. It is a safe bet you make a specific namespace like the examples above.
Click Submit. Voila - you have now created your App ID! On the next screen you will see all of the app profiles you've created.
Now that you have an App ID, you can now create your Mobile Provisioning Profile. This is the crowning touch to everything we've done in this tutorial so far. The Mobile Provisioning Profile glues your developer(s), your Signing Certificate, your app ID and your testing device together. Once you have this file, you'll be able to test an app on your device.
Within the Provisioning Portal website, click Provisioning in the sidebar.
Click on New Profile. Note: You only see this option if you are the fee-paying Team Admin.
Give your provisioning profile a Profile Name.
Choose the Signing Certificate(s) that you want to use with this profile.
Use the drop-down list to indicate the app for which you're creating this profile.
Finally, indicate the testing device you want to test it on.
Click Submit.
You'll be taken to a screen that says your Mobile Provisioning Profile is pending. Just click your browser's refresh button a couple of times until the Downloadbutton appears, and download your precious, hard-fought profile. Make sure to save it in a location you're likely to remember.
That was a big pile of hoops to jump through just to test an app on your device, and we haven't even begun building the app yet! Here's what you just accomplished:
You used the command line and OpenSSL to create a Certificate Signing Request file.
You sent that file to Apple. Apple responded by enabling you to download your Signing Certificate file. This file identifies you as the developer of your app.
You converted your Signing Certificate to the .p12 format.
You created an ID for your app.
You created your Mobile Provisioning Profile, the glue that holds all these elements together and enables you to test your app on an iOS device.
The good news is that you DO NOT need to repeat the steps to create your Signing Certificate for additional apps. Now that you have that file, you'll use it to sign all of your iOS apps from here on in. Similarly, you won't have to re-enter your developer ID or device ID for future projects (unless, of course, you gain a new team member or device). The App ID and Mobile Provisioning Profile are the two pieces that are unique to your app - you WILL need to repeat those steps for additional projects.
The next part of this tutorial series will cover the process of creating your actual Adobe AIR app using FlashDevelop, bundling it up with this mess of certificates and profiles you just built, and deploying the app to your testing device.
Continue to Part 3
Read more about:
Featured BlogsYou May Also Like
