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 dann 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 rumspielen.
Dynamische Galerie mit Wabbereffekt
- Autor:
- Wanderratte
- Arbeitsmaterial:
- download
- Schwierigkeit:
Vorbereitung:
Als Erstes brauchen wir einen Unterordner mit dem Namen: bilder1. Wobei Ihr den Namen auch frei wählen könnt, Ihr müsst nur die Variable in dem Script entsprechend anpassen.
1
Nachdem Abschluss der Vorbereitungen wird ein Flashfilm mit der Breite von 320 px 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 Euren Film. Als Erstes werden die Variablen deklariert. Hier gehe ich nicht näher auf jede einzelne Variable ein.
Deklaration der Variablen
/*******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*********************/
2
Diese Funktion ist für den Wabbereffekt beim Starten bzw. beim rollOver/Out der Thumbnails zuständig. Beim Aufruf dieser Funktion müssen zwei Werte übergeben werden, zum einen, welches Objekt wabbern soll, und zum anderen, ob es sich vergrößern oder verkleinern soll. Woher die Werte kommen, wird im späteren Script erklärt.
Funktion für den Wabbereffekt
/******* 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;
};
}
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.
Funktion Faden
function faden(obj, wert) {
Nach dem Aufruf der Funktion wird eine onEnterFramefunktion auf dem Container erstellt.
onEnterFrame() Function
container.onEnterFrame = function() {
ist der Inhalt der Variable Wert == true, wird der Alphakanal des Containers bei jedem Durchlauf verringert.
Alpha verringern
if (wert) {
this._alpha -= aGesch;
Sobald Alpha kleiner bzw. gleich wie 1 ist, wird der Inhalt der Variable wert auf false gesetzt, danach wird in dem Container das neue Bild geladen.
Neues Bild laden
if (this._alpha<=1) {
wert = false;
container.bild.loadMovie(obj, 1);
}
}
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.
3
Elsezweig
else {
this._alpha += aGesch;
if (this._alpha>=99) {
delete this.onEnterFrame;
}
}
};
}
Beim Aufruf dieser Funktion wird nur der Wert von der Laufvariable i übergeben.
Ladefunktion
function lade(i) {
Hier wird der Instanzname der einzelnen Thumbs zusammengesetzt, was ein bisschen Tipparbeit erspart. Damit sich die Thumbs reihenweise untereinander ausrichten, braucht man ein wenig 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.
Instanzname
obj = "thumbs"+i;
if (i%nReihe == 0) {
--rZaehler;
}
4
Erstellt einen neuen MovieClip für die Thumbbilder und ordnet sie einer Ebene zu.
Erstellen einen MovieClips
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.
Verschachteln der MovieClips
this[obj].createEmptyMovieClip("thumbs", 1);
Sobald der zweite MC erstellt wurde, wird hier der Bildname zusammengesetzt und das Bild geladen.
actionscript
this[obj].thumbs.loadMovie(ordner+"/pic"+i+".jpg");
Hier werden dem MC drei Variablen zugewiesen, wobei sX den Wert Null bekommt, damit der Wabbereffekt richtig funktioniert. Der Wert i enthält die Bildnummer, damit das Script später weiß, welches Bild beim Klicken in den Container geladen werden soll, und bei der dritten Variable wird die Reihennummer übergeben.
Zuweisung der Inhalte
this[obj].sX = 0;
this[obj].i = i;
this[obj].reihe = rZaehler;
Hier wird auf dem neuen ThumbMc wieder eine 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.
actionscript
this[obj].onEnterFrame = function() {
Wie oben erwähnt wurde, wird dieses Script solange durchlaufen, bis ein Teil des Bildes geladen ist. Damit wir das gewährleisten können, benutzen wir einen einfachen Preloader.
getBytesTotal
this.bytes_gesamt = this.thumbs.getBytesTotal();
this.bytes_geladen = this.thumbs.getBytesLoaded();
this.prozent = int(this.thumbs.getBytesLoaded()*100/this.thumbs.getBytesTotal());
Sobald der Wert prozent gleich 100 ist, können wir mit der weiteren Verarbeitung des Mcs anfangen.
Ladekontrolle
if (this.thumbs.getBytesLoaded()>2000 && this.prozent>=100) {
5
Als Erstes können wir die onEnterFrame Funktion löschen.
actionscript
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 ,der Instanzname des MCs und die Reihennummer übergeben. Wer wissen will, was this beinhaltet, sollte an dieser Stelle trace(this); hinzufügen und dann den Film testen.
actionscript
ausrichten(this.i, this, this.reihe);
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 this.thumbs._width, this.thumbs._height usw.
Hier wird dem MC eine feste Größe übergeben, 50*50 px (siehe Deklaration der Variablen).
actionscript
with (this.thumbs) {
_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.
mittig Ausrichten
_x -= _width/2;
_y -= _height/2;
}
Hier vergrössert man den MC auf 120%
Vergrössern
this._yscale = 120;
this._xscale = 120;
6
Jetzt wird zum ersten Mal die Funktion für den Wabbereffekt aufgerufen und auf 100 verkleinert.
Funktiosaufruf für den Wabbereffekt
effekt(this, 100);
Ab hier kommen die Buttonzuweisungen, bei onRelease wird die Funktion zum Laden und Faden der großen Bilder aufgerufen.
Buttonzuweisung mit Funktionsaufruf
this.onRelease = function() {
faden(this.file, true);
};
Bei rollOver/Out wird die Wabberfunktion aufgerufen.
actionscript
this.onRollOver = function() {
effekt(this, 120);
};
this.onRollOut = function() {
effekt(this, 100);
};
}
};
}
/********* Ende**********/
Diese Funktion ist für das Ausrichten der Thumbs zuständig.
Funktiion ausrichten
function ausrichten(i, obj, reihe) {
Ab hier ist es nur noch eine reine Berechnung. Ist der Wert i größer als der Wert nReihe, wird von i das Ergebnis nReihe* reihe abgezogen. Dadurch wird in unserem Beispiel ein Wert von 1-5 erreicht. Dieser Wert ist wichtig für das Ausrichten auf der x-Achse. Danach werden die einzelnen Positionen ausgerechnet. Die Formel sollte klar sein.
Berechnung und Positionierung
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;
}
}
7
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 des Alphaeffekts verschachteln. In dem inneren Film wird das eigentliche Bild reingeladen, während der Alphaeffekt auf dem obersten angewendet wird.
Generieren des Containers
this.createEmptyMovieClip("container", 1);
this.container.createEmptyMovieClip("bild", 1);
Positionierung des Containers und die Ladeanweisung für das erste Bild.
Positionierung des Containers
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.
actionscript
for (var z = bAnz; z>0; --z) {
lade(z);
}
/********* Ende **************/
8Fazit & Informationen
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, diverse Bücher und natürlich das Forum.
Das komplette Script und Beispieldateien könnt Ihr Euch hier downloaden, dort gibt es auch mögliche Erweiterungen.
Lob, Kritik, Anregungen und/oder Fragen zu diesem Tutorial könnt Ihr in diesem Thread Thread stellen.
Webseite: http://www.creativer.de
Um zu kommentieren musst Du eingeloggt sein.
No comments