AS3-Tutorium: Flex: Butterfly 01 fluttering

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 4 (großteils überprüft)

Umfang: 3 (einige wichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 5 (ausgezeichnet)

AS3-Tutorium: Butterfly: Flash | Flex

Flex: Übersicht | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5

Flatternder Schmetterling

Im ersten Teil des Flex-Tutoriums wird der Schmetterling aus AS3-Tutorium: Flex: Butterfly 01 fluttering in eine Flex-Anwendung eingebunden.

<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly01Flex4Flash11/swf/Butterfly01Flex4Flash11.swf</swf> Musterlösung (Flex 4/Flash CS5) (SVN-Repository)

Musterlösung (Flex 4/Flash CS4) (SVN-Repository)

Ein neues Flex-Projekt

1. Flash Builder 4 (deutsche Version) starten.
2. Die Flash-Perspektive öffenen: Fenster → Perspektive öffnen → Andere... → Flash.
3. Ein neues Flex-Projekt erzeugen: Datei → Neu → Flex-Projekt → Projektname: Butterfly01Flex → Fertig stellen.
4. Im Editor-Fenster von Eclipse ist die Datei Butterfly01Flex.mxml geöffnet. Diese Datei kann durch einen Doppelklick auf Butterfly01Flex → src → (Standardpaket) → Butterfly01Flex.mxml im Fenster Paket-Explorer (links oben in der Standardperspektive) jederzeit geöffnet werden.
5. Im Editor-Fenster der Datei Butterfly01Flex.mxml in den Quelle-Modus wechseln: Klick auf den Button Quelle (sofern dieser Button nicht bereits selektiert ist).
6. Im Editor-Fenster der Datei Butterfly01Flex.mxml: minWidth="955" minHeight="600" durch width="550" height="400" ersetzen.
7. Wenn gewünscht wird, dass sich die Darstellungsgröße der SWF-Datei der Flex-Anwendung an die Größe des Ausgabefensters anpasst: Direkt hinter width="550" height="400" folgendes Attribut einfügen: applicationComplete="stage.scaleMode=StageScaleMode.SHOW_ALL".
8. Im Editor-Fenster der Datei Butterfly01Flex.mxml in den Design-Modus wechseln: Klick auf den Button Design. (Der Wechsel in den Design-Modus dauert bei ersten Mal i. Allg. etwas länger.)
9. Die Komponente Label aus dem Fenster Komponenten (links oben, zweiter Reiter in der Standardperspektive) in das Editorfenster ziehen.
10. Den Inhalt des Labels im Editor-Fenster in Butterfly 01 (Flex) abändern (Doppelklick mit der linken Maustaste).
11. Die Schriftgröße und -art kann, wenn die Label-Komponente per Mausklick selektiert wurde, im Fenster Eigenschaften (rechts unten, erster Reiter in der Standardperspektive) abgeändert werden.

Schmetterlingssymbol aus Flash CS3, CS4 oder CS5 in Flex integrieren

Die folgende Beschreibung funktioniert sowohl für Flash CS4, als auch für Flash CS5 uns sollte auch für Flash CS3 funktionieren. Im nächsten Abschnitt wird eine alternative Vorgehensweise gezeigt, die aber nur für Flash CS5 funktioniert.

1. Im Paket-Explorer: Klick mit rechter Maustaste auf den Projektordner Butterfly01Flex → Neu → Ordner → Ordnername: assets (Schreibweise ist bei Flash CS5 wichtig) → Fertig stellen.
2. Im Paket-Explorer: Klick mit rechter Maustaste auf den Ordner assets → Importieren → Allgemein (Ordner durch Klick Dreiecksicon öffnen) → Dateisystem → Weiter → Aus Verzeichnis: hier den Ordner mit der Lösung von AS3-Tutorium: Flex: Butterfly 01 fluttering wählen → Häckchen vor fla-Datei mit Flash-Musterlösung (Butterfly01Flash.fla) → Fertig stellen.
3. Im Paket-Explorer: Die fla-Datei im Ordner assets durch Doppelklick in dobe Flash öffnen.
4. In der Bibliothek von Adobe Flash: Symbol Butterfly selektieren.
5. In Adobe Flash: Befehle → Symbol in Flex-Komponente konvertieren (in Flash CS4 gibt es diesen Befehl nur, wenn das Plugin Flex Component Kit installiert wurde; siehe Übersicht).
6. In Adobe Flash: Datei → Speichern.
7. In Adobe Flash: Datei → Veröffentlichen.
8. Im Paket-Explorer (vom Flash Builder): Klick mit rechter Maustaste auf den Projektordner Butterfly01Flex → Aktualisieren.
9. Im Paket-Explorer: Neu erstellte swc-Datei (Butterfly01Flash.swc) vom Ordner assets in den Ordner lib verschieben.
10. Im Editorfenster (Design-Modus) der Datei Butterfly01Flex.mxml: Komponente Butterfly (aus Fenster Komponenten → Benutzerdefiniert) auf die Bühne ziehen (und evtl. skalieren).

Tipp: Sollte es beim Start einer Flex-Anwendung zu unerklärlichen Fehlern kommen, hilft oft:

• In der Menüleiste (ganz oben): Projekt → Bereinigen....

Schmetterlingssymbol aus Flash CS5 in Flex integrieren (Alternative)

Voraussetzung: Ein neues Flex-Projekt wurde gemäß der Anleitung von Abschnit Ein neues Flex-Projekt erstellt. Weitere Dateien oder Ordner (wie z.B. assets) wurden noch nicht angelegt.

1. Im Editor-Fenster der Datei Butterfly01Flex.mxml in den Design-Modus wechseln: Klick auf den Button Design.
2. Im Editorfenster (Design-Modus) der Datei Butterfly01Flex.mxml: Komponente Flash Professional-Komponente (aus Fenster Komponenten → Benutzerdefiniert) auf die Bühne ziehen.

Anwendung testen

1. Auf Icon Ausführen Als... (fünftes Icon links oben: weißes Dreieck in grünem Kreis) klicken → Webanwendung → OK.
2. Wenn die Datei Butterfly01Flex.mxml nicht per Strg-S (Ctrl-S) oder Datei → Speichern gesichert wurde, erscheint nun der Dialog Speichern und starten in dem die zu speichernden Dateien selektiert sind. Hier ist es sinnvoll die Option Ressourcen vor den Start immer speichern zu selektieren (damit dieser Dialog künftig nicht mehr angezeigt wird) und anschließend OK zu klicken.
3. Im Standard-Browser öffnet sich die Flash-Anwendung.

Im Allgemeinen ist es nicht notwendig, die Anwendung immer im Browser zu starten. Der Standalone-Flash-Player ist für Testzwecke i.Allg. vollkommen ausreichend. Ob die Debug-Version im Browser oder im Standalone-Flash-Player gestartet wird, kann man in den Projekteigenschaften festlegen.

• Im Paket-Explorer: Klick mit rechter Maustaste auf dem Projektordner Butterfly01Flex → Eigenschaften → Flex Compiler → HTML-Wrapper-Datei generieren → kein Häckchen (⇒ Anwendung wird im Standalone-Flash-Player gestartet; Häckchen ⇒ Anwendung wird im Browser gestartet) → OK → OK.

Man kann die Anwendung auch im Debug-Modus starten (viertes Icon links oben: ein symbolisierter Käfer (= Bug)). In diesem Fall werden Fehlermeldung und trace-Ausgaben (trace("Text, der nur im Debug-Modus angezeigt wird")) im Fenster Konsole (unterhalb des Editor-Fensters in der Srandardansicht) ausgegeben.

Für den Debuggingmodus sind allerdings besondere Flash-Player notwendig. Diese können unter http://www.adobe.com/support/flashplayer/downloads.html heruntergeladen werden, sofern der Flash Builder meldet, dass kein geeigneter Flash-Player gefunden werden kann.

Quellen

• Kowarschick, W.: Multimedia-Programmierung
• Musterlösung (Flex 4/Flash CS5)
• Musterlösung (Flex 4/Flash CS4)

SVN-Repository-Verweise

• Musterlösung (Flex 4/Flash CS5)
• Musterlösung (Flex 4/Flash CS4)

Dieser Artikel ist GlossarWiki-konform.