AS3-Tutorium: Flash: Butterfly 06 external code

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

Verbesserung der vierten Version des Schmetterling-Movies

In AS3-Tutorium: Flash: Butterfly 05 external code wurde der Code aus der Hauptzeitleiste in eine Klasse ausgelagert. Nun soll auch noch der Code vom Schmetterlings-Movie so weit wie möglich ausgelagert werden (ohne das Verhalten des Filmes zu ändern.)

<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_06_external_code_2/butterfly_06_external_code_2.swf</swf> Musterlösung: butterfly_06_external_code_2.swf

Der Code des Schmetterlingsmovies wird ausgelagert

• In der Bühne: Doppelklick auf das Icon vor dem Symbol ButterflyMovie → Die Definition des Symbols wird in der Bühne geöffnet.
• In der Bühne: Rechtsklick Icon vor dem Symbol ButterflyMovie → Eigenschaften → Erweitert aufklappen → Haken vor Export für ActionScript, kein Haken vor Export in Bild 1, Klasse: ButterflyMovie → OK → OK
• Datei → Neu → ActionScript 3.0-Klasse → OK -> Klassenname: ButterflyMovie
• Datei → Datei speichern unter → ButterflyMovie.as (im selben Ordner wie die zugehörige fla-Datei.)

In die Datei ButterflyMovie.as wird folgender Code eingefügt:

package
{
  import flash.display.MovieClip;

  public class ButterflyMovie extends MovieClip
  {
    /////////////////////////////////////////////////////////////////////////////
    // Attributes
    /////////////////////////////////////////////////////////////////////////////
    
    public var roundsToFly: int = 0;

    /////////////////////////////////////////////////////////////////////////////
    // Constructor
    /////////////////////////////////////////////////////////////////////////////
    
    public function ButterflyMovie()
    {
      stop();
    }
    
    /////////////////////////////////////////////////////////////////////////////
    // Methods called from within the timeline
    /////////////////////////////////////////////////////////////////////////////

    public function testNumberOfRounds(): void
    {
      if (roundsToFly == 0)
        gotoAndPlay("lbEnd");
    }

    public function decrementNumberOfRounds(): void
    {
      roundsToFly--;
      gotoAndPlay("lbStart");
    }
		
    /////////////////////////////////////////////////////////////////////////////
    // End of class
    /////////////////////////////////////////////////////////////////////////////
  }
}

Das Problem mit der nicht-existierenden Bühne

Ein Problem existiert jedoch noch. Wenn in der Zeitleiste Befehle ausgeführt werden, die direkt auf die Bühne (stage) zugreifen, können diese nicht einfach in den Konstruktor übernommen werden, da zum Zeitpunkt der Konstruktion des zugehörigen Objekte die Bühnen nicht nicht existiert. Man erhält für derartige Befehle beim Starten des Filmes Null-Pointer-Exceptions.

In der Zeitleiste passieren derartige Fehler nicht, da der Code im ersten Frame erst ausgeführt wird, wenn die Bühne bereits existiert.

In Flex gibt es ein spezielles Ereignis APPLICATION_COMPLETE, sobald die Bühne erzeugt wurde. In Flash gibt es ein derartiges EReignis leider nicht. Man kann sich allerdings behelfen, indem man das Ereignis ENTER_FRAME abfängt. Sobald der erste Frame des Movies betreten wird existiert die Bühne bereits.

Beispiel

<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_05_external_code/multi/butterfly_05_external_code_multi.swf</swf> Erweiterte Musterlösung: butterfly_05_external_code_multi.swf

Bei Filmstart soll der Fokus auf das Eingabe-Feld gesetzt werden (ein blauer Rahmen wird um das Eingabe-Feld gezeichnet und Tastatureingabe werden direkt in dieses Feld geschrieben, siehe die erweiterte Musterlösung):

package example.main
mc_user_input.mc_input_rounds.setFocus();

Leider greift die Methode setFocus auf die Bühne zu.

Der folgende Konstruktor erzeugt also eine Null-Pointer-Exception.

package example.main
...
    public function Main()
    {
      mc_user_input.mc_input_rounds.setFocus();
      mc_user_input.mc_button_start.addEventListener(MouseEvent.CLICK, o_start); 
    }
...

Das Problem lässt sich lösen, indem man die Initialisierung erst beim Betreten des ersten Frames durchführt.

package example.main
...
    public function Main()
    {
      // Wenn das Ereignis ENTER_FRAME eintritt, rufe o_init auf
      this.addEventListener(Event.ENTER_FRAME, o_init); 
    }
    
    /////////////////////////////////////////////////////////////////////////////
    // Observer methods
    /////////////////////////////////////////////////////////////////////////////
    
    private function o_init(p_event: Event): void
    {
      // Da die Initialisierung nur im ersten Frame erfolgen soll,
      // muss der Event-Listener gleich wieder entfernt werden.
      this.removeEventListener(Event.ENTER_FRAME, o_init);      

      // Nun existiert die Bühne!
      mc_user_input.mc_input_rounds.setFocus();
      mc_user_input.mc_button_start.addEventListener(MouseEvent.CLICK, o_start); 
    }
...

Quellen

• Kowarschick, W.: Multimedia-Programmierung
• butterfly_06_external_code_2 (Flash CS5)
• butterfly_06_external_code_2 (Flash CS4)
• SVN-Repository (Flash CS5)
• SVN-Repository (Flash CS4)

Dieser Artikel ist GlossarWiki-konform.