Anzeige
Tutorialbeschreibung

Mauseffekte per Zeichnungsmethoden (Zeichnungsmethoden II)

Mauseffekte per Zeichnungsmethoden (Zeichnungsmethoden II)

An einigen Beispielen wollen wir uns Mauseffekte anschauen, die mit Hilfe der AS-Zeichnungsmethoden realisiert wurden.

Version: ab Flash MX

Niveau: Fortgeschrittene

Vorkenntnisse: MovieClips, Koordinatensysteme, Funktionen, Grundlagen AS 1.0, Tutorial "Zeichnen mit Actionscript: Grundlagen (Zeichnungsmethoden I)"

Lernziele: Zeichnungsmethoden beispielhaft anwenden lernen


Einführung

Im Tutorial "Zeichnen mit Actionscript: Grundlagen (Zeichnungsmethoden I)" haben wir uns die Grundlagen der AS-Zeichnungsmethoden angeeignet. Dort wurden u.a. einige Einsatzmöglichkeiten angesprochen, zu denen etwa Mauseffekte zählen, die sich auf andere Weise gar nicht oder nur mit erheblichem Mehraufwand realisieren lassen. Wir wollen uns zwei Effekte genauer anschauen:

  • In der Nähe der Maus werden bei ihrer Bewegung verschiedenfarbige Ellipsen eingefügt, die wie Blätter aussehen. Die Blätter drehen sich und blenden nach einiger Zeit aus. Das wäre zwar auch mit der attachMovie-Methode möglich (Partikeleffekte, vgl. z.B. Tutorial "Regen simulieren mit AS", "Schneefall mit AS simulieren "), aber die Zeichnungsmethoden reduzieren demgegenüber die Dateigröße und erweisen sich als flexibler, da sich die eingefügten Objekte per AS leicht in der Form ändern lassen ohne mühsam eine Grafik neu erstellen zu müssen.
  • Bei jeder Mausbewegung werden horizontal zwei Kurven eingeblendet, deren Scheitelpunkte über die x- und y-Position der Maus berechnet werden. Nach einiger Zeit verblassen die Kurven. Anders als das vorhergehende Beispiel läßt sich dieser Effekt nur mit den Zeichnungsmethoden realisieren.

Beispiel 1: Blätter

  1. Erstellen Sie einen neuen Film (800x600, 18 bps, schwarz).
  2. Benennen Sie den ersten und einzigen Frame "actions".
  3. Erstellen Sie dort ein Bildscript:

this.createEmptyMovieClip("z",1);
z.vTiefe = 1;
var o = z.createEmptyMovieClip("k"+z.vTiefe, z.vTiefe);
o.lineStyle(1,0xffaa00,0);
o.beginFill(0xffaa00,100);
o.curveTo(10,-10,20,0);
o.curveTo(10,10,0,0);

Damit erzeugen wir per Scripting eine kleine orangene Ellipse von 20 Pixel Breite.

Zuerst wird ein Behälter erstellt, um alle gezeichneten Objekte und Variablen etc. zwecks Vereinfachung der Datenverwaltung aufzunehmen. Vorsorglich legen wir eine Variable vTiefe fest, die wir später benötigen, wenn weitere Objekte eingefügt werden. Ebenfalls zur Vereinfachung dient die Variable o, in die eine attachMethode geschrieben wird. Dadurch beinhaltet sie eine Referenz auf den erstellten leeren MovieClip namens z["k"+z.vTiefe] (entspricht hier dem Instanznamen z.k1). In diesem leeren MovieClip wird eine Ellipse mit einer 0 Pixel dicken, transparenten orangenen Linie und einer orangenen Füllung gezeichnet. Formal gesehen erwartet ein beginFill ein vorausgehendes lineStyle. Da wir hier jedoch keine Linien verwenden wollen, setzen wir Stärke und Deckkraft auf 0. Die Ellipse besteht aus zwei Kurven, deren Scheitelpunkte sich jeweils auf halber Breite des Objekts befinden. Dadurch erhält sie eine horizontale Ausrichtung.

Bilder

Da es sich um ein Bildscript handelt, wird der Code unmittelbar nach Abspielen des Frames durch Flash direkt ausgeführt. Um die Befehle an die Maus zu binden, benötigen wir ein Mausereignis.

  1. Erweitern Sie daher den bestehenen Code dementsprechend (Fettdruck):

this.createEmptyMovieClip("z", 1);
z.vTiefe = 1;
z.onMouseMove = function() {
   var o = z.createEmptyMovieClip("k"+z.vTiefe, z.vTiefe);
   o.lineStyle(0, 0xffaa00, 0);
   o.beginFill(0xffaa00, 100);
   o.curveTo(10, -10, 20, 0);
   o.curveTo(10, 10, 0, 0);
   o._y = _ymouse;
   o._x = _xmouse;
};

Nun zieht die Maus scheinbar ein Objekt hinter sich her. Tatsächlich wird bei jeder Mausbewegung eine neue Ellipse gezeichnet. Da wir immer die gleiche Tiefe zuweisen, wird die vorher gezeichnete Ellipse überschrieben. Die Positionierung entspricht den Mauskoordinaten.

Das mouseMove-Ereignis muß nicht zwangsläufig z zugewiesen werden. Die gleiche Funktion hätten wir erhalten, wenn wir es _root mit this.onMouseMove zugewiesen hätten. Die von uns gewählte Vorgehensweise hat aber den Vorteil, daß das Ereignis automatisch gelöscht wird, wenn wir z löschen (falls der Effekt nicht mehr benötigt wird). Im Falle von _root müssten wir jedoch explizit auch das mouseMove löschen.

Um den Code zu vereinfachen und übersichtlicher zu halten, wollen wir die Zeichnenbefehle in eine eigene Methode auslagern.

  1. Weisen Sie den kompletten Code innerhalb des mouseMove-Ereignisses einer neuen Methode z.blatt zu. Ersetzen Sie dabei innerhalb der neuen Methode z durch den Selbstbezug this (Fettdruck):

z.blatt = function() {
   var o = this.createEmptyMovieClip("k"+this.vTiefe, this.vTiefe);
   o.lineStyle(0, 0xffaa00, 0);
   o.beginFill(0xffaa00, 100);
   o.curveTo(10, -10, 20, 0);
   o.curveTo(10, 10, 0, 0);
   o._y = _ymouse;
   o._x = _xmouse;
};

  1. Ersetzen Sie das bisherige mouseMove durch:

z.onMouseMove = z.blatt;

Beim Testen werden Sie keinen Unterschied zu vorher feststellen. In der Ausführung sind beide Varianten identisch, aber die Letztere ist übersichtlicher. Alles was sich auf den konkreten Zeichnenvorgang bezieht, ist in eine eigene Methode ausgelagert. Sie kann von uns später beliebig verändert werden ohne daß wir Gefahr laufen, andere Teile des Codes ungewollt ebenfalls zu ändern.

Die Anzahl der gezeichneten Blätter hängt von der ihnen zugewiesenen Tiefe ab.

  1. Ergänzen Sie die Methode z.blatt nach der Zuweisung der y-Position:

this.vTiefe++

Da vTiefe bei jedem Zeichnenvorgang inkrementiert wird, können wir zumindest theoretisch unendlich viele Ellipsen erstellen. Bei jeder Mausbewegung taucht eine neue auf. Allerdings geht sehr schnell die Übersicht verloren, zudem nimmt die Performance von Flash ab, wenn ständig sehr viele Objekte neu gezeichnet werden müssen. Daher beschränken wir die Anzahl der gleichzeitig dargestellten Ellipsen.

  1. Erweitern Sie die Anweisung, die für das Inkrementieren von vTiefe sorgt, wie folgt (Fettdruck):

if (this.vTiefe<200) {
   this.vTiefe++;
} else {
   this.vTiefe = 1;
}

Wenn Sie Ihre Maus nun über den Bildschirm jagen, werden nach einiger Zeit gezeichnete Blätter plötzlich verschwinden. Denn vTiefe wird nur bis 200 hochgezählt. Ist das 200ste Objekt gezeichnet, setzen wir die Variable zurück auf 1. Der nächste Zeichnenvorgang überschreibt dann einfach die Ellipse, die ganz am Anfang auf der Tiefe 1 gezeichnet wurde. Es werden also nie mehr als 200 Objekt gleichzeitig auf dem Screen zu sehen sein.

Momentan sehen alle Objekte gleich aus. Hier lassen sich jedoch zahlreiche Eigenschaften ändern, um eine größere Vielfalt zu erzeugen. Beginnen wir mit der Größe.

  1. Erweitern Sie das Script nach dem letzten curveTo und vor der Zuweisung der x- und y-Positionen um folgende Zeilen:

var vScale = Math.random()+1;
o._xscale *= vScale;
o._yscale *= vScale;

In der lokalen Variablen vScale speichern wir bei jedem Zeichnen einen Zufallswert zwischen 1 (wenn Math.random 0 ergibt) und ca. 1.9 (wenn Math.random ca. 0.9 ergibt). Anschließend skalieren wir die Ellipse sowohl horizontal wie vertikal mit diesem Wert, d.h. die kleinstmögliche Ellipse entspricht genau den Ausgangswerten (z.B. Breite 20 Pixel bei einer Linienstärke von 0), die größtmögliche Ellipse dagegen ist annähernd doppelt so groß.

Auch eine Drehung läßt sich einfach zuweisen.

  1. Schreiben Sie nach den gerade ergänzten Zeilen:

o._rotation = Math.floor(Math.random()*180);

Bei jeder Mausbewegung erhält das gezeichnete Objekt eine zufällige Drehung zwischen 0 und 179. Obwohl eine Volldrehung 360 anstatt 180 Grad entspricht, reichen die hier gewählten Werte völlig aus, denn die Ellipse ist symmetrisch. Wenn wir sie um 180 Grad drehen würden, könnten wir die Drehung mit bloßem Auge nicht wahrnehmen, da sie so aussehen würde, als hätten wir sie überhaupt nicht gedreht. Eine Drehung um 181 Grad wäre optisch identisch mit einer Drehung um 1 Grad etc. Daher decken unsere Werte zwischen 0 und 179 alle möglichen Positionen angemessen ab.

Für die menschliche Wahrnehmung spielen Farben eine zentrale Rolle. Daher wollen wir Zufallsfarben zuweisen. In Flash gibt es gleich mehrere Möglichkeiten, zufallsbedingt auf den RGB-Farbraum zuzugreifen. Wir wählen einen ebenso bequemen wie simplen Weg.

  1. Ändern Sie die blatt-Methode folgendermaßen (Fettdruck):

var o = this.createEmptyMovieClip("k"+this.vTiefe, this.vTiefe);
o.lineStyle(0, 0xffaa00, 0);
var vCol = Math.random()*0xffffff;
o.beginFill(vCol, 100);

Jetzt können Sie mit der Maus eine bunte Girlande über den Screen ziehen. Wenn wir die RGB-Farben als Hexadezimalwert schreiben, so entspricht weiß dem Wert 0xffffff und schwarz 0x000000. In der Variablen vCol speichern wir damit einen Zufallswert zwischen einem völligen Schwarz und einem nahezu völligen Weiß.

Der bisherige Sourcecode sieht so aus:

Bilder
 

Der Effekt wirkt noch überzeugender, wenn die Blätter sanft ausblenden.

  1. Fügen Sie nach der Initialisierung von z.vTiefe folgende Zeile ein:

z.aBlaetter = [];

Um nicht jedem einzelnen Blatt ein enterFrame zuweisen zu müssen, das für das Ausblenden sorgt, wollen wir alle Blätter gemeinsam in einem Array erfassen. Dann können wir in einem einzigen enterFrame auf alle vorhandenen Blätter gleichzeitig zugreifen.

  1. Fügen Sie innerhalb von z.blatt vor der if-Abfrage bezüglich vTiefe eine push-Anweisung ein:

this.aBlaetter.push(o);

Sobald ein Blatt gezeichnet wird, trägt es Flash in unser Array ein. Jetzt fehlt nur noch der permanente Zugriff auf das Array, um die Blätter ausfaden zu können.

  1. Fügen Sie nach dem mouseMove-Ereignis ein enterFrame-Ereignis ein:

z.onEnterFrame = function(){
   for(i = 0; i < this.aBlaetter.length; i++){
      if(this.aBlaetter[i]._alpha > 0){
         this.aBlaetter[i]._alpha -= 2;
      }else{
         this.aBlaetter[i].removeMovieClip();
         this.aBlaetter.splice(i,1);
      }
   }
}

Beim Testen blenden die gezeichneten Blätter langsam aus. Die Schleife innerhalb des enterFrame-Ereignisses kontrolliert den Alphawert aller in aBlaetter erfassten Objekte. Wenn er größer 0 ist, subtrahiert sie eine bestimmte Zahl (hier: 2), andernfalls wird das betreffende Blatt gelöscht, da es ohnehin nicht mehr sichtbar ist.

Natürlich sind während des Ausblendens auch noch Bewegungen möglich, etwa eine permanente Rotation.

  1. Erweitern Sie die Methode z.blatt nach der Multiplikation mit vScale:

o.vRotat = Math.ceil(Math.random()*10)+5;

Jede Ellipse erhält einen Zufallswert zwischen 6 und 15.

  1. Ergänzen Sie das enterFrame-Ereignis unmittelbar nach dem Dekrementieren von _alpha um 2:

this.aBlaetter[i]._rotation += this.aBlaetter[i].vRotat;

Während des Ausblendvorgangs wird nun zusätzlich jedes Objekt im Uhrzeigersinn gedreht. Das Tempo ist dabei abhängig von der für jede Ellipse individuell ermittelten Variable vRotat.

  1. Ändern Sie die Initialisierung von o.vRotat folgendermaßen:

o.vRotat = Math.ceil(Math.random()*30)-15;

Jetzt sind Drehungen im und gegen den Uhrzeigersinn möglich. Das größtmögliche Tempo gegen den Uhrzeigersinn beträgt -14, im Uhrzeigersinn 15. Allerdings ist auch eine 0 möglich, d.h. die betreffende Ellipse wird sich nicht drehen.

Das läßt sich noch beliebig ausbauen, etwa durch eine zusätzliche Bewegung nach unten.

  1. Erweitern Sie die Methode z.blatt nach der Multiplikation mit vScale:

o.vTempoY = Math.ceil(Math.random()*5)+3;

Jede Ellipse erhält einen Zufallswert zwischen 4 und 8.

  1. Ergänzen Sie das enterFrame-Ereignis unmittelbar nach dem Dekrementieren von _alpha um 2:

this.aBlaetter[i]._y += this.aBlaetter[i].vTempoY;

Die Blätter bewegen sich alle mit jeweils verschiedener Geschwindigkeit nach unten, während sie sich drehen und langsam ausblenden. Wer will, kann hier gerne auch noch eine sinusförmige Bewegung einfügen wie wir sie im Schnee-Tutorial kennen gelernt haben.

Zur Kontrolle das vollständige Script:

Bilder

In unserem Beispiel liegt der Drehpunkt der Ellipse an der linken Spitze. Er läßt sich leicht in die Mitte verschieben, wenn Sie beim Erzeugen ein moveTo einfügen, das auf die Position -10,0 ausgeführt wird. Dann müssen nur noch die bei curveTo verwendeten x-Werte um 10 reduziert werden.

Selbstverständlich sind auch andere Objekte denkbar. Testen Sie doch mal folgendes:

o.moveTo(-10,-10);
o.curveTo(0, 0, 10, -10);
o.curveTo(0, 0, 10, 10);
o.curveTo(0, 0, -10, 10);
o.curveTo(0, 0, -10, -10);

Bilder

Einige der bei dieserÜbung verwendeten Prinzipien werden beim zweiten Beispiel wieder auftauchen, denn sie sind von grundlegender Bedeutung. Sie werden auch dort i.d.R. noch einmal erläutert.

Beispiel 2: Kurven

  1. Erstellen Sie einen neuen Film (800x600, 18 bps, schwarz).
  2. Benennen Sie den ersten und einzigen Frame "actions".
  3. Erstellen Sie dort ein Bildscript:

this.createEmptyMovieClip("z",1);
z.vTiefe = 1;
var o = z.createEmptyMovieClip("k"+z.vTiefe, z.vTiefe);
o.lineStyle(2,0xffaa00,100);
o.moveTo(0,_ymouse);
o.curveTo(100,100,_xmouse,_ymouse);

Bei jedem Test erzeugt Flash eine orangene Kurve, die vom linken Screeenrand bis zur Maus reicht.

Wie in der vorhergehenden Übung erzeugen wir zunächst einen übergeordneten Behälter, um alle gezeichneten Objekte darin aufzunehmen, definieren eine Tiefenvariable und weisen einer Variablen o einen leeren MovieClip zu. Da später alle Kurven unabhängig voneinander ausgeblendet werden sollen, werden sie jeweils in einem eigenen, leeren MovieClip gezeichnet. Danach folgt die Definition der Linieneigenschaften. Anders als vorher setzen wir den Zeichenstift vertikal auf die y-Position der Maus und horizontal auf 0, so daß die Kurve am linken Bühnenrand beginnen kann. Das Kurvenende wird durch die Mausposition vorgegeben. Die Krümmung legen wir willkürlich mit einem x- und y-Wert fest.

In dieser Form ist der Code noch recht unpraktisch, denn wir wollen ja bei jeder Mausbewegung eine Kurve zeichnen. Das erreichen wir nach dem gleichen Prinzip wie in der vorhergehenden Übung.

  1. Ändern Sie den bestehenden Code (Fettdruck):

this.createEmptyMovieClip("z", 1);
z.vTiefe = 1;
z.zeichnen = function() {
   var o = this.createEmptyMovieClip("k"+this.vTiefe, this.vTiefe);
   o.lineStyle(2, 0xffaa00, 100);
   o.moveTo(0, _ymouse);
   o.curveTo(100, 100, _xmouse, _ymouse);
};
z.onMouseMove = z.zeichnen;

Der eigentliche Zeichnenvorgang wird in eine Funktion gepackt, die wir bei jeder Mausbewegung aufrufen. Wenn Sie testen, zeichnet Flash kontinuierlich eine Kurve.

Bilder

Wenn Sie die Maus jedoch in die Nähe des linken Randes bewegen, werden Sie einen unangenehmen Effekt beobachten können: der Scheitelpunkt der Kurve ragt nun rechts über die aktuelle Mausposition hinaus, so, als kämpfe die Kurve gegen starken Seitenwind an.

Bilder

Der Grund liegt in der festen Definition des Scheitelpunkts, den wir unabhängig von der Mausposition mit 100, 100 definiert haben. Um es genauer zu formulieren: diese Zahlen legen die Position eines Punktes fest, in dessen Richtung sich die Kurve neigt (ausführlicher dazu im unter Vorkenntnisse erwähnten Tutorial). Wenn wir diesen Wert in Abhängigkeit des Abstands vom linken Rand zur Maus errechnen, wird er ansprechender dargestellt.

  1. Ändern Sie die Berechnung der x-Position des Scheitelpunkts in der curveTo-Methode (Fettdruck):

o.curveTo(_xmouse/2, 100, _xmouse, _ymouse);

Horizontal ergibt sich damit eine dynamische Position abhängig von der x-Position der Maus. Wir ermitteln zunächst den Abstand zwischen der Maus und der Position von o, also des für die Kurve erstellten leeren MovieClips, und dividieren ihn durch 2. Da o immer auf dem Koordinatenursprung der Hauptzeitleiste eingefügt wird, entspricht der gesuchte Abstand praktischerweise einfach der _xmouse. Mit der Division durch 2 sorgen wir dafür, daß der Scheitelpunkt in der Mitte der Entfernung Bühnenrand - _xmouse gesetzt wird. Wird der Divisor erhöht, verschiebt sich der Scheitelpunkt weiter nach links, während eine Reduktion zu einer Verschiebung nach rechts führt. Mit einer ähnlichen Division lässt sich auch die vertikale Ausrichtung der Kurve errechnen.

  1. Ändern Sie die Berechnung der y-Position des Scheitelpunkts in der curveTo-Methode (Fettdruck):

o.curveTo(_xmouse/2, Stage.height/2, _xmouse, _ymouse);

Wenn Sie testen, richtet sich die y-Position des Scheitelpunkts exakt an der vertikalen Mitte des Screens aus. Befindet sich die Maus an dieser Stelle, stimmen die übergebene y-Position des Anfassers und die y-Position der Maus überein. Aus der Kurve entsteht so eine Gerade. Je weiter sich die Maus von dieser Mitte entfernt, desto stärker wird die Krümmung. Da der Anfasser vertikal mittig angeordnet wird, krümmt sich die Kurve bei einer Mausbewegung in der unteren Bildhälfte nach oben, bei einer Bewegung in der oberen Bildhälfte dagegen nach unten.

Das Zeichnen einer zweiten Kurve zum rechten Rand erfolgt auf die gleiche Art. Lediglich die x-Position des Anfassers muß anders errechnet werden.

  1. Fügen Sie nach dem curveTo folgendes ein:

o = this.createEmptyMovieClip("k"+this.vTiefe, this.vTiefe);
o.lineStyle(2, 0xffaa00, 100);
o.moveTo(_xmouse,_ymouse);
var xAdd = (Stage.width-_xmouse)/2;
o.curveTo(_xmouse+xAdd, Stage.height/2, Stage.width, _ymouse);

Damit auch wirklich alle Kurven zu sehen sind, muß z.vTiefe inkrementiert werden - ansonsten steht nur die 1 zur Verfügung, d.h., jede bestehende Kurve wird von einer neu erzeugten Kurve überschrieben.

  1. Ergänzen Sie nach jedem curveTo, also insgesamt zweimal :

this.vTiefe++;

Ihr komplettes Script müsste jetzt so aussehen:

Bilder

Wenn Sie nun die Früchte Ihrer Arbeit begutachten, erhalten Sie zur Belohnung rechts und links von der Maus eine Kurve. Für die x-Position des Anfassers der rechten Kurve ermitteln wir zunächst die halbe Strecke zwischen _xmouse und rechtem Bühnenrand. Dieser Wert wird dann einfach zur aktuellen _xmouse addiert. Alles übrige bleibt gleich wie bei der ersten Kurve.

Da vTiefe ohne Begrenzung inkrementiert wird, bleiben allerdings bereits gezeichnete Kurven auf dem Screen erhalten, so daß der nervöse Finger schnell alles zukleistert.

  1. Fügen Sie innerhalb der Funktionsdefinition nach dem letzten Inkrementieren von vTiefe folgendes ein:

if(this.vTiefe >= 100){
   this.vTiefe = 1;
}

Beim erneuten Testen werden irgendwann Kurven verschwinden und durch neue ersetzt. Flash zeichnet maximal 100 Kurven. Steigt vTiefe darüber, wird die Variable zurück auf 1 gesetzt, so daß der nächste Zeichnenvorgang diejenige Kurve überschreibt, die sich bisher auf der Tiefe 1 befand. Sie können natürlich gerne auch mit einem anderen Grenzwert arbeiten.

Interessanter sieht der Effekt aus, wenn die Kurven sanft ausblenden anstelle einfach hart gelöscht zu werden. Auch hier können wir uns an der vorhergehenden Übung mit den Blättern orientieren.

  1. Fügen Sie nach der Erstellung von z, aber vor der Funktionsdefinition von z.zeichnen ein:

z.aKurven = [];

Ein leeres Array wird eingerichtet, um alle Kurven aufzunehmen, die sich auf der Bühne befinden.

  1. Fügen Sie innerhalb der Funktion z.zeichnen nach jedem z.createEmptyMovieClip folgendes ein:

this.aKurven.push(o);

Sobald eine neue Kurve erzeugt wird, erfassen wir sie im Array aKurven. Jetzt ist es einfach möglich, allen Kurven ein gemeinsames Verhalten wie beispielsweise das Ausblenden zuzuweisen.

  1. Nach dem Ende der Funktionsdefinition von z.zeichnen und vor der Zuweisung des mouseMove-Ereignisses definieren Sie diese Methode:

z.alphas = function(){
   for(var i = 0; i < this.aKurven.length; i++){
      if(this.aKurven[i]._alpha > 0){
         this.aKurven[i]._alpha -= 5;
      }else{
         this.aKurven[i].removeMovieClip();
         this.aKurven.splice(i,1);
      }
   }
}

Die for-Schleife greift auf alle Elemente des Arrays aKurven zu und kontrolliert, ob die Deckkraft des aktuell ermittelten Elements größer 0 ist. Falls ja, dann ist diese Kurve noch sichtbar und ihre Deckkraft wird um den Wert 5 reduziert. Findet sich dagegen ein Element, dessen Deckkraft nicht größer 0 ist, dann sorgt der else-Fall dafür, daß es von der Bühne und anschließend aus dem Array gelöscht wird.

  1. Fügen Sie nach dem mouseMove-Ereignis ein enterFrame-Ereignis ein:

z.onEnterFrame = z.alphas;

In jedem enterFrame wird die Methode alphas aufgerufen, die für das Ausblenden der Kurven sorgt.

Das bisherige Skript sieht jetzt so aus:

Bilder

Zum Schluß sind noch einige Aufräumarbeiten - sprich: Optimierungen - nötig. Zumindest sollte das Script bezüglich des Kurvenzeichnens vereinfacht werden. Denn wenn wir uns die Funktion z.zeichnen anschauen, dann sehen wir (hoffentlich), daß zweimal nahezu identischer Code, von der Initialisierung der Variablen o bis zur Inkrementierung von vTiefe, ausgeführt wird. Die betreffenden Anweisungen lassen sich in eine einzige Funktion auslagern, die dann mit Hilfe von Parametern die benötigten Werte wie etwa verschiedene Startpositionen der Kurven erhält.

  1. Fügen Sie vor z.zeichnen eine neue Funktionsdefinition ein:

z.kurven = function(pXStart,pYStart,pXScheitel,pyScheitel,pxPos,pYPos) {
   var o = this.createEmptyMovieClip("k"+this.vTiefe, this.vTiefe);
   this.aKurven.push(o);
   o.lineStyle(2, 0xffaa00, 100);
   o.moveTo(pXStart, pYStart);
   o.curveTo(pXScheitel, pyScheitel, pxPos, pYPos);
   this.vTiefe++;
   if (this.vTiefe>=100) {
      this.vTiefe = 1;
   }
};

Die neue Methode enthält alle Schritte, die notwendig sind, um eine einzige Kurve einzufügen. Da jedoch die Startposition des Zeichenstifts, die Endposition der Kurve und ihr Scheitelpunkt jeweils verschieden sind, können sie nicht direkt in die Funktion geschrieben werden, sondern müssen mit Hilfe der diversen Parameter von pXStart bis pYPos übergeben werden.

  1. Ändern Sie z.zeichnen wie folgt (Fettdruck):

z.zeichnen = function() {
   this.kurven(0, _ymouse, _xmouse/2, Stage.height/2, _xmouse, _ymouse);
   var xAdd = (Stage.width-_xmouse)/2;
   this.kurven(_xmouse, _ymouse, _xmouse+xAdd, Stage.height/2, Stage.width, _ymouse);

};

Die Methode z.zeichnen enthält nicht mehr unmittelbar die Befehle zum Zeichnen der Kurven, sondern ruft jeweils zweimal z.kurven auf und übergibt dabei die benötigten Werte für die linke und für die rechte Kurve. Die Werte werden natürlich auf die gleiche Art ermittelt wie in unserer ursprünglichen Methode z.zeichnen. Durch das Auslager des Zeichnen-Vorgangs ersparen wir uns jedoch Tipparbeit, der Code wird übersichtlicher und leichter pflegbar.

Zur Kontrolle hier nochmal der gesamte Code:

Bilder


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 22.05.2012 - 22:27

Vielen Dank für das gut erklärte Tutorial!

Portrait von Ferret
  • 14.11.2009 - 09:39

Super erklärt, da muss man´s ja verstehen;-)

Portrait von Priscilla23
  • 22.10.2009 - 13:23

Auch ein klasse Tutorial! Für einen Nicht-Programmierer sind die Sachen mit dem Array und dem sanften Ausblenden ganz schön schwer, aber ich hab mich trotzdem durchgefitzt :) Habe Lust auf mehr!

Portrait von MelZu
  • 22.10.2008 - 13:16

sehr gut erklärt! danke

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 18.05.2008 - 19:19

klasse tut! vielen dank

Portrait von kostya_83
  • 02.05.2008 - 23:58

Super nützlich - Danke !

Portrait von emi

emi

  • 06.04.2008 - 13:37

hervorragend erklärt:)
danke:))

Portrait von kleinerMaler
  • 26.01.2008 - 20:08

Ob wohl für mich als Neuer scheint er ganz schön schwer zu sein, aber da ich gerne knifflige Dinge angehen werde ich ihn mal versuchen

Portrait von i-borg
  • 08.09.2007 - 16:55

Habe mir gerade den Workshop runtergeladen und werde mich gleich an die Arbeit setzen. Du hast Dir viel Mühe gemacht alles genau zu beschreiben! Suoer! Mehr davon! :)

Portrait von sono23
  • 20.11.2006 - 20:42

hey, ich wusste gar nicht, dass AS so viel Spaß macht!!
Freu mich schon auf neue Sachen von dir!! Die Blätter sind echt toll!

Portrait von trohe
  • 19.09.2006 - 10:19

Dieser Workshop ist einfach einmalig. Habe selten erlebt das Code so detailliert und vor allem verständlich erklärt wird. Kann nur hoffen das wir bezüglich Flash noch einiges von dir zu sehen bekommen.

x
×
×