Embed Size (px)
Citation preview
Vorwort
Simon Widjaja
Adobe Flex 4
ISBN: 978-3-446-42268-1
Weitere Informationen oder Bestellungen unter
http://www.hanser.de/978-3-446-42268-1
sowie im Buchhandel.
© Carl Hanser Verlag, München
XIII
Vorwort
Flex ist das kostenlose Open-Source-Framework zur Entwicklung von anspruchs-vollen, interaktiven Anwendungen und somit das Herzstück der neuen Produktlinie „Flash Platform“ aus dem Hause Adobe. Die Flash Platform vereint bewährte Techno-logie, 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 Befehls-satz 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äh-rend ich dieses Buch verfasse, die Welt der mobilen Endgeräte. So stehen mobile Ver-sionen 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 www.openscreenproject.org 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.
XIV
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-An-wendungen 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 wahrge-nommen hat. So wurde die Flash-Technologie samt Entwicklungsumgebung nach wie vor von vielen Entwicklern als zu grafikorientiert und für ernstzunehmende An-wendungen 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 auf-merksam verfolgt und auch selbst eine größer werdende Skepsis entwickelt. Als je-doch 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 Begeiste-rung 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-Kom-ponenten 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 Blog- und Forenbeiträge gestolpert bin, die weiterhin die Flex-Technologie in völlig fal-schem 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ärungsar-beit leisten zu wollen. Auch in diesem Gespräch musste ich feststellen, dass die Flex-Technologie keineswegs in Betracht gezogen wurde und stattdessen auf herkömmli-cher 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 entstehen-de 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. sechs-stü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 Erfah-rung gemacht haben, dass der Einstieg viel einfacher und schneller war als erwartet:
XV
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 (www.flexug.de), 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 beson-deres 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 mei-nen Blog unter www.flashplatform.de ein. Hier erwarten Sie aktuelle Informatio-nen, 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-Tech-nologie, 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-Kom-ponenten 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, Ef-fects und Transitions anpassen werden können.
� Kapitel 11 bringt Ihnen den Umgang mit lokalen Daten näher (Datenmodellie-rung, Datenbindungen, Formatieren und Validieren von Daten).
XVI
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 Zusammenar-beit 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 Run-time 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 Desktopan-wendungen 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 des-wegen unzeitgemäß, weil sie recht schnell veraltet. Daher haben wir uns dafür ent-schieden, Ihnen dieses Material auf einer Website bereitzustellen. Deren URL lautet www.flexbuch.deDort 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, son-dern auch für die vielen lustigen und motivierenden Gespräche während der gesam-ten 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.
XVII
Vorwort
Feedback
Wenn Sie Vorschläge oder Fragen zum Buch haben, können Sie mich selbstverständ-lich direkt kontaktieren: [email protected]
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 WidjajaWebentwickler aus Leidenschaft
Leseprobe
Simon Widjaja
Adobe Flex 4
ISBN: 978-3-446-42268-1
Weitere Informationen oder Bestellungen unter
http://www.hanser.de/978-3-446-42268-1
sowie im Buchhandel.
© Carl Hanser Verlag, München
147
77 Medienintegration
7.1 Einführung
Da die Flash-Umgebung stets sehr grafikorientiert war, bietet der Flash Player zahl-reiche Möglichkeiten, um Grafik-, Video- und Soundformate darzustellen bzw. abzu-spielen. 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 nachge-laden werden. Diese Variante ist mit dem Umgang mit Grafiken in HTML ver-gleichbar.
� 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 eingebet-tet, 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 Da-tei springen, ohne diese bereits vollständig heruntergeladen zu haben. Hier kommt
148
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 An-wendung 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 An-wendung schwieriger zu handhaben ist. So müssen Sie verschiedene Event-Handler einsetzen, um sicherzustellen, dass das jeweilige Asset bereits vollständig in der An-wendung vorliegt, bevor Sie darauf Zugriff haben. Beim Embedding werden sämtliche Medieninformationen vollständig in die An-wendung 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 Vi-deosequenz über das normale Loading eingebunden, so wird die gesamte verfügbare Bandbreite genutzt, um das Video schnellstmöglich vollständig herunterzuladen. Ge-rade 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 sprin-gen kann, was wiederum zu einer deutlichen Usability-Einschränkung führt. Bei al-len Vorteilen der Streaming-Variante gibt es jedoch auch einen gravierenden Nach-teil: 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 die-ses 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 kosten-lose 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 (http://osflash.org/red5).
149
GrafikenundBilderladen
Die folgende Tabelle zeigt die Medientypen, die Sie in Flex nutzen können:
Tabelle 7.1 Übersicht der verfügbaren Dateiformate
Typ Format MIM-TypeImages GIF image/gif
JPG image/jpeg
PNG image/png
SVG image/svg image/svg-xml
FXG 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 GrafikenundBilderladen
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 Lauf-zeit 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="http://ns.adobe.com/mxml/2009" 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 source="@Embed('assets/flash_builder_logo.png')" 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 zwi-schen Loading und Embedding.
150
7 Medienintegration
Wenn Sie das Laden eines Bildes von einer Benutzeraktion abhängig machen möch-ten, 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="http://ns.adobe.com/mxml/2009" 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( "http://www.vfdb.net/91/images/testbild_neu.jpg" ); } ]]> </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="http://ns.adobe.com/mxml/2009" 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>
151
GrafikenundBilderladen
<![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="http://ns.adobe.com/mxml/2009" 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. Da-bei 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 anspre-chen 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.
152
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
153
GrafikenundBilderladen
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="http://ns.adobe.com/mxml/2009" 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 source="@Embed(source='assets/FlashAssetLibrary.swf', symbol='Asset_a')" /> </s:Application>
Abbildung 7.4 Das Ergebnis: die eingebetteten Symbole aus der SWF-Library
154
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 Buil-der nach dem Vornehmen einer Änderung der Flash Professional-Datei. Um diese Funktion zu nutzen, ziehen Sie in der DesignView die Komponente Flash Pro-fessional 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. Nach-dem 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 Profes-sional klicken.
Mit diesem neuen Workflow ersparen Sie sich einige manuelle Arbeitsschritte und das Verwalten der FLA-Dateien.
7.2.1 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 dar-stellen. Dabei können Sie sogar ActionScript-Anweisungen in der Animation ver-wenden. Beim Einbinden von SWF-Animationen bzw. komplexeren SWF-Anwen-dungen 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 ein-gestellte 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 standard-mäßig 24 fps (Bilder pro Sekunde).
� Hintergrundfarbe: Die Hintergrundfarbe des Flash-Films wird verworfen. Auf diese Weise sind Transparenzen problemlos umsetzbar.
155
GrafikenundBilderladen
� ActionScript-Kommunikation: Die SWF-Dateien können ActionScript-Code beinhalten. Eine Kommunikation zwischen der Hauptanwendung und den einzel-nen 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 Schalt-fläche die nötigen EventListener hinzufügt. In dem gemeinsamen Event-Handler clickHandler() fragen wir ab, welche Schaltfläche gedrückt wurde, um dement-sprechend 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);
156
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 expor-tieren. 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 die-sem Verfahren darauf, dass Sie eventuelle Event-Handler erst nach dem complete-Event der ladenden SWFLoader-Komponente hinzufügen. Dies ist notwendig, da die
157
GrafikenundBilderladen
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="http://ns.adobe.com/mxml/2009" 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.
158
7 Medienintegration
7.2.2 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 Ver-fü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 pro-gress-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="http://ns.adobe.com/mxml/2009" 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"
159
Einbinden von Sound
source="http://www.vfdb.net/91/images/testbild_neu.jpg" 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 bereit-gestellte Package flash.media nutzen oder aber einen sogenannten Effekt (Sound-Effect) erstellen. Letzteres wird in Abschnitt 9.2.5.7 „SoundEffect“ genauer be-schrieben. 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="http://ns.adobe.com/mxml/2009" 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(); } ]]>
160
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="http://ns.adobe.com/mxml/2009" 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> <
161
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 an-derer 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.
162
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="http://ns.adobe.com/mxml/2009" 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 unterschie-den:
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 Down-load 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 Vorspu-len 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 Mes-saging 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.
163
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 skalier-bare Anwendung, die nicht nur für Streaming-Szenarien sondern auch Echtzeitkom-munikation 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: http://www.adobe.com/products/flash-mediaserver
Alternativ dazu möchte ich Ihnen die Serverlösung Wowza Media Server vorstellen. Dieses Produkt wurde bereits mehrfach ausgezeichnet (u.a. Best Streaming Innovati-on 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: http://www.wowzamedia.com
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ück-sichtigen. 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 In-formationen zur crossdomain.xml erhalten Sie hier: http://www.adobe.com/go/tn_14213
