Realistisches Wasser mit Actionscript

Dieses Bild könnt Ihr Euch kopieren oder Ihr ladet die Arbeitsdatei herunter.

Das ist das Endergebnis, das wir erreichen wollen:




1. Schritt:

Wir erstellen ein neues Dokument mit der Breite und Höhe des Bildes und der Bildrate von 30 fps (bps). In meinem Beispiel 390 x 293 Pixel.

2. Schritt:

Jetzt Importieren wir unser Bild auf die Bühne: Datei -> Importieren -> In Bühne importieren (STRG+R). Ist dies getan, richten wir das Bild noch auf unserer Bühne aus, auf links und oben (siehe Bild).

3. Schritt:

Nun benennen wir unsere 1. Ebene um in „Wasser“ und erstellen eine 2. Ebene namens „Land & Himmel“. Eigentlich ist es egal, wie Ihr sie benennt, so ist es aber besser zur Veranschaulichung.

4. Schritt:

Wir gehen auf unser Bild mit Rechtsklick, in dem Menü gehen wir auf Teilen (Break Apart). Nun nehmen wir das Lassowerkzeug (L) und wählen damit alles aus, das kein Wasser ist.

5. Schritt:

Ist dies gemacht, kopieren wir es mit Bearbeiten -> Kopieren (STRG+C), gehen in unsere Ebene „Land & Himmel“ und fügen es mit Bearbeiten -> An Position einfügen (STRG+Umschalt+V) hinzu.

Es sollte dann so aussehen, wenn wir die Ebene Wasser ausblenden. Ich weiß, das es nicht professionell aus sieht; soll ja nur ein Beispiel sein.

6. Schritt:

Jetzt klicken wir in der Wasser-Ebene auf das Wasser in unserem Bild, wandeln es mit Rechtsklick, In Symbol konvertieren, um( Movieclip) und nennen es „wasser_mc“: Im Eigenschaftenfenster geben wir noch den Instanznamen ein, der "wasser_mc" heißt (bitte diesen auch so nennen, ansonsten gibt es später Probleme mit dem ActionScript).

7. Schritt:

Nun erstellen wir noch eine weitere Ebene namens „Actionscript“; sollte die zwischen den beiden schon erstellten Ebenen sein, dann verschiebt sie nach oben an die erste Stelle.

So, jetzt kommen wir zu dem Hauptteil diese Tutorials und zwar zum ActionScript.

8. Schritt:

Jetzt öffnen wir das ActionScript im 1. Schlüsselbild der Ebene „ActionScript“, Rechtsklick -> Aktionen und schreiben folgendes Script rein.


Das ActionScript:

// Import der ActionScript-Klassen

import flash.display.*;
import flash.geom.*;
import flash.filters.*;

// myBitmap = new BitmapData(BreitedeinesBildes,HöhedeinesBildes,false,0);

myBitmap = new BitmapData(390,293,false,0);
pt = new Point(0,0);
mpoint = new Point(0,0);
myDispl = new DisplacementMapFilter(myBitmap, mpoint,1,2,10,50);
wasser_mc.myList = new Array();
wasser_mc.myList.push(myDispl);
wasser_mc.filters = wasser_mc.myList;
i = 1;

this.onEnterFrame = function()
{
filterList = wasser_mc.filters;
offset = new Array();
offset[1] = new Object();

/* Hier die Intensität von  x und y ändern:  offset[1].x ändert die Schnelligkeit in der x – Richtung (Schnelligkeit der Wellen),
   offset[1].y ändert die Schnelligkeit der y – Richtung (Höhe der Wellen)*/

offset[1].x = i;
offset[1].y = i/8;

/* Hier werden unser Daten auf unser Bitmap angewendet und verändert. Für verschiedene Grafiken, könnt Ihr hier gerne mit den 
   Zahlen herumspielen*/

myBitmap.perlinNoise(45,5,3,50,true,false, 7,true,offset);
filterList.mapBitmap = myBitmap;
wasser_mc.filters = filterList;
i++;
}

Und nun nur noch mit STRG+Enter testen.



So, das war es wieder einmal von mir, bis zum nächsten Mal.