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
SoundSpectrum
Ich liebe ActionScript - SoundSpectrum Demo
Debugging Deluxe
Bei meinem letzten Projekt für eine Zeitung mit vier großen, roten Buchstaben habe ich einen MP3 Player mit einigen netten Features in Actionscript 3 programmiert und alles lief wunderbar - bis der Player auf dem Live-Server online ging…
Schwupp - auf einmal funktionierte die Preloader-Anzeige, also wieviel bereits von der Datei geladen wurde, nicht mehr korrekt. Safari zeigte überhaupt keinen Fortschritt an, Firefox meinte die Datei wäre sofort geladen - grossartig…
Wäre ja auch mal zu schön gewesen, wenn ein Projekt komplett stressfrei über die Bühne geht.
Also ran ans debuggen: Was hab ich falsch gemacht? Nochmal alle Dokus zum Thema Sound in Flash durchstöbern, haufenweise Code umschreiben und - keine Änderung.
Hirnschmalz.
Ok, davon ausgehend dass ich nichts falsch gemacht habe, nahm ich dreimal das gleiche MP3 und packte es auf verschiedene Server und siehe da: das Problem trat nur auf dem Live-Server des Kunden auf!
Nach viel Recherche bin ich dann auf 2 Ansätze gekommen, von denen Nr. 2 zutraf, ich hoffe das spart jemand da draussen viele Stunden Frust:
1. Fehlender Content-Length-Header bei Skript (o.ä.) der die MP3 Datei ausliefert
2. Serverseitige on-the-fly compression (z.B. gzip) für MP3s ist aktiviert und bereitet Flash bzw. dem Browser Probleme bei der Übermittlung von bytesTotal / bytesLoaded.
Kompression abgeschaltet und auf einmal wart alles gut 
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
AS 3 UseHandCursor
Damit ich es ein für allemal festgehalten habe und mich nicht immer und immer wieder frage: Wo ist die olle Hand wenn ich mit der Maus über mein Sprite / MovieClip fahre!?
-
var theHardestButtonToButton:Sprite = new Sprite();
-
theHardestButtonToButton.buttonMode = true; // ohne die zeile passiert nix
-
theHardestButtonToButton.useHandCursor = true;
Flash-Höhe dynamisch anpassen
Für ein aktuelles Projekt benötige ich eine Möglichkeit die Höhe des Films variabel anzupassen, je nachdem wieviele Datensätze erforderlich sind.
Kniffliger als gedacht, da sich das über Actionscript direkt nicht lösen lässt - Stage.height ist nämlich schreibgeschützt, also muss ein Workaround mittels Javascript ran: Die Höhe des Divs in dem die .swf liegt wird angepasst.
Ich habe hier ein Beispiel gefunden, das aber in Actionscript 2/3 aufgrund der Sicherheitseinstellungen nicht lauffähig ist, da der Javascript-Zugriff standardmässig deaktiviert ist.
Meine Variante basiert auf der selben Technik, läuft aber auch wenn die Compile-Settings > 6.0 sind. Bei Klick auf den Button "wächst" der Film...
Alle Dateien in einem Zip gibt es hier - viel Spass!
Papervision 3D Fun
Neues aus dem Labor: Mein erstes Experiment mit der grossartigen Papervision 3D Engine.
Wirklich beeindruckend, wie verhältnismässig leicht es sich damit in drei Dimensionen rumfliegen lässt. Bei der Namensgebung war ich mal wieder unglaublich kreativ:
PaperPics
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?)
Abobe AIR bei spiegel.de
Hier ein interessanter Bericht für alle, die noch nie von AIR gehört,
geschweige denn damit gearbeitet haben.
Ich bin schon auf viele interessante Projekte gespannt, im Moment arbeite
ich übrigens bei Digiden auch an einer spannenden Flex / AIR Anwendung.