Dynamische Galerie mit Wabbereffekt

Aktuelles

Startseite
TP Wettbewerbe
Sitemap

Service

Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter

Traumquelle

Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D

Intern

TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum

TP Portal > Flash > Dynamische Galerie mit Wabbereffekt

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, 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 nur die Variable in dem Script 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 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.

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*********************/

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.

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; 
    }

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) {

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;

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;
  }
}

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 **************/

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 in diesem Thread 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.

Autor: Wanderratte

Webseite: http://www.creativer.de

Buchrezension

AJAX Hacks

Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.

[mehr]

Web Content Management mit PHP 5 und MySQL 5

Little Boxes

TYPO3 4.0 – Das Handbuch für Entwickler

ITIL kompakt und verständlich

weitere Rezensionen

TP-Partner

Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

>> INFO <<

	Startseite \| Forum \| Impressum \| nach oben \| Seite zurück