-
Realistisches Wasser mit Actionscript
29.12.2009 in Adobe Flash von FlashSoft
- Zum Downloadmanager hinzufügen
- PDF-Datei herunterladen
- Arbeitsmaterialien herunterladen
- Kommentare ansehen (17)
- Kategorie: Adobe Flash
- Erstellt mit Programmversion: ab Flash 8
- Dateigröße (PDF): 1.4 MB
- Dateigröße (Arbeitsmaterial): 88 KB
- Bisherige Zugriffe: 3385
Lieber Gast …
… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.
Vorteile der kostenlosen Mitgliedschaft
Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:
- PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
- Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
- Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
- Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
- Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
- Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
Reinschnuppern als Gast
Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.
- Download: Spiegelungen 2
- Download: Vektor-Logo (Eidechse)
- Download: Sepia-Vintage-Effekt-Aktion
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Tutorial: Linien zum Glühen bringen
- Tutorial: Ballons aus einer Schublade
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
- Videotraining: Lichtscheinkontureneffekt mit Animation
Das Punktesystem
Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.
Kommentare
Tutorial empfehlen
Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)
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.
-
Reklame
-
-
- Farbe ins Gesicht
- Hallo erstmal ne
- [CONTEST] CSS-Contests: Worauf habt ihr Lust?
- Wacom Bamboo zu verkaufen!
- InDesign/CS5 unsichtbare €-Zeichen ersetzen
- Fotobüchern
- Umrandung um Textfeld
- Kanten glätten bei meinem Bild oder Vektor?
- After Effects Ram-Vorschau - Problem mit Cache (aktualisert nicht)
- blender render stürzt ständig ab
- jQuery - Größe von einem Frameset ändern?
- [CS5] "Löschen-Mitteilung"
- Zerissenes Foto
- Biete Programmierung Ihres PSD-Designs
- Fehler beim Platzieren von Bildern
- Zeilenumbruch CS4
- Gestaltung eines Logos
- Kaufberatung Drucker
- Dynamische Auswahlliste: Name und ID übergeben
- Adobe Encore - Probleme Schaltflächen Unterbild
-
-
Aktuelles Commag
Anzeige
-
Anzeige


Jutta_Kruse
19.01.2011 - 20:27
Ein hilfreiches Script für Anfänger, Danke.
TheSohalt
16.01.2011 - 01:36
Hübscher Effekt! Echt ne nette Spielerrei.
suslik87
25.05.2010 - 11:11
super effekt. mal schauen, ob ich da mal gebrauchen kann
Irona
15.04.2010 - 01:28
super effekt. probiere ich gleich aus! Danke
bladersmen
05.01.2010 - 23:15
Ziemlich lassig. Danke
Fintschi1977
05.01.2010 - 14:32
Super arbeit. Mu´ß ich unbedingt auch mal probieren.
dunkelgruen
05.01.2010 - 11:28
Super! Danke! Hanb noch nie mit ActionScrip gearbeitet. Aber das muss ich mal probieren.
Der FireFox hängt sich nicht mehr auf, wenn man das Addon Adblock mal kurz deaktiviert. Jedenfalls ist das bei mir so.
bassist
05.01.2010 - 09:27
schönes Ergebnis, nur leider vermisse ich wie all zu oft: ActionScript version bitte Angeben. Mir war zwar eigentl. klar dass das mit AS2.0 nur geht, wegen
"(Version: ab Flash 8) " [glaube da gabs noch kein AS3.0]. Zum AS-Code hätte ich mir ein bisschen mehr Kommentare dazu gewünscht, was manche Sachen machen, auch wenn das meiste Selbsterklärend ist. Aber letztendlich zählt hier das Ergebnis und wer das Script braucht, kann es so ja jederzeit auf ein anderes Projekt anwenden. 5*
dersigner
05.01.2010 - 09:13
sehr originelles tut..
ein wenig stört der gepixelte rand auf der linken seite im wasserbild, auch ist die spiegelung des landmotivs nicht immer praktisch - in meinem beispiel habe ich den horizontnahen wasserbereich ausgespart, dann siehts ganz echt aus...
beim versuch, einen wasserhintergrund in einem anderen movie laufen zu lassen funzt die wasseranimation leider nicht...
Rembremerding
03.01.2010 - 03:18
Schönes Tut; leider hängt sich auch bei mir des öfteren der Browser (Firefox) auf.
rustykowski
02.01.2010 - 12:43
beim Erstellen einer neuen Datei fragt man sich natürlich, ob als AS2 oder AS3-Datei. ActionScript 2 ist hier richtig.
Schön wäre, wenn man den Filter so konfigurieren könnte, dass er die Wellen perspektivisch im Vordergrund größer und im Hintergrund kleiner macht.
@Szpur: Wieso soll das nicht CS3-kompatibel sein? Du tust dem armen FlashSoft unrecht! Außerdem wäre das allein wohl kein Grund für eine Abwertung.
Szpur
01.01.2010 - 11:12
Für CS3ler völlig unbrauchbar. wird sofort von der Festplatte gelöscht. Leider!
Szpur
FlashSoft
30.12.2009 - 17:23
Hätte wohl ein eigenes Bild nehmen können, leider hatte ich zur Zeit keins zur Hand. Die anderen sind nicht kopiert oder sogar geklaut.
mitstreiter
30.12.2009 - 14:21
wär cool gewesen wenn du wenigstens nen eigenes bild genommen hättest xDD und nicht einfach das ganze tutorial kopiert hättest.
asestar
30.12.2009 - 09:17
http://www.pixelhivedesign.com/tutorials/Realistic+Flash+Water+Effect/
williamo
30.12.2009 - 06:26
Sehr cool.
Aber bei rechtsklick auf die swf im Tut hängt der Browser ( Firefox ).
aidan
29.12.2009 - 09:02
oh wow schnell und geil O0
sehr schönes tut