Vorwort:
Die Idee für diese Galerie stammt von Christian Dyadio, Fachbuchautor und
Betreiber des Forums:
www.flashtalk.at
Es gibt auf der Seite schon eine Galerie in der Art, nur ist sie
mittlerweile in die Jahre gekommen. Durch eine Frage zu dieser Galerie und
mit der Genehmigung vom Christian habe ich mich entschlossen, die Galerie
noch dynamischer zu gestalten und neu zu programmieren und ein kleines
Tutorial darüber zu schreiben.
Vorbereitung:
Als Erstes brauchen wir einen Unterordner mit dem Namen: bilder1. Wobei
Ihr den Namen auch frei wählen könnt, Ihr müsst die Variable in dem Script
dann nur entsprechend anpassen.
In diesen Ordner kommen dann die Grafiken, mit den Namen pic1 bis picX,
wobei die Bilder durchnummeriert werden müssen. X ist dann auch Eure
Bilderanzahl, die Ihr in dem Script angeben müsst. Die Werte in dem Script
sind für Bilder mit der Größe 300*300 PX ausgelegt, Ihr könnt sie später
Euren Bedürfnissen anpassen und in dem Script ein bisschen mit den Werten
herumspielen.
Nachdem die Vorbereitungen abgeschlossen sind, wird ein Flashfilm mit der
Breite von 320 und der Höhe von 550 px erstellt. Auch die Maße könnte ihr
später Euren Bedürfnissen anpassen.
Das Script kommt im ersten Schlüsselbild in eurem Film.
Als Erstes werden die Variablen deklariert, hier gehe ich nicht näher auf
jede einzelne Variable ein.
PHP-Code:
/*******Deklaration der Variablen*********/
//Bilderanzahl
var bAnz = 15;
//Anzahl der Bilder, die in einer Reihe angezeigt werden sollen
var nReihe = 5;
//Berechnung die Reihenanzahl
var aReihe = Math.floor(bAnz/nReihe)
//Zaehler für die Reihen
var rZaehler = aReihe;
//Fadegeschwindigkeit
var aGesch = 5;
//Ordner aus dem die Bilder ausgelesen werden, solltet ihr einen anderen
Ordnernamen
//gewählt haben, dann müsst ihr ihn hier ändern
var ordner = "bilder1";
//Position der Thumbs, ausgelegt auf die Hoehe der Anzeigebilder von 300
PX
var yPos = 360;
var xPos = 20;
//grösse der Thumbs in PX
var tWeite = 50;
var tHoehe = 50;
//Abstand
var weite = 60;
//Bildskallierung
var skal = 10;
var wMulti = .9;
/***************Ende der Deklaration*********************/
/******* Funktionen für die Effekte *********/
Diese Funktion ist für den Wabereffekt beim Starten, bzw.: beim
rollOver/Out der Thumbnails zuständig. Beim Aufruf dieser Funktion müssen
zwei Werte übergeben werden, einmal welches Objekt wabbern soll und ob es
sich vergrößern oder verkleinern soll.
Woher die Werte kommen, wird im späteren Script erklärt.
PHP-Code:
function effekt(obj, wX) {
obj.onEnterFrame = function() {
this.sX =
Math.ceil(Number(this.sX*wMulti)+Number((wX-this._xscale)*wMulti));
this._xscale += this.sX;
this._yscale += this.sX;
};
}
Diese Funktion ist für den Alphatween des großen Bildes zuständig. Da wir
ja wissen, wie der MC heißt (container, wird im späteren Verlauf erstellt)
wird hier der Name des Bildes, welches nachgeladen werden soll, in der
Variablen obj übergeben, die Variable wert wird beim Aufruf der Funktion
auf true gesetzt.
PHP-Code:
function faden(obj, wert) {
Nach dem Aufruf der Funktion, wird eine onEnterFramefunktion auf dem
Container erstellt.
PHP-Code:
container.onEnterFrame = function() {
ist der Inhalt der Variable Wert == true wird der Alphakanal des
Containers bei jedem durchlauf verringert.
PHP-Code:
if (wert) {
this._alpha -= aGesch;
Sobald Alpha kleiner bzw gleich wie 1 ist, wird der Inhalt der Varibale
wert auf false gesetzt, danach wird in dem Container das neue Bild
geladen.
PHP-Code:
if (this._alpha<=1) {
wert = false;
container.bild.loadMovie(obj, 1);
//faden("nichts", wert);
}
} else {
Sobald der Inhalt der Variable wert == false ist, wird dieser Elsezweig
angesprochen und solange durchlaufen bis der Alphawert größer gleich 99
ist, danach wird diese Funktion gelöscht.
PHP-Code:
this._alpha += aGesch;
if (this._alpha>=99) {
delete this.onEnterFrame;
}
}
};
}
/*********** Ende **********************/
/**********Funktionen für die Ausrichtung und Laden der Thumbs ******/
Beim Aufruf dieser Funktion wird nur der Wert von der Laufvariable i
übergeben
PHP-Code:
function lade(i) {
hier wird der Instanzname der einzelnen Thumbs zusammengesetzt, diese Art
erspart ein bisschen Tipparbeit
PHP-Code:
obj = "thumbs"+i;
Erstellt einen neuen MovieClip für die Thumbbilder und ordnet sie einer
Ebene zu.
PHP-Code:
this.createEmptyMovieClip(obj, i+10);
Hier wird in dem obigen erstellten MC ein neuer MC erstellt, in dem später
das eigentliche Bild geladen wird, durch diese Verschachtelung können wir
auf dem oben erstellten MC den Wabereffekt anwenden.
PHP-Code:
this[obj].createEmptyMovieClip("thumbs", 1);
Sobald der zweite MC erstellt wurde, wird hier der Bildname
zusammengesetzt und das Bild geladen.
PHP-Code:
this[obj].thumbs.loadMovie(ordner+"/pic"+i+".jpg");
Hier werden dem MC zwei Variablen zugewiesen, wobei sX den Wert Null
bekommt, damit der Wabbereffekt richtig funktioniert.
PHP-Code:
this[obj].sX = 0;
Der Wert i enthält die Bildnummer, damit das Script später weiß welches
Bild beim klicken in den Container geladen werden soll.
PHP-Code:
this[obj].i = i;
Hier wird auf dem neuen ThumbMc wieder ein onEnterFramefunktion erstellt,
die solange läuft, bis das Script richtig abgearbeitet wurde. Der
Hintergrund hierbei ist, dass man erst einige Werte verändern kann, wenn
wenigstens ein Teil vom Bild geladen ist.
PHP-Code:
this[obj].onEnterFrame = function() {
Wie oben erwähnt wurde, wird dieses Script solange durchlaufen, bis ein
Teil vom Bild geladen ist.
Das machen wir hier mit dem Befehl getBytesTotal(), sobald der Wert größer
als Null ist, können wir mit der weiteren Verarbeitung des Mcs anfangen.
PHP-Code:
if (this.thumbs.getBytesTotal()>0) {
Als erstes können wir die onEnterFrame Funktion löschen
PHP-Code:
delete this.onEnterFrame;
Mit dem Aufruf der Funktion ausrichten, werden die einzelne Thumbs
ausgerichtet, genaue Erklärung gibt es für die Funktion weiter unten. Beim
Aufruf der Funktion wird der Inhalt von i und der Instanzname des MCs
übergeben. Wer wissen will, was this beinhaltet, sollte an dieser Stelle
trace(this); hinzufügen und dann den Film testen.
PHP-Code:
ausrichten(this.i, this);
this.file = ordner+"/pic"+this.i+".jpg";
Durch die with Anweisung erspart man sich wieder etwas Tipparbeit, da man
somit nicht immer den Instanznamen vor die einzelnen Befehle schreiben
muss. Für Flash steht hier
PHP-Code:
this.thumbs._width, this.thumbs._height usw.
with (this.thumbs) {
Hier wird dem MC eine feste Größe übergeben, 50*50 PX (siehe Deklaration
der Variablen)
PHP-Code:
_width = tWeite;
_height = tHoehe;
Durch das Teilen der Breite und Höhe durch zwei und das Verschieben auf
der x/y Position um den errechneten Wert wird der MC mittig ausgerichtet.
Dadurch erreichen wir ein gleichmäßiges Wabbern nach allen Seiten.
PHP-Code:
_x -= _width/2;
_y -= _height/2;
}
Hier vergrößern man den MC auf 120%
PHP-Code:
this._yscale = 120;
this._xscale = 120;
Jetzt wird zum ersten Mal die Funktion für den Wabbereffekt aufgerufen und
auf 100 verkleinert.
PHP-Code:
effekt(this, 100);
Ab hier kommen die Buttonzuweisung. Bei onRelease wird die Funktion zum
Laden und Faden der großen Bilder aufgerufen.
PHP-Code:
this.onRelease = function() {
faden(this.file, true);
};
Bei rollOver/Out wird die Wabberfunktion aufgerufen.
PHP-Code:
this.onRollOver = function() {
effekt(this, 120);
};
this.onRollOut = function() {
effekt(this, 100);
};
}
};
}
Diese Funktion ist für das Ausrichten der Thumbs zuständig.
PHP-Code:
function ausrichten(i, obj) {
Damit sich die Thumbs reihenweise untereinander ausrichten, braucht man
ein bisschen Mathematik. Dafür verwenden wir Modulo. Man erinnert sich an
die Schule, wie war das noch mal? Modulo gibt den Restwert aus. 5/5 Rest =
0 bei 7/5 würde der Rest 2 betragen. Was bedeutet das für uns? Wir haben
der Variable nReihe den Wert 5 zugewiesen, dadurch erreichen wir, dass in
einer Reihe nur 5 Bilder angezeigt werden und ggf. eine neue Reihe
begonnen wird. Sobald also der Restwert 0 beträgt, wird von der oben
berechneten Variable rZaehler immer 1 abgezogen.
PHP-Code:
if (i%nReihe == 0) {
--rZaehler;
}
Ab hier ist es nur noch eine reine Berechnung. Ist der Wert i grösser als
der Wert nReihe,
PHP-Code:
if (i>nReihe) {
wird von i das Ergebnis nReihe* rZaehler abgezogen. Dadurch wird in
unserem Beispiel ein Wert von 1-5 erreicht. Dieser Wert ist wichtig für
das Ausrichten auf der x Achse.
PHP-Code:
ber = i-nReihe*rZaehler;
Hier werden die einzelnen Positionen ausgerechnet. Die Formel sollte klar
sein
PHP-Code:
obj._x = -xPos+weite*ber;
obj._y = yPos+weite*rZaehler;
} else {
obj._x = -xPos+weite*i;
obj._y = yPos;
}
}
/********* Ende**********/
/********Start für den Ablauf***********/
So, nun kommen wir zu dem Anlasser des ganzen Scriptes.
Als Erstes werden die zwei MC für die großen Bilder erstellt, auch hier
müssen wir wegen dem Alphaeffekt verschachteln. In dem inneren Film wird
das eigentliche Bild reingeladen, während der Alphaeffekt auf dem obersten
angewendet wird.
PHP-Code:
this.createEmptyMovieClip("container", 1);
this.container.createEmptyMovieClip("bild", 1);
Positionierung des Containers und die Ladeanweisung für das erste Bild.
PHP-Code:
with (container) {
_x = 10;
_y = 10;
bild.loadMovie(ordner+"/pic"+1+".jpg");
}
Durch diese Forschleife wird das ganze Script aufgerufen. Bei jedem
Durchlauf wird die Funktion lade mit einem neuen Wert aufgerufen.
PHP-Code:
for (var z = 1; z<=bAnz; ++z) {
lade(z);
}
/********* Ende **************/
Tja, das war eigentlich schon alles. Sicher kann ich in einem Tutorial
nicht auf alle Befehle genau eingehen und es nur kurz umschreiben. Aber
dafür gibt es ja die Flashhilfe und diverse Bücher und natürlich das Forum
Für die Freunde der Copy/Paste Methode, hier noch einmal das komplette
Script
PHP-Code:
PHP-Code:
/*******Deklaration der Variablen*********/
//Bilderanzahl
var bAnz = 15;
//Anzahl der Bilder, die in einer Reihe angezeigt werden sollen
var nReihe = 5;
//Berechnung die Reihenanzahl
var aReihe = Math.floor(bAnz/nReihe)
//Zaehler für die Reihen
var rZaehler = aReihe;
//Fadegeschwindigkeit
var aGesch = 5;
//Ordner aus dem die Bilder ausgelesen werden, solltet ihr einen anderen
Ordnernamen
//gewählt haben, dann müsst ihr ihn hier ändern
var ordner = "bilder1";
//Position der Thumbs, ausgelegt auf die Hoehe der Anzeigebilder von 300
PX
var yPos = 360;
var xPos = 20;
//grösse der Thumbs in PX
var tWeite = 50;
var tHoehe = 50;
//Abstand
var weite = 60;
//Bildskallierung
var skal = 10;
var wMulti = .9;
/**************+Ende der Deklaration*********************/
/******* Funktionen für die Effekte *********/
function effekt(obj, wX) {
obj.onEnterFrame = function() {
this.sX =
Math.ceil(Number(this.sX*wMulti)+Number((wX-this._xscale)*wMulti));
this._xscale += this.sX;
this._yscale += this.sX;
};
}
function faden(obj, wert) {
container.onEnterFrame = function() {
if (wert) {
this._alpha -= aGesch;
if (this._alpha<=1) {
wert = false;
container.bild.loadMovie(obj, 1);
//faden("nichts", wert);
}
} else {
this._alpha += aGesch;
if (this._alpha>=99) {
delete this.onEnterFrame;
}
}
};
}
/*********** Ende **********************/
/**********Funktionen für die Ausrichtung, der Thumbs ******/
function ausrichten(i, obj) {
if (i%nReihe == 0) {
--rZaehler;
}
if (i>nReihe) {
ber = i-nReihe*rZaehler;
obj._x = -xPos+weite*ber;
obj._y = yPos+weite*rZaehler;
} else {
obj._x = -xPos+weite*i;
obj._y = yPos;
}
}
function lade(i) {
obj = "thumbs"+i;
this.createEmptyMovieClip(obj, i+10);
this[obj].createEmptyMovieClip("thumbs", 1);
this[obj].thumbs.loadMovie(ordner+"/pic"+i+".jpg");
this[obj].sX = 0;
this[obj].i = i;
this[obj].onEnterFrame = function() {
if (this.thumbs.getBytesTotal()>0) {
delete this.onEnterFrame;
ausrichten(this.i, this);
this.file = ordner+"/pic"+this.i+".jpg";
with (this.thumbs) {
_width = tWeite;
_height = tHoehe;
_x -= _width/2;
_y -= _height/2;
}
this._yscale = 120;
this._xscale = 120;
effekt(this, 100);
this.onRelease = function() {
faden(this.file, true);
};
this.onRollOver = function() {
effekt(this, 120);
};
this.onRollOut = function() {
effekt(this, 100);
};
}
};
}
/********* Ende**********/
/********Start für den Ablauf***********/
this.createEmptyMovieClip("container", 1);
this.container.createEmptyMovieClip("bild", 1);
with (container) {
_x = 10;
_y = 10;
bild.loadMovie(ordner+"/pic"+1+".jpg");
}
for (var z = 1; z<=bAnz; ++z) {
lade(z);
}
/********* Ende **************/
Im Anhang findet ihr die fla [mx 2004] und die dazugehörigen Testbilder.
Das Script funktioniert auch unter Flash MX.
Und wie immer, ich beantworte hier zu keine Fragen via PN oder Mail, dafür
ist dieser
Thread da.
![[Ab MX]Galerie mit Wabbereffekt](http://www.traum-projekt.com/forum/iconimages/sammlung-actionscript-1-und-2/ab-mx-galerie-mit-wabbereffekt_ltr.gif)
