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

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

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_cs5/butterfly/butterfly_01_fluttering_multi/butterfly_01_fluttering_multi.swf</swf> Erweiterte Musterlösung (Flex 4/Flash CS5) (SVN-Repository)

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

Flash-Schmetterlingssymbol in Flex integrieren

<swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flex4__cs5/butterfly/butterfly_01_fluttering/butterfly_01_fluttering.swf</swf> Musterlösung (Flex 4/Flash CS5) (SVN-Repository)

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

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: Butterfly01 → Fertig stellen.
4. Im Editor-Fenster von Eclipse ist die Datei Butterfly01.mxml geöffnet. Diese Datei kann durch einen Doppelklick auf Butterfly01 → src → (Standardpaket) → Butterfly01.mxml im Fenster Paket-Explorer (links oben in der Standardperspektive) jederzeit geöffnet werden.
5. Im Editor-Fenster der Datei Butterfly01.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.)
6. Die Komponente Label aus dem Fenster Komponenten (links oben, zweiter Reiter in der Standardperspektive) in das Editorfenster ziehen.
7. Den Inhalt des Labels im Editor-Fenster in Butterfly 01 abändern (Doppelklick mit der linken Maustaste).
8. 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.

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 Butterfly01.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-Borwser ö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 Butterfly01 → Eigenschaften → Flex Compiler → HTML-Wrapper-Datei generieren → Häckchen ⇒ Anwendung wird im Browser gestartet, kein Häckchen ⇒ Anwendung wird im Standalone-Flash-Player gestartet.

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 Flsh-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 4Flash CS4)

Dieser Artikel ist GlossarWiki-konform.