AS3-Tutorium: Flex: Butterfly 03 variable 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 die Anwendung erweiter: Anstelle einer festen Anzahl von Runden zu fliegen, kann der Benutzer die Zahl der Runden vorgeben. Hierbei werden als Button und Texteingabefeld Flex-Komponenten (Spark) an Stelle von Flash-Komponenten verwendet. Diese sind wesentlich flexibler. Zum Beispiel kann das Aussehen frei definiert werden (Skinning).

<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly03Flex4Flash11/swf/Butterfly03Flex4Flash11.swf</swf> Musterlösung (Flex 4/Flash CS5) (SVN-Repository)

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

Weiterentwicklung von Teil 2 des Flex-Tutoriums

Die Programmierung des Flex-Projektes führt die Programmierung des Flex-Projektes Butterfly03Flex weiter. Sie können daher entweder Ihre Lösung von Teil 2 nehmen und gemäß den nachfolgenden Beschreibungen erweitern. Oder Sie erstellen ein neues Projekt Butterfly03Flex und kopieren den Ordner assets und den Inhalt von Ordner lib. Zu guter Letzt kopieren Sie den Inhalt der Datei Butterfly02Flex.mxml und fügen diesen in die Datei Butterfly03Flex.mxml des neuen Projektes ein.

Im Folgenden arbeiten Sie ausschließlich im Flash Builder.

Die Input-Komponente

1. Im Paket-Explorer: Klick mit der rechten auf Butterfly03/Flex/src/(Standardpaket) → Neu → MXML-Komponente → Name: Input → Fertig stellen.
2. Im Editorfenster von Input.mxml (wurde automatisch geöffnet): Wechsel in den Design-Modus (Design) → Rahmen der Kompnente verkleinern → Button-, Label- und TexInput-Komponente aus dem Komponentenfenster in das Editorfesnter ziehen.
3. Im Editorfenster von Input.mxml: Die Eigenschaften der drei Kompnenten bearbeiten:
   • Label: Den Text Beschriftung nach Doppelklick auf diesen Text in Anzahl Runden: ändern. Eventuell Font anpassen (Eigenschaften-Fenster).
   • Button: Den Text Button nach Doppelklick auf diesen Text in Start ändern.
   • Button: Selektieren → Im Eigenschaften-Fenster rechts ID eintragen: buttonStart.
   • TextInput: Skalieren, evtl. Font anpassen.
   • TextInput: Selektieren → Im Eigenschaften-Fenster rechts ID eintragen: inputRounds.
   • Alle drei Komponenten wie gewünscht anordnen.

Der MXML-Code der Input-Komponente (Quellenmodus) sollte in etwa wie folgt aussehen (Sie können diesen Code auch direkt in Ihre Datei kopieren):

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="76"
>
  <s:Button x="120" y="44" label="Start" id="buttonStart"/>
  <s:TextInput x="120" y="10" width="70" id="inputRounds"/>
  <s:Label x="12" y="10" height="22" 
           fontSize="14" verticalAlign="middle"
           text="Anzahl Runden:"
  />
</s:Group>

Nun öffen Sie durch Doppelklick die Haupt-Datei Butterfly03Flex und ersetzen den Code dieser Datei durch folgenden Code (wobei Sie an Stelle von ButterflyMovieBlue den Klassennamen verwenden müssen, den Sie Ihrem Schmetterlingsmovie in Flash zugewiesen haben):

<?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="13" y="5" fontSize="20" 
    text="Butterfly 03 Variable Number of Rounds (Flex 4/Flash CS4)" 
  />
  <std:ButterflyMovieBlue id="sp_butterfly_movie"/>
  <std:Input              id="sp_input" 
                          x="340" y="313" 
  />
  
  <fx:Script>
    <![CDATA[

      private function o_init (): void
      {
        stage.scaleMode=StageScaleMode.SHOW_ALL;
        
        sp_input.buttonStart.addEventListener(MouseEvent.CLICK, o_start);
      }
      
      private function o_start(p_event: MouseEvent): void
      {
        sp_input.visible = false;
        
        var l_rounds_to_fly: Number = parseInt(sp_input.inputRounds.text);
        
        if (isNaN(l_rounds_to_fly) || l_rounds_to_fly < 0)
          l_rounds_to_fly = 0;
        
        sp_butterfly_movie.roundsToFly = l_rounds_to_fly;
        sp_butterfly_movie.gotoAndPlay("lbStart");
      }

    ]]>
  </fx:Script>
</s:Application>

Beachten Sie, dass der Code, der hier verwendet wird, direkt aus der Musterlösung von AS3-Tutorium: Flash: Butterfly 05 external code übernommen wurde: Der Inhalt des Konstruktors public function Main() wurde in die Observer-Methode o_init eingefügt.

Und die Methode o_start wurde eins zu eins übernommen.

Natürlich funktioniert dies nur, wenn auch alle Komponenten in beiden Fällen identisch benannt wurden.

Skinning

<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly03SkinFlex4Flash11/swf/Butterfly03SkinFlex4Flash11.swf</swf> Musterlösung (Flex 4/Flash CS5) (SVN-Repository)

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

Das Aussehen der einzelnen Flex-Spark-Komponenten kann mittels Skinning beliebig modifiziert werden.

Beispielsweise kann man das Aussehen des Buttons modifizieren. Dazu legt man zunächst eine neue MXML-Komponente ButtonSkin.mxml an und trägt in diese folgenden Code ein (in Anlehnung an ):

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        minWidth="21" minHeight="21"
        alpha.disabled="0.5"
>
  <!-- Based on http://inflagrantedelicto.memoryspiral.com/2010/01/skinning-a-spark-button-in-flex-4/ -->
  <fx:Metadata>
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.Button")]
  </fx:Metadata>
  
  <s:states>
    <s:State name="up"/>
    <s:State name="over"/>
    <s:State name="down"/>
    <s:State name="disabled"/>
  </s:states>
  
  <!-- background -->
  <s:Rect
    left="0" right="0" top="0" bottom="0"
    radiusX="0" radiusY="0" 
    topLeftRadiusX="20" topLeftRadiusY="20"
    topRightRadiusX="20" topRightRadiusY="20"
    bottomLeftRadiusX="20" bottomLeftRadiusY="20"
    bottomRightRadiusX="20" bottomRightRadiusY="20"
    height="30" width="69"
  >
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0x6699ff"/>
        <s:GradientEntry color="0x666688"/>
      </s:LinearGradient>
    </s:fill>
  </s:Rect>
  
  <!-- label -->
  <!-- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
  <s:Label
    id="labelDisplay"
    textAlign="center"
    verticalAlign="middle"
    paddingLeft="5" paddingRight="10" 
    maxDisplayedLines="1" 
    top="2" left="10" 
    bottom="4" right="10" 
    horizontalCenter="0" verticalCenter="0"
    color.up   = "#000000"
    color.over = "#FFFF88"
    color.down = "#88FFFF"
  />
</s:Skin>

Abschließend ersetzt man in der Datei Input.mxml den Code:

<s:Button x="120" y="44" label="Start" id="buttonStart"/>

durch:

<s:Button x="120" y="44" label="Start" id="buttonStart" skinClass="ButtonSkin"/>

Oder besser: Man erzeugt eine CSS-Datei, die diesen Skin für alle Spark-Buttons definiert:

1. Im „Paket-Explorer“: Die Datei Input.mxml durch Doppelklick öffnen
2. Im Editorfenster: Design-Modus → Start-Button durch Klick selektieren.
3. Im Eigenschaften-Fenster: In CSS konvertieren... → Neu... → Paket: css, Dateiname: Main → Fertig stellen → OK.

Beachten Sie, dass durch die obigen Befehle die Datei src/css/Main.css neu angelegt wurde:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button
{
  skinClass: ClassReference("ButtonSkin");
}

In der Haupt-Datei Butterfly03Flex.mxml wird diese CSS-Datei durch die Anweisung

<fx:Style source="css/Main.css"/>

eingebunden.

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.