Anzeige
Tutorialbeschreibung

Spiegelungen mit ActionScript erstellen

Spiegelungen mit ActionScript erstellen

In diesem Tutorial werdet ihr lernen wie man per Actionscript Spiegelungen zu einem auf der Bühne befindlichen MovieClip erstellen kann.

 




Schritt 1:

Zunächst benötigen wir ein Bild auf unserer Bühne. Dieses könnt ihr unter unter Datei>>Importiern>>In Bühne importieren (Strg+R) importieren.

Bilder

Schritt 2:
Nun müsst ihr die Grafik in einen Movieclip umwandeln.

Die macht ihr indem Ihr das Bild durch klicken anwählt und anschließend F8 drückt.

Im erscheinenden Dialogfenster wählt ihr dann Movieclip aus und nennt ihn z.b bilder_container.

Bilder

Schritt 3:
Nun müsst ihr eurem Movieclip noch einen Instanz nahmen verpassen.

Diesen nennt ihr einfach bild!

Bilder

 

Schritt 4:
Damit wir mit dem programmieren beginnen können müsst ihr in der Zeitleiste den ersten Frame durch anklicken auswählen und das Aktionenfenster öffnen.

Bilder

Schritt 5:
Nun kommen wir zum programmierbaren Teil des Tutorials.
Die folgenden Codes werden alle in das Aktionenfenster des ersten frames geschrieben.

Den Vorhin erstellten Movieclip bild wollen wir zunächst duplizieren.

Dies machen wir mit dem folgenden Befehl:
Code:
 
bild.duplicateMovieClip("spiegeln", this.getNextHighestDepth());

Nun wurde also ein unser Movieclip Bild dupliziert und als spiegeln benannt.

Schritt 6:
Damit unser neuer Movieclip eine spiegelung darstellt muss dieser natürlich gespiegelt werden.

Dies geschieht so:
Code:
var scale = 1; // ein Faktor der die Spiegelung beeinflusst: stauchen< 1 >strecken

spiegeln._yscale = -100*scale; //negative skalierung
 
Schritt 7:

Da nun unser Bild durch das Spiegeln an der linken unteren Bildecke, und nicht wie normal an der oberen Bildecke die Positionierungskoordinaten ansetzt, müssen wir es nach unten verschieben.

Wir müssen es einmal um die eigene Höhe und um die des Quellbildes nach unten verschieben. An dieser Stelle muss man dann auch gleich wählen ob die Spiegelung direkt am bild ansetzen soll oder etwas platz dazwischen sein soll. Unser Code sieht so dafür aus.

Code:

var abstand = 0; //die Variable die den Abstand angibt

spiegeln._y = spiegeln._y+spiegeln._height+bild._height+abstand; //platzierung

Nun sollte es so aussehen:
Bilder
 
Schritt 8:

Um uns etwas Schreibarbeit zu ersparen, erstellen wir nun Variablen mit sehr kurzen Namen, die unsere Koordinaten sowie Breite und Höhe unserer Spiegelung enthalten.

 
Code:

var pos_x = spiegeln._x;

var pos_y = spiegeln._y-spiegeln._height;

var h_px = spiegeln._height;

var w_px = spiegeln._width;

 
Schritt 9:

Jetzt geht´s endlich ans Eingemachte: wir erstellen mit der Funktion createEmptyMovieClip

einen neue MC der später unsere Maske enthalten soll.

Der Code sieht hierfür wie folg aus:

Code:

this.createEmptyMovieClip("container", this.getNextHighestDepth());

Es entsteht also ein neuer MC auf der obersten Ebene mit dem Namen container

bei dem wir dann mit folgenden Code die Position festlegen:

Code:

container._x = pos_x;

container._y = pos_y;

Schritt 10:

In diesen container werden wir jetzt eine GradientBox erstellen, die uns später als Maske dienen wird.

Dazu dient folgender Code:

Code:

import flash.geom.*;

var fillType:String = "linear"; //es entsteht ein gerader Fade

var colors:Array = [0x000000, 0x000000]; // Die Fadefarben. In unserem Fall natürlich schwarz.


var alphas:Array = [0, 70];// Anfangs und Endtransparenz des Fades


var ratios:Array = [0, 255];// Werte zwischen 0 und 255 eingeben um den Fade zu verschieben… siehe unten.


var matrix:Matrix = new Matrix();


matrix.createGradientBox(w_px, h_px, -1.5574, 0, 0);// die GradientBox wird mit unseren festgelegten Maßen erstellt; createGradientBox(breite, höhe, drehung im bogenmaß daher tan(1), skalierung, skalierung);

var spreadMethod:String = "pad"; // Es entsteht ein einfacher Fade, ohne doppelte Ringe o.ä


Hier seht ihr drei von vielen Einstellmöglichkeiten, die es für  var ratios:Array = [0, 255]; gibt, um die Funktion zu veranschaulichen.

Bilder

 
Schritt 11:

Jetzt müssen wir noch unsere GradientBox füllen.

Dazu zeichnen wir erst ein Rechteck, wobei uns unsere in Schritt 8 erstellten Variablen einige Schreibarbeit abnehmen und das ganze übersichtlicher machen.

Code:

container.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);

container.moveTo(0, 0);

container.lineTo(0, h_px);

container.lineTo(w_px, h_px);

container.lineTo(w_px, 0);

container.lineTo(0, 0);

container.endFill();

 
Schritt 12:

Momentan wird uns der Fade noch als ganz normaler Fade über unserem Bild angezeigt.

Bilder

 

Doch das ändert sich, wenn wir den nun unser gespiegeltes Bild mit unserem Fade maskieren.

Dazu benötigen wir folgenden kurzen Code:

Code:
spiegeln.setMask(container);


Schritt 13:

Zu guter letzt benötigen wir noch diesen Befehl, damit Flash die Bilder und den Fade als Bitmap zwischenspeichert, was erst die Maskierung ermöglicht.

Code:

container.cacheAsBitmap = true;

spiegeln.cacheAsBitmap = true;

Jetzt sieht euer gesamter Code so aus.

 
Code:
//Bild kopieren
bild.duplicateMovieClip("spiegeln", this.getNextHighestDepth());
//Größe der Spiegelung
var scale = 1;
//Abstand zwischen bild und Spiegelung
var abstand = 0;
spiegeln._yscale = -100*scale;
spiegeln._y = spiegeln._y+spiegeln._height+bild._height+abstand;
var pos_x = spiegeln._x;
var pos_y = spiegeln._y-spiegeln._height;
var h_px = spiegeln._height;
var w_px = spiegeln._width;
//MC für den Fade
this.createEmptyMovieClip("container", this.getNextHighestDepth());
//Positionierung
container._x = pos_x;
container._y = pos_y;
//Fade Erstellen
import flash.geom.*;
var fillType:String = "linear";//es entsteht ein gerader Fade
var colors:Array = [0x000000, 0x000000];// Die Fadefarben. In unserem Fall natürlich schwarz.
var alphas:Array = [0, 70];// Anfangs und Endtransparenz des Fades
var ratios:Array = [0, 255];// Werte zwischen 0 und 255 eingeben um den Fade zu verschieben… siehe unten.
var matrix:Matrix = new Matrix();
matrix.createGradientBox(w_px, h_px, -1.5574, 0, 0);// die GradientBox wird mit unseren festgelegten Maßen erstellt; createGradientBox(breite, höhe, drehung im bogenmaß daher tan(1), skalierung, skalierung);
var spreadMethod:String = "pad";// Es entsteht ein einfacher Fade, ohne doppelte Ringe o.ä
container.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
container.moveTo(0, 0);
container.lineTo(0, h_px);
container.lineTo(w_px, h_px);
container.lineTo(w_px, 0);
container.lineTo(0, 0);
container.endFill();
//Maskieren
spiegeln.setMask(container);
container.cacheAsBitmap = true;
spiegeln.cacheAsBitmap = true;


 

Wenn ihr alle Schritte durchgeführt und keine Fehler gemacht habt sollte euer Ergebnis wie folg aussehen.
Ihr habt nun eine schöne Spiegelung erstellt, die man sogar beim Einbinden in Websites transparent nutzen kann.



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 20.08.2010 - 21:47

Vielen Dank! Super.
LG Susan

Portrait von nellynelly
  • 14.02.2010 - 20:13

danke, schaut toll aus! probiere ich morgen aus.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 22.01.2010 - 19:33

Ich brauch dringen eure Hilfe, bei mir spiegelt sich nichts... Woran könnte das liegen? das ich ein anderes bild hab? Hat jemand das Tutorial schon benutzt?

Portrait von CO_SA
  • 16.01.2010 - 13:18

Toller Effekt! Hat zwar nicht gleich geklappt, hab es aber jetzt! Danke!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 06.11.2009 - 19:07

jetzt habe ich es auch hinbekommen. vielen dank

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 05.11.2009 - 21:45

also jetzt habe ich das richtige eingestellt (AS2) und der befehl funkioniert auch wenn ich ihn überprüfe (haken) aber wo muss ich klicken, damit dieser auch ausgeführt wird und kann ich auch alle befehle die oben genannt sind untereinander einfügen oder soll ich da immerwieder das aktionenfenster neu öffnen? danke für die aufklärung/hilfe

Portrait von kleeaar
  • 06.11.2009 - 14:43

du schreibst alle Befehle in der selben Reihenfolge untereinander, in das stets geöffnete Aktionenfenster.
Zum Anschauen des Film dann einfach STRG+Enter drücken...

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 05.11.2009 - 17:46

Wo sehe ich denn was für eine Version ich habe? Stell mal bitte einen Link rein, wo ich AS2 als Demo runterladen kann. Danke

Portrait von kleeaar
  • 05.11.2009 - 17:51

Du verstehst mich falsch: AS2 ist die Scriptsprache (Actionscript 2.0) die kannst du eigentlich in jeder Version größer als flash8 nutzen.
Jetzt gibt es aber seit CS3 Actionscript 3.0 das aber völlig anders aufgebaut ist...
Daher funktioniert dieses Tutorial nur mit AS2.

Grüße

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.11.2009 - 18:28

ich da mal eine frage zu
wenn ich diese befehle (oben genannt) unter "aktionen" einfüge und ausführen lasse kommt folgende fehlermeldung:
**Fehler** Szene=Szene 1, Ebene=Ebene 2, Bild=1:Zeile 1: Anweisung muss innerhalb einer on/onClipEvent-Prozedur vorliegen
bild.duplicateMovieClip("spiegeln", this.getNextHighestDepth());

Anzahl der ActionScript-Fehler: 1 Gemeldete Fehler: 1

Nun ist meine frage was ich anders machen soll, damit das funktioniert.

Portrait von kleeaar
  • 05.11.2009 - 14:15

hmm...
nutzt du auch wirklich AS2? in AS3 funktioniert das ganze nämlich nicht...

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 22.01.2010 - 19:37

ich hab genau das gleiche Problem!! Brauch dringend eure Hilfe..

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.11.2009 - 14:27

Vielen Dank für diesen Effekt. Wird Spaß machen ihn zu Verwenden.

Portrait von tequi
  • 29.09.2009 - 13:48

super tutorial :-) ... weiter so

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.08.2009 - 12:13

das tutorial hat mir wirklich weitergeholfen. Danke!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.08.2009 - 09:13

tolles tutorial ... danke

Portrait von williamo
  • 23.07.2009 - 19:49

Toller Effekt, den ich mal probieren werde.
Man kann halt nur dazulernen ;-)

Portrait von gm4n90
  • 22.07.2009 - 13:04

Alles schön und gut !!

Nur die Matrix Klasse?
Ruft bei mir immer fehler auf?
Weiß jemand wie ich das beheben kann? =)

Portrait von ivadesign
  • 26.06.2009 - 16:40

ich finde es super und übersichtlich. Hier sind Profis und ich bin Euch sehr dankbar!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 28.05.2009 - 14:24

Sehr informativ!!! Richtig klasse...

x
×
×