Wie funktioiert diese Gallerie

mardazad

mardazad

Erfahrenes Mitglied
Hallo,
kann mir bitte jemand erklären, wie die Portfolio-Gallerie auf soleil-noir gemacht wird? Ich meine, daß die Thumbs und deren Vergrößerung sich animiert aufbauen, obwohl das eine XML-Gallerie ist... Wenn man die Vergrößerung des Thumbs schließt, bauen sich die Thumbs wieder auf und zwar auf bspw. Seite 5 von 8, der richtigen Stelle im XML-Dok

Weiß vielleicht sogar jemand ein Tut, das in diese Richtung geht?

Danke schonmal
 
Hi,

ein komplettes Tutorial würde zu weit führen (ich mache solche Galerien in letzter Zeit häufiger, und weiß wovon ich rede ^^). Sagen kann ich Dir aber: Bei XML-basierten Galerien werden in der Regel alle Informationen einmal komplett eingelesen und stehen dann in Flash zur Verfügung. Du kannst dann also beliebig hin und her navigieren, ohne dass Du Dir irgendwelche Positionen in einer XML-Datei merken musst.

Gruß
.
 
Hi Datic,
danke für deine Antwort. Aber das hilft mir überhaupt nicht weiter...
Wie geht denn das mit Auf,- und Abbau der Thumbs und Contentbilder?

Gruß
 
Das Problem ist, dass es da ca. 1000 verschiedene Möglichkeiten gibt, von denen keine mal eben fix in einem Forumsposting erklärt werden kann.

Geht es Dir generell darum, wie man XML-basierte Galerien erstellt (dann gibts z.B. ein Beispiel auf http://www.ekto.net), oder geht es Dir speziell nur um den Aufbau und Abbau der Thumbnails? Letzteres lässt sich im einfachsten Fall mit einem Tweening erreichen (bzw. einer Kombination aus Tweenings der verschiedenen Komponenten).

Gruß
.
 
Hi Datic,
ich glaub ich bin zu blöd. Ich finde auf deiner HP nur eine Gallerie auf PHP-Basis. Und mit PHP zu arbeiten ist mir zu kompliziert. Ich versuche ja gerade mehr ins Thema XML reinzukommen...
Mir gehts vor allem um den Auf,- und Abbau der Thumbs und darum die Übergänge zwischen den Contents fliessend zu gestalten. Beispielsweise durch Überblendung von Bild und Beschreibung nach Klick auf den Thumb. Oder halt Auf,- und Abbau...

Der Grund für meine Anfrage ist, daß ich gerne Gallerien machen können will, die fliessend und harmonisch die Inhalte darstellen, statt immer harte Sprünge zu haben...
 
Hi,

Die Gallerie basiert zwar auf PHP, was das PHP-Script zurückgibt, ist allerdings eine XML-Datei. Genausogut könntest Du eine statische XML-Datei einladen (das PHP-Script hat nur den Sinn, dass es den Bilderordner ausliest, Du also die XML-Datei nicht per Hand erstellen musst).

@Übergänge: Auch da gibt es unzählige Möglichkeiten. Eine sehr einfache ist z.B. das Ein- und Ausblenden über Farb- und Alphatransformationen. Dafür verwende ich oft diesen Prototypes:
PHP: 
MovieClip.prototype.fadeTo = function(r, g, b, a, spd, callback) {
	var cl = new Color(this);
	var tr = cl.getTransform();
	this.onEnterFrame = function() {
		tr.rb += (r - tr.rb) / spd;
		tr.gb += (g - tr.gb) / spd;
		tr.bb += (b - tr.bb) / spd;
		tr.ab += (a - tr.ab) / spd;
		cl.setTransform(tr);
		if (Math.abs(r - tr.rb) < 1 && Math.abs(g - tr.gb) < 1 && Math.abs(b - tr.bb) < 1 && Math.abs(a - tr.ab) < 1) {
			tr.rb = r;
			tr.gb = g;
			tr.bb = b;
			tr.ab = a;
			cl.setTransform(tr);
			callback();
			delete this.onEnterFrame;
		}
	}
}

MovieClip.prototype.setTo = function(r, g, b, a) {
	var cl = new Color(this);
	var tr = cl.getTransform();
	tr.rb = r;
	tr.gb = g;
	tr.bb = b;
	tr.ab = a;
	cl.setTransform(tr);
}
Mit
PHP: 
meinClip.fadeTo(50, 50, 50, -255, 3);
wird der Clip "meinClip" z.B. recht schnell gleichzeitig ausgeblendet und etwas aufgehellt.

Natürlich kannst Du Dir auch ganz andere Möglichkeiten des Auf- und Abbaus überlegen, so z.B. durch Tweenings, die getrennt die Rahmen, Hintergründe und Container der Thumbnails transformieren (z.B. kleiner werden lassen oder verformen). Es ist leider schwierig, hier genaue Anleitungen zu geben, da es so viele Möglichkeiten wie Sand am Meer gibt, und das ganze doch schon die etwas höhere Schule des ActionScriptings ist.

Ich kann Dir durchaus ein Beispiel (z.B. wie in Deinem Link) machen, mit dem ein Thumbnail-MovieClip interessant ein- und ausgeblendet wird - ob ich es allerdings in weniger als 5 eng bedruckten Seiten verständlich erklären könnte, ist zweifelhaft.

Gruß
.
 
Ich kann Dir durchaus ein Beispiel (z.B. wie in Deinem Link) machen, mit dem ein Thumbnail-MovieClip interessant ein- und ausgeblendet wird
Zum Vergrößern anklicken....

Das wäre echt super. Ich setze mich auch so lange dran bis ichs gerafft habe. Die 5 Seiten müssen nicht sein, wenn du bei wichtigen Punkten ne kurze Beschreibung reinsetzt kann ich in Büchern und Flashhilfe nachschlagen und mir (hoffentlich) einen Reim drauf machen...

Gruß
 
Ich finde diese Gallerie auch sehr schön: carldekayser.com

Die Thumbs bauen sich nett auf, es wird hervorgehoben welcher gerade aktiv ist und wenn man klickt überblenden die Inhalte. Nur der Text fehlt...

Gruß
 
Hi,

ich habe Dir mal ein einfaches Beispiel fertig gemacht, bei dem die Thumbnails hauptsächlich über ein Formtweening ein- und ausgeblendet werden (zu sehen im MC "thumb_bg1).

Mit den beiden roten Buttons kannst Du alle Thumbnails ein- und ausblenden.

Bedenke: Das ist keine komplette Galerie, sondern nur ein unvollständiges Beispiel, wie man mit Thumbnails umgeht. Zudem sehen die Animationen nicht besonders schön aus - mir fehlt die Zeit, mich hier an einem Beispiel zu verkünsteln - sollten aber das Prinzip verdeutlichen.

Die verwendete XML-Datei enthält für jedes Bild einen Knoten. Zusätzlich zu den Attributen "url" und "thumb", die ich eingetragen habe, kannst Du mit den Attributen "width", "height", "size" und "descr" weitere Informationen zu den Bildern eingeben.

Gruß
.
 

Anhänge

  • example_gal.zip
    20,4 KB · Aufrufe: 53
Hi Datic,
super vielen Dank! Ich hab mir den Aufbau eben mal angesehen und denke, daß ich da schon reinkomme.

Wenn dir das recht ist, möchte ich dich bitten, daß wir im Laufe der Zeit immer mal wieder dran weiterarbeiten und ne richtige Gallerie draus machen. Peu a peu. Wahrscheinlich wäre das auch für sehr viele Nutzer hier interessant.

Erstmal werde ich mich in den nächsten Tagen in das jetzige File reinfrimeln. Dann würde mich interessieren wie man eine Statusanzeige hinkriegt...

Danke nochmal und liebe Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück