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 CS5 in Flex integrieren

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.
3. Neue Flash-Komponente erstelle: Entweder Doppelklick auf Komponenten-Symbol im Editor oder Einfachklick auf Komponentensymbol im Editor + Klick auf In Flash Professional erstellen... im Fenster Eigenschaften (rechts unten in der Standardperspektive) → Klassenname: Butterfly, SWC-Dateiname: Butterfly01FlashComponents.swc ⇒ Die Datei Butterfly01FlashComponents.fla wird von Flex automatisch erstellt und in einen neuen Ordner namens assets abgelegt.
4. In der Bibliothek von Adobe Flash: Symbol Butterfly löschen.
5. In Adobe Flash: Ihre Lösung Butterfly01Flash.fla oder die Musterlösung Butterfly01Flash11.fla von AS3-Tutorium: Flash: Butterfly 01 fluttering öffnen.
6. In Adobe Flash: In der Bibliothek von Butterfly01Flash.fla bzw. Butterfly01Flash11.fla: Alle Ordner und Symbole markieren → Strg-C (Strg-C).
7. In Adobe Flash: In der Bibliothek der von Flex erstellten fla-Datei Butterfly01FlashComponents.fla, die kopierten Symbole und Ordner einfügen: Strg-V (Strg-V).
8. In Adobe Flash: In der Bibliothek von Butterfly01FlashComponents.fla: Symbol Butterfly selektieren.
9. In Adobe Flash: In der Menüleiste von Butterfly01FlashComponents.fla: Befehle → Symbol in Flex-Komponente konvertieren ⇒ Das Icon von Butterfly ändert sich: Fx auf schwarzem Grund.
10. In Adobe Flash, Datei Butterfly01FlashComponents.fla: Datei → Speichern.
11. In Adobe Flash, links oben auf der Bühne: Klick auf Button Fertig ⇒ Im Flex-Ordner assets wird die Datei Butterfly01FlashComponents.swc erstellt; diese wird automatisch in den Ordner lib kopiert.
12. Im Paket-Explorer (vom Flash Builder): Klick mit rechter Maustaste auf den Projektordner Butterfly01Flex → Aktualisieren.
13. Im Paket-Explorer: Neu erstellte swc-Datei (Butterfly01Flash.swc) vom Ordner assets in den Ordner lib verschieben.
14. 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 CS3, Flash CS4 oder Flash CS5 (Alternative zu oben) in Flex integrieren

Voraussetzung: Ein neues Flex-Projekt wurde gemäß der Anleitung von Abschnitt Ein neues Flex-Projekt erstellt.

Die folgende Beschreibung funktioniert sowohl für Flash CS4, als auch für Flash CS5 und sollte auch für Flash CS3 funktionieren.

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) ⇒ Das Icon von Butterfly ändert sich: Fx auf schwarzem Grund..
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....

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.