AS3-Tutorium: Flash: Butterfly 04 variable number of rounds

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

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

Schmetterling fliegt eine vorgegebene Anzahl von Runden

In AS3-Tutorium: Flash: Butterfly 03 fixed number of rounds wurde ein Schmetterling erzeugt, der dauerhaft auf einem Rundkurs fliegt.

Dieser Schmetterling wird nun erweitert:

  • Zunächst wartet der Schmetterling.
  • Der Benutzer gibt eine Anzahl von Runden ein und klickt auf den Start-Button.
  • Daraufhin fliegt der Schmetterling die gewählte Anzahl von Runden und verlässt zu guter Letzt die Bühne.


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

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


Schmetterling fliegt weg („moderne“ Tweens anf Flash 10)

Der im vorangegangen Tutorium erzeugte Pfad (Rundkurs) des Schmetterlings muss erweitert werden. Nach dem Rundkurs soll der Schmetterling die Bühne verlassen.

  1. Die Datei Butterfly03Flash.fla unter dem Namen Butterfly04Flash.fla speichern und mit dieser Datei weiterarbeiten.
  2. In der Bibliothek: ButterflyMovie mit Doppel-Klick auf das Icon vor dem Namen öffnen.
  3. In Frame 220, Ebene scripts: Schlüsselbild einfügen (Klick mit rechter Maustaste auf den Frame in der Zeitleiste → Schlüsselbild einfügen).
  4. In Frame 220, Ebenen labels und butterfly: Bild einfügen (rechte Maustaste → Bild einfügen).
  5. In Frame 151, Ebene labels: Schlüsselbild einfügen und Frame benennen: lbEnd.
  6. In Frame 150, Ebene butterfly: Schlüsselbild für Skalierung einfügen (rechte Maustaste → Schlüsselbild einfügen → Skalierung).
  7. In Frame 220, Ebene butterfly: Schmetterling mit dem Auswahlwerkzeug (V) (1. Icon der Werkzeugleiste) zu einen Punkt außerhalb der Bühne verschieben und den Schmetterling mit dem Werkzeug Frei Transformieren (Q) (3. Icon der Werkzeugleiste) so weit wie möglich verkleinern.
  8. Pfad, auf dem der Schmetterling wegfliegt, mit dem Auswahlwerkzeug (V) und dem Werkzeug Unterauswahl (A) (2. Icon der Werkzeugleiste) bearbeiten.
  9. AS3-Code in der Zeitleiste von ButterflyMovie:
    Frame 1
    stop();
    var roundsToFly: int;
    Frame 2 (neues Schlüsselbild in Ebene scripts)
    if (roundsToFly == 0)
      gotoAndPlay("lbEnd");
    Frame 150
    roundsToFly--;
    if (roundsToFly > 0)
      gotoAndPlay("lbStart");
    Frame 220
    stop();

Vergessen Sie nicht, bei den obigen Frames Schlüsselbilder in der Ebene scripts zu erzeugen (sofern diese noch nicht vorhanden sind). Sonst können Sie den entsprechenden Frames keinen Code zuweisen.

Wenn man auf den Befehl stop(); im ersten Frame verzichtet, fliegt der Schmetterling zwei Runden und anschließend davon. Wenn man den Wert roundsToFly auf 0 setzt, fliegt der Schmetterling wegen der Abfrage in Frame 2 gleich davon.

Der Befehl stop(); verhindert also, dass der Schmetterling automatisch losfliegt. Dies kann nun von außen (z.B. von einem anderen MovieClip aus) gesteuert werden, sofern der MovieClip mit dem fliegenden Schmetterling einen Namen (z.B. d_butterfly_movie, wobei d für DisplayObject steht, vgl. Style Guide) erhält: 

d_butterfly_movie.roundsToFly = 4;
d_butterfly_movie.gotoAndPlay("lbStart");

Dies wird im Folgenden ausgenutzt. Zunächst müssen aber die Komponenten (Sprites) zum Eingeben der Rundenanzahl erstellt werden.

Komponenten zur Benutzereingabe

  • Klick auf Szene 1 in der linken oberen Ecke der Bühne → Die Hauptbühne wird geöffnet.
  • In der Zeitleiste: Eine neue Ebene erstellen: input
  • In der Zeitleiste: Das erste Frame der Ebene input selektieren.
  • Fenster → Komponenten → User Interface: Hier befinden sich vordefinierte Flash-Komponeten.
  • Button auf die Bühne ziehen.
  • TextInput auf die Bühne ziehen.
  • Das Textwerkzeug aktivieren (sechstes Icon von oben in der Werkzeugleiste) und Anzahl Runden: auf der Bühne schreiben.
  • In der Bibliothek: Einen Ordner FlashComponents erzeugen.
  • In der Bibliothek: Alle Symbole und Ordner, die von den Flash-Komponenten erzeugt wurden (Button, TextInput, Component Assets, Text-Objekt) in den Ordner FlashComponents verschieben.
  • Auf der Bühne: Den Button durch Klick selektieren.
  • Im Fenster Eigenschaften: Einen Namen im Feld <Instanzname> eintragen: d_button_start (hier sollte eigentlich noch buttonStart geschrieben werden, da auf diese Komponente nicht nur innerhalb der Input-Komponente selbst zugegriffen wird; es handelt sich also ― noch ― um eine öffenlich zugängliche (public) Komponente; vgl Style Guide)
  • Im Fenster Eigenschaften (Ausnahme: Flash CS4 (aber nicht CS5 oder CS3 oder sonst eine Version): hier Fenster -> Komponenten-Inspektor verwenden): Einen Labelnamen im Feld Label eintragen: lbStart
  • Das Text-Eingabe-Feld auf der Bühne durch Klick selektieren.
  • Im Fenster Eigenschaften: Einen Namen im Feld <Instanzname> eintragen: d_input_rounds (vgl. Anmerkung zu Komponente d_button_start)
  • Auf der Bühne: Den Button, das Eingabefeld und das Textfeld Anzahl Runden: anordnen und dann alle gleichzeitig selektieren.
  • Mit der Taste F8 ein neues Symbol names UserInput erzeugen.
  • In der Bibliothek: Einen neuen Ordner Interaction erzeugen.
  • In der Bibliothek: Das Symbol UserInput in den Ordner Interaction verschieben.
  • Auf der Bühne: Das neue Input-Objekt selektieren.
  • Im Fenster Eigenschaften: Einen Namen im Feld <Instanzname> eintragen: d_input
  • Auf der Bühne: Den Schmetterlingsmovie selektieren.
  • Im Fenster Eigenschaften: Einen Namen im Feld <Instanzname> eintragen: d_butterfly_movie

Nun stehen alle Komponenten zur Verfügung, um die Anzahl der zu fliegenden Runden durch den Benutzer bestimmen zu lassen.

Beachten Sie, dass Sie auf keinen Fall die Benutzer-Eingabe-Komponenten in das Schmetterlingssymbol einbauen sollten. Sonst können Sie die Größe des Schmmetterlingrundfluges nicht mehr ändern, ohne dass sich die Größe der Eingabefelder ebenfalls ändert.

Eine wichtige Konvention sollten Sie auch beachten: In objektorientierten Programmierspachen ist es üblich Klassennamen groß und Variablennamen klein zu schreiben. Die Symbole in der Bbiliothek verhalten sich wie Klassen. Daher sollten die Symbolnamen mit einem Großbuchstaben beginnen'. Die Objektnamen („Instanznamen“) der Objekte auf der Bühne verhalten sich wie Variablen (vgl. d_butterfly_movie.roundsToFly = 4;) und sollten daher stets mit einen Kleinbuchstaben beginnen.

ActionScript 3 (ab Flash 9)

Im letzen Schritt wird der eigentliche ActionScript-Code zum steuern des Schmetterlings erstellt. 


 <swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_04_variable_number_of_rounds/Butterfly04Flash11.swf</swf>

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

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


  • Klick auf Szene 1 in der linken oberen Ecke der Bühne → Die Hauptbühne wird geöffnet.
  • In der Zeitleiste: Eine neue Ebene erstellen: scripts
  • In der Zeitleiste: Das erste Frame der Ebene scripts selektieren.
  • Die Taste F9 drücken und nachfolgenden Code erfassen:
d_input.d_button_start.addEventListener(MouseEvent.CLICK, o_start);

function o_start(p_event: MouseEvent): void
{
  d_input.visible = false;

  // Number instead of int, as a Number value may be NaN!
  var l_rounds_to_fly: Number = parseInt(d_input.d_input_rounds.text);

  if (isNaN(l_rounds_to_fly) || l_rounds_to_fly < 0)
    l_rounds_to_fly = 0;

  d_butterfly_movie.roundsToFly = l_rounds_to_fly;
  d_butterfly_movie.gotoAndPlay("lbStart");
}

Mit dem ersten Befehl wird dem Button-Objekt in dem Input-Objekt ein so genannter Event Listener (siehe Obeserver Pattern) zugewiesen. Immer wenn der Button per Mausklick betätigt wird, wird die Methode o_start aufgerufen.

Diese Methode wird im Anschluss an den zuvor beschriebenen Befehl definiert. Sie führt folgende Aktionen durch:

  • Das Eingebafeld unsichtbar machen (das Attribut visible aud false setzen)
  • Die vom Benutzer in das Eingabefeld geschriebene Zeichenkette (String) mit Hilfe der Methode parseInt in eine Zahl verwandeln und in der Variablen l_rounds_to_fly speichern.
  • Die Benutzereingabe auf Korrektheit prüfen. Falls der Wert von l_rounds_to_fly negativ ist oder der Benutzer keine Integer-Zahl eingegeben hat (l_rounds_to_fly enthält den Wert NaN = „Not a Number“) wird dieser Wert auf 0 gesetzt.
  • Als nächste wird im Schmetterlingsobjekt die Anzahl der zu fliegenden Runden gesetzt.
  • Zu guter Letzt wrid der Rundflug gestartet.

Namenskonventionen

Folgende Namenskonventionen wurden im Code eingehalten:

In den Schmetterlingsmovies (Symbol/Klasse ButterflyMovie) wurden

  • die Zusandsvariable roundsToFly
  • die Label lbStart und lbEnd

gemäß der Konvention für öffentlich zugängliche (public) Eigenschaften benannt, da auf diese Attribute von der Hauptzeitleiste aus zugegriffen wird. (Eigentlich wird nur auf lbStart und nicht auf lbEnd „von außen“ zugegriffen.)

Im Code der Hauptzeitleiste wurden die Moviclips

  • d_input
  • d_butterfly_movie

dagegen gemäß der Konvention für nicht öffentlich zugängliche (private) Eigenschaften benannt, da es keine anderen Objekte gibt (und auch nicht geben soll), die auf diese Objekte zugreifen.

Probleme der Implementierung

Das im dritten Teil des Flash-Tutoriums genannte Problem mit der fest im Code „verdrahteten“ Anzahl von Flugrunden wurde behoben.

Allerdings ist nun ein weiteres Problem sogar größer geworden:

  • Der ActionScript-Code ist über verschiedene Zeitleisten und Frames verstreut.

Dieser Code kann nicht nur schlecht gelesen und gewartet werden, auch die Wiederverwendung ist nicht möglich. Wenn (wie in der erweiterten Musterlösung) ein zweites Schmetterlingssymbol erstellt werden soll, muss der komplette Code aus der Zeitleiste des ersten Schmetterlingssymbols in die entsprechenden Frames des zweiten Symbols kopiert werden. Der Code ist als nicht dry (vgl. Programmierprinzipien).

Quellen

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. Musterlösung (Flash CS5)
  3. Musterlösung (Flash CS4)
  4. Erweiterte Musterlösung (Flash CS5)
  5. Erweiterte Musterlösung (Flash CS4)

SVN-Repository-Verweise

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=AS3-Tutorium:_Flash:_Butterfly_04_variable_number_of_rounds&oldid=34702“