Vorwort. Simon Widjaja. Adobe Flex 4 ISBN: Weitere Informationen oder Bestellungen unter.

Transkript

1 Vorwort Simon Widjaja Adobe Flex 4 ISBN: Weitere Informationen oder Bestellungen unter sowie im Buchhandel. Carl Hanser Verlag, München

2 Vorwort Flex ist das kostenlose Open-Source-Framework zur Entwicklung von anspruchsvollen, interaktiven Anwendungen und somit das Herzstück der neuen Produktlinie Flash Platform aus dem Hause Adobe. Die Flash Platform vereint bewährte Technologie, Webinnovation, integrierte Produktlösungen für optimale Workflows zwischen Entwicklern, Designern und Konzeptern, sowie ein umfassendes Community- und Partnernetzwerk. Flex-Anwendungen lassen sich in den beiden Laufzeitumgebungen der Flash Platform ausführen: Adobe Flash Player und Adobe Integrated Runtime (AIR). Während der Flash Player primär im Web zum Einsatz kommt, können Flex- Anwendungen ohne große Modifikationen auch in der AIR-Laufzeitumgebung auf dem Desktop ausgeführt werden. Hier steht dem Entwickler ein erweiterter Befehlssatz zur Verfügung, der beispielsweise den Zugriff auf das lokale Dateisystem oder auf native Prozesse ermöglicht. Außerdem erobert die Flash Platform gerade, während ich dieses Buch verfasse, die Welt der mobilen Endgeräte. So stehen mobile Versionen von beiden Laufzeitumgebungen kurz vor dem ersten Release, so dass 2010 wohl mitunter das Jahr der Smartphones und Slades bzw. Handhelds wird. Besonders in der Welt von Android wird Flash und Flex eine wichtige Rolle spielen. An dieser Stelle darf der Hinweis auf das von Adobe initiierte Open Screen Project natürlich nicht fehlen. Unter erfahren Sie, wie Adobe mit einer beeindruckenden Allianz (u.a. Google, HTC, nvidia etc.) die Flash Platform für Mobile Endgeräte und sogar Fernseher optimieren wird und welche Wege in den kommenden Jahren eingeschlagen werden. Doch schauen wir uns ersteinmal den beeindruckenden Lebenslauf von Flex an. Als Flex 1.0 im März 2004 als reiner Präsentationsserver auf den Markt geworfen wurde, konnte das Interesse der breiten Masse an Webentwicklern nicht wirklich geweckt werden. Dies lag zum einen daran, dass der Flash Player zu dem Zeitpunkt noch nicht die heutige hohe Akzeptanz und Verbreitung aufwies, und hing zum anderen damit zusammen, dass die erste Generation von Flex mit hohen Investitionen verbunden war. XIII

3 Vorwort Mit Flex 2.0 und der Übernahme von Macromedia durch Adobe wurde ein neuer Kurs eingeschlagen: Das Flex-SDK zur Erstellung von Flex-basierten Client-Anwendungen wurde kostenlos bereitgestellt, eine kostenpflichtige Serverkomponente war nicht länger notwendig. Es war also erstmals möglich, ohne jegliche Investition die vielseitigen Vorteile von Flex nutzen zu können. Das Problem war jedoch, dass kaum ein Webentwickler diese Veränderung wahrgenommen hat. So wurde die Flash-Technologie samt Entwicklungsumgebung nach wie vor von vielen Entwicklern als zu grafikorientiert und für ernstzunehmende Anwendungen ungeeignet verspottet, und die Flex-Technologie wurde nicht selten als unbezahlbar und für kleine und mittelgroße Projekte uninteressant beschrieben und ignoriert. Als leidenschaftlicher Flasher und PHP-Entwickler habe ich die Diskussionen aufmerksam verfolgt und auch selbst eine größer werdende Skepsis entwickelt. Als jedoch Flex 2.0 gerade erschienen war und ich aufgrund eines Projektpitches einen Blick darauf werfen musste, hat es mich in kürzester Zeit überzeugt. Die Begeisterung war so groß, dass ich die folgende Nacht gänzlich auf Schlaf verzichtet habe, um die Vielseitigkeit und Vorteile von MXML, ActionScript 3.0 und den Flex-Komponenten zu erforschen. Obwohl die deklarative MXML-Sprache völlig neu für mich war, ist es mir in den wenigen Stunden gelungen, eine erste kleine Anwendung zu schreiben, die nahtlos via AMFPHP an mein eigenes PHP-Framework angebunden werden konnte. Nach dieser Erfahrung und der erfolgreichen Umsetzung des besagten Projekts war mir schnell klar, dass die Flex-Technologie längst nicht mehr das war, was in den Köpfen vieler Webentwickler herumspukte. Nachdem ich nach wie vor über Blogund Forenbeiträge gestolpert bin, die weiterhin die Flex-Technologie in völlig falschem Licht erscheinen ließen, war es letztlich ein Gespräch mit dem Chefentwickler einer anderen Internetagentur, das mich darin bestärkt hat, ein wenig Aufklärungsarbeit leisten zu wollen. Auch in diesem Gespräch musste ich feststellen, dass die Flex- Technologie keineswegs in Betracht gezogen wurde und stattdessen auf herkömmlicher Flash-Basis entwickelt werden sollte obwohl genau sie die Entwickler bei den anstehenden Aufgaben vor einige Probleme gestellt hätte: Neben einem komplexen Fenstersystem sollten datenlastige DataGrids eingesetzt werden, und die entstehende Anwendung sollte sich in Höhe und Breite stets dem Player-Fenster anpassen. Zudem sollten zahlreiche Module entwickelt werden, die von verschiedenen Teams umgesetzt werden sollten. Nach meinen bisherigen Erfahrungen mit Flash und Flex war mir schnell klar, dass Flex in diesem Fall genau die richtige Wahl wäre. Doch auch hier war das Argument, dass Flex ja eine Servertechnologie und eben viel zu teuer sei. In einem ca. sechsstündigen Workshop konnte ich jedoch alle beteiligten Entwickler davon überzeugen, dass Flex heiß ist und genau das richtige Werkzeug für die anstehenden Aufgaben darstellt. Die beteiligten Entwickler berichteten mir später, dass auch Sie die Erfahrung gemacht haben, dass der Einstieg viel einfacher und schneller war als erwartet: XIV

4 Vorwort Der ehemalige Flex Builder (heue Flash Builder) basiert auf Eclipse, das viele bereits aus Java oder PHP kennen, und MXML ist für jeden HTML-Programmierer relativ schnell nachvollziehbar. Während dieser Diskussionen und dem daraus resultierenden kleinen Einsteiger- Workshop entstand die Idee, diese Art der Aufklärungsarbeit im größeren Stile zu betreiben. Aus diesem Gedanken entwickelte sich schließlich die Idee, gemeinsam mit dem ebenfalls engagierten Flexer Johannes Boyne eine erste deutsche Flex User Group in Köln zu gründen ( um unsere Erfahrungen rund um Flex mit anderen zu teilen, und eben auch die Idee zu diesem Buch. Sie werden in diesem Buch sicherlich nicht alles finden, was Adobe Flex 4 zu bieten hat. Aber Sie erhalten mit diesem Buch einen optimalen Einstieg in die relevanten Themen, die Sie benötigen, um mit Flex ebenfalls durchstarten zu können. Ein besonderes Augenmerk erhalten die im Rahmen der vierten Version des Flex Frameworks eingeführten neuen Spark-Komponenten und das Data Centric Development, das Sie bei der Zusammenarbeit mit verschiedenen Backend-Technologien unterstützt. Interessieren Sie sich darüber hinaus auch für die anderen Protagonisten der Flash Platform (Flash Catalyst, Flash Professional etc.), so lade ich Sie herzlichst auf meinen Blog unter ein. Hier erwarten Sie aktuelle Informationen, interessante Denkanstöße und hilfreiche Anleitungen. Themenspektrum Dieses Buch führt Sie schrittweise an die Entwicklung komplexer Rich Internet Applications (RIA) mit dem Flex Framework heran. Dabei werden die wichtigsten Aspekte wie folgt behandelt: In den ersten vier Kapiteln erhalten Sie eine kurze Einführung in die Flex-Technologie, der Entwicklungsumgebung sowie der Bestandteile von Flex 4 (MXML, ActionScript etc.). Kapitel 5 ist dem Event-Modell von Flex gewidmet. Dieses Thema wird recht ausführlich behandelt, da es bei der Entwicklung von RIA eine sehr zentrale Rolle spielt und für das tiefere Verständnis von Flex notwendig ist. Das sechste Kapitel gibt Ihnen eine Übersicht über die enthaltenen Flex-Komponenten und zeigt Ihnen, wie Sie die verschiedenen Komponentenarten für die Erstellung einer Benutzeroberfläche nutzen können. Kapitel 7-10 vertieft die Thematik der Erstellung von Benutzeroberflächen. Hier erfahren Sie, wie Medien (Bilder, Videos und Sounds) verwendet und eingebettet und wie das Look & Feel der Anwendung mit Hilfe von CSS, Skins, States, Effects und Transitions anpassen werden können. Kapitel 11 bringt Ihnen den Umgang mit lokalen Daten näher (Datenmodellierung, Datenbindungen, Formatieren und Validieren von Daten). XV

5 Vorwort Kapitel 12 befasst sich mit dem Einbinden externer Datenquellen. Hier werden Sie neben dem HTTPService, WebService und dem RemoteObject noch das so genannte Data Centric Development kennenlernen, das Sie bei der Zusammenarbeit mit verschiedenen Servertechnologien wie Java oder PHP unterstützt. In Kapitel 13 erfahren Sie, wie Sie eigene Komponenten und Module erstellen. Dabei lernen Sie, bestehende Komponenten zu erweitern und eigene von Grund auf selbst zu entwickeln. Zusätzlich wird in diesem Kapitel der Ansatz der Runtime Shared Library vorgestellt, mit dem Sie die Datengröße der entstehenden SWF-Dateien optimieren können. Nachdem Sie die verschiedenen Bestandteile von Flex kennengelernt haben und so über die nötigen Grundlagen verfügen, zeigt Kapitel 14 auf, wie Sie modulare und skalierbare Anwendungen entwickeln und welche Ansätze der Architektur hilfreich sind. Das letzte Kapitel 15 ist der neuesten Technologie im Flex Umfeld gewidmet: Adobe AIR. Hier erfahren Sie, wie Sie mit Hilfe von Flex ausführbare Desktopanwendungen entwickeln können. Die Website zum Buch In Zeiten von Internet, Web und DSL erschien dem Verlag und mir eine CD-ROM zum Buch, die die Beispiele und anderes Begleitmaterial enthält, allein schon deswegen unzeitgemäß, weil sie recht schnell veraltet. Daher haben wir uns dafür entschieden, Ihnen dieses Material auf einer Website bereitzustellen. Deren URL lautet Dort finden Sie neben den Quelltexten dieses Buches noch weitere Informationen über Flex sowie einen Blog rund um die Flex-Technologie. Danksagung An dieser Stelle möchte ich mich recht herzlich bei allen Personen bedanken, die zum Entstehen dieses Buches beigetragen haben, insbesondere bei meinem wundervollen Team, dass mich tatkräftig unterstützt hat. Besonders bei Janina Werner möchte ich mich nicht nur für den kompetenten Support und die Koordination bedanken, sondern auch für die vielen lustigen und motivierenden Gespräche während der gesamten Produktion über. Desweiteren möchte ich mich bei meinem Weggefährten und guten Freund Johannes Boyne bedanken, der die ein oder andere Zeile dieses Buches beigesteuert hat. Außerdem noch einen großen Dank an Mike Rösgen, auf dessen Unterstützung ich an der einen oder anderen Stelle ebenfalls zurückgreifen durfte. In so einem Team macht das Flexen wirklich Spaß! Last but not least möchte ich mich bei Fernando Schneider für die professionelle und inspirierende Zusammenarbeit, sowie Stefanie König vom Hanser Verlag und Sandra Gottmann bedanken, ohne die Sie dieses Buch nicht in den Händen halten würden. XVI

6 Vorwort Feedback Wenn Sie Vorschläge oder Fragen zum Buch haben, können Sie mich selbstverständlich direkt kontaktieren: Bleibt mir zu guter Letzt nur noch, Ihnen viel Spaß und Erfolg bei Ihrer Reise durch die spannende Welt von Adobe Flex zu wünschen! Happy Coding! Köln, im Mai 2010 Simon Widjaja Webentwickler aus Leidenschaft XVII

7 Leseprobe Simon Widjaja Adobe Flex 4 ISBN: Weitere Informationen oder Bestellungen unter sowie im Buchhandel. Carl Hanser Verlag, München

8 7 7 Medienintegration 7.1 Einführung Da die Flash-Umgebung stets sehr grafikorientiert war, bietet der Flash Player zahlreiche Möglichkeiten, um Grafik-, Video- und Soundformate darzustellen bzw. abzuspielen. So können Sie auch in Flex die verschiedensten Medien einsetzen: Bitmap-Grafiken Vektorgrafiken Flash-Movies Videos Sounds Generell unterscheidet man beim Einsatz von Medien zwischen drei verschiedenen Arten: Loading: Bei dieser Variante werden die gewünschten Medien als separate Datei veröffentlicht und können zu jedem Zeitpunkt in die Flex-Anwendung nachgeladen werden. Diese Variante ist mit dem Umgang mit Grafiken in HTML vergleichbar. Embedding: Beim Einbetten der Medien werden die Medieninformationen direkt in die finale SWF-Datei Ihrer Anwendung geschrieben, sodass Sie diese nicht separat veröffentlichen müssen. Streaming: Diese Variante ist ein Spezialfall von Loading, der speziell für Videos und Sound zum Einsatz kommt. Hier werden die Medien ebenfalls nicht eingebettet, sondern on Demand nachgeladen. Der primäre Unterschied zum Loading ist, dass die Video- bzw. Sounddatei nicht komplett und linear von vorne nach hinten geladen wird. Der Benutzer kann zu jedem beliebigen Zeitpunkt innerhalb der Datei springen, ohne diese bereits vollständig heruntergeladen zu haben. Hier kommt 147

9 7 Medienintegration ein sogenannter Buffer zum Einsatz, der dafür sorgt, dass stets nur ein kleiner Teil des Mediums heruntergeladen wird, der gerade benötigt wird. Alle drei Varianten haben ihre speziellen Einsatzgebiete und somit auch ihre Vor- und Nachteile. Beim Loading wird die Dateigröße der Anwendung klein gehalten, was zu einer kurzen Startzeit führt. Zusätzlich können die einzelnen Medien zu einem späteren Zeitpunkt problemlos ausgetauscht werden, ohne dass die eigentliche Anwendung davon betroffen ist und neu kompiliert werden muss. Der primäre Nachteil dieser Variante liegt darin, dass der Umgang mit Medien dieser Art innerhalb der Anwendung schwieriger zu handhaben ist. So müssen Sie verschiedene Event-Handler einsetzen, um sicherzustellen, dass das jeweilige Asset bereits vollständig in der Anwendung vorliegt, bevor Sie darauf Zugriff haben. Beim Embedding werden sämtliche Medieninformationen vollständig in die Anwendung eingebettet, sodass diese sofort nach Anwendungsinitialisierung zur Verfügung stehen. Die finale Anwendung besteht aus weniger Einzeldateien, wobei jedoch die SWF der eigentlichen Anwendung proportional zu den eingebetteten Medien größer wird. Aufgrund dieser Tatsache sollte man Medien stets mit Bedacht einbetten. Bei längeren Videosequenzen (größer als 5 MB) bietet die Streaming-Variante den größten Benutzerkomfort und kann zudem noch deutlich Traffic einsparen, da nur die Dateisegmente heruntergeladen werden, die wirklich benötigt werden. Wird eine Videosequenz über das normale Loading eingebunden, so wird die gesamte verfügbare Bandbreite genutzt, um das Video schnellstmöglich vollständig herunterzuladen. Gerade bei sehr langen Videos kann es so schnell dazu kommen, dass der Benutzer zu viele Daten herunterlädt, die er letztlich gar nicht anschaut, da er das Video frühzeitig abbricht. Zusätzlich entsteht im Fall der Loading-Variante bei Videos der Nachteil, dass der Benutzer nur innerhalb der bereits heruntergeladenen Dateisegmente springen kann, was wiederum zu einer deutlichen Usability-Einschränkung führt. Bei allen Vorteilen der Streaming-Variante gibt es jedoch auch einen gravierenden Nachteil: Der Flash Player kann diese Funktionalität nicht über das http-standardprotokoll realisieren. Das Streaming wird mithilfe des Real Time Messaging Protocols (RTMP) realisiert. Dieses Übertragungsprotokoll wurde von Macromedia als Bestandteil des früheren Flash Media Servers entwickelt und bereitgestellt. Die aktuelle Version dieses Serverprodukts wird in zwei verschiedenen Varianten angeboten (Flash Media Interactive Server 3.5 und Flash Media Streaming Server 3.5), die beide das RTMP- Protokoll unterstützen und somit als Serverlösung für Streaming eingesetzt werden können. Neben diesen proprietären Lösungen gibt es mittlerweile auch verschiedene kostenlose Open-Source-Lösungen, die das RTMP-Protokoll unterstützen und somit als Video-Backend genutzt werden können. Der wohl bekannteste in diesem Sektor ist der auf Java basierende Red5-Server ( 148

10 Die folgende Tabelle zeigt die Medientypen, die Sie in Flex nutzen können: Grafiken und Bilder laden Tabelle 7.1 Übersicht der verfügbaren Dateiformate Typ Format MIM-Type Images GIF image/gif JPG PNG SVG FXG image/jpeg image/png image/svg image/svg-xml text/fxg Flash SWF (Grafik und Animation) application/x-shockwave-flash Symbole innerhalb einer SWF Audio MP3 audio/mpeg Video FLV video/x-flv 7.2 Grafiken und Bilder laden Zum Laden von Grafiken und Bildern stehen Ihnen in Flex zwei Komponenten bzw. Klassen zur Verfügung: der SWFLoader und das davon abgeleitete Image. Mit der Image-Klasse können Sie Grafiken als JPG-, PNG-, GIF- und SWF-Datei zur Laufzeit laden. Zusätzlich können Sie mit dieser Klasse SVG-Grafiken einbetten. Der SWFLoader kann ebenfalls diese Bildformate darstellen, wird jedoch primär zum Laden von SWF-Anwendungen eingesetzt. Das folgende Beispiel demonstriert beide Varianten (Loading und Embedding) eines einfachen PNG-Bildes (Bild.png), das im Unterordner assets des Projektordners abgelegt wird. Listing 7.1 Loading und Embedding einer PNG-Grafik <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:verticallayout /> </s:layout> <!-- Loading: PNG-Grafik --> <mx:image source="assets/flash_builder_logo.png" width="100" height="100" /> <!-- Embedding: PNG-Grafik --> <mx:image width="100" height="100" /> </s:application> Abbildung 7.1 zeigt das Ergebnis, wobei im rechten Teil die Bilddatei aus dem Deploy-Ordner entfernt wurde. Dies verdeutlicht noch einmal den Unterschied zwischen Loading und Embedding. 149

11 7 Medienintegration Wenn Sie das Laden eines Bildes von einer Benutzeraktion abhängig machen möchten, können Sie die load()-methode der Image-Klasse verwenden. Das folgende Beispiel zeigt das Laden eines Bildes beim click-event einer Schaltfläche: Listing 7.2 Grafik in ActionScript via load() laden <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:verticallayout /> </s:layout> <fx:script> <![CDATA[ protected function onclick( event:mouseevent ):void { myimage.load( " ); ]]> </fx:script> <mx:image id="myimage" autoload="false" /> <s:button label="lade Bild" click="onclick(event)" /> </s:application> Abbildung 7.1 Loading und Embedding einer PNG-Grafik Selbstverständlich können Sie das Laden eines Bildes auch ausschließlich in ActionScript durchführen. Im nachstehenden Beispiel wird ein Bild in ActionScript eingebettet und beim creationcomplete-event der Anwendung in eine Image- Instanz geladen und der DisplayList hinzugefügt: Listing 7.3 Grafik in ActionScript einbetten und der DisplayList hinzufügen <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationcomplete="oncreationcomplete(event)"> <s:layout> <s:verticallayout /> </s:layout> <fx:script> 150

12 Grafiken und Bilder laden <![CDATA[ import mx.controls.image; [Embed(source="assets/flash_builder_logo.png")] protected var imgclass:class; protected function oncreationcomplete( event:event ):void { var img:image = new Image(); img.source = imgclass; addelement( img ); ]]> </fx:script> </s:application> Grundsätzlich können Sie eine Vektorgrafik als SWF-Datei genauso per Loading oder Embedding einsetzen wie jede andere Grafik auch: Listing 7.4 Laden einer SWF-Grafik <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <mx:image source="assets/flashgrafik.swf" /> </s:application> Die Abbildung zeigt die Darstellung der SWF-Grafik mit transparentem Hintergrund. Bei SWF-Grafiken aus Flash wird der eigentliche Hintergrund des Flash-Films nicht berücksichtigt. Somit werden nur die wirklich gezeichneten Elemente dargestellt. Dabei können Sie zusätzlich noch die Alpha-Werte der einzelnen Elemente verändern. Deshalb eignet sich diese Art von Grafiken besonders bei freigestellten Grafiken bzw. Grafiken, die als einzelne Ebenen in Flex dargestellt werden sollen. Möchten Sie Bitmap-Grafiken mit Alphakanal benutzen, so empfiehlt sich das PNG-Format. Neben dieser Standardvariante zum Laden von SWF-Grafiken bietet dieses Format jedoch noch ein weiteres interessantes Feature. So können Sie beliebige Grafiken in einer SWF-Datei zu einer Asset-Bibliothek zusammenfassen. Diese in einen Flash- Film eingebetteten Grafiken werden Symbole genannt. Zum Anlegen dieser Symbole in der Flash-IDE wandeln Sie jede Grafik, die Sie später als einzelnen Asset ansprechen möchten, in einen MovieClip um (F8). Beachten Sie bei der Konvertierung, dass Sie als Typ MovieClip auswählen und die Verknüpfung Export für ActionScript aktivieren. 151

13 7 Medienintegration Auf diese Weise können Sie dem Symbol einen Klassennamen geben, über den Sie später in Flex Zugriff auf das jeweilige Symbol erhalten: Abbildung 7.2 Flash-Dialog: In Symbol konvertieren Mit dieser Konvertierung in einen MovieClip erscheinen sämtliche Symbole in der Bibliothek von Flash: Abbildung 7.3 Erstellte Symbole in der Bibliothek der Flash-IDE Wenn Sie alle Symbole erstellt und konvertiert haben, können Sie den Flash-Film über den Menüpunkt Datei -> Exportieren -> Film exportieren in den assets- Ordner Ihres Flex-Projekts exportieren. Der Vorteil dieser Variante liegt klar auf der Hand: Sie haben nur eine einzige Datei mit sämtlichen Assets. Das folgende Skript 152

14 Grafiken und Bilder laden zeigt, wie Sie die einzelnen eingebetteten Symbole in Flex ansprechen können. Dabei werden die ersten beiden Symbole in ActionScript eingebettet und als Bindung in das jeweilige Image geladen. Die dritte Grafik aus der SWF-Datei wird inline in MXML eingebettet: Listing 7.5 Symbole in SWF-Library ansprechen <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:verticallayout /> </s:layout> <fx:script> <![CDATA[ [Embed(source="assets/FlashAssetLibrary.swf", symbol="asset_a")] [Bindable] private var asset_a:class; [Embed(source="assets/FlashAssetLibrary.swf", symbol="asset_b")] [Bindable] private var asset_b:class; ]]> </fx:script> <s:hgroup> <mx:image source="{asset_a" /> <mx:image source="{asset_b" /> </s:hgroup> <mx:image symbol='asset_a')" /> </s:application> Abbildung 7.4 Das Ergebnis: die eingebetteten Symbole aus der SWF-Library 153

15 7 Medienintegration Tipp: Wenn Sie ein Element, wie zum Beispiel eine komplexe Komponente oder auch nur eine kleine Ladeanimation, in Flash Professional bauen möchten, bietet der Flash Builder eine neue hilfreiche Funktion. Diese übernimmt automatisch das Anlegen der Flash Professional-Datei sowie das Aktualisieren im Flash Builder nach dem Vornehmen einer Änderung der Flash Professional-Datei. Um diese Funktion zu nutzen, ziehen Sie in der DesignView die Komponente Flash Professional Component auf die Bühne. Um jetzt die gewünschte Komponente in Flash Professional zu erstellen, klicken Sie im Reiter Common auf den Button Create in Flash Professional. Es erscheint ein kleines PopUp-Fenster, in dem Sie den Klassennamen und den Namen der SWC-Datei angeben müssen. Der SWC-Dateiname ist der Name, den die erstellte Datei auf der Datenträgerebene bekommt. Der Klassenname ist die Bezeichnung für die Klasse, die aus der SWC mit in den Hauptfilm kompiliert wird. So wird auch diese Klasse direkt in Flash Professional in der Bibliothek angelegt. In MXML verwenden Sie ebenso diesen Klassennamen, um Ihre Komponente anzusprechen oder zu instanzieren. Nachdem Sie die zwei Felder ausgefüllt und das PopUp-Fenster geschlossen haben, öffnet sich Flash Professional, und Sie können hier wie gewohnt animieren und programmieren. Wenn Sie mit der Bearbeitung der Datei fertig sind, klicken Sie auf den Done-Button, um das Projekt zu schließen und zurück zum Flash Builder zu springen. In MXML wird nun direkt ihre erstellte Komponente instanziiert. Um weitere Änderungen vornehmen zu können, müssen Sie Ihre Komponente erneut in der DesignView anwählen und den Button Edit in Flash Professional klicken. Mit diesem neuen Workflow ersparen Sie sich einige manuelle Arbeitsschritte und das Verwalten der FLA-Dateien SWF-Animationen und Skripte laden Ein SWF-Asset muss nicht zwangsläufig eine statische Grafik sein. Sie können auch beliebige Animationen in Flash erstellen und diese in Flex als SWF-Animation darstellen. Dabei können Sie sogar ActionScript-Anweisungen in der Animation verwenden. Beim Einbinden von SWF-Animationen bzw. komplexeren SWF-Anwendungen müssen Sie jedoch ein paar Dinge beachten: Abspielgeschwindigkeit (Framerate): Die Framerate einer SWF-Animation wird stets an die der Hauptanwendung angepasst. Demnach wird die in Flash eingestellte Framerate überschrieben. Um Probleme mit der Abspielgeschwindigkeit zu vermeiden, sollten Sie von Beginn an die Framerate in der Flash-IDE an die der späteren Flex-Anwendung anpassen. Eine Flex-Anwendung benutzt standardmäßig 24 fps (Bilder pro Sekunde). Hintergrundfarbe: Die Hintergrundfarbe des Flash-Films wird verworfen. Auf diese Weise sind Transparenzen problemlos umsetzbar. 154

16 Grafiken und Bilder laden ActionScript-Kommunikation: Die SWF-Dateien können ActionScript-Code beinhalten. Eine Kommunikation zwischen der Hauptanwendung und den einzelnen SWF-Filmen ist möglich, wobei eine direkte Kommunikation (ohne Umwege über beispielsweise die LocalConnection) nur möglich ist, wenn der SWF-Film mindestens für den Flash Player 9 mit ActionScript 3.0 kompiliert wurde. Wie die ActionScript-Kommunikation zwischen einer SWF-Datei und der Flex- Anwendung realisiert werden kann, soll folgendes Beispiel demonstrieren: Es soll eine kleine Deutschlandkarte erstellt werden, die vier Städte zur Auswahl anbietet: Hamburg, Berlin, Köln und München. Jede Stadt soll mit einem MouseOver-Effekt versehen werden und beim Klicken ein eigenes Event feuern, das als Parameter den jeweiligen Städtenamen zugewiesen bekommt. Eine solche Aufgabe lässt sich in der Flash-IDE wesentlich schneller erstellen als in Flex selbst. Wir erstellen ein neues Dokument in Flash, platzieren eine Landkartenform als Vektorgrafik auf die Bühne und basteln die vier Schaltflächen samt MouseOver-Effekt: Abbildung 7.5 Die Landkarte in der Flash-IDE: FlashMap.fla Nachdem alle Schaltflächen erstellt und mit einem aussagekräftigen Namen versehen wurden, schreiben wir im ersten Keyframe der Timeline ein Skript, das jeder Schaltfläche die nötigen EventListener hinzufügt. In dem gemeinsamen Event-Handler clickhandler() fragen wir ab, welche Schaltfläche gedrückt wurde, um dementsprechend ein Event feuern zu können: Listing 7.6 Skript im ersten Keyframe der Timeline import flash.events.*; import com.simonwidjaja.events.mapevent; btnberlin.addeventlistener(mouseevent.click, clickhandler); btnhamburg.addeventlistener(mouseevent.click, clickhandler); 155

17 7 Medienintegration btnköln.addeventlistener(mouseevent.click, clickhandler); btnmünchen.addeventlistener(mouseevent.click, clickhandler); function clickhandler(event:event):void{ trace('[ FLASH ] Map clicked :'+event.target.name); var param:string; switch ( event.target.name ) { case "btnberlin": param = "berlin"; break; case "btnhamburg": param = "hamburg"; break; case "btnköln": param = "koeln"; break; case "btnmünchen": param = "muenchen"; break; dispatchevent( new MapEvent("selectCity", param) ); btnberlin.addeventlistener(mouseevent.mouse_over, totop); btnhamburg.addeventlistener(mouseevent.mouse_over, totop); btnköln.addeventlistener(mouseevent.mouse_over, totop); btnmünchen.addeventlistener(mouseevent.mouse_over, totop); function totop(event:mouseevent):void { this.swapchildren( (event.target as SimpleButton), this.getchildat(this.numchildren-1) ); Das dazugehörige Event MapEvent() sieht wie folgt aus: Listing 7.7 MapEvent.as (com/simonwidjaja/events/mapevent.as) package events { import flash.events.event; public class MapEvent extends Event { public var param:*; public function MapEvent(type:String, param:*=null) { super(type, bubbles, cancelable); this.param = param; Den fertigen Film können wir wie gewohnt als ganz normalen SWF-Film exportieren. Das Laden dieser SWF-Datei in Flex übernimmt ein SWFLoader, der den Dateinamen des SWF-Films als source-attribut übergeben bekommt. Über das complete-event können wir unserem Film einen Event-Handler für das spezielle selectcity-event hinzufügen. Für das Hinzufügen des Event-Handlers benötigen wir direkten Zugriff auf den SWF-Film, also den eigentlichen Inhalt der SWFLoader- Komponente. Dies erreichen wir über die content-eigenschaft. Achten Sie bei diesem Verfahren darauf, dass Sie eventuelle Event-Handler erst nach dem complete- Event der ladenden SWFLoader-Komponente hinzufügen. Dies ist notwendig, da die 156

18 Grafiken und Bilder laden content-eigenschaft erst dann richtig genutzt werden kann, wenn der eigentliche Film vollständig geladen wurde. Listing 7.8 MXML-Dokument <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundcolor="#333333"> <s:layout> <s:verticallayout /> </s:layout> <fx:script> <![CDATA[ import mx.controls.alert; import com.simonwidjaja.events.mapevent; protected function setmaplistener( event:event ):void { // Set Event Listener for map trace( event ); mymap.content.addeventlistener("selectcity", onselectcity); protected function onselectcity( event:mapevent ):void { trace( "onselectcity: "+event.param ); Alert.show( event.param, "Stadt gewählt!" ); ]]> </fx:script> <mx:swfloader id="mymap" source="assets/flashmap.swf" complete="setmaplistener(event)" /> </s:application> Das fertige Ergebnis in Flex sieht wie folgt aus: Abbildung 7.6 FlashMap in Flex: normal, mouseover und selectcity Tipp: Alternativ zu diesem Beispiel können Sie die FlashMap auch als SWC generieren lassen. Diese wird dann nicht wie die SWF bei Bedarf nachgeladen, sondern die genutzten Klassen aus der SWC werden mit in die Hauptanwendung kompiliert. Vorteile sind u.a., dass die Code Completion zur Verfügung steht und die gewünschten Klassen direkt per MXML instanziiert werden können. 157

19 7 Medienintegration Ladevorgang überwachen Wie eingangs bereits erwähnt, gibt es verschiedene Loading-Szenarien, bei denen Sie den Ladevorgang einer Grafik im Auge behalten müssen. Beim Nachladen von Grafiken stehen diese natürlich während der Initialisierungsphase noch nicht zur Verfügung. Bei größeren Grafiken kann zusätzlich ein Ladebalken gewünscht sein, der den Benutzer über den Status des Ladevorgangs informiert. Hierzu stellt Ihnen die Image-Klasse drei Events bereit: progress, complete und ioerror. Das progress-event wird während des Ladevorgangs regelmäßig ausgeführt und liefert Informationen zu bisher geladenen und totalen Dateigrößen. Das complete-event wird einmal gefeuert, wenn der Ladevorgang erfolgreich abgeschlossen wurde. Das ioerror-event schließlich wird nur dann gefeuert, wenn beim Laden der Grafik ein Fehler aufgetreten ist. Letzteres ist besonders bei Benutzereingaben sinnvoll. Das folgende Beispiel zeigt, wie Sie den aktuellen Status in einem Textfeld ausgeben und auf einer ProgressBar abbilden können: Listing 7.9 Ladevorgang überwachen <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:verticallayout paddingleft="10" paddingtop="10" paddingright="10" paddingbottom="10" /> </s:layout> <fx:script> <![CDATA[ protected function imagecontainer_progress( event:progressevent):void { var outputmsg:string = event.bytesloaded + "/" + event.bytestotal + " Bytes\n"; progressoutput.appendtext( outputmsg ); progressbar.setprogress( event.bytesloaded, event.bytestotal ); protected function imagecontainer_complete(event:event):void { progressoutput.appendtext( "#### Fertig geladen ####" ); protected function imagecontainer_ioerror( event:ioerrorevent):void { progressoutput.appendtext( "#### Fehler beim Laden ####" ); ]]> </fx:script> <!-- Loading Status --> <s:hgroup verticalalign="middle" width="500"> <s:textarea id="progressoutput" width="50%" height="200" /> <mx:progressbar id="progressbar" mode="manual" /> </s:hgroup> <!-- Loading PNG-Grafik --> <mx:image id="imagecontainer" 158

20 Einbinden von Sound source=" width="100%" height="100%" progress="imagecontainer_progress(event)" complete="imagecontainer_complete(event)" ioerror="imagecontainer_ioerror(event)" /> </s:application> Die fertige Anwendung sieht wie folgt aus: Abbildung 7.7 Ladevorgang eines großen Bildes überwachen 7.3 Einbinden von Sound Für den Einsatz von Audiodaten können Sie zum einen das vom Flash Player bereitgestellte Package flash.media nutzen oder aber einen sogenannten Effekt (Sound- Effect) erstellen. Letzteres wird in Abschnitt SoundEffect genauer beschrieben. Das folgende Beispiel zeigt, wie Sie in ActionScript eine Sound-Datei abspielen können: Listing 7.10 Sound mit Lautstärkeregelung abspielen <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:script> <![CDATA[ protected var sound:sound; protected function loadandplaysound(url:string):void { var urlreq:urlrequest = new URLRequest( url ); sound = new Sound(); sound.load( urlreq ); sound.play(); ]]> 159

21 7 Medienintegration </fx:script> <s:button label="play Sound" click="loadandplaysound( 'assets/sound.mp3' )" /> </s:application> Das vorangegangene Beispiel reicht aus, um einen einfachen Sound per Action- Script abzuspielen. Natürlich reicht dies in vielen Fällen nicht aus. Häufig machen eine Lautstärkeregelung und eine Visualisierung der aktuellen Abspielzeit Sinn. Das folgende Beispiel zeigt eine etwas aufwendigere Audioanwendung, die eben diese Funktionen bietet und zusätzlich Auskunft über die relevanten Events im Umgang mit Sound-Dateien gibt: Listing 7.11 Sound-Steuerung für Fortgeschrittene <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:verticallayout paddingleft="10" paddingtop="10" /> </s:layout> <fx:script> <![CDATA[ protected var sound:sound; protected var soundchannel:soundchannel; protected function loadandplaysound(url:string):void { var urlreq:urlrequest = new URLRequest( url ); sound = new Sound(); sound.addeventlistener( Event.COMPLETE, sound_complete ); sound.addeventlistener( Event.ID3, sound_id3 ); sound.addeventlistener( ProgressEvent.PROGRESS, sound_progress ); sound.load( urlreq ); soundchannel = sound.play(); //Timer zur Darstellung der aktuellen Position var timer:timer = new Timer(100); timer.addeventlistener( TimerEvent.TIMER, showposition ); timer.start(); protected function setvolume(value:number):void { var soundtransformtemp:soundtransform = soundchannel.soundtransform; soundtransformtemp.volume = value; soundchannel.soundtransform = soundtransformtemp; protected function setposition(value:number):void { soundchannel.stop(); soundchannel = sound.play( value ); protected function showposition(event:timerevent):void { positionslider.value = Number( soundchannel.position.tofixed(2) ); protected function sound_complete(event:event):void { positionslider.minimum = 0; positionslider.maximum = sound.length; 160

22 Einbinden von Video positionslider.value = 0; protected function sound_id3(event:event):void { trace( "ID3 Handler", event ); protected function sound_progress(event:progressevent):void { trace( "Progress Handler", event ); progressbar.setprogress( event.bytesloaded, event.bytestotal ); ]]> </fx:script> <!-- Ladevorgang --> <mx:progressbar id="progressbar" label="ladevorgang" labelplacement="top" mode="manual" /> <!-- LautstŠrke --> <s:label text="lautsrške" /> <s:hslider minimum="0" maximum="1" value="0.5" stepsize="0.1" change="setvolume(event.currenttarget.value)" /> <!-- Position --> <s:label text="position" /> <s:hslider id="positionslider" minimum="0" change="setposition(event.currenttarget.value)" /> <!-- Play --> <s:button label="play Sound" click="loadandplaysound( 'assets/sound.mp3' )" /> </s:application> Die fertige Anwendung mit Lautstärkeregelung, Abspielkopf und Ausgabe sieht so aus: Abbildung 7.8 Sound-Steuerung für Fortgeschrittene 7.4 Einbinden von Video Das Einbinden von Videos in Flex ist fast genauso einfach wie das Einbetten anderer externer Medien. Zum Abspielen von FLV-kodierten Videos können Sie die VideoPlayer-Komponente nutzen. Diese Komponente ist eine fertige, skinnbare Video-Komponente mit Bedienfeld zur Steuerung des Videos. 161

23 7 Medienintegration Die Syntax für die Verwendung der Komponente VideoPlayer sieht wie folgt aus: Listing 7.12 VideoPlayer-Komponente <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:videoplayer id="videoplayer" source="assets/video.flv" x="10" y="10" width="500" height="430" /> </s:application> Wie Sie sehen, benötigt der Video-Player nur die Eigenschaft source, die Sie auch bei der Komponente Image schon kennengelernt haben, und nimmt Ihnen ansonsten alles andere ab. Bei der Auslieferung von Videos wird grundsätzlich zwischen zwei Arten unterschieden: Progressive Download Beim progressiven Download wird das Video tatsächlich auf den Client übertragen und in einer temporären Datei gespeichert. Abhängig von der verfügbaren Bandbreite wird genau wie bei einem normalen Download versucht, das Video so schnell wie möglich herunterzuladen. Der Download findet dabei linear vom Anfang zum Ende des Videos statt. Abgespielt werden können nur die Teile des Videos, die bereits vorhanden sind. Ein wirkliches Vorspulen ist also nicht möglich. Das Video wird dabei über das Standard HTTP-Protokoll ausgeliefert. Streaming Beim Streaming wird das Video dagegen von einem Streaming Server geliefert, ohne dass die Datei je auf der lokalen Maschine des Benutzers gespeichert wird. Diese Tatsache spielt besonders im Kontext von DRM (Digital Rights Management) eine zentrale Rolle. Außerdem kann der Benutzer beliebig innerhalb des Videos vor- und zurückspulen. Der größte Vorteil der Streaming-Variante liegt darin, dass lediglich die vom Nutzer tatsächlich betrachtete Menge des Videos auch wirklich ausgeliefert wird und damit die benutzte Bandbreite geringer ist. Hier kommt das so genannte Real Time Messaging Protocol (RTMP) zum Einsatz. Neben den genannten Vorteilen sei an dieser Stelle jedoch gesagt, dass eine zusätzliche Serveranwendung für die Auslieferung benötigt wird. Zwei davon möchte ich hier erwähnen: Das offizielle Produkt aus dem Hause Adobe und eine Alternative, mit der ich persönlich einige gute Erfahrungen sammeln durfte. 162

24 Restriktionen beim Laden externer Medien Unter dem Produktnamen Flash Media Server bietet Adobe zwei Editionen eines Streaming Servers an: Während der Flash Media Streaming Server eine einfache Streaming-Anwendung darstellt, ist der Flash Media Interactive Server eine skalierbare Anwendung, die nicht nur für Streaming-Szenarien sondern auch Echtzeitkommunikation in beide Richtungen (Client->Server und Server->Client) genutzt werden kann und somit oft bei Online-Spielen zum Einsatz kommt. Mehr Informationen zum Flash Media Server finden Sie hier: Alternativ dazu möchte ich Ihnen die Serverlösung Wowza Media Server vorstellen. Dieses Produkt wurde bereits mehrfach ausgezeichnet (u.a. Best Streaming Innovation 2009 vom Streaming Media Magazone). Bei näherer Betrachtung ist das gar nicht so verwunderlich, denn die beiden Gründer von Wowza Media Systems hatten beide vor der Gründung eine führende Position bei Adobe inne. Mehr Informationen finden Sie hier: Wie Sie das Aussehen der Komponente durch Skinning verändern können, ist im Kapitel 8.3 beschrieben. 7.5 Restriktionen beim Laden externer Medien Beim Laden externer Medien müssen Sie verschiedene Sicherheitsaspekte berücksichtigen. Generell können Sie Medien von beliebigen URLs herunterladen, jedoch verhindert der Flash Player standardmäßig das Herunterladen von Bildern anderer Domänen. Wenn Sie dennoch Medien aus einer anderen Domäne beziehen möchten, können Sie eine crossdomain.xml erstellen und in der Root-Ebene der jeweiligen Domäne ablegen. Innerhalb der crossdomain.xml können Sie genau festlegen, welche Restriktionen es beim Zugriff von anderen Domänen geben soll. Weitere Informationen zur crossdomain.xml erhalten Sie hier: go/tn_