Tutorialbeschreibung

Wassereffekt in Flash mit ActionScript 2.0

Wassereffekt in Flash mit ActionScript 2.0

In diesem Tutorial werdet Ihr lernen, wie man mit Hilfe des DisplacementMapFilters einen Effekt erstellt, der den Bildschirm in eine Wasseroberfläche verwandelt, die beim Bewegen des Cursors in Bewegung (kleine Wellen) versetzt wird.


Schritt 1:
Zunächst benötigen wir einen Kreis als Grundlage für den DisplacementMapFilter.
Wir erstellen also mit Hilfe des Kreistools einen Kreis (Durchmesser ca. 40Px) mit einem schwarzen Rand von 2-3 Pixeln ohne Füllung und positionieren ihn auf den Punkt (0|0).

Bilder



Schritt 2:
Diesen konvertieren wir in einen MC mit F8 und öffnen den MC durch Doppelklick auf ihn. Dann müssen wir diesen Kreis erneut in einen MC konvertieren. Nun können wir damit beginnen, einen Bewegungstween zu erstellen.

Schritt 3:
Bei einer FPS-Rate von 25 sollten wir einen neuen (nicht leeren!) Schlüssselframe auf Bild 20 erstellen. In diesem neuen Frame vergrößern wir unseren Kreis auf die ungefähre Größe von ca. 180-200px (Durchmesser).
Nun erstellen wir einen Bewegungstween mit Rechtsklick auf das erste Schlüsselbild unter „Bewegungstween erstellen“.

Bilder



Schritt 4:
Damit die Übergänge später nicht so stark zu erkennen sind, wenden wir auf beide Kreise einen Blurfilter an.

Bilder



Dieser Filter kann nach Belieben eingestellt werden.
Ich habe diese Einstellungen vorgenommen:

kleiner Kreis:
Bilder


großer Kreis:
Bilder



Zudem setzen wir den Alphawert des zweiten (großen) Kreises auf 0 herab.

Bilder


Nun kehren wir zur vorherigen Ebene zurück.

Schritt 5:
Dem eben bearbeiteten MC mit dem Kreis geben wir den Instanznamen circle.
In dieser Ebene müssen wir nun ein transparentes Rechteck ohne Rahmen erstellen, das mindestens so groß wie unser späteres zu animierendes Bild ist. Dieses dient uns als Spacer für unser so genanntes Wavepad.
Am besten macht man diese Fläche gleich so groß wie die gesamte Bühne.
Jetzt können wir zur Hauptebene zurückkehren.

Schritt 6:
Die Ebene mit dem Kreis blenden wir nun aus und erstellen eine Neue Ebene unterhalb der Kreisebene.
Bilder


Auf dieser Ebene platzieren wir nun unser gewünschtes Bild (importieren mit STRG+R) und konvertieren dieses ebenfalls in einen MC.

Schritt 7:
Zu guter Letzt erstellen wir einen neuen Layer oberhalb der beiden anderen, in dem wir nun mit einem schwarzen Rechteck genau die Fläche unseres Bildes überdecken und die Ebene mit Rechtsklick auf die eben erstellte Ebene unter Maske in eine Ebenenmaske konvertieren.
Bilder


Dies hat den Sinn, dass nachher unsere Ringe nicht auf der gesamten Bühne sichtbar sind.

Schritt 8:
Bevor wir mit dem Programmieren anfangen können, müssen wir noch unseren beiden MCs Instanznamen vergeben.
Unserem Bild geben wir den Namen target und unserem MC, der den Kreis beinhaltet, den Namen wave. Den Alphawert unseres Wave-MCs sollte man noch auf einen Wert zwischen 5 und 10 einstellen. So wird später zusätzlich ein leichter Schatteneffekt erzeugt, da unser wave-MC oberhalb unseres Target-MCs liegt.

Schritt 9:
Jetzt können wir mit dem Scripten beginnen. Dazu öffnen wir das Programmierfenster mit F9.
Zuerst benötigen wir drei Flashklassen, die wir mit
Code:
import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;
importieren.

Schritt 10:
Der DisplacementMapFilter, der uns das Verzerren von Bildern ermöglicht, benötigt die folgenden Angaben, um völlig definiert zu werden.
Zitat:
alpha : Number
Gibt an, welcher Alphatransparenzwert für Verschiebungen außerhalb des gültigen Bereichs verwendet werden soll.
color : uint
Gibt an, welche Farbe für Verschiebungen außerhalb des gültigen Bereichs verwendet werden soll.
componentX : uint
Gibt den Farbkanal im Matrixbild an, mit dem das x-Ergebnis verschoben wird.
componentY : uint
Gibt den Farbkanal im Matrixbild an, mit dem das y-Ergebnis verschoben wird.
constructor : Object
Ein Verweis auf das Klassenobjekt oder die Konstruktorfunktion für eine angegebene Objektinstanz.
Object mapBitmap : BitmapData
Ein BitmapData-Objekt mit den Daten der Verschiebungsmatrix.
mapPoint : Point
Ein Wert mit dem Offset der linken oberen Ecke des Zielanzeigeobjekts zur linken oberen Ecke des Matrixbilds.
mode : String
Der Filtermodus.
[static] Ein Verweis auf das Prototypobjekt einer Klasse oder eines Funktionsobjekts.
Object scaleX : Number
Der Multiplikator, anhand dessen das auf der Matrixberechnung beruhende Ergebnis der x-Verschiebung skaliert wird.
scaleY : Number
Der Multiplikator, anhand dessen das auf der Matrixberechnung beruhende Ergebnis der y-Verschiebung skaliert wird.
Schritt 11:
Diese verschiedenen Variablen gilt es nun zu definieren.
Zunächst erstellen wir die Offsetvariablen. Dazu berechnen wir die Differenz der beiden Ecken zueinander
Code:
offsetX = wave._x-Target._x;
offsetY = wave._x-Target._y;
und vereinen sie zu einem mapPoint.
Code:
var mapPoint:Point = new Point(offsetX, offsetY);
Nun definieren wir die Variablen, die den Wert für den jeweiligen zu nutzenden Farbkanal tragen.
Hier sind die Werte 1 (rot),2 (grün) 4 (blau), und 8 (alpha) möglich.
Code:
var componentX:Number = 1;
var componentY:Number = 1;
Zudem ist es nötig, einen Wert anzugeben, um den das zur Verzerrung genutzte Bild skaliert werden soll. Für unseren Fall ist ein Wert zwischen 1 und 2 sinnvoll.
Code:
var scaleX:Number = 2;
var scaleY:Number = 2;
Schritt 12:
Wenn wir dies gemacht haben, müssen wir eine onEnterFrame-function erstellen.
Code:
onEnterFrame = function () {
}
In die wir dann Folgendes schreiben:
Code:
var mapBitmap:BitmapData = new BitmapData(wave._width, wave._height);
	mapBitmap.draw(wave); //es wird ein Bitmapbild aus dem momentanen MC erstellt das als Grundlage für die Verzerrung dient
	var filter:DisplacementMapFilter = new DisplacementMapFilter(mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY, "ignore");// der DisplacementMapFilter wird initialisiert
	var filterList:Array = new Array();
	filterList.push(filter);
	Target.filters = filterList;  // die Filter werden auf unseren Target-MC angewendet.
Schritt 13:
Jetzt ist unser eigentlicher Code fertig.
Allerdings fehlt noch der Teil, der unsere Ringe dupliziert und auf die Mauszeigerposition platziert.
Dazu müssen wir noch eine onMouseMove-function erstellen, die, wie der Name schon sagt, nur dann ausgeführt wird, wenn der Cursor bewegt wird.

Code:
onMouseMove = function () {
};
In diese schreiben wir nun diesen Befehl:
Code:
duplicateMovieClip(wave.circle, "circle"+_xmouse+_ymouse, wave.getNextHighestDepth());
welcher den MC circle in unserem wave-MC dupliziert, ihm den Namen circle mit den dazugehörigen Koordinaten vergibt und ihn auf die höchste Ebene setzt.

Schritt 14:
Nun haben wir hier fertig programmiert. Um weiter scripten zu können, müssen wir den wave-MC und anschließend den circle-MC öffnen.
Dort müssen wir noch dem dynamisch duplizierten MC die aktuelle Mauszeigerposition übergeben. Dazu schreiben wir in den ersten Schlüsselframe folgendes.
Code:
this._x = _root._xmouse;
this._y = _root._ymouse;
Schritt 15:
Jetzt funktioniert unser Wavepad eigentlich schon , wir haben allerdings das Problem, dass unser circle MC in einer Schleife abläuft und dass wir ständig neue MCs erstellen, diese aber nicht löschen, was irgendwann den Film zum Kollabieren bringt.
Daher wechseln wir in den letzten Frame unseres animierten Kreises und schreiben dort:
Code:
stop();
removeMovieClip(this);
welches den jeweiligen MC anhält und sogleich löscht.

Nun sind wir komplett fertig und euer Code in der Hauptzeitleiste sollte wie folgt aussehen:

Code:
import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;

offsetX = wave._x-Target._x;
offsetY = wave._x-Target._y;
var mapPoint:Point = new Point(offsetX, offsetY);
var componentX:Number = 1;
var componentY:Number = 1;
var scaleX:Number = 2;
var scaleY:Number = 2;

onEnterFrame = function () {
var mapBitmap:BitmapData = new BitmapData(wave._width, wave._height);
mapBitmap.draw(wave);
var filter:DisplacementMapFilter = new DisplacementMapFilter(mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY, "ignore");
var filterList:Array = new Array();
filterList.push(filter);
Target.filters = filterList;
};
onMouseMove = function () {
duplicateMovieClip(wave.circle, "circle"+_xmouse+_ymouse, wave.getNextHighestDepth());
};

Und hier ist noch einmal das Ergebnis:





Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von kleeaar
  • 03.05.2009 - 16:40

die weißen kästen tauchen dann manchmal auf, wenn Flash überlastet ist. das kann an vielen dingen liegen...<br>
hast du den Befehl zum Löschen des MCs gesetzt?<br>
wenn du das nicht machst, wird flash definitiv überlastet... <br>
<br>
Grüße

Portrait von chrisixus
  • 03.05.2009 - 12:32

Mir gefällt auch. Sehr interessant!!

Portrait von BigBilly
  • 03.05.2009 - 12:02

Gefällt :thumbsup:

x
×
×