AS3-Tutorium: Flash: Butterfly 07a 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.
Weiterentwicklung der sechsten Version des Schmetterling-Movies
In AS3-Tutorium: Flash: Butterfly 06 external code wurde der Code aus den Zeitleisten des Hauptmoivies sowie der Symbole weitestgehend in Klassen ausgelagert.
Allerdings wurde bei der Implementierung bislang nicht das Prinzip Separation of Concerns (siehe auch Programmierprinzipien) beachtet.
Um dies zu erreichen, werden in einem ersten Schritt
die Symbole Butterfly
und ButterflyMovie
in „Spielfiguren“ (characters) umgewandelt.
Eine Spielfigur kann verschiedene Zustände einnehmen, wie z.B. „stehen“, „laufen nach links“, „laufen nach rechts“, „hüpfen“ etc. Dabei sollte ein Figur-Objekt nicht selbst entscheiden, wann es in welchen Zustand übergeht. Die wird von außen (z.B.) über eine Logik-Komponente gesteuert. Das heißt, eine Figur hat nur noch eine einzige Aufgabe: Den Zustand dieser Figur (der im Allgemeinen in einem Datenobjekt gespeichert wird) zu visualisieren.
Im Folgenden wird zunächst das Symbol Butterfly
in eine Spielfigur (im zuvor beschrieben Sinn) umgewandelt, um das Grundprinzip klar zu machen.
Danach wird das Symbol ButterflyMovie
in eine „Figur“ umgewandelt. Hierbei wird insbesondere die Progammlogik (fliegen einer via roundsToFly
vorgegebenen Anzahl von Runden)
aus der Klasse ButterflyMovie
in die Hauptklasse Main
verlagert.
<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_07_character/Butterfly07Flash11.swf</swf>
Musterlösung (Flash CS5)
(SVN-Repository)
Musterlösung (Flash CS4) (SVN-Repository)
Das Schmetterlingssymbol als Spielfigur
Die Grundidee ist folgende: Für jeden Zustand der Spielfigur wird im Movie Clip ein eigener Abschnitt (d.h. ein zusammenhängender Bereich von Frames) definiert.
Das erste Frame eines jeden Abschnittes wird mit einen Label versehen, dessen Name sich aus dem zugehörigen Zustand ableitet (z.B. lb_
x
, wobei x
durch den aktuellen Zustand ersetzt wird).
Das letzte Frame eines jeden Abschnittes wird mit einem ActionScript-Befehl versehen:
stop();
, falls die dem Zustand zugeordnete Animation nur einmal abgespielt werden sollgotoAndPlay(lb_
x
);
, falls die dem Zustand zugeordnete Animation dauerhaft abgespielt werden soll
Zunächst wird das Schmetterlingssymbol auf diese Weise umgestaltet.
- In der Bibliothek: Das Symbol
Butterfly
mit einem Doppelklick öffnen. - In der Zeitleiste: Zwei neue Ebenen (ganz oben) einfügen:
scripts
labels
- In der Zeitleiste: Alle Ebenen (und damit alle Frames) markieren und den Block mit allen Frames nach rechts verschieben, so dass das erste Schlüsselbild auf Frame 40 liegt.
- In der Zeitleiste, Ebene
body
: Klick auf das Schlüsselbild bei Frame 40 →Alt
-Taste drücken und festhalten → Linke Maustaste über Schlüsselbild bei Frame 40 drücken, festhalten und nach links bis Frame 1 verschieben ⇒ Der Schmetterlingskörper ist ab Frame 1 vorhanden; eer entsprechende Bereich in der Zeitleiste hat sich grau eingefärbt. - In der Zeitleiste, Ebene
body
: Das Schlüssenbild bei Frame 40 entfernen: Klick auf das Schlüsselbild → Rechtsklick auf das Schlüsselbild →Schlüsselbild löschen
. - In der Zeitleiste, Ebene
wings
: Klick auf Frame 20 → Rechtsklick auf Frame 20 →Schlüsselbild einfügen
. - In der Zeitleiste, Ebene
wings
:Strg
/Ctrl
-Taste drücken und festhalten → Klick auf das Schlüsselbild bei Frame 40 → Rechtsklick auf das Schlüsselbild →Bilder kopieren
. - In der Zeitleiste, Ebene
wings
: Klick auf Frame 1 → Rechtsklick auf Frame 1 →Bilder einfügen
(nichtBild einfügen
!!). - In der Zeitleiste, Ebene
wings
:Strg
/Ctrl
-Taste drücken und festhalten → Klick auf das Schlüsselbild bei Frame 50 → Rechtsklick auf das Schlüsselbild →Bilder kopieren
. - In der Zeitleiste, Ebene
wings
: Klick auf Frame 20 → Rechtsklick auf Frame 20 →Bilder einfügen
(nichtBild einfügen
!!). - In der Zeitleiste, Ebene
labels
: Klick auf Frame 1 → Eigenschaften-Fenster öffnen → Name:lb_opened
- In der Zeitleiste, Ebene
labels
: Klick auf Frame 20 → Rechtsklick auf Frame 20 →Schlüsselbild einfügen
→ Eigenschaften-Fenster, Name:lb_closed
- In der Zeitleiste, Ebene
labels
: Klick auf Frame 40 → Eigenschaften-Fenster, Name:lb_fluttering
- In der Zeitleiste, Ebene
scripts
folgenden Code eintragen (Schlüsselbilder nicht vergessen!):- Frame 10
stop();
- Frame 39
stop();
- Frame 59
gotoAndPlay("lb_fluttering");
Als nächstes wird der Code zur Steuerung des Zustandswechsels dem Schmetterlings-Symbol zugeordnet:
- Im Menü:
Datei
→Neu
→ActionScript 3.0-Klasse
(CS5) bzw.ActionScript-Datei
(CS4 und früher) →OK
Nur in CS5: -> Klassenname:Butterfly
→OK
- Im Menü:
Datei
→Datei speichern unter
→ Im Ordner derfla
-Datei folgende Unterordner anlegen:hsa/tutorial/butterfly
→ Datei unter dem NamenButterfly.as
im zuvor angelegten Unterordner speichern. - In der Bilbliothek: Rechtsklick auf das Symbol
Butterfly
→Eigenschaften
→ falls notwendig: Klick auf Dreieck hinterErweitert
→ Häckchen vorExport für ActionScript
→ Klasse:hsa.tutorial.butterfly.ButterflyBlue
(oder eine andere Farbe), Basisklassehsa.tutorial.butterfly.Butterfly
→OK
→OK
Nun kann in die Datei Butterfly.as
folgendener Code einfügt werden:
package hsa.tutorial.butterfly
{
import flash.display.MovieClip;
public class Butterfly extends MovieClip
{
/////////////////////////////////////////////////////////////////////////////
// Constants
/////////////////////////////////////////////////////////////////////////////
public static const OPENED: String = "opened";
public static const CLOSED: String = "closed";
public static const FLUTTERING: String = "fluttering";
/////////////////////////////////////////////////////////////////////////////
// Instance variables
/////////////////////////////////////////////////////////////////////////////
private var v_state: String;
////////////////////////////////////////////////////////////////////////////
// Attributes
/////////////////////////////////////////////////////////////////////////////
public function get state(): String
{
return v_state;
}
public function set state(p_state: String): void
{
if (p_state != v_state)
{
this.gotoAndPlay("lb_"+ p_state);
v_state = p_state;
};
}
/////////////////////////////////////////////////////////////////////////////
// Constructor
/////////////////////////////////////////////////////////////////////////////
public function Butterfly(p_state: String = OPENED)
{
this.state = p_state;
}
/////////////////////////////////////////////////////////////////////////////
// End of class
/////////////////////////////////////////////////////////////////////////////
}
}
Anmerkung 1
Man beachte, dass im Gegensatz
zu den vorangegangen Tutorien die Labelbezeichnungen nicht
mehr lbOpened
, lbClosed
und lbFluttering
lauten, sondern lb_opened
, lb_closed
und lb_fluttering
.
Gemäß den hier verwendeten Namenskonventionen
bedeutet dies, dass von außen nicht mehr direkt auf die Zeitleistenlabels zugegriffen werden soll.
Sie werden als private
angesehen (auch wenn dies in Flash nicht realisierbar ist).
Das heißt, auf die Labels wird nur noch innerhalb der Klasse Butterlfy
zugegrifen
(konkret: in der Setter-Methode set state
).
Anmerkung 2
Für den Schmetterling wurde eine saubere Schnittstelle definiert (das Attribut state
).
Nur über diese Schnittstelle soll von außen auf das Objekt zugegriffen werden.
Wenn man einen Schmetterling
auf die Bühne legt und ihm den „Instanznamen“ sp_butterfly
gibt,
kann man mit folgenden Befehlen dessen Zustand verändern:
import hsa.tutorial.butterfly.*;
sp_butterfly.state=Butterfly.OPENED;
sp_butterfly.state=Butterfly.CLOSED;
sp_butterfly.state=Butterfly.FLUTTERING;
Anmerkung 3
Bei jeder Zustandsänderung sollte das Schmetterlings-Objekt alle interessierten Objekte, d.h. alle Observer (bzw in ActionScript: Listener) mit Hilfe eines Signals (in ActionScript Event genannt) über die erfolgte Zustandsänderung informieren. Dies wäre mit Hilfe des Befehls
this.dispatchEvent(new Event(Event.CHANGE));
problemlos möglich.
Allerdings ist es sauberer, eine eigene Klasse ButterflyEvent
als Subklasse von Event
zu definieren und dort spezielle BuuterflyEvent
-Konstanten zu definieren.
Die zugehörige Datei ButterflyEvent.as
muss, wenn als Package-Name ebenfalls hsa.tutorial.butterfly
angegeben wird, im selben Ordner wie die anderen as
-Dateien abgespeichert werden: hsa/tutorial/butterfly
.
Der Inhalt dieser Datei könnte folgendermaßen aussehen:
package hsa.tutorial.butterfly
{
import flash.events.Event;
public class ButterflyEvent extends Event
{
/////////////////////////////////////////////////////////////////////////////
// Constants
/////////////////////////////////////////////////////////////////////////////
public static const CHANGE_STATE: String = "change state";
public static const CHANGE_STATE_TIMELINE: String = "change state timeline";
/////////////////////////////////////////////////////////////////////////////
// Constructor
/////////////////////////////////////////////////////////////////////////////
public function ButterflyEvent(type: String = CHANGE_STATE)
{
super(type);
}
/////////////////////////////////////////////////////////////////////////////
// End of class
/////////////////////////////////////////////////////////////////////////////
}
}
Sobald man diese Datei erstellt hat, kann man die Setter-Methode set state
in der Datei Butterfly.as
erweitern:
public function set state(p_state: String): void
{
if (p_state != v_state)
{
this.gotoAndPlay("lb_"+ p_state);
v_state = p_state;
this.dispatchEvent(new ButterflyEvent());
};
}
Dies wird z.B. im nachfolgenden Beispiel ausgenutzt,
um den aktuellen Zustand in einem Textfeld ausgeben zu können. Hierzu wurde in der
Haupt-Timeline der zugehörigen fla
-Datei folgender Code eingefügt
(da der Movie nur zum Testen der Klasse Butterfly
dient wurde der Code nicht ausgelagert):
import hsa.tutorial.butterfly.ButterflyEvent;
// sp_butterfly ist der Schmettrling auf der Bühne.
sp_butterfly.addEventListener(ButterflyEvent.CHANGE_STATE, o_change);
function o_change(p_event: ButterflyEvent): void
{
// sp_label_state ist ein Textfeld auf der Bühne.
sp_label_state.text = sp_butterfly.state;
}
<swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_07_character/Butterfly07ButterflyRoughFlash11.swf</swf>
Das Schmetterlingssymbol als Spielfigur mit weichen Übergängen
Einen Nachteil hat die vorangegangene Implementierung noch. Ein Übergang von einem Zustand zu einem anderen erfolgt im Allgemeinen ruckartig. Wenn man z.B. von CLOSED ind FLUTTERING wechselt, werden die Flügel schlagartig geöffnet.
Sowohl beim vorangegangenen Beispielfilm, als auch bei nachfolgenden Beispielsfilm wird alle 30 Frames der Zustand des Schmetterlings geändert. Man beachte den Unterschied.
<swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_07_character/Butterfly07ButterflySmoothFlash11.swf</swf>
Um das Problem zu beheben, muss der flatternde Schmetterling regelmäßig melden, wenn seine
Flügel ganz offen oder geschlossen sind. Außerdem muss es möglich sein, im „Fluttering-Movie“
sowohl zu dem Frame, an dem die Flügel ganz geöffnet sind, als auch zu dem Frame, an dem die Flügel ganz geschlossen sind, zu springen.
Dazu sind folgende Änderungen am Symbol Butterfly
notwendig:
- In der Zeitleiste, Ebene
labels
: Labelnamen von Frame 40 inlb_fluttering_opened
abändern. - In der Zeitleiste, Ebene
labels
: Folgenden Labelnamen in Frame 50 einfügenlb_fluttering_closed
. - In der Zeitleiste, Ebene
scripts
folgenden zusätzlichen Code eintragen (Schlüsselbilder nicht vergessen!):- Frame 40
m_new_wings_state(OPENED);
- Frame 50
m_new_wings_state(CLOSED);
Die Implementierung der Setter-Methode set state
ist nun allerdings sehr viel aufwändiger.
Zunächst gibt es sechs Fälle, die berücksichtigt werden müssen. Den Fall dass sich alter
und neuer Zustand nicht unterscheiden, braucht man (zunächst!) nicht zu betrachten.
Der einfachste Fall ist, dass der Schmetterling sich nicht bewegt und mit dem Flattern beginnen soll:
Aktueller Zustand | Neuer Zustand | Aktion |
---|---|---|
OPENED |
FLUTTERING |
gotoAndPlay("lb_fluttering_opened") ⇒ der neue Status wird sofort erreicht
|
CLOSED |
FLUTTERING |
gotoAndPlay("lb_fluttering_closed") ⇒ der neue Status wird sofort erreicht
|
In den übrigen vier Fällen muss der Statuswechsel verzögert werden:
Aktueller Zustand | Neuer Zustand | Aktion |
---|---|---|
OPENED |
CLOSED |
gotoAndPlay("lb_fluttering_opened") Aufruf von m_new_wings_state(CLOSED) ⇒ neuer Status ist erreicht
|
CLOSED |
OPENED |
gotoAndPlay("lb_fluttering_closed") Aufruf von m_new_wings_state(OPENED) ⇒ neuer Status ist erreicht
|
FLUTTERING |
CLOSED |
Aufruf von m_new_wings_state(CLOSED) ⇒ neuer Status ist erreicht
|
FLUTTERING |
OPENED |
Aufruf von m_new_wings_state(OPENED) ⇒ neuer Status ist erreicht
|
Leider reicht es nicht, diese sechs Fälle zu betrachten. Der Zustand des Schmetterlings kann ja erneut geändert werden, während sich dieser bereits in einer verzögerten Zustandsänderung befindet (und daher zurzeit flattert). Hier gibt es folgende zusätzlichen Fälle:
Aktueller Zustand | Neuer Zustand | Aktion |
---|---|---|
irgendein Zustand | FLUTTERING |
Der Schmetterling hat den neuen Zustand bereits erreicht, da er bereits flattert. Die verzögerte Zustandsänderung muss(!) unterbrochen werden. |
OPENED oderCLOSED |
CLOSED |
Aufruf von m_new_wings_state(CLOSED) ⇒ neuer Status ist erreicht
|
OPENED oderCLOSED |
OPENED |
Aufruf von m_new_wings_state(OPENED) ⇒ neuer Status ist erreicht
|
Wenn man die obigen Tabellen in Code umsetzt, ändert sich der Inhalt der
Datei Butterfly.as
wie folgt:
package hsa.tutorial.butterfly
{
import flash.display.MovieClip;
import flash.events.Event;
public class Butterfly extends MovieClip
{
/////////////////////////////////////////////////////////////////////////////
// Constants
/////////////////////////////////////////////////////////////////////////////
public static const OPENED: String = "opened";
public static const CLOSED: String = "closed";
public static const FLUTTERING: String = "fluttering";
/////////////////////////////////////////////////////////////////////////////
// Instance variables
/////////////////////////////////////////////////////////////////////////////
private var v_state: String;
private var v_next_state: String = null;
////////////////////////////////////////////////////////////////////////////
// Attributes
/////////////////////////////////////////////////////////////////////////////
public function get state(): String
{
return v_state;
}
public function set state(p_state: String): void
{
if (p_state != OPENED && p_state != CLOSED && p_state != FLUTTERING)
throw (new Error("Butterfly: State '" + p_state + "' is unknown!"));
if (p_state != v_state)
{
if (v_state == FLUTTERING) // p_state == OPENED || CLOSED
{
// Delay the state change until the wings are in the correct position.
v_next_state = p_state;
}
else // v_state == OPENED || CLOSED
{
if (p_state == FLUTTERING)
{
// Jump to the corret position of the fluttering movie.
this.gotoAndPlay("lb_" + p_state + "_" + v_state);
v_state = p_state;
this.dispatchEvent(new Event(Event.CHANGE));
}
else // v_state == OPENED | CLOSED, p_state = CLOSED || OPENED
{
// Flutter until the correct position of the wings is reached.
v_next_state = p_state;
this.gotoAndPlay("lb_fluttering_" + v_state);
};
};
};
}
/////////////////////////////////////////////////////////////////////////////
// Constructor
/////////////////////////////////////////////////////////////////////////////
public function Butterfly(p_state: String = OPENED)
{
v_state = p_state;
this.gotoAndPlay(v_state);
this.dispatchEvent(new Event(Event.CHANGE));
}
/////////////////////////////////////////////////////////////////////////////
// Methods called from within the timline (should be private, but cannot)
/////////////////////////////////////////////////////////////////////////////
public function m_new_wings_state(p_state: String): void
{
if (v_next_state == p_state)
{
// As now the wings are in the correct position:
// Perform the delayed state change now!
v_state = v_next_state;
v_next_state = null;
this.gotoAndPlay("lb_" + v_state);
this.dispatchEvent(new Event(Event.CHANGE));
};
}
/////////////////////////////////////////////////////////////////////////////
// End of class
/////////////////////////////////////////////////////////////////////////////
}
}
Anmerkung
Man beachte, dass hier nur eine verbesserte Implementierung des Symbols Butterfly
angegeben wurde. An der zuvor definierten Schnittstellte ändert sich nichts.
Man kann sich allerdings nicht mehr darauf verlassen, dass die Zustandswechsel
sofort in dem Moment angezeigt wird, in dem die Setter-Methode set state
aufgerufen wird.
Dennoch ist die Implementierung deutlich aufwändiger, da in vielen Fällen der Zustandswechsel verzögert werden muss.
Der Schmetterlings-Movie als Spielfigur
Probleme der Implementierung
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)