OOP und der Sternenschweif
Flash und die objektorientierte Programmierung: In diesem Tutorial von Matthias Kannengiesser geht es neben der Umsetzung des Effekts auch noch darum, die objekorientierte Programmierung besser zu verstehen und auch mal in Aktion gesehen zu haben. Eine Vielzahl von Flash Entwickler scheuen die objektorientierte Programmierung wie der Teufel das Wasser. Sie befürchten, es sei zu schwer und zu umständlich. Diese Befürchtung ist jedoch unbegründet, wie im folgenden Tutorial zu sehen ist.
OOP Grundlagen
Was vielen nicht bewusst ist, wenn sie mit Flash arbeiten und ihre Projekte realisieren, ist die Tatsache, dass sie zu jeder Zeit Objekte verwenden, wie Filmsequenzen, Schaltflächen, Textfelder, etc. Dies sind Objekte, welche Sie auf der Bühne direkt wahrnehmen können, da sie optisch dargestellt werden.
Wir müssen Ihnen heute jedoch mitteilen, dass dies noch lange nicht alle Objekte sind, die in Flash zur Verfügung stellt. Es existieren noch Objekte wie Datum, Sound, XML, uvm..
zeit = new Date();
// Inhalt des Datums-Objekt ausgeben
trace(zeit); // Ausgabe: Sun Aug 31 11:00:40 GMT+0200 2003
Kaum zu glauben, aber wahr ist eine weitere Tatsache, die viele umhauen wird – Sie sind als Entwickler sogar in der Lage, eigene Objekte zu erschaffen. Ihr bestimmt deren Merkmale und Fähigkeiten. In der Programmierung spricht man bei diesen beiden Punkten von Eigenschaften und Methoden.
Wie würde sich ein solches Objekt erschaffen lassen und wie ist es aufgebaut? Hierbei gilt es in Flash eine bestimmte Syntax bei der Programmierung zu verwenden.
Um diesen Teil des Tutorials so einfach wie möglich zu gestalten, sollten wir uns einer Form zuwenden, die sicher jeder von uns kennt. Es handelt sich um einen Stern und zwar um einen ganz bestimmten Stern mit festgelegten Merkmalen.
Wie wir sehen, haben wir es hier mit einer Sternform zu tun, welche die Merkmale Farbe (Gelb), Anzahl der Ecken (4) und Anzahl der Seiten (8) aufweist. Die vorliegende Sternform stellt hierbei eine von vielen möglichen Sternenformen dar. Wie könnte man nun in Flash via ActionScript diesen Stern mit seinen Merkmalen (Eigenschaften) definieren, ohne ihn gleich zeichnen zu müssen?
Definition: objektname = new Object();
stern = new Object();
Mit Hilfe von Object() und dem Schlüsselwort new wird der Stern als virtuelles Objekt erzeugt. Was stellt Object() jedoch dar? – Object() ermöglicht es uns als Entwickler Objekte zu erschaffen. Es ist eine Art Vorlage für ein Objekt, welches dem Bauplan eines Hauses entsprechen würde, welcher durch einen Architekten anfertigt wird und auf dessem Grundlage das Haus gebaut wird. Object() ermöglicht es uns, ein Objekt zu erschaffen. Solche Vorlagen werden in der Programmierung als Klassen oder Konstruktoren bezeichnet.
Das Schlüsselwort new spielt bei der Erschaffung von Objekten aus einer Vorlage (Klasse) eine wesentliche Rolle. Es stellt eine Art Initiator dar und löst den Erschaffungsprozess aus.
Auf eines sei an dieser Stelle hingewiesen – es mag sein, dass sich der eine oder andere etwas über den Begriff »Erschaffen« wundert, den wir verwenden, um diesen Vorgang zu beschreiben. Dieser Begriff ist bewusst gewählt klar zu machen, wieviel Macht Sie damit in den Händen halten. Aus dem Nichts etwas zu erschaffen stellt einem vor eine grosse Verantwortung. Sie entscheiden, welche Merkmale das Objekt haben wird und welche Fähigkeiten ihm zur Verfügung stehen oder ob es aus dem Speicher entfernt wird.
Unser Stern besitzt zum gegenwärtigen Zeitpunkt lediglich die vordefinierten Merkmale und Fähigkeiten der Vorlage Object(). Wir werden nun versuchen, unserem Objekt weitere Merkmale (Eigenschaften) zuzuweisen.
Definition: objektname.eigenschaftsname = eigenschaftswert;
stern.farbe = „Gelb“;
stern.ecken = 4;
stern.seiten = 8;
Sie sollten mal einen Blick in den Arbeitsspeicher riskieren. Dies wird im Testmodus durch den Menüpunkt »Fehlersuche -> Variablen auflisten« ermöglicht.
farbe:“Gelb“,
ecken:4,
seiten:8
}
Nachdem wir nun unseren Stern mit einigen Merkmalen ausgestattet haben, können wir mit diesen Merkmalen auch arbeiten. Wie wird jedoch auf diese Eigenschaften zugegriffen? – Hierbei gilt es ebenfalls eine bestimmte Syntax zu verwenden.
Definition: trace(objektname.eigenschaftsname);
trace(stern.farbe); // Ausgabe: Gelb
Natürlich lassen sich die Werte beispielsweise auch in einer Variablen speichern.
Definition: variablenname = objektname.eigenschaftsname;
wert = stern.seiten;
Wie man sieht, ist es gar nicht so schwer, auf die Eigenschaften und deren Eigenschaftswerte zu zugreifen, es sollte lediglich eine bestimmte Syntax eingehalten werden.
Klassen – Vorlagen, Baupläne, etc.
Wir sollten nun noch einen Blick auf die Klassen werfen. Neben den vordefinierten Klassen, wie Date(), Sound(), MovieClip() uvm. ermöglicht es uns Flash auch, eigene Klassen zu erzeugen. Dies wird immer dann notwendig sein, wenn man beispielsweise mehr als einen Stern erschaffen möchte. Es wäre sicher schade, für jeden neuen Stern von vorne zu beginnen und die Eigenschaften erneut anlegen zu müssen. Daher wäre es sicher sinnvoller eine Gruppe von Objekten, wie die Sterne, zusammen zu fassen. Die Zusammenfassung der Eigenschaften der Objekte aus einer Gruppe führt zur sogenannten Klassenbildung.
Auch hierfür steht uns in Flash eine spezielle Syntax zur Verfügung.
function Sterne(pFarbe, pEcken, pSeiten) {
this.farbe = pFarbe;
this.ecken = pEcken;
this.seiten = pSeiten;
}
// Objekte
ersterStern = new Sterne(„Gelb“,4,8);
zweiterStern = new Sterne(„Blau“,3,6);
Wir haben gleich dafür gesorgt, aus der Klasse Sterne einige Objekte zur erschaffen. Wie man sehen wird, sind die beiden Sterne tatsächlich aus der Klasse Sterne() erzeugt worden. Ein Blick in den Arbeitsspeicher beweist dies:
Variable _level0.ersterStern = [Objekt #2, Klasse ‚Sterne‘] {
farbe:“Gelb“,
ecken:4,
seiten:8
}
Variable _level0.zweiterStern = [Objekt #3, Klasse ‚Sterne‘] {
farbe:“Blau“,
ecken:3,
seiten:6
}
Bei der Definition von Klassen ist unbedingt darauf zu achten, dass die einzelnen Eigenschaften innerhalb der Klasse mit dem Schlüsselwort this umgesetzt werden. Dieses stellt sicher, dass jedes Objekt, welches aus der Klasse erzeugt wird, seine individuellen Eigenschaften erhält, ohne die Eigenschaften eines anderen Objekts der selben Klasse zu überschreiben.
Natürlich kann sowohl ein Objekt, als auch eine Klasse über beliebig viele Eigenschaften und Methoden verfügen. Es geht sogar soweit, dass ein Objekt Eigenschaften oder Methoden mehrerer Klassen erben kann. Überträgt man dies auf die Biologie, wäre es vergleichbar mit der Vererbung von Merkmalen der Mutter und des Vaters an das jeweilige Kind. In der virtuellen Welt läuft dieser Prozess wesentlich unspektakulärer ab.
Sollten wir einen solchen Vererbungsprozess in Flash in Gang setzen wollen, ist uns das prototype-Objekt behilflich.
Unsere Klasse Sterne erhält, zusätzlich zu den eigenen Eigenschaften, die Eigenschaften und Methoden der Klasse MovieClip() und vererbt diese an sämtliche Objekte der Klasse Sterne().
Fallbeispiel: Sternenschweif
Wir sollten uns nach all der Theorie nun einer Anwendung zuwenden. Es wird sich hierbei um einen Sternenschweif handeln, welcher mit Hilfe einer Mausbewegung umgesetzt wird. Dieser Sternenschweif wird aus dutzenden von einzelnen Sternen bestehen und diese wiederum erhalten ihre Eigenschaften und Methoden von der Klasse Sterne().
Natürlich wird es unsere Aufgabe sein sowohl die Klasse Sterne(), als auch das erforderliche Symbol SternClip zu erzeugen.
Sternen Symbol
Wir benötigen als erstes einen Stern in Form eines Movieclips.
Dieses Symbol erhält zusätzlich einen Verknüpfungs-Bezeichner. Mit dessen Hilfe können wir das Symbol via ActionScript ansprechen und so beeinflussen wie wir es wollen.
Sternenschweif – Codezeilen
Nachdem das Symbol nun einen Verknüpfungs-Bezeichner besitzt und wir die optische Komponente unseres Sternenschweif-Effekts vorliegen haben, können wir uns den erforderlichen Codezeilen zuwenden.
Als erstes werden wir uns der Klasse Sterne() zuwenden.
function Sterne() {
this._x = _root._xmouse;
this._y = _root._ymouse;
this.pFaktor = .95;
this.aFaktor = 0.5;
this.pX = 0;
this.pY = 0;
this.onEnterFrame = function() {
this._x += this.pX;
this._y += this.pY;
this.pX += Math.random()*2-1;
this.pY += Math.random()*2-1;
this.pX *= this.pFaktor;
this.pY *= this.pFaktor;
this._alpha -= this.aFaktor;
if (this._x>Stage.width || this._x<0 || this._y>Stage.height || this._y<0 || this._alpha<1) {
this.removeMovieClip();
}
};
}
Wie man unschwer erkennt, werden in der Klasse sämtliche benötigten Eigenschaften und Methoden definiert. Im vorliegenden Fall geht es weniger um die Farbe und Seitenanzahl, als viel mehr um die Position der Maus, den Beschleunigungsfaktor und den Alphawert. Innerhalb der Klasse wird zusätzlich die Ereignisprozedurmethode onEnterFrame definiert, diese wird jedem Stern, der aus der Klasse Sterne() erzeugt wird, als Methode zur Verfügung stehen.
Was unseren Sternen jedoch fehlen würde, wären die Eigenschaften und Methoden eines Movieclips. Hierfür werden wir mit Hilfe des prototype-Objekts abhilfe schaffen.
Sterne.prototype = new MovieClip();
Nachdem unsere Klasse Sterne() nun auch über die Eigenschaften und Methode der Klasse Movieclip() verfügt, benötigen wir nun noch ein entsprechendes Symbol, schliesslich wollen wir die Sterne hinterher auf der Bühne auch sehen können.
Damit die Instanzen des SternClip-Symbols auf der Bühne auch genau das tun, was wir von ihnen erwarten, informieren wir noch schnell das SternClip Symbol darüber, dass die Sterne() Klasse sämtliche Eigenschaften und Methoden für die Instanzen des SternClip-Symbols zur Verfügung stellt. Hierbei ist uns die Methode registerClass() behilflich, welche von der allgemein gültigen Klasse Object() stammt.
Object.registerClass(„sClip“, Sterne);
Wie man sieht, erwartet die Methode registerClass() zwei Parameter. Der erste Parameter stellt den Verknüpfungs-Bezeichner unseres SternClip-Symbols dar, der zweite Parameter legt fest, aus welcher Klasse die Eigenschaften und Methoden stammen.
Nun müssen wir noch die Mausbewegung ins Spiel bringen, um die Sterne in Schwung zu bringen.
// Mausbewegung – Sternenschweif
this.onMouseMove = function() {
var diffX = this._xmouse-posX;
var diffY = this._ymouse-posY;
var abstand = Math.sqrt(diffX*diffX+diffY*diffY);
if (abstand>minAbstand) {
attachMovie(„sClip“, „stern_mc“+i, i++);
posX = this._xmouse;
posY = this._ymouse;
}
updateAfterEvent();
};
Die Variable minAbstand legt einen Mindestabstand fest, damit nicht bei jeder Mausbewegung sofort neue Sterne erzeugt werden. Die Abstandsberechnung Math.sqrt(diffX*diffX+diffY*diffY) kennen sicher einige noch aus der Schulzeit – Strecke von Punkt A zu Punkt B ergibt den entsprechenden Abstand. Die Methode attachMovie() übernimmt das Platzieren der Movieclip-Instanzen unseres SternClip-Symbols. Sofort nachdem die Sterne auf der Bühne platziert wurden, entfalten sie ihre vererbten Fähigkeiten und bewegen sich frei im Raum, bis sie entwender an die Bühnenbegrenzung stossen oder ihre Deckkraft sich dem Wert < 1 nähert. (Siehe Codezeilen der Klasse Sterne()).
Fazit
Dieses Tutorial diente in erster Linie dazu, die Grundlagen der objektorientierten Programmierung näher zu bringen. Natürlich kann es lediglich einen Einblick bieten, wir haben diesen jedoch bewusst so gewählt, dass keiner Angst vor OOP haben muss. Es stellt sicher für einige eine neue Herangehensweise dar – denken Sie jedoch daran, OOP wurde nicht erfunden, sondern viel mehr entdeckt. Wir schauen uns hierbei lediglich etwas aus der Natur ab, was so oder in ähnlicher Form bereits seit langer Zeit existiert. Übrigens ist OOP nicht als Dogma zu sehen – von wegen »von heute an nur noch OOP« – sie stellt viel mehr eine weitere von vielen Möglichkeiten dar, um zum gewünschten Ziel zu gelangen. Wir wünschen viel Erfolg!
