AS3-Tutorium: Flash: Butterfly 07b 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 Hauptfilms 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.
In zwei weiteren Schritten wird die Implementierung verbessert, so dass die Übergänge von einem Zustand in den anderen „weich“ erfolgen.
Auf die zur Verfügung gestellte Schnittstelle hat dies keine Auswirkungen.
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 Datenmodell
Bevor mit der Programmierung einer Anwendung begonnen wird, sollte zunächst ein Datenmodell (Klassendiagramm, Zustandsdiagramm etc.) erstellt werden. Folgendes Klassendiagramm wird in diesem Teil des Tutorium realisiert:
Medium:AS3-Tutorium Butterfly Flash 07 Class Diagram.jpg
Ordner mit StarUML-Diagramm und von StarUML erzeugtem AS3-Code-Rahmen (SVN-Repository)
Es gibt zwei Klassen zur Visualisierung einer Spielfigur (so genannte View-Klassen):
Butterfly
, eine Spielfigur, die sich nicht selbstständig vom Platz bewegt, aber verschiedene Zustände annehmen kann.ButterflyMovie
, eine animierte Spielfigur, die sich auf vordefinierten Bahnen bewegt und auch verschiedene Zustände annehmen kann.
Beide Klassen sind, da sie Symbolen zugeordnet werden, Subklassen der ActionScript-Klasse MovieClip
.
Ein Schmetterling kann drei Zustände annehmen:
- Flügel offen (
OPEN
) - Flügel geschlossen (
CLOSE
) - flatternd (
FLUTTERING
)
Dieser Zustand kann über das Attribut state
gelesen und modifiziert werden.
Mit Hilfe des Attributs stateAnimation
kann erfragt werden, in welchem Zustand sich die
Animation gerade befindet (Flügel offen oder geschlossen). Dies ändert sich insbesondere während des Flatterns
ständig.
Der Schmetterling informiert mittels Signalen (Events) interessierte Beobachter (Observers, Event Listeners) sowohl
dann, wenn sich der Zustand (state
) ändert, als auch dann, wenn sich der Zustand der Animation
(stateAnimation
), d.h. der Flügel ändert. Dazu wird die Signal-Klasse ButterflyEvent
(eine Subklasse der ActionScript-Klasse Event
) definiert, die zwei Konstanten zur Beschreibung dieser Ereignistypen bereithält.
Ein Schmetterlingsmovie kann vier Zustände annehmen:
- wartend (
WAITING
) - herumfliegend (
FLYING_AROUND
) - wegfliegend (
FLYING_AWAY
) - von außerhalb zum Warteplatz fliegend (
FLYING_IN
)
Dieser Zustand kann über das Attribut state
gelesen und modifiziert werden.
Mit Hilfe des Attributs stateAnimation
kann erfragt werden, in welchem Zustand sich die
Animation gerade befindet. Dieses Attribut ändert sich jeweils zum Ende
einer Flugsequenz. Das heißt, das Attribut kann insgesamt sieben Werte annehmen:
- wartend (
WAITING
) - herumfliegen wurde beendet (
END_FLYING_AROUND
) - wegfliegen wurde beendet (
END_FLYING_AWAY
) - zum Warteplatz fliegen wurde beendet (
END_FLYING_IN
)
Der Schmetterlingsmovie informiert ebenfalls mittels Signalen interessierte Beobachter sowohl
dann, wenn sich der Zustand (state
) ändert, als auch dann, wenn sich der Zustand der Animation
(stateAnimation
) ändert, d.h., wenn eine Flugsequenz beendet wird. Hierfür wird die Klasse
ButterflyMovieEvent
verwendet.
Auf das Schmetterlingsobjekt, dass dem Schemtterlingsmovie zugeordnet ist, kann von außen nicht zugegriffen werden:
Die Beziehung wurde als private
definiert.
Wäre ein Direktzugriff möglich, so könnte man z.B. das Flügelschlagen während des Rundfluges deaktivieren.
Außerdem würde der Direktzugriff Verletzungen des Gesetzes von Demeter ermöglichen.
Als Ersatz für den fehlenden Direkzugriff werden zwei weitere Attribute angeboten:
butterflyState
: definiert den Fügelzustand für den wartenden Schmetterling (offen, geschlossen, flatternd); wenn er fliegt, flatter er immerbutterflyStateAnimation
: gibt den aktuellen Flügelzustand preis: offen oder geschlossen
Da auf das Schmetterlingsobjekt nicht direkt zugegriffen werden kann, signalisiert der Schmetterlingsmovie auch die Zustandsänderungen des Schmetterlingsobjektes.
Hier sieht man ein Problem, das sich bei der Beachtung des Gesetzes von Demeter ergibt, sehr deutlich. Ein Objekt, das keinen Direktzugriff auf ein ihm zugeordnetes Objekt ermöglicht, muss als Adapter (Wrapper) für dieses Objekt implementiert werden. Dies hat zur Folge, dass zusätzlicher Code geschrieben werden muss, der im Wesentlichen nichts weiter macht, als Nachrichten weiterzuleiten.
Hier hat diese Vorgehen allerdings einen entscheidenden Vorteil: Es ist dem Benutzer der Klasse ButterflyMovie
nicht möglich, das Verhalten des Schmetterling in einem unpassenden Augenblick (d.h. während des Fluges)
zu verändern.
Im Allgemeinen ist Code, der hilft, Programmierfehler zu vermeiden, Code vorzuziehen, der aufgrund des geringeren Overheads etwas effizienter ist.
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_open
- In der Zeitleiste, Ebene
labels
: Klick auf Frame 20 → Rechtsklick auf Frame 20 →Schlüsselbild einfügen
→ Eigenschaften-Fenster, Name:lb_close
- 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/view
→ 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.view.ButterflyBlue
(oder eine andere Farbe), Basisklassehsa.tutorial.butterfly.view.Butterfly
→OK
→OK
Nun kann in die Datei Butterfly.as
folgendener Code einfügt werden:
package hsa.tutorial.butterfly.view
{
import flash.display.MovieClip;
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
/////////////////////////////////////////////////////////////////////////////
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 = OPEN)
{
this.state = p_state;
}
/////////////////////////////////////////////////////////////////////////////
// End of class
/////////////////////////////////////////////////////////////////////////////
}
}
Signale
Bei jeder Zustandsänderung soll das Schmetterlings-Objekt laut Klassendiagramm alle interessierten Objekte, d.h. alle Observer (bzw. in ActionScript: Event 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 ButterflyEvent
-Konstanten einzuführen.
Die zugehörige Datei ButterflyEvent.as
muss, wenn als Package-Name ebenfalls hsa.tutorial.butterfly.event
angegeben wird, im Unterordner hsa/tutorial/butterfly/event
gespeichert werden.
Der Inhalt dieser Datei könnte folgendermaßen aussehen:
package hsa.tutorial.butterfly.event
{
import flash.events.Event;
public class ButterflyEvent extends Event
{
/////////////////////////////////////////////////////////////////////////////
// Constants
/////////////////////////////////////////////////////////////////////////////
public static const CHANGE_BUTTERFLY: String
= "change butterfly";
public static const CHANGE_BUTTERFLY_ANIMATION: String
= "change butterfly animation";
/////////////////////////////////////////////////////////////////////////////
// Constructor
/////////////////////////////////////////////////////////////////////////////
public function ButterflyEvent(type: String = CHANGE_BUTTERFLY)
{
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());
};
}
Damit jede Änderung der Flügelstellung ebenfalls mit Hilfe eines Signals (der Art CHANGE_STATE_ANIMATION
) angezeigt wird, ist
ein wenig mehr Aufwand notwendig. In der Zeitleiste des Symbols Butterfly
müssen geeignete Methodenaufrufe eingefügt werden:
- In der Zeitleiste des Symbols
Butterfly
, Ebenescripts
folgenden Code eintragen (Schlüsselbilder nicht vergessen!):- Frame 1
m_new_wings_state(OPEN);
- Frame 20
m_new_wings_state(CLOSE);
- Frame 40
m_new_wings_state(OPEN);
- Frame 50
m_new_wings_state(CLOSE);
Nun müssen noch die Methode m_new_wings_state
sowie
das Attribut stateAnimation
in die Klasse Butterfly
eingefügt werden. Man beachte, dass es
keine Setter-Methode gibt. Das Attribut kann von außen nur gelesen werden.
private var v_state_animation: String;
public function get stateAnimation(): String
{
return v_state_animation;
}
// Should be private, but cannot as it is accessed from within the timeline!
public function m_new_wings_state(p_state: String): void
{
v_state_animation = p_state;
this.dispatchEvent
(new ButterflyEvent(ButterflyEvent.CHANGE_BUTTERFLY_ANIMATION));
}
Insgesamt sieht der Inhalt der Datei Butterfly.as
nun folgendermaßen aus:
package hsa.tutorial.butterfly.view
{
import flash.display.MovieClip;
import hsa.tutorial.butterfly.event.ButterflyEvent;
public class Butterfly01 extends MovieClip
{
/////////////////////////////////////////////////////////////////////////////
// Constants
/////////////////////////////////////////////////////////////////////////////
public static const OPEN: String = "open";
public static const CLOSE: String = "close";
public static const FLUTTERING: String = "fluttering";
/////////////////////////////////////////////////////////////////////////////
// Instance variables
/////////////////////////////////////////////////////////////////////////////
private var v_state: String;
private var v_state_animation: String;
////////////////////////////////////////////////////////////////////////////
// Methods to be accessed from within the timeline!
/////////////////////////////////////////////////////////////////////////////
// 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;
this.dispatchEvent
(new ButterflyEvent(ButterflyEvent.CHANGE_BUTTERFLY_ANIMATION));
};
}
////////////////////////////////////////////////////////////////////////////
// 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;
this.dispatchEvent(new ButterflyEvent());
};
}
public function get stateAnimation(): String
{
return v_state_animation;
}
/////////////////////////////////////////////////////////////////////////////
// Constructor
/////////////////////////////////////////////////////////////////////////////
public function Butterfly(p_state: String = OPEN)
{
this.state = p_state;
}
/////////////////////////////////////////////////////////////////////////////
// End of class
/////////////////////////////////////////////////////////////////////////////
}
}
Damit ist es z.B. möglich, einen Flügelschlag-Sound mit dem Movie zu synchronisieren. Im nachfolgenden Beispiel wird der aktuelle Zustand des Flügels in einem zweiten Textfeld ausgegeben. Ein drittes Textfeld simuliert den Flip-Flap-Sound (da mir derzeit leider kein echter Flügelschlag-Sound vorliegt).
<swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_07_character/Butterfly07Butterfly01Flash11.swf</swf>
Um diese Verhalten zu erreichen, 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.event.ButterflyEvent;
import hsa.tutorial.butterfly.view.Butterfly;
import fl.transitions.Tween;
import fl.transitions.easing.None;
sp_butterfly.addEventListener(ButterflyEvent.CHANGE_BUTTERFLY, o_change);
sp_butterfly.addEventListener(ButterflyEvent.CHANGE_BUTTERFLY_ANIMATION, o_wings);
function o_change(p_event: ButterflyEvent): void
{
sp_label_state.text = sp_butterfly.state;
}
function o_wings(p_event: ButterflyEvent): void
{
sp_label_wings.text = sp_butterfly.stateAnimation;
sp_label_flap.text = (sp_butterfly.stateAnimation == Butterfly.OPEN)
? "flip"
: "flap";
new Tween
(sp_label_flap, // object to be animated
"alpha", // animation attribute: "x", "y", "alpha", "rotation", ...
None.easeNone, // animation type
1.0, 0.0, // start and end value (of alpha)
15, // Dauer der Animation ...
false // duration in frames (not in seconds)
);
}
Anmerkung 1
Man beachte, dass im Gegensatz
zu den vorangegangen Tutorien die Labelbezeichnungen nicht
mehr lbOpen
, lbClose
und lbFluttering
lauten, sondern lb_open
, lb_close
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 (die Attribute state
und stateAnimation
sowie die Ereignisse (Events) die vom Schmetterling gemeldet werden).
Nur über diese Schnittstelle darf von außen auf ein Schmetterlings-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.view.Butterfly;
sp_butterfly.state=Butterfly.OPEN;
sp_butterfly.state=Butterfly.CLOSE;
sp_butterfly.state=Butterfly.FLUTTERING;
Außerdem kann man den aktuellen Zustand des Schmetterling und auch seiner Flügel jederzeit lesen. Und man kann sich jederzeit über Zustandsänderungen informieren lassen.
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 CLOSE ind FLUTTERING wechselt, werden die Flügel schlagartig geöffnet.
Sowohl im ersten Beispielfilm, als auch im zweiten Beispielsfilm wird zunächst alle 30 Frames und danach kurzeitig viel häufiger 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/Butterfly07ButterflyRoughFlash11.swf</swf><swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_07_character/Butterfly07ButterflySmoothFlash11.swf</swf>
Um das Problem mit den ruckartigen Zustandsübergängen 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_open
abändern. - In der Zeitleiste, Ebene
labels
: Folgenden Labelnamen in Frame 50 einfügenlb_fluttering_close
. - In der Zeitleiste, Ebene
scripts
;- Frame 59
gotoAndPlay("lb_fluttering_open");
// an Stelle vongotoAndPlay("lb_fluttering");
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 |
---|---|---|
OPEN |
FLUTTERING |
gotoAndPlay("lb_fluttering_open") ⇒ der neue Status wird sofort erreicht
|
CLOSE |
FLUTTERING |
gotoAndPlay("lb_fluttering_close") ⇒ der neue Status wird sofort erreicht
|
In den übrigen vier Fällen muss der Statuswechsel verzögert werden:
Aktueller Zustand | Neuer Zustand | Aktion |
---|---|---|
OPEN |
CLOSE |
gotoAndPlay("lb_fluttering_open") Aufruf von m_new_wings_state(CLOSE) ⇒ neuer Status ist erreicht
|
CLOSE |
OPEN |
gotoAndPlay("lb_fluttering_close") Aufruf von m_new_wings_state(OPEN) ⇒ neuer Status ist erreicht
|
FLUTTERING |
CLOSE |
Aufruf von m_new_wings_state(CLOSE) ⇒ neuer Status ist erreicht
|
FLUTTERING |
OPEN |
Aufruf von m_new_wings_state(OPEN) ⇒ 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. (Dies ist ein ganzt typisches Problem bei der Entwicklung von Multimedia-Anwendungen: Der Benutzer oder andere Komponenten können zu jeder Zeit Zustandsänderungen veranlassen, auch wenn die Anwendung eine andere Aufgabe noch nicht vollständig erledigt hat.)
Folgende zusätzlichen Fälle müssen betrachtet werden:
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. |
OPEN oderCLOSE |
CLOSE |
Aufruf von m_new_wings_state(CLOSE) ⇒ neuer Status ist erreicht
|
OPEN oderCLOSE |
OPEN |
Aufruf von m_new_wings_state(OPEN) ⇒ neuer Status ist erreicht
|
Wenn man die obigen Tabellen in Code umsetzt, ändert sich der Inhalt der
Datei Butterfly.as
wie folgt:
/////////////////////////////////////////////////////////////////////////////////
// Copyright © 2010 W. Kowarschick
//
// Dieses Werk darf unter den Bedingungen der Creative Common Lizenz by-nc 3.0 de
// (http://creativecommons.org/licenses/by-nc/3.0/de/)
// vervielfaeltigt, verbreitet, publiziert und modifiziert werden.
/////////////////////////////////////////////////////////////////////////////////
package hsa.tutorial.butterfly.hsa
{
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";
private static const c_label_prefix: String = "lb_";
private static const c_label_prefix_fluttering: String = "lb_fluttering_";
/////////////////////////////////////////////////////////////////////////////
// Instance variables
/////////////////////////////////////////////////////////////////////////////
// Instance variables of the attributes
private var v_state: String;
// Auxiliary variable (for being able to perform delayed state changes)
private var v_next_state: String = null;
/////////////////////////////////////////////////////////////////////////////
// Private methods
/////////////////////////////////////////////////////////////////////////////
private function m_set_state(p_state: String): void
{
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
{
if (p_state != OPEN && p_state != CLOSE && p_state != FLUTTERING)
throw (new Error("ButterflySmooth: State '" + p_state + "' is unknown!"));
if (v_next_state == null) // Currently no delayed state change is performed!
{
if (p_state == FLUTTERING)
{
this.gotoAndPlay( c_label_prefix_fluttering
+ ((v_state == null) ? OPEN : v_state)
);
m_set_state(p_state); // Do the state change now!
}
else // p_state == OPEN || CLOSE
{
if (v_state != FLUTTERING)
this.gotoAndPlay( c_label_prefix_fluttering
+ ((v_state == null) ? OPEN : v_state)
);
// Delay the stage change until the wings are in the correct position.
v_next_state = p_state;
};
}
else // Currently a delayed state change is performed!
{
if (p_state == FLUTTERING)
{
v_next_state = null; // Stop the delayed state change.
m_set_state(p_state); // Do the state change now!
}
else
v_next_state = p_state; // Update the delayed state change;
}
}
/////////////////////////////////////////////////////////////////////////////
// Methods called from within the timline (should be private, but cannot)
/////////////////////////////////////////////////////////////////////////////
public function m_new_wings_state(p_state: String): void
{
// If the wings are in the correct position,
// perform the delayed state change!
if (v_next_state == p_state)
{
this.gotoAndPlay(c_label_prefix + v_next_state);
m_set_state(v_next_state); // Make up for the state change now!
v_next_state = null;
};
}
/////////////////////////////////////////////////////////////////////////////
// Constructor
/////////////////////////////////////////////////////////////////////////////
public function Butterfly(p_state: String = OPEN)
{
this.state = p_state;
}
/////////////////////////////////////////////////////////////////////////////
// End of class
/////////////////////////////////////////////////////////////////////////////
}
}
Anmerkung 1
Man beachte, dass hier nur eine verbesserte, wenn auch viel aufwändigere 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.
Das Schmetterlingssymbol als Spielfigur mit weichen Übergängen: Vereinfachte Version
Der Code, der im vorangegangenen Abschnitt erstellt wurde, ist ziemlich umfangreich und schwer zu verstehen. Wenn Spielfiguren komplexere Bewegungsabläufe aufweisen, ist es i. Allg. 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.
Folgende Vereinfachungen müssen zunächst am Schmetterling vorgenommen werden:
- 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
. - In der Zeitleiste, Ebene
labels
: Die Labellb_butterfly_open
undlb_butterfly_clos
inlb_open
undlb_close
umbenennen. - In der Zeitleiste, Ebene
scripts
, Frame 21:gotoAndPlay("lb_open");
an Stelle vongotoAndPlay("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;
// Auxiliary variable (for being able to perform delayed state changes)
private var v_stop_state: String = null;
/////////////////////////////////////////////////////////////////////////////
// Private methods
/////////////////////////////////////////////////////////////////////////////
private function m_set_state(p_state: String): void
{
if (v_state != p_state)
{
v_state = p_state;
this.dispatchEvent(new ButterflyEvent());
}
}
////////////////////////////////////////////////////////////////////////////
// Attributes
/////////////////////////////////////////////////////////////////////////////
public function get state(): String
{
return v_state;
}
public function set state(p_state: String): void
{
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!"));
}
/////////////////////////////////////////////////////////////////////////////
// Methods called from within the timline (should be private, but cannot)
/////////////////////////////////////////////////////////////////////////////
public function m_new_wings_state(p_state: String): void
{
// 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!
};
}
/////////////////////////////////////////////////////////////////////////////
// Constructor
/////////////////////////////////////////////////////////////////////////////
public function Butterfly(p_state: String = OPEN)
{
this.state = p_state;
}
/////////////////////////////////////////////////////////////////////////////
// End of class
/////////////////////////////////////////////////////////////////////////////
}
}
Anmerkung 1
Beachten Sie, dass der Code viel kürzer, einfacher und verständlicher ist, als im vorangegangen Beispiel.
TBD
<swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_07_character/Butterfly07ButterflySimplifiedFlash11.swf</swf>
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)