You are on page 1of 24

Create an iOS App using Adobe Flash Side by Side Training, 2013

Create an iOS App using Adobe Flash


And without using a Mac

Contents
1 Become an Apple iOS Developer ............................................................................................................ 2 2 Add a Development Certificate ............................................................................................................... 4 3 Create a Certificate Signing Request (CSR) ............................................................................................. 6 4 Register Your App.................................................................................................................................... 9 5 Register Your Device ............................................................................................................................. 10 6 Add a Provisioning Profile ..................................................................................................................... 11 7 Generate a .p12 File .............................................................................................................................. 12 8 Create a Flash App ................................................................................................................................ 14 9 Publishing your App .............................................................................................................................. 15 10 Distribution ......................................................................................................................................... 17 11 iTunes Connect .................................................................................................................................... 20 12 Application Loader .............................................................................................................................. 24

1|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013

1 Become an Apple iOS Developer


It costs $99 to become an individual developer, and $299 to become an enterprise developer. Individual developers create apps and sell them on the app store. The enterprise developer is intended for companies who create proprietary, in house iOS apps for internal deployment only. (Those apps cannot be sold.) Check out this link for further discussion. 1. Go to https://developer.apple.com/register/. 2. Youll need an Apple ID to sign up, so either create a new one or sign in with an existing one.

3. After signing in, agree to the terms of service (i.e. Apple now owns you). 4. The Tell Us About Yourself page features different random questions. Answer all of those then click Register.

5. Youll be taken to the Developer Member Center page, but youre still not actually registered as an iOS developer. Click the Your Account tab.

6. 7. 8. 9.

Scroll down until you see the iOS Developer Program row and click the Join Today button. A new page opens. Click Enroll Now. Click Continue. Click Continue again (check to make sure youre correct Apple ID is in the Existing Apple ID text). 2|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013 10. Most likely youre enrolling as an individual, and that is what this tutorial will go through. If you are enrolling as a company then the steps are a bit different.

11. I wont go through all of the next steps, but basically you need to enter your information, choose to be an iOS developer, agree to various terms and conditions, enter in credit card information, etc. 12. After completing these steps, Apple will email you an activation code. Enter it and click Activate.

Congrats! You just gave Apple money! Youre also registered to have the possibility of creating apps, but were not there yet. 3|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013

2 Add a Development Certificate


1. Go to the iOS development center homepage (https://developer.apple.com/devcenter/ios) 2. Click on the Certificates, Identifiers, & Profiles option.

3. Click on the Certificates folder.

4. From this interface you have access to all of your certificates, identifiers, devices, and provisioning profiles. The first step is to create a Development certificate. To do so, click the + sign in the top toolbar on the certificate folder.

5. Under the Development headings, click the radio button titled iOS App Development. Note: If you want to use push notifications, youll need to select Apple Push Notification service SSL (Sandbox). However, using push notifications in Flash is not easy. Refer to this webpage for more information on push notifications. 4|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013 6. At the bottom of the page is a certificate that is typically installed on your computer when you install Xcode, but were not using Xcode. Click the link to download the certificate, then click it again to install it locally on your computer.

7. Click Continue. You dont quite have a certificate yet, but these next steps are a bit tricky so Ill break them out into their own section.

5|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013

3 Create a Certificate Signing Request (CSR)


This section explains how to create a Certificate Signing Request (CSR) file. Youll notice if you read the directions within the developer portal they deal with creating a CSR on a Mac. Were not using one, so we have to get a bit creative.

1. Go to the Win32 OpenSSL Installation Project and download both the Win32 OpenSSL v1.0.0e Light and Visual C++ 2008 Redistributables packages.

2. Install the Visual C++ package. 3. Install the Win32 OpenSSL package. The Win32 OpenSSL will probably install in C:\OpenSSLWin32 path. During this tutorial, I will refer to this path, but obviously you should change yours if it is different. 4. Open the folder C:\OpenSSL-Win32\bin. 5. Open the command prompt by typing cmd into the search bar on the start menu. It can also be found under Start > Accessories > Command Prompt.(Dont be scared of the command prompt. It can be your friend.) 6. Type then press enter:
cd \OpenSSL-Win32\bin

Note: If copying and pasting from this document, youll need to right click in the command prompt and click Paste. Ctrl + V will not work. 7. Type then press enter:
openssl

8. If you get a warning that you cant open the config file, dont worry about it. 9. Type then press enter:
genrsa -out iosdevelopment.key 2048

10. If you go into your bin folder, you will see that you just created a file titled iosdevelopment.key. 6|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013 11. Type and press enter:
req -new -key iosdevelopment.key -out developmentcertificate.csr -subj "/emailAddress=stephen.calhoun1@gmail.com, CN=Stephen Calhoun, C=us" config "openssl.cfg"

Note: /emailAddress should be the email address you used to register your Apple ID and developer account. CN should be your name. C should be your country code. And the config openssl.cfg is only necessary if you received a warning message in step 7. 12. If you go into the bin folder, a new file was just created titled developmentcertificate.csr. The entire command prompt should look similar to the one pictured below.

13. Back within the Apple Developer portal, click continue to get to the Generate your Certificate screen. 14. Click Choose file

15. Navigate to the C:\OpenSSL-Win32\bin folder and select the developmentcertificate.csr file. 7|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013 16. Click Open. 17. Click Generate. 18. You now have a development certificate! Click Download. A file will save to your computer titled ios_development.cer.

19. Click Done. You should now see the certificate listed in your certificate folder on the portal. IMPORTANT NOTE! You only have to do this process two times total: once for development, once for distribution. Ill go over the distribution steps later (theyre essentially the same). Some of the following sections cover app ids and provisioning profiles. Those sections needs to be repeated for each app that is created, but again, you only need one certificate for development and one for distribution. So dont keep repeating the steps in this section.

8|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013

4 Register Your App


1. Click the Identifiers folder then click the + sign in the upper right corner.

2. Enter an App ID description. For this example simply enter Sample App. 3. Choose if you want an explicit app ID or wildcard app ID. The basic difference is an explicit app ID allows 1 provisioning profile to be associated with 1 app. The wildcard app ID allows 1 provisioning profile to be associated with multiple apps. Refer to this page for more info. Since this is a sample, an explicit ID is fine because you wont want to use it again in the future. But, when you do create an ID for your future apps youll probably want to use the wildcard so you dont have to create as many profiles.

Sample explicit ID: com.domainname.appname Sample wildcard ID: com.domainname.* 4. Click Continue. 5. The app ID will then appear in the Identifiers folder.

9|Page

Create an iOS App using Adobe Flash Side by Side Training, 2013

5 Register Your Device


1. Connect your iPhone or iPad to your computer. Open iTunes. 2. Within iTunes, go to the Summary page of the iOS device. 3. There should be a serial number listed in the top part of the summary. Click the serial number, and it will change to the Identifier (UDID) of the device. Thats the number you need.

4. Back in the Developer portal, select the Devices folder. 5. Click the + sign in the upper right corner.

6. Give your device a name, then enter the UDID into the UDID field.

7. Click Continue. 8. The iOS device should now appear in your devices folder in the portal.

10 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

6 Add a Provisioning Profile


Weve now created a development certificate, registered your app, and registered your device. The last step (kind of) is creating a provisioning profile, which essentially allows you test your app on your iOS device. 1. Click the Provisioning folder, then click the + sign in the upper right corner.

2. Choose iOS App Development

3. Select the app ID created in the previous sections (Sample App for this tutorial). Note: If using an explicit app id, you can only associate this one provisioning profile to the one app ID. 4. Select the development certificate created in the previous steps. 5. Select the devices youll be testing the app on. 6. Create a profile name. Again, Sample App for this example would be fine.

7. Click Generate.

8. Click Download. The provisioning profile will now be saved as a local file on your computer as Profilename.mobileprovision. 11 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

7 Generate a .p12 File


All of the steps outlined in the previous sections must be completed before a .p12 file can be created. 1. Download your iOS development certificate from the Certificate folder (ios_development.cer).

2. Place that certificate into the C:\OpenSSL-Win32\bin. If a certificate is already there with the same name, copy over it. 3. Open a command prompt window. 4. Type then press enter:
cd \OpenSSL-Win32\bin

5. Type then press enter:


openssl

6. Type then press enter:


x509 -in ios_development.cer -inform DER -out developer_identity.pem outform PEM

7. Type then press enter:


pkcs12 -export -inkey iosdevelopment.key -in developer_identity.pem out ios_dev.p12

8. Within the command prompt youll be asked to enter a password. Type it in then press enter on your keyboard. (The command prompt wont display any letters or movement as you type.) Enter the password again to verify it. Be sure to remember that password.

12 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013 9. If you go in to the bin folder, youll see a new file titled developer_identity.pem and a file titled ios_dev.p12. We now have all the files we need! Whew. Like I said, not a short process. We can now open Flash and get into some actual app development. IMPORTANT NOTE! Unfortunately, every time you create a new provisioning profile youll need to repeat this section. The reason for this is provisioing profiles are associated with a certificate. So when youre converting files within SSL protocol, if youre using an old (or previously downloaded) certificate file, it wont know that youve created a new provisioning profile. The best way to do it is if you know youll be creating multiple apps, create all the provisioning profiles for all the apps before doing these steps. Then you only have to convert everything a single time.

13 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

8 Create a Flash App


After opening Flash, simply click the AIR for iOS option.

The stage will default to 640 x 960, which is the native size of the iPhone 4. Change your stage size to the correct size of the iOS device you are targeting: iPhone 1-3 480 x 320 iPhone 4 - 960 x 640 iPhone 5 - 1136 x 640 iPads - 1024 x 768

Note: Even if the app is installed on an iPhone 5 when it targeted for an iPad (for example), itll still run and work fine. The screen dimensions will just be a little off. Developing for AIR is the same as developing a basic ActionScript 3.0 file. For now create something very simple like a basic button function or tween. You just need something so when you install it on your iOS device you know its your app. This tutorial wont go into how to use Flash. Thats a whole other giant topic. If you search Amazon for Flash App Development some good books will pop up.

14 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

9 Publishing your App


Below are the files Flash requires to publish an app: A .p12 file Provisioning profile

If youve followed all the steps of the tutorial up to this point, then you should already have those files. 1. Within Adobe Flash, go to File > AIR For iOS Settings

15 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013 2. Four tabs appear: General, Deployment, Icons, and Languages 3. The General tab is pretty straightforward. Enter an app name, select if you want the app to display as portrait or landscape, auto-rotate, etc. Click here for more details. Note: If you want a preloader screen to appear when you load your app, you need to add it here in the Included files section. Click the + sign and navigate to the image (the image should be named Default). The same is true for any external files (swfs, pdfs, etc.) that are linked to within your app. 4. The Deployment tab is the most complicated. In the certificate field, browse to the previously created .p12 file. Enter in the password you used in the command prompt when creating that .p12 file. 5. Select the provisioning profile associated with that app (should be Profilename.mobileprovision). 6. After selecting the provisioning profile, the app ID should auto populate. Note: If youre using a wildcard operator, youll need to add your app name to the end of the app ID. Otherwise, your apps will overwrite each other whenever you publish them to a device. Example: com.domainname.appname 7. Select Quick publishing for device testing. 8. If your iOS device is connected, check the box next to Install application on the connected iOS device. 9. The icons tab contains the images that will become the app icon. You can leave them blank, but when you go to actually create an app youll want to make sure you have icons for each of the various sizes. Note: If youre a Photoshop user, download the template found at http://appicontemplate.com/ to make the app icon creation process soooo much easier. 10. On the languages tab, you can select multiple languages if desired. It can also be left blank. 11. Alright, now click Publish and pray. Note: If it doesnt install, it may be because the provisioning profile isnt copying onto the iOS device correctly. You can manually copy it over by dragging and dropping it into iTunes then clicking Sync. You can check to see if it installed by going to your Settings > General > Profiles on your iOS device. Itll take longer than a usual Flash movie to publish as it has to package everything together. But, assuming all of the profiles are correctly created and defined, the app should install on your iOS device at this point. When it does, tap it and give it a test run. Congrats! Youve created and installed an app.

16 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

10 Distribution
Youve created, installed, and tested your app. Now youre ready for the big time: THE APP STORE. 1. Go to your Certificates folder within the Developer portal. Click the + sign in the upper right corner. 2. This time select the App Store and Ad Hoc option.

3. Refer back to the Create a Certificate Signing Request section for creating a CSR. Youll have to repeat all of those steps again. The only change is be sure to name the files distribution instead of development. So call it iosdistribution.key and distributioncertificate.csr.

4. Within the portal, browse to the distributioncertificate.csr. 5. Click Generate. Good work. Youve got the certificate. (Remember, youll never need to create an additional distribution certificate as long as youre not using push notifications and in app purchases.) You dont need to register the app again since it already has an app ID, and you wont need to register any devices, so the last thing youll need is a provisioning profile.

17 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013 6. Select the Provisioning Profiles folder and click the + sign in the upper right corner. 7. Select the App Store option under Distribution.

8. All the other steps are the same as in the Add a Provisioning Profile section. When finished, click Download. And now you have your provisioning profile. The last step is that .p12 file. Since the certificate is used in creating the .p12, we have to generate it again using the distribution certificate. 9. Refer back to the Generate a .p12 File section. Repeat all of those steps, except change the two lines of code listed below in the command prompt field: 10. Type then press enter:
x509 -in ios_distribution.cer -inform DER -out distribution_identity.pem -outform PEM

11. Type then press enter:


pkcs12 -export -inkey iosdistribution.key -in distribution_identity.pem -out ios_dist.p12

You now have the .p12 file used when publishing from Flash. 12. Within Flash, in the Deployment tab within the iOS settings, select the ios_dist.p12 file. 13. Enter the password. 14. The provisioning profile stays the same so that doesnt need to change. 18 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013 15. Under iOS deployment type, select Deployment Apple App Store.

16. Click Publish. Remember, if you come back to the app later and make changes to it, you dont have to go through this whole process again. Once its set up, it can simply be published again.

19 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

11 iTunes Connect
iTunes Connect is a completely separate portal and interface from the Developer Portal. Dont get the two confused; they are separate things. Before submitting your app, you must tell Apple its on its way before uploading the binary (or .ipa file). Again, most of these steps only need to be completed once. 1. Go to https://itunesconnect.apple.com 2. Log in using your Apple ID.

3. Agree to any terms and conditions that pop up. 4. If you want to get paid for your apps, there is a lot of paperwork you must fill out. If all of your apps (or at least the first) will be free, skip to step 11. 5. Click Contracts, Tax and Banking.

6. Click the Request buttons next to the iOS Paid Applications and iAd network rows. 7. Agree to terms and conditions. 8. Its time to set up your contact information. Click the Set Up buttons under Contact Info.

20 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

Note: The pictured buttons say Edit because Ive already set up these contracts. If this is your first time through the buttons will be blue and say Set Up. 9. If youve come this far in the tutorial, Ill assume youre a smart and well-rounded person who doesnt need me to guide you through entering your personal information. The only things that might be confusing is you have to add yourself as a contact, and assign yourself to all the various roles (you can be senior management!). 10. Repeat these steps for all the areas that need to be setup. Were getting close! Just one more set of steps to go through (dont you love all the hoops Apple sets up for us?). 11. Back on the iTunes Connect page, click Manage Your Apps.

12. Click Add New App in the upper left corner. 13. Enter in all the app information as its needed. Apple provides little gray question marks if youre unsure what any of the fields mean.

21 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

14. Follow Apples directions for all the subsequent screens. Basically youll need to set a price for your app, enter a description, upload some screenshots, and a few other things. Not difficult but itll take some time. For a more detailed walk through visit this site. 15. Once you get to the end of this process, youll see your app was created within iTunes Connect.

22 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013 16. However, unlike the previous image, the status wont say Ready for Sale with a green icon. Instead, itll say Prepare for Upload with a yellow icon. 17. Click the View Details button. 18. Click the Ready to Upload Binary button in the upper right corner. 19. Click OK through the next screens. 20. After you arrive back at the main screen, the status has changed to Waiting for Upload with a yellow icon.

23 | P a g e

Create an iOS App using Adobe Flash Side by Side Training, 2013

12 Application Loader
OK, small confession time here, this tutorial has said that you dont need a Mac to submit an app to the app store. Unfortunately, for this very very last step you do have to own a Mac. Before you send me angry emails, the reason Ive said no Mac required is you can get around it. The reason you need a Mac is for a little program called Application Loader. Its the only program that allows you to submit an app to the app store, and it lives within Xcode which can only be installed on a Mac. So, how to get around this last step? 1. Find a friend! If you have a friend who uses a Mac, all he or she needs is that .ipa file you just published from Flash. Send your friend the .ipa file along with your Apple Developer login credentials, and itll take your friend 2 minutes to upload your file for you. 2. Others have created services that mimic Application Loader like iUpload ($20) and iBuildApp ($30). I have not used all of these so I cannot fully endorse them, but they seem like good options. From what I can tell these are basically people who own Macs who will submit an app for you. Typically app review takes 1-3 weeks, but these times vary and no one really knows for sure how long itll take. If it gets rejected Apple will let you know why and give you an opportunity to fix it. If it gets accepted then you can do a little dance and be thankful that this tutorial is over. Happy App-ing!

24 | P a g e