How to create an iPhone app from a Flash .swf file with Adobe AIR SDK

From Color Infection Wiki
Jump to: navigation, search

(This tutorial is not suitable for the swf file download from Phayrd)

Notice:

  1. This is one of the many workflows to develop iOS apps.
  2. I have very few iPhone app development experiences. The article may contains some inaccurate points.

Overview

Adobe AIR is a cross-platform runtime environment developed by Adobe Systems for building Rich Internet Applications (RIA) using Adobe Flash, Adobe Flex, HTML, and Ajax, that can be run as desktop applications or on mobile devices. The runtime supports installable applications on Windows, Linux, Mac OS and some mobile operating systems such as iOS and Android. (see the wikipedia item).

The AIR SDK is simple to use. It is more a packager tool than a development tool. It just packages your Flash apps developed by other Flash development tools. It can also package apps developed with HTML5+CSS+JavaScript.

To run an AIR program on a target operating system, AIR runtime program must be installed on the operating system. For PCs (I think Mac is also a PC), you can download and install the AIR runtime here. For Android mobile phones, there is a free app called Adobe AIR at the Google or Amazon Android Market. If you install an app which need Adobe AIR to run, the Android system will prompt you to install the free Adobe AIR app firstly.

For iOS (iPhone and iPad), sadly, Apple forbids Adobe providing a AIR runtime at Apple App Store. So Adobe AIR SDK will bundle your app with the AIR runtime together as a solo app. (In fact, the newest AIR SDK version supports bundling your app with the AIR runtime for any operating system.)

The iOS app packaging process is more complex than Android app packaging process. Currently, Phyard.com doesn't support the "download design as an iOS *.ipa app" feature. You must package your iOS apps from your design swf file manually. This tutorial is to just help you do this job.

Package swf files by yourself

Install JRE

Adobe AIR SDK needs Java Runtime Environment (JRE) to run. If you have installed JDK, then you have already installed JRE, for JRE is included in JDK. Otherwise, if you don't need JDK to develop Java programs, you can download and install JRE individually. For Mac users, follow this instruction: http://kb2.adobe.com/cps/909/cpsid_90908.html.

Install AIR SDK

Download it here. Adobe has interrupted the development for AIR SDK Linux version from v2.7. You can download v2.6 for Linux here.

To install AIR SDK, just unzip the download zip package.

Set System Path Environment Variables

Sorry, I'm not good at English. It is hard for me to describe clearly how to set the PATH environment variable on all kinds of operating system. You can google "set PATH environment variable" + Windows (or Linux or Mac) to find the answer. Ok, when you get it, add the JRE_InstallDir/bin and and AIR_InstallDir/bin to your PATH environment variable, where JRE_InstallDir and AIR_InstallDir are the path of install directories of JRE and AIR SDK. (For Windows, replace the / in path with \)

Maybe when you install JRE, the path JRE_InstallDir/bin has been already added to the PATH environment variable automatically. So you need only to add 'AIR_InstallDir/bin to the PATH environment variable.

In short, before adding the AIR_InstallDir/bin into the PATH environment variable, you will input the following command in a terminal or DOS console window to call the adt program in AIR SDK:

AIR_InstallDir/bin/adt -version

On Windows, it may be (in the following command examples, I will not show the Windows case any more. Just remember, on Windows, the separators in path is \ instead of /):

C:\AdobeAir\bin\adt -version

But after adding the AIR_InstallDir/bin into the PATH environment variable, you can call the adt command directly

adt -version

The command will output the version of the AIR SDK, for example, 2.6.0.19120, which means the AIR SDK version is 2.6.

Create The App Project

  1. Create a new directory anywhere to contain your project files.
  2. Then create a src folder in the project directory.
  3. Download the design swf file from Phyard.com and put it in the src folder. Assume you save it as MyGame.swf.
  4. Create a file MyGame-app.xml in the src folder, and put the following content in it:
<?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/2.6"> 
    <id>com.phyard.ios.viewer.PhyardGame</id>
    <name>Color Infection 3</name> 
    <versionNumber>0.0.1</versionNumber> 
    <filename>ColorInfection3</filename> 
    <supportedProfiles>mobileDevice</supportedProfiles>
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
    <initialWindow> 
        <content>./MyGame.swf</content> 
        <fullScreen>true</fullScreen>
        <aspectRatio>landscape</aspectRatio><!-- portrait -->
        <autoOrients>false</autoOrients>
        <visible>true</visible>
        <renderMode>gpu</renderMode> <!-- cpu -->
    </initialWindow> 
    <icon> 
        <image29x29>icons/Icon_29.png</image29x29> 
        <image57x57>icons/Icon_57.png</image57x57> 
        <image512x512>icons/Icon_512.png</image512x512> 
    </icon>
</application>

You should modify it as needed:

  • change the 2.6 in xmlns="http://ns.adobe.com/air/application/2.6 to the real AIR SDK version. (if the version is larger than 2.6, you can also keep it unchanged.)
  • you should (try to) make sure the id com.phyard.ios.viewer.PhyardGame.DesignByTapir.AtSlot_3_7 unique. I means it should not be the same as the other apps developed by the developers all over the world.
  • replace the name Color Infection 3 with your game title.
  • set the correct version number.

More about setting iPhone application properties in the application descriptor file

Make Icons For Your App

  1. All iPhone applications display an initial image while the application loads on the iPhone. In the src folder, create a PNG file named Default.png with size 320x480. (Be sure to name the file Default.png, with an uppercase D.)
  2. Create an icons folder in the src folder and create 3 png files in it with names: Icon_29.png, Icon_57.png, and Icon_512.png. Their sizes are 29x29, 57x57 and 512x512.

Note: When you submit an application to the Apple App Store, you use a JPG version (not a PNG version) of the 512-pixel file. You use the PNG version while testing development versions of an application. You can same Icon_512.png as Icon_512.jpg in an image edit software.

Test the application

Assume your project directory is /home/Tapir/develop/projects/MyGame. Open a terminal or DOS console window, firstly enter your project directory:

cd /home/Tapir/develop/projects/MyGame

Then run:

adl src/MyGame-app.xml -screensize iPhone

to test your app. The adl is another command program in AIR SDK for your to test your apps.

Get The Developer Certificate & Provisioning Profile

Create a folder cer in the project directory.

To package iOS apps, you must get a developer certificate and a provisioning profile from Apple. To get these files, you must register as an Apple app developer. To register as a Apple app developer, you must give Apple $99, per year.

The process to get the certificate and provisioning profile files is a little complex. Follow this guild.

But for test purpose, you can download the 2 fake files from here: http://gadgetzz.com/2011/08/12/how-to-make-an-iphone-app-without-coding-or-dev-certificate/. When you think it is the time to publish your app in Apple App Store, you can register as an Apple app developer and get the real certificate and provisioning profile files.

Note, to install the packages made with the fake certificate and provisioning profile files on your iPhone, your iPhone must be jailbroken. So maybe using the fake files is not a good idea for you.

Put the certificate and provisioning profile file in the cer folder.

Package & Sign The App

Create a bin folder in your project directory to store the final output binary package file.

Ok, now your project directory looks this:

 /MyGame
  |- /bin
  |- /cer
      |- FakeCert.p12
      |- Fake.mobileprovision
  |- /src
      |- icons
         |- Icon_29.png
         |- Icon_57.png
         |- Icon_512.jpg
         |- Icon_512.png
      |- Default.png
      |- MyGame.swf
      |- MyGame-app.xml

Enter the src folder (assume you are in the project directory now):

cd src

Run the following command to package your game (where ../ means parent directory, for we are in the src directory now, so the parent directory is the project root directory):

adt -package -target ipa-debug -keystore ../cer/FakeCert.p12 -storetype pkcs12 -provisioning-profile ../cer/Fake.mobileprovision ../bin/MyGame.ipa MyGame-app.xml MyGame.swf icons Default.png

You will be prompted to enter the certificate password, input 1234. The package needs several minutes to be created. The output package file, MyGame.ipa, will be put in the bin folder.

Note, for AIR SDK 2.6 on Linux, the above command will return error. The newest version 3.1 on Windows is ok.

If you want to make a package to upload it to Apple App Store, you should make some changes when calling the last command:

  • change the target parameter from ipa-debug to ipa-app-store
  • change the keystore parameter to the real certificate
  • change teh provisioning-profile parameter to the real provisioning profile
adt -package -target ipa-app-store -keystore ../cer/FakeCert.p12 -storetype pkcs12 -provisioning-profile ../cer/Fake.mobileprovision ../bin/MyGame.ipa MyGame-app.xml MyGame.swf icons Default.png

About the target parameter, see iOS packages

Install The App Package On Your iPhone

By googling, I found here is a tutorial for installing apps on jailbroken iPhones: Installing ipa on the iPhone, Step by Step Guide.

Note: the method of installing apps on jailbroken iPhones is just for you to test your friends' and your own apps only. I don't encourage any other usages with it.

Sorry, I haven't used iPhone yet, and still don't know how to install a package in a formal way even if after doing some searches.

References

  1. Developing AIR applications for mobile devices, http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-8000.html
  2. iOS packages, http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac35eb7b4e12cddc5fbbb-8000.html
  3. Adobe AIR , http://help.adobe.com/en_US/air/build/index.html
  4. Developing AIR applications for mobile devices, http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-8000.html
  5. Creating your first AIR application for iOS With AIR SDK, http://help.adobe.com/en_US/air/build/WSfffb011ac560372f3cb56e2a12cc36970aa-8000.html
  6. Creating a Hello World iPhone application with Flash Professional CS5, http://help.adobe.com/en_US/as3/iphone/WS789ea67d3e73a8b2-240138de1243a7725e7-7ffc.html
  7. Generating a certificate signing request, http://help.adobe.com/en_US/as3/iphone/WS144092a96ffef7cc-371badff126abc17b1f-8000.html
  8. Application icons, http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html
  9. Obtaining developer files from Apple, http://help.adobe.com/en_US/as3/iphone/WS789ea67d3e73a8b2-240138de1243a7725e7-7ffd.html
  10. Exporting for iPhone using Air 2.7 and FlashDevelop - Part Three, Generating Developer Certificates, Provisioning Profiles and .p12 files, http://www.codeandvisual.com/2011/exporting-for-iphone-using-air-27-and-flashdevelop-part-three-generating-developer-certificates-provisioning-profiles-and-p12-files/
  11. Converting a developer certificate into a P12 file, http://help.adobe.com/en_US/as3/iphone/WS144092a96ffef7cc-371badff126abc17b1f-7fff.html
  12. How to make an Iphone app, without coding or dev certificate!, http://gadgetzz.com/2011/08/12/how-to-make-an-iphone-app-without-coding-or-dev-certificate/
  13. How to use Adobe's iPhone Packager without an Apple Developer Subscription, http://www.instructables.com/id/How-to-use-Adobes-iPhone-Packager-without-an-Appl/