AS3-Tutorium: Flash: Butterfly 07c character

Dieser Artikel ist veraltet und wird künftig evtl. entfernt.

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: 4 (sehr gut)

AS3-Tutorium: Butterfly: Flash | Flex

Flash: Übersicht | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Teil 7a | Teil 7b | Teil 7c | Teil 8 | Teil 9 | Teil 10

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Das Schmetterlingssymbol als Spielfigur mit weichen Übergängen: Vereinfachte Version

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

Musterlösung (Flash CS4) (SVN-Repository)

Der Code, der im vorangegangenen Teil des Tutoriums erstellt wurde, ist ziemlich umfangreich und schwer zu verstehen.

Wenn Spielfiguren komplexere Bewegungsabläufe als der Schmetterling aufweisen, ist es i. Allg. sogar noch schwieriger, einen weichen Übergang von Zustand zu Zustand zu realisieren. Beispielsweise dreht sich daher eine Spielfigur eines Jump'n'Run-Spiels so gut wie immer schlagartig um 180 Grad, wenn der Benutzer die Bewegungsrichtung ändert.

Die Kompelxität der zuvor definierten Butterfly-Klasse ist vor allem der Tatsache geschuldet, dass für jeden Zustand eine eigener Frames-Block definiert wurde. Obwohl dies i. Allg. notwendig ist (und daher dieser allgemeine Fall auch im Tutorium demonstriert wurde), soll nicht verschwiegen werden, dass es für den Schmetterling eine wesentlich einfache Implementierung gibt, die genau dasselbe Verhalten wie zuvor realisiert.

Im dritten Frame-Block sind alle gewünschten Zustände enthalten: Flügelschlagender Schmetterling, Schmetterling mit offenen Flügeln und Schmetterling mit geschlossenen Flügeln. Dehalb reicht es, den Flügelschlag im richtigen Moment anzuhalten bzw. zu starten, um zwischen den einzelen Zuständen zu wechseln. Ein Sprung über mehrer Frames hinweg ist (außer beim Rücksprung auf das erste Bild der Framesequenz) gar nicht notwendig.

Die Modifikationen

Folgende Vereinfachungen müssen zunächst am Schmetterling vorgenommen werden:

1. In der Zeitleiste des Symbols Butterfly werden die beiden zuvor eingeführten zusätzlichen Frame-Blöcke wieder entfernt: Die Frames 1 bis 39 in allen vier Ebenen gleichzeitig markieren → Rechtsklick in den markierten Bereich → Bilder entfernen.
2. In der Zeitleiste, Ebene labels: Die Label lb_butterfly_open und lb_butterfly_close in lb_open und lb_close umbenennen.
3. In der Zeitleiste, Ebene scripts, Frame 20: gotoAndPlay("lb_open"); an Stelle von gotoAndPlay("lb_fluttering_open");

Den Code in der Datei Butterfly.as durch folgenden Code ersetzen:

package hsa.tutorial.butterfly.view
{
  import flash.display.MovieClip;
  import hsa.tutorial.butterfly.event.ButterflyEvent;
  
  public class Butterfly extends MovieClip
  {
    /////////////////////////////////////////////////////////////////////////////
    // Constants
    /////////////////////////////////////////////////////////////////////////////
    
    public static const OPEN:       String = "open";
    public static const CLOSE:      String = "close";
    public static const FLUTTERING: String = "fluttering";
    
    /////////////////////////////////////////////////////////////////////////////
    // Instance variables
    /////////////////////////////////////////////////////////////////////////////
    
    // Instance variables of the attributes
    private var v_state:           String;
    private var v_state_animation: String;
    
    // Auxiliary variable (for being able to perform delayed state changes)
    private var v_stop_state: String = null;
    
    /////////////////////////////////////////////////////////////////////////////
    // Private methods
    /////////////////////////////////////////////////////////////////////////////
    
    // Should be private, but cannot as it is accessed from within the timeline!
    public function m_new_wings_state(p_state: String): void
    {
     if (p_state != v_state_animation)
      {
        v_state_animation = p_state;      
        // The state of the wings has changed. Inform the observers!
        this.dispatchEvent
          (new ButterflyEvent(ButterflyEvent.CHANGE_BUTTERFLY_ANIMATION));
      };

      // If the wings are to be stoped, stop them.
      if (v_stop_state == p_state)
      {
        this.stop();
        v_stop_state = null;
        m_set_state(p_state); // Do the state change now!
      };
    }
    
    private function m_set_state(p_state: String): void
    {
      trace(v_state + " ===> " + p_state);
      if (v_state != p_state)
      {
        v_state = p_state;
        this.dispatchEvent(new ButterflyEvent());
      }
    }
    
    ////////////////////////////////////////////////////////////////////////////
    // Attributes
    /////////////////////////////////////////////////////////////////////////////
    
    /**
     * The current state of the butterfly: 
     *   <code>OPEN</code>, <code>CLOSE</code> or <code>BUTTERFLY</code>.
     */
    public function get state(): String
    {
      return v_state;
    }
    
    public function set state(p_state: String): void
    {
      trace(v_state + " ---> " + p_state);

      if (p_state == FLUTTERING)
      {
        v_stop_state = null; // Don't stop fluttering!
        this.play();         // Start the movie (if it currently is stoped).
        m_set_state(p_state); // Do the state change now!
      }
      else if (p_state == OPEN || p_state == CLOSE)
      {
        v_stop_state = p_state;
        this.play(); // Start the movie (if it currently is stoped).
      }
      else
        throw (new Error("Butterfly: State '" + p_state + "' is unknown!"));
    }
    
    /**
     * The current state of the wings: 
     *   <code>OPEN</code> or <code>CLOSE</code>.
     */
    public function get stateAnimation(): String
    {
      return v_state_animation;
    }
    
    /////////////////////////////////////////////////////////////////////////////
    // Constructor
    /////////////////////////////////////////////////////////////////////////////
    
    public function Butterfly(p_state: String = OPEN)
    {
      this.state = p_state;
    }
    
    /////////////////////////////////////////////////////////////////////////////
    // End of class
    /////////////////////////////////////////////////////////////////////////////
  }
}

Anmerkung

Beachten Sie, dass der Code der Setter-Methode set state kürzer, einfacher, verständlicher und damit auch leichter zu verifizieren ist, als im vorangegangen Beispiel.

Das bedeutet: Nicht immer bringt ein Standardvorgehen auch eine optimale Lösung. Manchmal ist es daher gar nicht schlecht, über eine Lösung noch einmal nachzudenken.

Quellen

• Kowarschick, W.: Multimedia-Programmierung
• Musterlösung (Flash CS5)
• Musterlösung (Flash CS4)
• Erweiterte Musterlösung (Flash CS4)
• Erweiterte Musterlösung (Flash CS5)

SVN-Repository-Verweise

• Musterlösung (Flash CS5)
• Musterlösung (Flash CS4)
• Erweiterte Musterlösung (Flash CS4)
• Erweiterte Musterlösung (Flash CS5)

Dieser Artikel ist GlossarWiki-konform.