Anzeige
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 Reproass
  • 07.01.2016 - 13:32

Veraltet, nicht ausreichend erklärt, Ausgangspunkt fehlt, für Anfänger zu unverständlich und nicht zu empfehlen.
Siehe Mister_D von 2009

Portrait von mediaweb2000
  • 01.02.2010 - 14:27

super erklärt, wunderschöner Effekt, Danke danke

Portrait von Zork
  • 14.01.2010 - 10:34

Hallo,

ich habe einige probleme mit diesem Tutorial.
In Schritt 2: Wieso muss noch einmal ein MC generiert werden?
Verstehe ich dass richtig? In der Hauptebene den Kreis ziehen, in einen MC wandeln, dann reingehen in den MC und dann nochmal den gleichen Krei in einen neuen MC wandeln und dann dort wieder hineingehen??? Um den Motion Tween zu machen etc???

In Schritt 4: Der Alpha Wert lässt sich nur generell auf die Ebene anwenden, somit ist der Alpha Wert für den Kreis in Frame 1 genauso 0 wie in Frame 20..?

Schritt 5: Den eben bearbeiteten MC mit dem Kreis..also den Kreis MC in dem Kreis MC sozusagen oder wie....wo wir den Alpha wert erstellt haben etc..richtig?


schritt 9: WO sollen wir den aktionscript reinladen? In dem ersten Frame von der Maske, von dem Wavepad oder vom Bild?
Ich habe ja schon super viel actionscript auf meiner Startseite..dieses script zerschießt mir alle anderen Animationen....

schritt 14: ich kann kein action script in die Frames schreiben, habe dort ja schon meinen Motion Tween erstellt..sehr undurchsichtig beschrieben..

schritt 15: hier genau das gleiche..wegen Motion Tween kann ich in den letzten Frame nichts reinschreiben...

Fazit: Kann es sein , dass man hier einiges anders machen muss , wenn man Action Script 3 benutzt?

Ich finde den effekt wirklich toll, aber wie beschrieben, komm ich da kein Stück weiter..bin zwar auch noch ein ziemlicher Anfänger , aber dieses Tutorial bereitet mir ganz schön Kopfschmerzen, es währe schön , wenn mir hier jemand helfen könnte...falls jemand sich dazu bereiterklären würde, kann ich demjenigen auch meine .fla Datei schicken um mir damit weiterzuhelfen..

Vielen Dank!

Mark

Portrait von Litti
  • 30.10.2009 - 19:40

wunderschöner Effekt, Danke

Portrait von youaredead
  • 21.10.2009 - 22:56

echt gut erklärt und sieht super aus danke

Portrait von robertbit
  • 05.10.2009 - 11:31

Sehr anspruchsvolles Tut. Weiter so.

Portrait von yoka86
  • 25.08.2009 - 16:17

thx für das tutorial. hat mir sehr weitergeholfen.
schöner effekt :)

Portrait von videom
  • 18.08.2009 - 11:41

Super Effekt!!! Aber den Workshop dazu kapiere ich leider nicht :-(

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.07.2009 - 15:52

schön geschrieben, zwar etwas komplexer aber passt schon.... ;)

gibt ne möglichkeit die bewegung dauerhaft laufen zu lassen und am besten auch ohne maus bewegung darauf?

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.05.2009 - 00:32

super effect! bitte mehr davon.

Portrait von DX1
DX1
  • 14.05.2009 - 10:20

Habs probiert! aber ich bin wohl zu doof dafür!

Steige da nicht Durch! ;)
Trotzdem Volle Punktzahl!

Portrait von Satag
  • 11.05.2009 - 18:35

sehr interessant gemacht und ein guter effekt!!!

Portrait von edi82
  • 07.05.2009 - 15:52

Der Effekt ist spitze!

Portrait von Ballerman23
  • 07.05.2009 - 10:51

komisch, wenn ich mit der mouse über das bild fahre ist immer son weisser schweif, ansonsten schöner effect

Portrait von scuba76
  • 07.05.2009 - 10:42

super efffekt. aber wo bekomme ich das wasserbild her?

Portrait von r0bin1995
  • 05.05.2009 - 14:04

Der Effekt ist Hammer

Portrait von Alona227
  • 04.05.2009 - 15:17

Super Tutorial, ich werde es auf jeden Fall versuchen... Der Effekt ist Wahnsinn!!!!!!!!!!!!!!!!

Portrait von waer
  • 03.05.2009 - 21:19

Hey mein Flashfreund! Ich hab zwar lange nichts mehr in Flash gemacht aber sowas wollte ich schon immer mal wissen! Danke für dieses tolle Tutorial! Ich werde mir das die Tage mal genau angucken und versuchen nachzubauen^^ 5 Sterne

Portrait von Mister_D
  • 03.05.2009 - 20:03

Dieses Tutorial ist so dermaßen schlecht erklärt, man weiss eigentlich gar nicht so recht was man hier machen soll. Sollte man vielleicht nochmal überholen.
Aber zumindest der Effekt ist wirklich schön.

Portrait von frantic
  • 03.05.2009 - 16:07

sind diese weißen blöcke die da manchmal entstehen, wenn man den curser rüber gleiten lässt standartfehler oder liegts an mir:)?

x
×
×