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/butterfly_04_variable_number_of_rounds_multi.swf</swf> Erweiterte Musterlösung: butterfly_04_variable_number_of_rounds_multi.swf

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.

  • In der Bibliothek: ButterflyMovie mit Doppel-Klick auf das Icon vor dem Namen öffnen.
  • In Frame 220, Ebene scripts: Schlüsselbild einfügen (Klick mit rechter Maustaste auf den Frame in der Zeitleiste → Schlüsselbild einfügen).
  • In Frame 220, Ebenen labels und butterfly: Bild einfügen (rechte Maustaste → Bild einfügen).
  • In Frame 151, Ebene labels: Frame benennen: lbEnd.
  • In Frame 150, Ebene butterfly: Schlüsselbild für Skalierung einfügen (rechte Maustaste → Schlüsselbild einfügen → Skalierung).
  • In Frame 220, Ebene butterfly: Schmetterling mit Maus zu einen Punkt außerhalb der Bühne verschieben und den Schmetterling mit dem Werkzeug Frei Transformieren (Q) so weit wie möglich verkleinern.
  • AS3-Code in der Zeitleiste von ButterflyMovie:
    Frame 1
    stop();
    var roundsToFly: int = 2;
    Frame 1
    if (roundsToFly == 0)
    nbsp; gotoAndPlay("lbEnd");
    Frame 150
    roundsToFly--;
    if (roundsToFly > 0)
      gotoAndPlay("lbStart");
    Frame 220
    stop();

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, 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. mc_butterfly) erhält: 

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

Dies wird im Folgenden ausgenutzt. Zunächst müssen aber die Komponenten 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: mc_button_start
  • 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: Start
  • Das Text-Eingabe-Feld auf der Bühne durch Klick selektieren.
  • Im Fenster Eigenschaften: Einen Namen im Feld <Instanzname> eintragen: mc_input_rounds
  • 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: mc_user_input
  • Auf der Bühne: Den Schmetterlingsmovie selektieren.
  • Im Fenster Eigenschaften: Einen Namen im Feld <Instanzname> eintragen: mc_butterfly

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.

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/butterfly_04_variable_number_of_rounds.swf</swf>

Musterlösung: butterfly_04_variable_number_of_rounds.swf

  • 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:
mc_user_input.mc_button_start.addEventListener(MouseEvent.CLICK, o_start);

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

  // Number instead of int, as Number may be NaN!
  var l_rounds_to_fly: Number = parseInt(mc_user_input.mc_input_rounds.text);

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

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

Mit dem ersten Befehl wird dem Button-Objekt in dem Input-Objekt ein sogenannter 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 zufor 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.

Schmetterling testen

  1. Auf Szene 1 in der linken oberen Ecke der Bühne klicken.
  2. Das Symbol Butterfly auf die Bühne ziehen.
  3. Den Film mit Strg-Return (Ctrl-Return) starten.

Quellen


Dieser Artikel ist GlossarWiki-konform.
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=AS3-Tutorium:_Flash:_Butterfly_04_variable_number_of_rounds&oldid=14740“