Flash iPhone Entwicklung mit FlashDevelop und dem Adobe “Packager for iPhone”

Da Apple seine Richtlinien für Code von Drittanbietern in Form von LLVMs gelockert hat, darf man nun wieder offiziell Adobe Flash-Applikationen für das iPhone und iPad erstellen.

Aus diesem Grund hab ich mich mal hingesetzt und eine FlashDevelop Project Vorlage gemacht, die es ähnlich der Air-Pojekte erlaubt mittels Batch-Dateien ein fertiges .ipa Paket zu erstellen.

Anlaufstellen für Probleme und Fragen bezüglich der Flash Entwicklung für iPhone sind die offizielle Adobe Labs Seite zum iPhone Packager, der dazugehörende Entwicklerleitfaden (pdf), oder das iPhone Packager Forum.

So genug der langen Vorreden, hier nun eine Schritt für Schritt Anleitung zum Erstellen von iPhone Applikationen mit FlashDevelop.

Voraussetzungen

Bevor man anfangen kann müssen erst eine Dinge erledigt werden. Selbst wenn man nicht mit den Apple Werkezugen (Xcode, InterfaceBilder) arbeitet benötigt man trotzdem einen Apple Developer Account (kostet $99 pro Jahr) mit dessen Hilfe man die notwendigen Zertifikate erstellen kann.

  • Zertifikate (“.p12″ und “.mobileprovision”)

    Das Zertifikat mit der Dateiendung .p12 kann man leider nicht direkt bei Apple herunterladen, allerdings lässt es sich zumindest auf einem Mac leicht aus dem .cer Zertifikat exportieren.
    Die .mobileprovision Datei wird online über den Apple Developer Account erstellt. Man kann die .p12 auch in Windows mittels openSSL selbst herstellen, allerdings hat dies bei meinem Test weder in WinXP, noch Vista oder Win7 zuverlässig funktioniert.

    .p12 "Private Key" aus dem Schlüsselbund exportieren

    .p12 "Private Key" aus dem Schlüsselbund exportieren und als .p12-Datei abspeichern

    .mobileprovision Datei Download

    .mobileprovision Datei Download

    Eine genauere Erklärung des Apple Lizenzmodells möchte ich hier nicht geben. Wer noch keinen Apple Developer Account hat oder mehr über die Lizenzierung erfahren möchte, der kann sich z.B. die Aufzeichnung von Saban Ünlüs Vortrag auf der FFK2010 ansehen oder direkt in der Adobe Anleitung nachlesen.

    Wurden die beiden Dateien gespeichert sollten diese in  “iphone_dev.p12” und “iphone_dev.mobileprovision” umbenannt werden. Sie dienen später der Erstellung der .ipa-Datei.

  • Flex 4 SDK und der “Packager for iPhone” seit Air 2.5 ist dieser im Air SDK inkludiert

    Den Flex SDK gibt es im OpenSource Bereich von Adobe zum Download. Ich habe für meine Tests die Version 4.1.0.16076 benutzt (download). Wurde dieser heruntergeladen und entpackt so fehlt noch der iPhone Packager. Hier wurde beim Test die “Version” v1_win_060210 verwendet (download). Der iPhone Packager muss entpackt und dessen Inhalt in den Flex SDK Ordner verfrachtet werden (einfach kopieren und ersetzen). Update: der iPhone Packager ist seit der Air SDK Version 2.5 im Air SDK von Haus aus mit dabei. Also einfach den Air SDK (>= 2.5) in den Flex SDK (z.B. 4.5.1) “kopieren und ersetzen”. Damit ist der SDK, mit dem später die iPhone taugliche SWF-Datei erstellt wird, vollständig.

  • FlashDevelop Iphone Project Template

    Dieser Teil ist einfach zu erledigen. Das FlashDevelop 3.2.2 RTM Template gibt es hier zum Download (iPhone AIR AS3 Projector Template). Diese zip-Datei muss nur entpackt und in das C:\[pfad_zu_FlashDevelop]\FlashDevelop\Projects\ Verzeichnis kopiert werden.

    Update: Das Template funktioniert auch mit FlashDevelop 3.3.0 und 3.3.1, allerdings gibt es in diesen Versionen einen Bug mit dem Flex SDK Pfad (FlashDevelop Bug im Forum) welcher zu Problemen führen kann.

    Update: Möchte man die Grundinstallation vom FlashDevelop sauber halten so kann man das Template auch im Benutzerverzeichnis (“Tools > Application Files …“) speichern.

    FlashDevelop Project Template einfügen

    FlashDevelop Project Template im Ordner "Projects" einfügen.

    Ein Neustart von FlashDevelop ist nicht nötig, man kann das neue Projekt Template sofort im Menü auswählen.

    iPhone Air AS3 Projector

    iPhone Air AS3 Projector

Ein iPhone Projekt

Nach dem nun alle Voraussetzungen erfüllt sind kann man ein iPhone Projekt erstellen. Erfahrene FlashDevelop Benutzer können diesen Teil überspringen und die im Projekt enthaltene readme.txt als kurze Anleitung verwenden.

  • Flex SDK eintrichten

    Da für das iPhone der normale SDK nicht ausreicht muss der bereits vorbereitet “Flex SDK + iPhone Packager” für iPhone Projekte genutzt werden. Rechtsklick auf den Projektnamen -> Properties... -> “Compiler Options” -> “Custom Path to Flex SDK” und dort trägt man nun den Pfad des vorbereiteten Flex SDK Ordners ein.

    Flex SDK Pfad anpassen

    Flex SDK Pfad anpassen

    Den Pfad zum Flex SDK kann man gleich mit Strg + c in die Zwischenablage kopieren, denn er wir im nächsten Schritt auch gebraucht.

  • PackageApplication.bat” anpassen

    In der Datei “PackageApplication.bat” muss auch der Pfad zum Flex SDK angepasst werden. Hierzu einfach in Flashdevelop doppelklick auf die Datei “PackageAppliaction.bat” und den Pfad in Zeile 13 anpassen, indem man “C:\flex_sdk_4_with_iphone_packager\bin” durch den Pfad des bin (!) Ordners des Flex SDK ersetzt.

    Den Flex SDK Pfad in der Datei "PackageApplication.bat" anpassen.

    Den Flex SDK Pfad in der Datei "PackageApplication.bat" anpassen.

  • Das Flash Develop Projekt iPhone fitt machen

    Hat man ein fertiges Projekt erstellt sollte dieses ähnlich wie im Bild unten gezeigt aussehen. Im Vergleich zu einem normalen FladhDevelop Projekt fallen die Ordner “certificates” und “iphone“, sowie das bereits gut gefüllte “bin” Verzeichnis ins Auge.

    Um das Projekt später in eine .ipa packen zu können sollten zuerst die Zertifikat-Dateien in den “certificates” Ordner kopiert werden. Falls noch nicht passiert, müssen diese nun in “iphone_dev.p12” und “iphone_dev.mobileprovision” umbenannt werden.

    Zertifikate nach "certificates" kopieren und richtig benennen.

    Zertifikate nach "certificates" kopieren und richtig benennen.

  • Die SWF kompilieren

    Hat man den Flex SDK in Flashdevelop angepasst so kann man das Projekt wie gewohnt kompilieren und es startet über den “Air Debug Launcher” (adl). Das sollte bei dem mitgelieferten Projekt in etwa so wie im unteren Bild aussehen. Wie man sieht zeigt der adl einen “Device” Eintrag im Menü an über welchen sich die simulierte Umgebung drehen lässt.

    "Air Debug Launcher" mit einer iPhone Applikation

    "Air Debug Launcher" mit einer iPhone Applikation

  • Eine .ipa erstellen

    Um den Vorgang der IPA-Erstellung zu starten muss die “PackageApplication.bat” ausgeführt werden (Rechtsklick -> Execute). Danach wird erst einmal gefragt welche Art von ipa man erstellen möchte. Für die Entwicklungsphase reicht test (1) oder debug (2). Möchte man seine ipa für den AppStore erzeugen dann sollte man (3) wählen. Wird die Applikation nicht im AppStore sondern über das ad-hoc Verfahren verbreitet dann (4). Für weitere Erklärungen welcher Modus welche Bedeutung hat siehe [“Packager for iPhone Developer Guide“, Seite 26ff].

    IPA Erstellung - Typ der IPA auswhlen

    IPA Erstellung - Typ der IPA auswählen

    Als nächstes wird nach dem Passwort des Zertifikats gefragt. Das ist jenes Passwort welches beim Export aus dem Schlüsselbund am Mac zum Schutz des Zertifikates festgelegt wurde. Achtung: Das Passwort ist während der Eingabe sichtbar.

    IPA Erstellung Passwort Eingabe

    IPA Erstellung Passwort Eingabe

    Nun beginnt die Erstellung der IPA Datei, dies kann einige Zeit dauern.

    IPA wird erstellt

    IPA wird erstellt

    Schlussendlich gibt es eine Meldung ob der Vorgang erfolgreich war. Ist ein Fehler aufgetreten wird eine Meldung des Adobe “pfi” Packagers ausgegeben.

    IPA Erstellung war erfolgreich

    IPA Erstellung war erfolgreich

    Schlussendlich sollte im “iphone” Ordner die gerade erstellte ipa-Datei zu finden sein.

    Das fertige (ipa) iPhone Paket

    Das fertige (ipa) iPhone Paket

Da ich zurzeit kein iPhone zur Hand habe konnte ich noch nicht testen, ob die so erstellen Applikationen auch wirklich am iPhone laufen. Allerdings lässt die durchwegs fehlerlose Abarbeitung der Zertifizierung durch das Adobe “pfi” vermuten, dass es  wohl ziemlich sicher klappen wird.
Sobald ich es getest habe werd ich hier ein Update einfügen – Update: So nun ists “amtlich”, die erstellen Projekte laufen auf dem iPhone :)

Zur Übersicht alle Schritte in Kurzform aus der readme.txt:

Instructions for DISTRIBUTING* your application:

1. Download and Install Flex SDK 4.5.x and Air SDK >= 2.5.x
- Flex < 4.5.1 and Air SDK < 2.5 (beta program):
  - if you use Flex SDK < 4.5.1: download link: http://labs.adobe.com/technologies/packagerforiphone/
  - if you use Flex SDK < 4.5.1: merge your Flex SDK and the packagerforiphone (copy packager files into flex sdk folder)
- Flex 4.5.1 and Air SDK >= 2.5:
  - with Air SDK >= 2.5 (http://www.adobe.com/products/air/sdk/) use the Air SDK just like the "Packager for iPhone" (merge Flex SDK and Air SDK)
- set the Flex SDK Path of your project to the merged Flex SDK folder.

2. Creating certificates:
- download and create a ".mobileprovision" and a ".p12" certificate file
- instructions link: (http://download.macromedia.com/pub/labs/packagerforiphone/packagerforiphone_devguide.pdf)
- name the files "iphone_dev.p12" and "iphone_dev.mobileprovision" and copy them to the 'certificates' directory.

3. Packaging the application:
- edit PackageApplication.bat and change the path to Flex SDK,
- run PackageApplication.bat, you will be prompted for the certificate password.
- the packaged application should appear in your project in the 'iphone' directory.

* to test your application from FlashDevelop, just press F5 as usual, be aware that the available APIs on your desktop differ from the iPhone.

    Und hier nochmals das FlashDevelop iPhone Project Template zum Download.

Updated Download (29.07.2011): iPhone-AIR-AS3-Template (Air SDK > 2.5)

Update(1.10.2010): Hab soeben festgestellt, dass der SplashScreen nicht angezeigt wurde am iPhone. Hab den Fehler behoben und die .zip auf den neuesten Stand gebracht. Ursache war wohl, dass die Default.png wohl immer im “root” des Projekts sein muss und nicht im “bin/” Verzeichnis.

Update(8.10.2010): Die Batch kann nun auch den “GPU rendering diagnostics” Modus auf Wunsch aktivieren. Damit lässt sich das Hoch-und Runterladen von Texturen (Bitmaps) auf die GPU (also die Hardwarebeschleunigung) beobachten. Für alle die es genau wissen wollen, im Grunde wird damit nur der Parameter -renderingdiagnostics beim Aufruf der pfi hinzugefügt. Für mehr Details zur Debug Anzeige der Hardwarebeschleuningung sollte man sich den “iPhone developer guide” Seite 30ff ansehen.

Update(14.11.2010): Update in der Batch Datei: Diese hat immer Dateien mit der Einstellung “-target test-ipa” erstellt, auch wenn man z.B. debug ausgewählt hatte (die Dateinamen wurden aber korrekt geändert). Nun funktioniert es richtig ;)

Update(19.07.2011): Der iPhone Packager ist nun im offiziellen Air SDK (ab version 2.5) enthalten sein. Also man muss nun den Flex SDK 4.5.1 und Air SDK (>= 2.5) zusammenkopieren statt früher den Flex SDK und den “Packager of iPhone”.

Update(29.07.2011):
In den aktuellen Versionen des Flex SDK gibt es kein “pfi” mehr. Hier muss stattdessen “adt” verwenden. Dazu einfach in der Datei “PackageApplication.bat.template” in Zeile 64 “pfi” durch “adt” ersetzen.

Zum Fehler:

Error: Cannot find node: versionNumber

Ab Air 2.5 wird die Versionsnummer nicht mehr mit dem Tag “<version>1.0</version>” sondern mit zwei Tags “<versionNumber>1.0.0<versionNumber>” und “<versionLabel>100<versionLabel>” angegeben. Darum muss auch die Datei “application.xml.template” in Zeile 6 entsprechend angpasst werden.

Danke an Philipp N. für den Hinweis und James M. für die Anpassung des Templates für Flash Develop 4 und Air 2.7.

Tags: , , , ,

17 Responses to “Flash iPhone Entwicklung mit FlashDevelop und dem Adobe “Packager for iPhone””

  1. Maxdisher sagt:

    Hey, thanks so much for this!! I have been looking all over for a tutorial on getting the packager running with flashdevelop. Not only did you give great directions, but the .bat file is really nice too! Really clear instructions, got it working in less than 5 minutes. You rock!

  2. geo sagt:

    Thx, i just realised that the SplashScreen does not appear (for whatever reason).

    [Update]: I updated the .zip file which now includes the newest version with a working SplashScreen.

  3. Maxdisher sagt:

    Cool, yeah I noticed that, but figured it out for myself. I’ve updated my project file with the new .zip so I won’t have the problem in the future. Thanks again!

  4. geo sagt:

    [Update]: I just updated the .zip again. It now allows you to enable the “GPU render diagnostics” (pfi Parameter “-renderingdiagnostics”). This will show what parts of your application are cached as Bitmaps (using hardware acceleration).

  5. dude sagt:

    Dank für das tolle Tutorial + Template!
    Das FlashDevelop Template sollte besser in das user Verzeichniss.
    FlashDevelop öffnen. Im Menu Tools -> Application Files. Dort in den (noch meist leeren) Ordner Projects. Neustart von FlashDevelop ist nicht erforderlich.

  6. geo sagt:

    Danke für den Hinweis, hab es im Text eingearbeitet :)

  7. Nun gibts es auch ein Template für die iPad Entwicklung. Funktionieren tut es genauso wie das iPhone Template ;)

  8. ropo sagt:

    Ich will eine .ipa aus meinem flex Projekt erzeugen, habe aber keine .mobileprovision, keine .p12 und kein Geld ;)

    Gibt es dafür Dummies, mit denen ich ein .ipa für ein iPad mit Jailbreak erzeugen kann?

  9. geo sagt:

    “habe aber […] kein Geld”

    … wer hat das schon :D

    Zur Sache: mir ist da leider kein Weg bekannt (hab`s aber auch noch nie versucht).

    Du kannst aber versuchen deine Inhalte in eine bereits bestehende .ipa zu injizieren. Einfach mal die .ipa in .zip umbenennen und versuchen den Inhalt zu ändern.

    Ich bezweifle jedoch stark, dass iOS die veränderte App danach akzeptiert und Apple ist davon sicherlich auch nicht begeistert ^^.

    Viel Glück und gib Bescheid falls du einen Weg findest ;)

  10. […] besonderen Dank möchte ich an _geo aussprechen, der mich mit seinem Beitrag Flash iPhone Entwicklung mit FlashDevelop und dem Adobe “Packager for iPhone” inspiriert hat. Dort findet ihr eine Anleitung für FlashDevelop, und viele Details zur IPA und dem […]

  11. Mikhail sagt:

    Hi. Can you upload merged folder “flex_sdk_4_with_iphone_packager”?
    I ask about it because I can’t download “iPhone Packager” to do it yourself.

  12. geo sagt:

    To my knowledge since Flex SDK 4.5.1 the iPhone packager is included in the SDK so there is no more need for merging the sdk with other files.

    For more information you might want to look at the official “packaging for iPhone” page by Adobe: http://www.adobe.com/devnet/air/articles/packaging-air-apps-ios.html

  13. Mikhail sagt:

    But in Flex SDK 4.5.1 no such file as pfi.bat
    It needs to compiling *.ipa file using FlashDevelop iPhone Project Template.
    I develop flash games using FlashDevelop and i want to find easy way to run it on iPhone.

  14. Philipp sagt:

    Hallo,

    das Template ist wirklich super. Nach dem letzte Release der Flex SDK muss man allerdings eine Änderung im “PackageApplication.bat” in Zeile 76 durchführen.
    In der neuen SDK gibt es kein “pfi” mehr. Hier muss “adt” angesteuert werden.
    Es läuft auch super unter Air 2.7, wenn man die Flex SDK 4.5.1.21328 mit der Air 2.7 SDK zusammenführt. Dazu muss in der “application.xml” in Zeile 2 der Air Namespace auf 2.7 geändert werden. Und in den FlashDevelop Projekt Properties muss ebenfalls Air 2.7 eingestellt sein.

    Habe hier die neue FlashDevelop Version 4.0.0. alpha verwendet

    Mit Air 2.7 bekommt noch einen deutlichen Performance Boostauf dem iPad!

    Scheint keine xml Tags darstellen zu können der Blog?
    Der Tag “version” wird zu “versionNumber” in Zeile 6.

  15. geo sagt:

    @Mikhail: change “pfi” to “adt” in PackageApplication.bat and it should work again. Quite some things have changed in the newer versions of the SDK (<version> tag, pfi, …). I will soon update the .zip accordingly.

    @Philipp: Ja, xml Tags gehen zurzeit nicht in den comments. Hab mal die Kommentare zusammengefasst und eingearbeitet. Danke für die Hinweise :)

    Für FlashDevelop 4 und Air 2.7 hat James McNess das Template angepasst (FlashDevelop 4 + Air 2.7 Template).

  16. sta-ger sagt:

    Hi! Thank a lot for you great template! I have a problem and hope that you could help me. I compile simple Hello World project using your template, everything is ok. But when I’m trying to install my .ipa file on my iPod Touch I have an iTunes error: “The app was not installed on the ipod because it requares a newer version of iPod software”. But when I’m compiling the same simple Hello World project with Flash IDE – everithing is ok. Maby I’m doing something wrong?

  17. Benzouye sagt:

    Great job ! Thank you.

Leave a Reply