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 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 von Butterfly01Flex.
• Anstelle der fla-Datei des Flash-Tutoriums „Butterfly 01 fluttering“ wird die fla-Datei Ihrer Lösung oder der Musterlösung des Flash-Tutoriums „Butterfly 06 external code“ in Flex integriert (z.B. unter dem Namen Butterfly06Flash.fla).
• Im Flash Builder, Paket-Explorer: Die Datei ButterflyMovie.as muss in den Ordner assets eingefügt werden (nachdem dieser automatisch oder von Hand angelegt wurde): Klick mit rechter Maustaste auf den Ordner assets → 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 vor ButterflyMovie.as und – sofern Butterfly06Flash.fla gemäß der im ersten Teil des Tutoriums beschriebenen Alternativen Methode erstellt wird – Butterfly06FlashXX.fla → Fertig stellen.
• Im Flash Builder (oder auch in Adobe Flash): In der Datei ButterflyMovie.as (im Ordner assets):
  • import flash.display.MovieClip; wird ersetzt durch
    import 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üsste Main.as auch in den Ordner assets 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-Datei Butterfly06Flash.fla werden zwei Symbole in Flex-Komponenten konvertiert: Butterfly und ButterflyMovie. (Die Flex-Komponente Butterfly 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 hinter Erweitert) → 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 Datei ButterflyMovie.as vorgenommen und auch gespeichert haben; sonst müssen Sie die Fehler beheben und dann das Eigenschaftsfesnter von ButterflyMovie noch einmal öffnen und anschließend mit <code<OK schließen).
• In Adobe Flash, optional: In der Bibliothek der fla-Datei Butterfly06Flash.fla: Der Ordner Interaction mit dem Symbol UserInput sowie der von Flash angelegte Ordner FlashComponents 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), sonst Datei → 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-Komponente ButterflyMovieBlue (wenn Sie dem Symbol einen anderen Klassennamen zugewiesen haben, müssen Sie diesen hier einsetzen) auf die Hauptbühne gelegt (Datei Butterfly02Flex.mxml, Designmodus). Die Komponente ButterflyMovie 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ürzel ns1 vergeben, wenn das Kürzel std 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)

SVN-Repository-Verweise

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

Dieser Artikel ist GlossarWiki-konform.