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.



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.02.2009 - 15:45

super tutorial!
toll erklärt und funktioniert sofort und man versteht alles total leicht :)

Portrait von elmo2k
  • 06.11.2008 - 09:43

Optimal!
Vielen Dank!
Kann man immer mal gebrauchen :)

Portrait von MelZu
  • 30.10.2008 - 08:15

Toll erklärt. Vielen Dank

Portrait von doedel_ei
  • 14.08.2008 - 09:05

Der Workshop selbst ist einfach nachzuvollziehen. Leider funktioniert es bei mir nicht wie angegeben. Der MovieClip wird prinzipiell darüber gespiegelt und nicht darunter und ich erhalte immer die Fehlermeldung: "Die Klasse 'Matrix' konnte nicht geladen werden." Ich benutze Flash MX 2004 Prof. Gibt da vielleicht Unterschiede zu den späteren Versionen?
Finde das Tutorial gut, da ich die sonst immer via Grafik gemacht habe.

Portrait von umucl
  • 01.08.2008 - 10:01

Ich ziehe meinen Hut vor Ehrfurcht.
Aber ganz ehrlich: wie soll man denn auf so etwas alleine kommen?
Ist man da nicht schneller, wenn man das "grafisch" macht?
Und: wo oder wie kann man das Programmieren lernen, ohne gleich ein Informatikstudium absolvieren zu müssen?

Portrait von kleeaar
  • 12.08.2008 - 20:04

klar kann man das auch mit Grafiken lösen,
aber dann kann man diese Spiegelungen nicht dynamisch erzeugen...
ein kleines Trostpflaster: ich habe mit flash nur selber beigebracht... ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.07.2008 - 12:55

Sehr informativ!!! Richtig klasse...

Portrait von Germanboy4u
Portrait von LesPaul1
  • 23.06.2008 - 20:04

boa wirklich ein spitze tut muss ich sagen das kann man schön verwenden echt super...

*LG

Portrait von sddede
  • 12.06.2008 - 04:07

toll aber ich komm mit dem programm net klar evtl auf fehlendes interresse

aber tolles foto ;)

Portrait von kernel
  • 11.06.2008 - 10:49

Super schönes Ding! Klasse!

Portrait von meccenandy
  • 11.06.2008 - 07:01

Schönes turorial, findet bestimmt demnächst eine anwendung.

Portrait von waer
  • 10.06.2008 - 12:46

Tolles Tutorial, da hab ich auch noch was gelernt ;)

x
×
×