AS3-Tutorium: Flex: Butterfly 02 fixed number of rounds: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(15 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{AS3-Tutorium:Flex:Butterfly:Menü}} | {{AS3-Tutorium:Flex:Butterfly:Menü}} | ||
=Flatternder Schmetterling= | ==Flatternder Schmetterling== | ||
Im zweiten Teil des Flex-Tutoriums wird der Schmetterling aus '''Flash'''-Tutorium „[[AS3-Tutorium: Flash: Butterfly | Im zweiten Teil des Flex-Tutoriums wird der Schmetterling aus '''Flash'''-Tutorium „[[AS3-Tutorium: Flash: Butterfly 06 external code|Butterfly 06 external code]]“ | ||
in eine Flex-Anwendung eingebunden. Im Gegensatz zum Movie-Clip <code>Butterfly</code> (flatternder Schmetterling) hat der Movie-Clip <code>ButterflyMovie</code> (Schmetterling, der in Kreis fliegt und dabei flattert) ein Attribut (<code>roundsToFly</code>) auf das von außen, das heißt von Flex aus zugegriffen werden kann. | in eine Flex-Anwendung eingebunden. Im Gegensatz zum Movie-Clip <code>Butterfly</code> (flatternder Schmetterling) hat der Movie-Clip <code>ButterflyMovie</code> (Schmetterling, der in Kreis fliegt und dabei flattert) ein Attribut (<code>roundsToFly</code>) auf das von außen, das heißt von Flex aus zugegriffen werden kann. | ||
<noinclude> | <noinclude> | ||
Zeile 14: | Zeile 14: | ||
</noinclude> | </noinclude> | ||
=Unterschiede zu | ==Unterschiede zu Teil 1 des Flex-Tutoriums== | ||
Im Prinzip verläuft die Programmierung des Flex- | Im Prinzip verläuft die Programmierung des Flex-Projekts | ||
<code>Butterfly02Flex</code> genauso wie die Programmierung des Flex- | <code>Butterfly02Flex</code> genauso wie die Programmierung des Flex-Projekts <code>[[AS3-Tutorium: Flex: Butterfly 01 fluttering|Butterfly02Flex]]</code>. | ||
Folgende Unterschiede sind zu beachten: | |||
* Das Projekt heißt anders: <code>Butterfly02Flex</code> an Stelle von <code>Butterfly01Flex</code>. | * Das Projekt heißt anders: <code>Butterfly02Flex</code> an Stelle von <code>Butterfly01Flex</code>. | ||
* Anstelle der <code>fla</code>-Datei des Flash-Tutoriums „[[AS3-Tutorium: Flash: Butterfly 01 flutterung|Butterfly 01 fluttering]]“ wird die <code>fla</code>-Datei Ihrer Lösung oder der Musterlösung des Flash-Tutoriums „[[AS3-Tutorium: Flash: Butterfly | * Anstelle der <code>fla</code>-Datei des Flash-Tutoriums „[[AS3-Tutorium: Flash: Butterfly 01 flutterung|Butterfly 01 fluttering]]“ wird die <code>fla</code>-Datei Ihrer Lösung oder der Musterlösung des Flash-Tutoriums „[[AS3-Tutorium: Flash: Butterfly 06 external code|Butterfly 06 external code]]“ in Flex integriert (z.B. unter dem Namen <code>Butterfly06Flash.fla</code>). | ||
* In der Bibliothek der <code>fla</code>-Datei <code> | * Im ''Flash Builder'', <code>Paket-Explorer</code>: Die Datei <code>ButterflyMovie.as</code> muss in den Ordner <code>assets</code> eingefügt werden (nachdem dieser automatisch oder von Hand angelegt wurde): Klick mit rechter Maustaste auf den Ordner <code>assets</code> → <code>Importieren</code> → <code>Allgemein</code> (Ordner durch Klick auf das Dreiecksicon öffnen) → <code>Dateisystem</code> → <code>Weiter</code> → <code>Aus Verzeichnis</code>: hier den Ordner mit Ihrer Lösung oder der Lösung von [[AS3-Tutorium: Flash: Butterfly 06 external code]] wählen → Häckchen vor <code>ButterflyMovie.as</code> und – sofern <code>Butterfly06Flash.fla</code> gemäß der im ersten Teil des Tutoriums beschriebenen [[AS3-Tutorium: Flex: Butterfly 01 fluttering#Schmetterlingssymbol_aus_Flash_CS3.2C_Flash_CS4_oder_Flash_CS5_.28Alternative_zu_oben.29_in_Flex_integrieren|Alternativen Methode]] erstellt wird – <code>Butterfly06Flash</code>XX<code>.fla</code> → <code>Fertig stellen</code>. | ||
* | * Im ''Flash Builder'' (oder auch in ''Adobe Flash''): In der Datei <code>ButterflyMovie.as</code> (im Ordner <code>assets</code>): | ||
* Anstelle der Flex-Komponente <code>Butterfly</code> wird die Flex-Komponente <code> | ** <code>import flash.display.MovieClip;</code> wird ersetzt durch <br /><code>import mx.flash.UIMovieClip;</code> | ||
** <code>public class ButterflyMovie extends MovieClip</code> wird ersetzt durch<br /> <code>public class ButterflyMovie extends UIMovieClip</code> | |||
** <code>ButterflyMovie.as</code> speichern | |||
* In ''Adobe Flash'': Die Verknüfung der Klasse <code>Main.as</code> mit dem Hautpmovie wird gelöscht (anderenfalls müsste <code>Main.as</code> auch in den Ordner <code>assets</code> eingefügt werden): <code>Szene 1</code> (Button links oben auf der Hauptbühne) → Klick auf den Hintergrund → (<code>Fenster</code> oder Tabulator) <code>Eigenschaften</code> → <code>Klasse:</code> Inhalt (<code>Main</code>) löschen. | |||
* In ''Adobe Flash'': In der Bibliothek der <code>fla</code>-Datei <code>Butterfly06Flash.fla</code> werden zwei Symbole in Flex-Komponenten konvertiert: <code>Butterfly</code> und <code>ButterflyMovie</code>. (Die Flex-Komponente <code>Butterfly</code> wird im Weiteren gar nicht mehr verwendet, mann könnte also auch darauf verzichten, diese Flex-Komponente zu erstellen): | |||
** In der Bibliothek: Klick auf das Symbol <code>Butterfly</code> → <code>Befehle</code> → <code>Symbol in Flex-Komponente konvertieren</code> ⇒ Das Icon von Butterfly ändert sich: Fx auf schwarzem Grund. | |||
** In der Bibliothek: Klick auf das Symbol <code>Butterfly</code> → <code>Befehle</code> → <code>Symbol in Flex-Komponente konvertieren</code> ⇒ Das Icon von Butterfly ändert sich evtl. noch nicht. | |||
** In der Bibliothek: Rechtsklick auf das Symbol <code>Butterfly</code> → <code>Eigenschaften</code> ( → falls notwendig: Klick auf Dreieck hinter <code>Erweitert</code>) → Basisklasse: <code>ButterflyMovie</code>, Klasse: <code>ButterflyMovieBlue</code> (oder irgend ein anderer fiktiver Klassenname) → <code>OK</code> → <code>OK</code> ⇒ Das Icon von Butterfly ändert sich: Fx auf schwarzem Grund (sofern Sie sich nicht vertippt haben sowie die oben genannten Änderungen an der Datei <code>ButterflyMovie.as</code> vorgenommen und auch gespeichert haben; sonst müssen Sie die Fehler beheben und dann das Eigenschaftsfesnter von <code>ButterflyMovie</code> noch einmal öffnen und anschließend mit <code<OK</code> schließen). | |||
* In ''Adobe Flash'', optional: In der Bibliothek der <code>fla</code>-Datei <code>Butterfly06Flash.fla</code>: Der Ordner <code>Interaction</code> mit dem Symbol <code>UserInput</code> sowie der von Flash angelegte Ordner <code>FlashComponents</code> können gelöscht werden. Es sollten auch alle Ebenen bis auf eine Ebene aus der Hauptzeitleiste gelöscht werden. Diese eine Ebene enthält ein leeres Frame und sonst nichts. | |||
* In ''Adobe Flash'': <code>Datei</code> → </code>Speichern</code>. | |||
* In ''Adobe Flash'': <code>Fertig</code> klicken (falls vorhanden), sonst <code>Datei</code> → </code>Veröffentlichen</code> ⇒ Die SWC-Datei mit den neuen Flex-Kompnenten wurde exportiert. Diese wird wie im [[AS3-Tutorium: Flex: Butterfly 01 flutterin|ersten Teil des Tutoriums]] weiterverarbeitet. | |||
* Im ''Flash Builder'': Anstelle der Flex-Komponente <code>Butterfly</code> wird die Flex-Komponente <code>ButterflyMovieBlue</code> (wenn Sie dem Symbol einen anderen Klassennamen zugewiesen haben, müssen Sie diesen hier einsetzen) auf die Hauptbühne gelegt (Datei <code>Butterfly02Flex.mxml</code>, Designmodus). Die Komponente <code>ButterflyMovie</code> können Sie jedoch nicht auf die Bühne legen (auch wenn sie im Komponenten-Explorer angezeigt wird), da diese Klasse nur als Basisklasse von einem oder evtl. mehreren Symbolen eingesetzt wurde!!!) | |||
Bis hierher unterscheiden sich das Flex-Tutorium 1 und 2 nur in der Wahl der Symbole, die in Flex-Komponenten konvertiert werden. | Bis hierher unterscheiden sich das Flex-Tutorium 1 und 2 im Wesentlichen nur in der Wahl der Symbole, die in Flex-Komponenten konvertiert werden, | ||
Und wenn anstelle der <code>fla</code>-Datei <code> | sowie darin, dass zusätzlich eine leicht modifizierte Version Datei <code>ButterflyMovie.as</code> in den Ordner <code>assets</code> eingefügt wurde. | ||
Und wenn anstelle der <code>fla</code>-Datei <code>Butterfly06Flash.fla</code> die (Muster-)Lösung des Flash-Tutoriums | |||
„[[AS3-Tutorium: Flash: Butterfly 03 fixed number of rounds|Butterfly 03 fixed number of rounds]]“ verwendet worden wäre, | „[[AS3-Tutorium: Flash: Butterfly 03 fixed number of rounds|Butterfly 03 fixed number of rounds]]“ verwendet worden wäre, | ||
wäre das oben definierte Ziel, eine vorgegebene Anzahl von Runden zu | wäre das oben definierte Ziel, eine vorgegebene Anzahl von Runden zu fliegen, schon erreicht. | ||
Allerdings wäre die Anzahl der zu fliegenden Runden in diesem Fall fest in der Flash-Komponente <code>ButterflyMovie</code> codiert. | Allerdings wäre die Anzahl der zu fliegenden Runden in diesem Fall fest in der Flash-Komponente <code>ButterflyMovie</code> codiert. | ||
Da hier aber die (Muster-)Lösung | Da hier aber die Symbole der (Muster-)Lösung des Flash-Tutoriums | ||
„[[AS3-Tutorium: Flash: Butterfly 06 external code|Butterfly 06 external code]]“ | |||
in Flex-Komponenten integriert wurden, kann die Anzahl der zu fliegenden Runden von Flex aus gesteuert werden. | |||
(Die (Muster-)Lösung des Flash-Tutoriums | |||
„[[AS3-Tutorium: Flash: Butterfly 04 variable number of rounds|Butterfly 04 variable number of rounds]]“ | „[[AS3-Tutorium: Flash: Butterfly 04 variable number of rounds|Butterfly 04 variable number of rounds]]“ | ||
wäre genauso geeignet; im nachfolgenden Code müsste nur <code>ButterflyMovieBlue</code> durch <code>ButterflyMovie</code> ersetzt werden. | |||
Es wurde nur deshalb die Lösung von Teil 6 des Flash-Tutoriums verwendet, | |||
um gleichzeitig zu zeigen, wie Klassen, die mit Symbolen verknüpft sind, in Flex integriert werden.) | |||
Folgender Code in der Datei <code>Butterfly02Flex.mxml</code> (Quellenmodus) sorgt dafür, dass der Schmetterling genau zwei Runden über der Bühne fliegt: | Folgender Code in der Datei <code>Butterfly02Flex.mxml</code> (Quellenmodus) sorgt dafür, dass der Schmetterling genau zwei Runden über der Bühne fliegt: | ||
<source lang=" | <source lang="mxml"> | ||
<?xml version="1.0" encoding="utf-8"?> | <?xml version="1.0" encoding="utf-8"?> | ||
<s:Application | <s:Application | ||
Zeile 47: | Zeile 65: | ||
xmlns:std="*" | xmlns:std="*" | ||
width="550" height="400" | width="550" height="400" | ||
applicationComplete=" | applicationComplete="o_init()" | ||
> | > | ||
<s:Label | |||
x="24" y="5" | |||
text="Butterfly 02 Fixed Number of Rounds (Flex 4/Flash CS4)" fontSize="20" | |||
/> | |||
<std:ButterflyMovieBlue id="sp_butterfly_movie"/> | |||
<!-- Achtung: Name der Klasse nicht der Basisklasse, die dem Symbolzugeordnet wurde! --> | |||
<fx:Script> | <fx:Script> | ||
<![CDATA[ | <![CDATA[ | ||
private function | </source> | ||
<source lang="actionscript3"> | |||
private const c_rounds_to_fly: uint = 2; | |||
private function o_init (): void | |||
{ | { | ||
stage.scaleMode=StageScaleMode.SHOW_ALL; | stage.scaleMode=StageScaleMode.SHOW_ALL; | ||
sp_butterfly_movie.roundsToFly = c_rounds_to_fly; | |||
sp_butterfly_movie.gotoAndPlay("lbStart"); | |||
} | } | ||
</source> | |||
<source lang="mxml"> | |||
]]> | ]]> | ||
</fx:Script> | </fx:Script> | ||
</s:Application> | </s:Application> | ||
</source> | </source> | ||
==Anmerkungen== | ===Anmerkungen==== | ||
Die Hauptbühne wird in einem Flex-Web-Projekt mit Hilfe der Spark-Komponente <code>Application</code> definiert. | Die Hauptbühne wird in einem Flex-Web-Projekt mit Hilfe der Spark-Komponente <code>Application</code> definiert. | ||
In einem Flex-Air-Projekt müsste die Komponente <code>WindowedApplication</code> verwendet werden. | In einem Flex-Air-Projekt müsste die Komponente <code>WindowedApplication</code> verwendet werden. | ||
Zeile 84: | Zeile 110: | ||
(Im Gegensatz dazu wird <code>CreationComplete</code> bereits signalisiert, wenn die Hauptbühne <code>stage</code> noch nicht initialisiert, d.h. gleich <code>null</code> ist.) | (Im Gegensatz dazu wird <code>CreationComplete</code> bereits signalisiert, wenn die Hauptbühne <code>stage</code> noch nicht initialisiert, d.h. gleich <code>null</code> ist.) | ||
Im obigen Beispiel wird veranlasst, dass die Methode <code>o_init</code> aufgerufen wird, | Im obigen Beispiel wird veranlasst, dass die [[Observer Pattern|Observer]]-Methode <code>o_init</code> aufgerufen wird, | ||
sobald das Ereignis <code>ApplicationComplete</code> eintritt. | sobald das Ereignis <code>ApplicationComplete</code> eintritt. | ||
Die | Die Methode <code>o_init</code> 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 <code>stage</code> bereits initialisiert wurde.) | |||
Anschließend setzt Sie die Anzahl der Runden, die der Schmetterling fliegen soll, auf <code>2</code>. Damit in <code>init</code> auf das Schmetterlingsobjekt zugegriffen werden kann, | Anschließend setzt Sie die Anzahl der Runden, die der Schmetterling fliegen soll, auf <code>2</code>. | ||
wurde diese Objekt <code> | Damit in <code>init</code> auf das Schmetterlingsobjekt zugegriffen werden kann, | ||
wurde diese Objekt <code>sp_butterfly_movie</code> als Identifikator (<code>id</code>) zugewisen. | |||
Zu guter Letzt startet <code>o_init</code> den Rundflug des Schmetterlings. Den Rest (überprüfen der Rundenzahl, zum Schluss wegfliegen) erledigt das Schmetterlingsobjekt selbst. | Zu guter Letzt startet <code>o_init</code> den Rundflug des Schmetterlings. | ||
Den Rest (überprüfen der Rundenzahl, zum Schluss wegfliegen) erledigt das Schmetterlingsobjekt selbst. | |||
=Quellen= | ==Quellen== | ||
<noinclude> | <noinclude> | ||
* [[Kowarschick, W.: Multimedia-Programmierung]]</noinclude> | * [[Kowarschick, W.: Multimedia-Programmierung]]</noinclude> | ||
Zeile 99: | Zeile 129: | ||
* [http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs4/butterfly/Butterfly02Flex4Flash10/ Musterlösung (Flex 4/Flash CS4)] | * [http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs4/butterfly/Butterfly02Flex4Flash10/ Musterlösung (Flex 4/Flash CS4)] | ||
== [[Subversion/HowTo|SVN]]-Repository-Verweise == | === [[Subversion/HowTo|SVN]]-Repository-Verweise === | ||
* [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs5/butterfly/Butterfly02Flex4Flash11/ Musterlösung (Flex 4/Flash CS5)] | * [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs5/butterfly/Butterfly02Flex4Flash11/ Musterlösung (Flex 4/Flash CS5)] | ||
* [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs4/butterfly/Butterfly02Flex4Flash10/ Musterlösung (Flex 4/Flash CS4)] | * [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs4/butterfly/Butterfly02Flex4Flash10/ Musterlösung (Flex 4/Flash CS4)] |
Aktuelle Version vom 1. März 2023, 15:22 Uhr
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 06 external code“
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 Teil 1 des Flex-Tutoriums
Im Prinzip verläuft die Programmierung des Flex-Projekts
Butterfly02Flex
genauso wie die Programmierung des Flex-Projekts Butterfly02Flex
.
Folgende Unterschiede sind zu beachten:
- Das Projekt heißt anders:
Butterfly02Flex
an 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 06 external code“ in Flex integriert (z.B. unter dem NamenButterfly06Flash.fla
). - Im Flash Builder,
Paket-Explorer
: Die DateiButterflyMovie.as
muss in den Ordnerassets
eingefügt werden (nachdem dieser automatisch oder von Hand angelegt wurde): Klick mit rechter Maustaste auf den Ordnerassets
→Importieren
→Allgemein
(Ordner durch Klick auf das Dreiecksicon öffnen) →Dateisystem
→Weiter
→Aus Verzeichnis
: hier den Ordner mit Ihrer Lösung oder der Lösung von AS3-Tutorium: Flash: Butterfly 06 external code wählen → Häckchen vorButterflyMovie.as
und – sofernButterfly06Flash.fla
gemäß der im ersten Teil des Tutoriums beschriebenen Alternativen Methode erstellt wird –Butterfly06Flash
XX.fla
→Fertig stellen
. - Im Flash Builder (oder auch in Adobe Flash): In der Datei
ButterflyMovie.as
(im Ordnerassets
):import flash.display.MovieClip;
wird ersetzt durchimport mx.flash.UIMovieClip;
public class ButterflyMovie extends MovieClip
wird ersetzt durch
public class ButterflyMovie extends UIMovieClip
ButterflyMovie.as
speichern
- In Adobe Flash: Die Verknüfung der Klasse
Main.as
mit dem Hautpmovie wird gelöscht (anderenfalls müssteMain.as
auch in den Ordnerassets
eingefügt werden):Szene 1
(Button links oben auf der Hauptbühne) → Klick auf den Hintergrund → (Fenster
oder Tabulator)Eigenschaften
→Klasse:
Inhalt (Main
) löschen. - In Adobe Flash: In der Bibliothek der
fla
-DateiButterfly06Flash.fla
werden zwei Symbole in Flex-Komponenten konvertiert:Butterfly
undButterflyMovie
. (Die Flex-KomponenteButterfly
wird im Weiteren gar nicht mehr verwendet, mann könnte also auch darauf verzichten, diese Flex-Komponente zu erstellen):- In der Bibliothek: Klick auf das Symbol
Butterfly
→Befehle
→Symbol in Flex-Komponente konvertieren
⇒ Das Icon von Butterfly ändert sich: Fx auf schwarzem Grund. - In der Bibliothek: Klick auf das Symbol
Butterfly
→Befehle
→Symbol in Flex-Komponente konvertieren
⇒ Das Icon von Butterfly ändert sich evtl. noch nicht. - In der Bibliothek: Rechtsklick auf das Symbol
Butterfly
→Eigenschaften
( → falls notwendig: Klick auf Dreieck hinterErweitert
) → Basisklasse:ButterflyMovie
, Klasse:ButterflyMovieBlue
(oder irgend ein anderer fiktiver Klassenname) →OK
→OK
⇒ Das Icon von Butterfly ändert sich: Fx auf schwarzem Grund (sofern Sie sich nicht vertippt haben sowie die oben genannten Änderungen an der DateiButterflyMovie.as
vorgenommen und auch gespeichert haben; sonst müssen Sie die Fehler beheben und dann das Eigenschaftsfesnter vonButterflyMovie
noch einmal öffnen und anschließend mit <code<OK schließen).
- In der Bibliothek: Klick auf das Symbol
- In Adobe Flash, optional: In der Bibliothek der
fla
-DateiButterfly06Flash.fla
: Der OrdnerInteraction
mit dem SymbolUserInput
sowie der von Flash angelegte OrdnerFlashComponents
können gelöscht werden. Es sollten auch alle Ebenen bis auf eine Ebene aus der Hauptzeitleiste gelöscht werden. Diese eine Ebene enthält ein leeres Frame und sonst nichts. - In Adobe Flash:
Datei
→ Speichern. - In Adobe Flash:
Fertig
klicken (falls vorhanden), sonstDatei
→ Veröffentlichen ⇒ Die SWC-Datei mit den neuen Flex-Kompnenten wurde exportiert. Diese wird wie im ersten Teil des Tutoriums weiterverarbeitet. - Im Flash Builder: Anstelle der Flex-Komponente
Butterfly
wird die Flex-KomponenteButterflyMovieBlue
(wenn Sie dem Symbol einen anderen Klassennamen zugewiesen haben, müssen Sie diesen hier einsetzen) auf die Hauptbühne gelegt (DateiButterfly02Flex.mxml
, Designmodus). Die KomponenteButterflyMovie
können Sie jedoch nicht auf die Bühne legen (auch wenn sie im Komponenten-Explorer angezeigt wird), da diese Klasse nur als Basisklasse von einem oder evtl. mehreren Symbolen eingesetzt wurde!!!)
Bis hierher unterscheiden sich das Flex-Tutorium 1 und 2 im Wesentlichen nur in der Wahl der Symbole, die in Flex-Komponenten konvertiert werden,
sowie darin, dass zusätzlich eine leicht modifizierte Version Datei ButterflyMovie.as
in den Ordner assets
eingefügt wurde.
Und wenn anstelle der fla
-Datei Butterfly06Flash.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 fliegen, 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 Symbole der (Muster-)Lösung des Flash-Tutoriums
„Butterfly 06 external code“
in Flex-Komponenten integriert wurden, kann die Anzahl der zu fliegenden Runden von Flex aus gesteuert werden.
(Die (Muster-)Lösung des Flash-Tutoriums
„Butterfly 04 variable number of rounds“
wäre genauso geeignet; im nachfolgenden Code müsste nur ButterflyMovieBlue
durch ButterflyMovie
ersetzt werden.
Es wurde nur deshalb die Lösung von Teil 6 des Flash-Tutoriums verwendet,
um gleichzeitig zu zeigen, wie Klassen, die mit Symbolen verknüpft sind, in Flex integriert 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
x="24" y="5"
text="Butterfly 02 Fixed Number of Rounds (Flex 4/Flash CS4)" fontSize="20"
/>
<std:ButterflyMovieBlue id="sp_butterfly_movie"/>
<!-- Achtung: Name der Klasse nicht der Basisklasse, die dem Symbolzugeordnet wurde! -->
<fx:Script>
<![CDATA[
private const c_rounds_to_fly: uint = 2;
private function o_init (): void
{
stage.scaleMode=StageScaleMode.SHOW_ALL;
sp_butterfly_movie.roundsToFly = c_rounds_to_fly;
sp_butterfly_movie.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ürzelns1
vergeben, wenn das Kürzelstd
nicht 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 sp_butterfly_movie
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)