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: 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 04 variable number of rounds“ in Flex integriert (z.B. unter dem Namen Butterfly04Flash.fla).
• In der Bibliothek der fla-Datei Butterfly04Flash.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, das zugehörige Symbol zur Flex-Komponente zu machen).
• Optional: In der Bibliothek der fla-Datei Butterfly04Flash.fla: Der Ordner Interaction mit dem Symbol UserInput sowie der von Flash angelegte Ordner FlashComponents können gelöscht werden. In diesem Fall müssen auch die Ebenen input und vor Allem scripts aus der Hauptzeitleiste gelöscht werden.
• Anstelle der Flex-Komponente Butterfly wird die Flex-Komponente ButterflyMovie auf die Hauptbühne gelegt (Datei Butterfly02Flex.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="init()"
>
  <fx:Script>
    <![CDATA[
      private function init (): void
      {
        stage.scaleMode=StageScaleMode.SHOW_ALL;
        
        cmp_butterfly.roundsToFly = 2;
        cmp_butterfly.gotoAndPlay("lbStart");
      }
    ]]>
  </fx:Script>
  <s:Label 
    y="27" horizontalCenter="0"
    text="Butterfly 02 (Flex 4)" fontSize="20" 
  />
  <std:ButterflyMovie id="cmp_butterfly"/>
</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.

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 Methode init aufgerufen wird, sobald das Ereignis ApplicationComplete eintritt.

Die Methode init sorgt zunächst dafür, dass sich die Größe der Bühne an die Größ 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 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.