Tutorials‎ > ‎

Export Games From Flash to iOS

Programs Required:

  • Adobe Flash:  Professional CS5.5 for Windows 7 is being used in this tutorial
  • Computer with Mac Operating System
  •      Keychain Access
  • Computer with Windows Operating System: Windows 7 is being used in this tutorial
  • iPhone, iPad, or iPod Touch:  iPhone 4 (black) with version 6.0 is being used in this tutorial
  • iTunes:  Version 10.7.0.21 or "iTunes 10" is being used in this tutorial
This tutorial is in accordance with Apple's iOS Developer University Program for the students to understand how to export their games from Flash to their personal iPhone, iPad, or iPod Touch.  This tutorial expects the user to have an instructor responsible in creating the mobile provisioning files as well as their end in creating certificates available for download on the Developer website.

This tutorial will walk you through the process of creating the p12 and other necessary files and steps in order to successfully publish your game, that was built in Adobe Flash, and play it on an actual iPhone, iPad, or iPod Touch.  I'm not going to teach you about every tool regarding any of the mentioned programs.

Information for this tutorial was gathered through the efforts of Patricia Huettel, Andrew Bachman, and myself, Tessa Liddington.

If this is your first time publishing a game from Flash to the iOS, then you will need to use a computer with a Mac operating system.  If you have published a game before, and you still have your Certificates.p12 file, then you can skip to step 4: Collect the Mobile Provisioning Profile for your Game, and start there.

Set up your iPhone, iPad, or iPod Touch for Testing

This step can be completed on a computer running Mac or Windows operating systems (tutorial is using Windows 7).

This step is necessary if you want to use your personal device for testing.  Under this license, you cannot sell your games, but you can put them on "activated" devices for testing purposes.  The devices are activated by your instructor, and so you need to provide them with the device's UDID number.  This number is unique for every single Apple product.

To find this number for your device, you must first plug it into a computer.  For this tutorial, I am plugging in my black, iPhone 4 (software version 6.0) into my personal computer running Windows 7.  For me, iTunes opens automatically when I plug in my phone (because of the default settings).  If it doesn't, open it manually.  When opened, you should go to your device's name located under "Devices" in the left sidebar (see image).

I named my phone "Hiro" after a cat I owned who was named after a Fruits Basket character.  Once on that screen, you should see something similar in the image below.  For my iPhone, I have fields for Name, Capacity, Software Version, Serial Number, and Phone Number.

Click to view full size.  My numbers are blurred for obvious reasons.

If you click on "Serial Number", then it will toggle to display "Identifier (UDID)".  This is the combination of numbers and letters (40 characters total) that you want to send to your instructor for them to activate it for testing.

Click to view full size.  My numbers are blurred for obvious reasons.

Only devices that are activated before creating a Mobile Provisioning file can be used to test published games.

Create the "Request" for a Certificate

This step can only be completed on a computer running the Mac operating system.
  1. Go to http://developer.apple.com and log in to your account
  2. Click on iOS Dev Center (may need to click on logo to return to the landing page if logging in redirected you to somewhere else)
  3. Click iOS Provisioning Portal (located at the top right of the page)
  4. Click Certificates
  5. Click Request Certificate
  6. Follow the step-by-step instructions to Create Certificate.
The first file that you will generate is the CertificateSigningRequest.certSigningRequest.  This file will get uploaded to the Developer website for your instructor to approve.
  • Common Name is just your first name (preferably not a nickname, but ask your instructor otherwise).
  • Password is the password to the computer you're working on.  Ask your instructor for it if you don't know.

Create your "Certificates.p12" file

This step can only be completed on a computer running the Mac operating system.

Once your instructor approves the file you uploaded in the last section, a new file will be available for download on the Developer website:  ios_development.cer.
  1. Download that file.
  2. Go back to Keychain Access, and drag the file into it.
  3. Click on CategoryCertificates (located in the left sidebar)
  4. Click on the drop-down arrow to "open" the file.  If you do not see a dropdown arrow, something is terribly wrong.
  5. Select Private Key
  6. Click on File / Export Items
  7. Save the Certifcate as personal information exchange file (the .p12 file type).
  8. Create a memorable password.  This should be different from the password you created earlier.  This password will be used again when publishing your game in Flash.
  9. A pop-up will appear; type in the computer login.  Ask your instructor if you do not know.
If you have a file called Certificates.p12 on your desktop, then call it success!  Be sure to NEVER delete this file because it will be used, along with the password you created, to publish your game from Flash.  Each developer has his or her own unique .p12 file.  Be sure to back it up along with your other two certificate files.

Collect the Mobile Provisioning Profile for your Game

This step can be completed on a computer running Mac or Windows operating systems (tutorial is using Windows 7).

Email your instructor with a request for an App ID for your game.  The email's subject line should read "App ID for <your name>".  Specify the following for your instructor in the body of the email:
  • The devices you wish to have the app playable (iPhone, iPad, or both)
  • The name of your game
Your instructor will then provide you with the necessary profile for you to download from the Developer website.  The file that you'll be downloading will be <the name your instructor gave it>.mobileprovision.  Download it and then save it in the same folder as your FLA file.

The mobile provisioning file is unique to each game, and should not be used to publish more than one game.  However, you can use it to publish sequential versions of the same game for multiple testing purposes.

Create the Icons and Splash Screen

This step can be completed on a computer running Mac or Windows operating systems (tutorial is using Windows 7).

The iPhone, iPad, and iPod Touch have many icons that get used based on the device.  It does not matter which device you are publishing for, you still need all of the icons in the specified sizes in order for your game to publish successfully.  These icons must be square with the following dimensions (measured in pixels):
  • 29 x 29
  • 48 x 48
  • 57 x 57
  • 72 x 72
  • 114 x 114
  • 512 x 512
When your game gets published, your icon designs will automatically be "buttonized" by Apple's products.  This means that you don't have to make the rounded corners or "button glare effect" that the "pretty buttons" have.  In fact, you shouldn't because it would look odd otherwise.  Keep your designs to actual squares.

At the bottom of my tutorial, you can download a PSD file I made for an icon template (it is 512 x 512 pixels) that makes note of an inner square that identifies the points in the icon that may get cropped when the corners become rounded.

Aside from the icons, the game also makes use of a Splash Screen.  This screen is displayed while the game is loading and the amount of time that it is displayed is dependent on the load time (and if it loads quickly, may not even show at all).  With that in mind, you shouldn't have too much information on this screen because the user may not be able to read a whole lot.  The splash screen should be the same size as your Flash game's stage (which should be the same size as the screen of your device).  Below are some possible dimensions:
  • 320 x 480 (iPhone 3 and below) - recommended for iPhones in general
  • 640 x 960 (iPhone 4)
  • 1024 x 768 (iPad 2) - recommended for iPads in general
  • 2048 x 1536 (iPad 3)

Be sure to save your splash screen as Default.png in the same folder as your FLA file.  Save your icons in a folder relative to your FLA file (I'm cool and I just create a folder called "icons" and each icon is named "icon_29.png" based on its size, ha!).

Publish the Game

This step can be completed on a computer running Mac or Windows operating systems (tutorial is using Windows 7).

First, you must prepare your folder full of fun files to be exported.  Create the ultimate folder to hold all of these files:
  • <your game>.fla
  • <your game's external scripts>.as (if applicable, and all of them if more than one)
  • Certificates.p12
  • <name that your instructor gave it>.mobileprovision
  • Default.png (yes, with a capital D)
  • icons (folder holding all of the PNG icon files of the various sizes from the previous section)
Now open up Adobe Flash, and open your game's FLA file.

Click File / Publish Settings.  
  1. Change the Player to AIR for iOS if not already.
  2. Under ADVANCED (click the arrow to reveal the settings if not visible), check the box to "Omit trace statements"
  3. Click Okay (NOT Publish) to leave that window.

Click File / AIR for the iOS Settings...

General Settings Tab
  1. Make sure the Output file is a decent name followed by .ipa
  2. Change the App Name to something recognizable (this is what is shown under the icon on the device)
  3. Set the Aspect Ratio to what fits your game: Landscape, Portrait, or Auto.
  4. Check "Full Screen"
  5. Auto Orientation will turn your game's screen to whatever direction the user is holding the device, regardless if your aspect ratio is set to portrait or landscape.  Do not check this unless your game can be displayed nicely in both landscape and portrait.
  6. Change the Device to "iPhone and iPad", even if you're only publishing for just one of the devices.
  7. Click on the + sign in the "Included Files" section to add the Default.png and any external AS files you may have used (the SWF and XML files should already be listed).

Deployment Tab
  1. Browse for your Certificates.p12 file for the Certificate field.
  2. Input your password that you created for your p12
    1. Checking the box to remember your password is optional.  I only do it if I'm on my personal computer.
  3. Browse for your mobile provisioning file for the Provisioning profile field.
    1. Ignore the App ID field.  It's the same as your output name.
  4. Check the Ad hoc deployment type (third option).

Icons Tab
  1. Select an icon size in the list at the top
  2. Press the button that looks like a folder and a magnifying glass to browse to the icon with the same dimensions as the one in the list
  3. A preview of the icon will show in the bottom box labeled "Preview".
  4. Repeat until you have all of the icon sizes with the properly sized image.

Double check everything is good to go.  If everything looks peachy, click on Publish and cross your fingers.  If it all goes well with no errors, you will have a file with the IPA extension generated in your ultimate folder.  This is the magical app file for the iOS.

Put your Game on your iPhone, iPad, or iPod Touch to Test

Assuming your device was activated before generating the mobile provisioning profile for your game, you can put your game on the device.
  1. Open iTunes (the device does not have to be plugged in yet)
  2. Navigate to Library / Apps in the left sidebar.
  3. Drag and drop the IPA file that you generated in the last section into the general area inside iTunes.
  4. Wait a few moments for iTunes to recognize the command and the app will get settled in nicely (in alphabetical order).  Your app will appear with your icon design buttonized (meaning it adds the glare and rounded corners to your design).
  5. Connect your device to the computer (unless you do that awesome wireless/WiFi syncing)
  6. Sync your device with iTunes (if it doesn't automatically)
  7. When the sync is complete, you will see your buttonized icon on your device in the last available slot.
  8. Poke it.  I dare you.
ċ
Tessa Watkins,
Oct 5, 2012, 1:40 PM
Comments