Acrobat meets Flash
Der Vormarsch von Flash lässt sich nicht mehr aufhalten, neben der gelungenen Transformation vom Browser auf den Desktop (Adobe AIR), lässt sich Actionscript nun auch nativ in PDF Dateien (ab Version 9) ausführen.
Um die Neuigkeiten unter Entwicklern und Benutzern zu verbreiten, haben die netten Leute bei Adobe einen Contest ins Leben gerufen, bei dem Flash- / Flex-Entwickler die Chance hatten, mit den neuen Möglichkeiten zu experimentiern und interessante Anwendungen zu basteln.
Bevor ich ins Detail zur Entwicklung gehe, möchte ich vorab erstmal zeigen, was man damit machen kann:
Als erstes muss man sich bei Adobe die aktuelle Acrobat Version installieren.
Auf der Seite werden auch gleich viele der Features vorgestellt, ich empfehle für ein eindrucksvolles Beispiel, diese PDF Datei herunterzuladen und mal etwas damit rumzuspielen, ziemlich beeindruckend was da mittlerweile möglich ist.
Hier ist ein Beispiel-Portfolio, das ich mit meiner “Komponente” erstellt habe.
Das sind wirklich spannende Zeiten für Flasher / Flexer, die Aufgabengebiete wachsen wirklich rasant, auch wenn es erfahrungsgemäß sicherlich etwas dauern wird, bis sich Auftraggeber mit den neuen Technologien vertraut gemacht haben und sich coole Projekte ausknobeln, die unsereins dann umsetzen könnte.
Daher ist meiner Meinung nach jetzt der richtige Zeitpunkt sich mit diesen neuen Themen auseinander zu setzen und sich Gedanken zu machen, was man alles damit anstellen kann 
.nav Datei
Die Aufgabe im Contest war, eine .nav Datei zu entwickeln, diese kann man sich als Template zur Erstellung von eigenen Flash-basierten PDFs vorstellen - sehen kann man diese Templates, wenn man in Acrobat Professional 9 (als Trial herunterladbar) auf “Assemble PDF Portfolio” klickt.
Dabei handelt es sich vereinfacht gesagt um ein umbenanntes .zip Archiv, welches, neben dem in Actionscript geschriebenen Moduls, verschiedene Dateien zur Konfiguration des Templates beeinhaltet.
Entwicklung
Ohne hier zu sehr ins Detail zu gehen, möchte ich einige Tipps geben, die mir die Arbeit etwas erleichtert haben. Die Entwicklung ist nicht gerade trivial, was aber eher an der Schwierigkeit liegt, das Projekt als .nav Datei zu konvertieren, da hier einige Stolperfallen auftauchen.
Generell kann man in der Flash IDE arbeiten, aus Gründen der Komfortabilität wird aber der Flex Builder empfohlen, dem kann ich mich nur anschliessen.
Um einen Einstieg in die Entwicklung zu bekommen, empfehle ich diesen sehr guten Blog eines Adobe Entwicklers, dort gibt es einige Video-Tutorials die sehr essentiell für den Anfang sind.
Der Actionscript-Part für die Erstellung eines Modules ist nicht anders als man es kennt, man fängt damit an ein neues Projekt anzulegen und dort unter “libs” bzw. über den “Build Path” eine kompilierte Library (”AcrobatAPI.swc”) zu integrieren, welche die API für die Zusammenarbeit zwischen Actionscript und Acrobat ist.
Ich habe mit Flex-Modules noch nicht viel gemacht und mich beim kompilieren erstmal gewundert, dass ich nie etwas zu sehen bekam außer einem leeren Browser-Fenster. Nach etwas Recherche wurde klar, dass Modules nur angezeigt werden, wenn sie über einen ModuleLoader geladen werden. Dies erschien mir sinnvoll aber umständlich, also hab ich mir die Sache einfach gemacht und während der Entwicklung mit dem normalen mx:Application Tag gearbeitet, so dass ich sehen konnte was passiert und für die Integration in die .nav Datei dann umgestellt auf mx:Module.
Das hört sich verwirrend an, ist aber ganz easy, hier ein Beispiel:
<!– Während der Entwicklung –>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
creationComplete=”go()”
width=”100%” height=”100%”>
<!– Für Acrobat als Module –>
<mx:Module
xmlns:mx=”http://www.adobe.com/2006/mxml”
implements=”acrobat.collection.INavigator”
height=”100%”
width=”100%”
horizontalScrollPolicy=”off”
verticalScrollPolicy=”off”
creationComplete=”go()”>
Das hilft leider nur bedingt, da die meisten der neuen Funktionen nur laufen, wenn das Modul im PDF Container läuft (ich gehe jetzt hier mal noch nicht auf den Zugriff von Dateien innerhalb des PDF Kontextes ein, das ist alles nochmal einen ganzen Zacken vertrackter)…
Mir als eingefleischtem Mac-Nutzer wurde die Arbeit leider erschwert, da es noch keine Trial Version von Acrobat Professional 9 für den Mac gibt. Zum Glück hab ich aber noch einen eingestaubten PC rumstehen, auf dem die Trial läuft. So hab ich am Mac entwickelt und dann am PC die .nav Datei zusammengestellt, was ein wenig nervig war 
Es ist aber sicher nur eine Frage der Zeit, bis Adobe die Mac Version nachliefert, in der Hinsicht sind sie ja zum Glück vorbildlich.
Soweit erstmal, ich hoffe das hilft dem einen oder anderen, hier nochmal meine Datei.
TVNow
Während ich gerade an einem recht umfangreichen AIR Tool arbeite, habe ich zwischendurch zur Entspannung ein Programm gebastelt, das einem immer zeigt zu welchen Sendungen man seine Zeit vor dem TV am besten verschwenden kann.
Features
- Aktuelles Programm
- Sendungen ab 20.15 & 22.00Uhr
- TV Tipps (nicht von mir sondern TV Movie)
- Auto-Update Funktion bei neuer Version
Installation, Video und mehr hier
FlexRichTextEditor v1.0
Ich mag Safari als Browser aber manche Sachen laufen einfach nicht so wie sie sollten, z.B. WYSIWYG- bzw. Richtext-Editoren. Da wird mittels Javascript versucht, Word für HTML Laien nachzubauen Also Bilder einfügen, Text fett markieren, Listen erstellen etc.
Ich habe noch keinen Editor gefunden der leicht zu installieren ist und in jedem Browser sauber läuft.
Meine Überlegung: Welche Technologie läuft auf jedem System bzw. in jedem Browser gleich ohne irgendwelche OS-Spezifischen Hacks?
Hmm, da war doch was…richtig - Flash! 
Flex bietet praktischerweise eine Komponente namens RichTextEditor an, allerdings hat der Editor ein grosses Manko: man kann keine Bilder einfügen.
Ich habe mir also gedacht - selber machen und folgende Features hinzufügen:
- Bilder einbetten mittels URL
- Umschalten zwischen Design (rich view) und HTML (code view)
- Find and replace Funktion
- Kopieren des Quelltextes in die Zwischenablage
- Option das von Adobe generierte HTML (pfui) in W3C konformere Art zu wandeln
Hauptproblem ist noch das die Bild-Position innerhalb des Textes nachträglich nicht abgeändert werden kann, vielleicht fällt mir dazu aber noch was schlaues ein
Hier ist der Editor zu finden, er lässt sich einfach als SWF einbauen, wo man SWFs einbauen kann. Ich habe auch eine kleine Hilfe integriert.
PS: Dieser Post wurde standesgemäß natürlich auch mit eben jenem Editor geschrieben
Building Flex and Adobe AIR applications from the same code base
Todd Prekaski hat einen interessanten Artikel im Adobe Developer Center geschrieben, der erklärt, wie man aus einer Code-Quelle mittels eines Interface gleichzeitig Web- & AIR-Anwendungen entwickelt.
So spart man sich sinnlose Code-Kopiererei und doppelten Verwaltungsaufwand, sehr praktisch…
FlickrTastic, Flex / AS Experiment
Meine Flex-Spielerei um Fotos online zu beäugen. Bei mehr Freizeit würde ich über die Flickr API Bilder laden und eventuell noch mehr Features einbauen.
Hier kam die feine Tweener Klasse zum Einsatz, kann ich nur empfehlen!
(PS: Wo war ich wohl im Urlaub?)
EncryptedLocalStore (AIR)
Hört sich nicht nur kryptisch, ist es sogar auch
Das ganze ist sozusagen ein für jede Air Anwendung bereitgestellter " Safe" von 10 MB Grösse um Daten verschlüsselt zu speichern.
Unter Windows läuft das mittel DPAPI und beim Mac kümmert sich KeyChain um die Verwaltung.
Hier ein Beispiel zum speichern verschlüsselter Daten:
-
private function saveData(key:String, value:String):void {
-
var bytes:ByteArray = new ByteArray();
-
bytes.writeUTFBytes(value);
-
EncryptedLocalStore.setItem(key, bytes);
-
}
Zum Abfragen der Werte hab ich folgende Funktion im Angebot. Da ein null-Objekt Fehler geworfen wird, wenn ein Eintrag nicht existiert, hier mit try / catch Anweisung:
-
private function checkValue(key:String):String {
-
try {
-
var storedValue:ByteArray = EncryptedLocalStore.getItem(key);
-
var value:String = storedValue.readUTFBytes(storedValue.length);
-
} catch(e:Error) {
-
return '';
-
}
-
return value;
-
}
Mehr dazu bei Adobe...