AS3-Tutorium: Flex: Butterfly 02 fixed number of rounds
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 zweiten Teil des Flex-Tutoriums wird der Schmetterling aus Flash-Tutorium „Butterfly 04 variable number of rounds“
in eine Flex-Anwendung eingebunden. Im Gegensatz zum Movie-Clip Butterfly (flatternder Schmetterling) hat der Movie-Clip ButterflyMovie (Schmetterling, der in Kreis fliegt und dabei flattert) ein Attribut (roundsToFly) auf das von außen, das heißt von Flex aus zugegriffen werden kann.
<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly02Flex4Flash11/swf/Butterfly02Flex4Flash11.swf</swf>
Musterlösung (Flex 4/Flash CS5)
(SVN-Repository)
Musterlösung (Flex 4/Flash CS4) (SVN-Repository)
Unterschiede zu Teil1 des Flex-Tutoriums
Im Prinzip verläuft die Programmierung des Flex-Projektes
Butterfly02Flex genauso wie die Programmierung des Flex-Projektes Butterfly02Flex.
Lediglich folgende Unterschiede sind zu beachten:
- Das Projekt heißt anders:
Butterfly02Flexan Stelle vonButterfly01Flex. - Anstelle der
fla-Datei des Flash-Tutoriums „Butterfly 01 fluttering“ wird diefla-Datei Ihrer Lösung oder der Musterlösung des Flash-Tutoriums „Butterfly 04 variable number of rounds“ in Flex integriert (z.B. unter dem NamenButterfly04Flash.fla). - In der Bibliothek der
fla-DateiButterfly04Flash.flawerden zwei Symbole in Flex-Komponenten konvertiert:ButterflyundButterflyMovie. (Die Flex-KomponenteButterflywird im Weiteren gar nicht mehr verwendet, mann könnte also auch darauf verzichten, das zugehörige Symbol zur Flex-Komponente zu machen). - Optional: In der Bibliothek der
fla-DateiButterfly04Flash.fla: Der OrdnerInteractionmit dem SymbolUserInputsowie der von Flash angelegte OrdnerFlashComponentskönnen gelöscht werden. In diesem Fall müssen auch die Ebeneninputund vor Allemscriptsaus der Hauptzeitleiste gelöscht werden. - Anstelle der Flex-Komponente
Butterflywird die Flex-KomponenteButterflyMovieauf die Hauptbühne gelegt (DateiButterfly02Flex.mxml, Designmodus)
Bis hierher unterscheiden sich das Flex-Tutorium 1 und 2 nur in der Wahl der Symbole, die in Flex-Komponenten konvertiert werden.
Und wenn anstelle der fla-Datei Butterfly04Flash.fla die (Muster-)Lösung des Flash-Tutoriums
„Butterfly 03 fixed number of rounds“ verwendet worden wäre,
wäre das oben definierte Ziel, eine vorgegebene Anzahl von Runden zu filegen, schon erreicht.
Allerdings wäre die Anzahl der zu fliegenden Runden in diesem Fall fest in der Flash-Komponente ButterflyMovie codiert.
Da hier aber die (Muster-)Lösung es Flash-Tutoriums „Butterfly 04 variable number of rounds“ in Flex integriert wurde, kann die Anzahl der zu fliegenden Runden von Flex aus gesteuert werden.
Folgender Code in der Datei Butterfly02Flex.mxml (Quellenmodus) sorgt dafür, dass der Schmetterling genau zwei Runden über der Bühne fliegt:
<?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"
xmlns:std="*"
width="550" height="400"
applicationComplete="o_init()"
>
<s:Label
y="27" horizontalCenter="0"
text="Butterfly 02 (Flex 4)" fontSize="20"
/>
<std:ButterflyMovie id="cmp_butterfly"/>
<fx:Script>
<![CDATA[
private function o_init(): void
{
stage.scaleMode=StageScaleMode.SHOW_ALL;
cmp_butterfly.roundsToFly = 2;
cmp_butterfly.gotoAndPlay("lbStart");
}
]]>
</fx:Script>
</s:Application>
Anmerkungen
Die Hauptbühne wird in einem Flex-Web-Projekt mit Hilfe der Spark-Komponente Application definiert.
In einem Flex-Air-Projekt müsste die Komponente WindowedApplication verwendet werden.
Im öffnenden Tag dieser Komponente werden vier Namespaces definiert:
s: Der Namespace für die moderneren Spark-Komponenten (existieren seit Flex 4; setzen mindestens eine Flash Player der Version 10 voraus)mx: Der Namespace für die alten MX-Komponenten (existieren seit Flex 2; sollten nur noch verwendet werden, wenn es keine Spark-Komponenten als Ersatz gibt)fx: Der Namespace für alle nicht-grafischen Flex-Elemente, wie z.B. AS3-Scripts, CSS-Style-Anweisungen etc.std: Der Namespace für das Standard-Package. (Im Flash-Builder wird dafür automatisch das Kürzelns1vergeben, wenn das Kürzelstdnicht zuvor definiert wurde.)
Die Komponente ButterflyMovie liegt im Standard-Package, da in Flash unter Eigenschaften → Klasse kein anderes Package angegeben wurde. Bei der Label-Komponente handelt es sich dagegen um eine Spark-Kompnente; ihr wird daher der Namespace s zugewiesen.
Sobald die Flex-Anwendung vollständig gestartet wurde und insbesondere auch die Hauptbühne stage erstellt wurde,
signalisiert die Komponente Application bzw. WindowedApplication dies mit dem Ereignis ApplicationComplete.
(Im Gegensatz dazu wird CreationComplete bereits signalisiert, wenn die Hauptbühne stage noch nicht initialisiert, d.h. gleich null ist.)
Im obigen Beispiel wird veranlasst, dass die Observer-Methode o_init aufgerufen wird,
sobald das Ereignis ApplicationComplete eintritt.
Die Methode o_init sorgt zunächst dafür, dass sich die Größe
der Bühne an die Größe des Ausgabefensters anpasst.
(Dafür ist es notwendig, dass stage bereits initialisiert wurde.)
Anschließend setzt Sie die Anzahl der Runden, die der Schmetterling fliegen soll, auf 2.
Damit in init auf das Schmetterlingsobjekt zugegriffen werden kann,
wurde diese Objekt cmp_butterfly als Identifikator (id) zugewisen.
Zu guter Letzt startet o_init den Rundflug des Schmetterlings.
Den Rest (überprüfen der Rundenzahl, zum Schluss wegfliegen) erledigt das Schmetterlingsobjekt selbst.
Quellen
- Kowarschick, W.: Multimedia-Programmierung
- Musterlösung (Flex 4/Flash CS5)
- Musterlösung (Flex 4/Flash CS4)
