Antworten auf deine Fragen:
Neues Thema erstellen

Suche bestimmtes Script

Foto-Delight

kleines Helferlein

AW: Suche bestimmtes Script

Also soviel kann ich dir schon mal sagen:
Es gibt es. Habs selber schon gesehen. Den Link hab ich auch gespeichert. Nur leider am falschen PC.
Ist ein JavaScript, soviel ich mir erinner
 

h_seldon

Aktives Mitglied

AW: Suche bestimmtes Script

Hallo,

habe mir das Beispiel von flashden eben angeschaut; eine mögliche, vereinfachte Lösung könnte ungefähr so ausehen:

1. xml-Datei namens infos.xml:
PHP:
<?xml version="1.0" encoding="utf-8"?>
<slideshow pfad="picts/" dateityp=".jpg" basisname="grafiken" anzahl="4">
</slideshow>

2. Flash-Datei mit Bildskript Frame 1:
PHP:
//------------------ vars ------------------
var mBilder:MovieClip, mBild:MovieClip;
var aBilder:Array = [];
var nAnzahl:Number;
var sBildName:String;
var sPfad:String;
var sDateiTyp:String;
var sInfoDatei:String = "infos.xml";
var nFertig:Number = 0;
var nOffsetPos:Number = 20;
var nOffsetWinkel:Number = 10;
var nTempo:Number = 0.5;
var nMinDist:Number = 1;
var xmlSlideshow:XML;
//------------------ functions ------------------
//xml-Datei mit benötigten Infos zu den Bildern laden
function init() {
	mBilder = this.createEmptyMovieClip("behBilder", this.getNextHighestDepth());
	xmlSlideshow = new XML();
	xmlSlideshow.ignoreWhite = true;
	xmlSlideshow.load(sInfoDatei);
	xmlSlideshow.onLoad = function(erfolg) {
//falls erfolgreich geladen, Variablen mit dort gespeicherten Werten füllen
		if (erfolg) {
			sPfad = xmlSlideshow.firstChild.attributes.pfad;
			sBildName = xmlSlideshow.firstChild.attributes.basisname;
			sDateiTyp = xmlSlideshow.firstChild.attributes.dateityp;
			nAnzahl = Number(xmlSlideshow.firstChild.attributes.anzahl);
//externe Bilder laden
			einfuegen();
//ldevorgang kontrollieren
			mBilder.onEnterFrame = ladeKontrolle;
		} else {
			trace("sorry, habe daten verschlampt");
		}
	};
}
//erstellt pro extern zu ladendem Bild einen leren MovieClip in mBilder,
//das als übergeordneter Behälter verwendet wird
function einfuegen() {
	for (var i:Number = 1; i<=nAnzahl; i++) {
		mBild = mBilder.createEmptyMovieClip("behBild"+i, i);
//um später einfach die Reihenfolge der Bilder ändern zu können,
//speichern wir eine Referenz in einem Array
		aBilder.push(mBild);
		laden(sPfad+sBildName+i+sDateiTyp,mBild);
	}
}
function laden(pWas:String, pWo:MovieClip) {
	pWo.loadMovie(pWas);
}
//kontrolliert, ob alle Bilder geladen wurden
//ist notwendig, um die Bilder positionieren und mit Funktionalität versehen zu können
function ladeKontrolle() {
	var nGeladen:Number;
	for (var i:Number = aBilder.length-1; i>=0; i--) {
		nGeladen = aBilder[i].getBytesLoaded();
		if (nGeladen>10 && nGeladen == aBilder[i].getBytesTotal()) {
			nFertig++;
			aBilder[i]._x = Stage.width/2-aBilder[i]._width/2+nZufall(nOffsetPos);
			aBilder[i]._y = Stage.height/2-aBilder[i]._height/2+nZufall(nOffsetPos);
			aBilder[i].onPress = bildKlick;
//da wir nur das oberste Bild per Klick bewegen wollen,
//müssen zunächst alle Klicks deaktiviert werden
			aBilder[i].enabled = false;
//in der hier gewählten Lösung notwendig,
//um in der späteren Animation die gewünschte Bewegungsrichtung zu erhalten
			aBilder[i].bewRechts = false;
//horizontales Ziel beim Klicken, zwei sind möglich:
//Pos irgendwo am rechten Rand und ursprüngliche Pos in der Bühnenmitte
//aufgrund der hier gewählten Reihenfolge können wir nachher mit Hilfe
//von bewRechts sehr einfach das gerade benötigte Ziel aus dem Array auslesen
			aBilder[i].zielPos = [aBilder[i]._x, Stage.width-aBilder[i]._width];
			aBilder[i]._rotation = nZufall(nOffsetWinkel);
//Bug: extern geladene Bitmaps werden bei einer Drehung ohne Aliasing angezeigt
//daher hier explizit Aliasing zugewiesen
			aBilder[i].forceSmoothing = true;
		}
	}
//wenn alle Bilder geladen,
//wird der Mausklick des obersten zugelassen
	if (nFertig == nAnzahl) {
		aBilder[aBilder.length-1].enabled = true;
		delete this.onEnterFrame;
	}
}
//gibt Zufallswert mit Zahlen zwischen -pMinMax und pMinMax zurück
//niedrigster und höchster Wert halb so wahrscheinlich wie die übrigen,
//aber hier ohne Bedeutung
function nZufall(pMinMax:Number):Number {
	return Math.round(Math.random()*(2*pMinMax))-pMinMax;
}
//Klick auf ein Bild
//deaktiviert einen Mausklick
//setzt Var zum Anzeigen der Bewegung nach rechts auf wahr
//ruft Bewegungsfunktion auf
function bildKlick() {
	this.enabled = false;
	this.bewRechts = true;
	bewegen(this);
}
//selbstredend, wozu das da ist
function bewegen(pWer:MovieClip, pZiel:Number) {
	pWer.onEnterFrame = function() {
//berechnet Entfernung aktuelle BildPos - ZielPos
//ist Ziel rechts: positiver Wert
//ist Ziel links: negativer Wert
		var nDistX:Number = this.zielPos[Number(this.bewRechts)]-this._x;
//Bild wird um einen Bruchteil der Entfernung bewegt
		this._x += nDistX*nTempo;
//kontrolliert, ob die Entfernung unter einen bestimmten Wert sinkt
//da negative Zahlen automatisch unterhalb des hier verwendeten Werts liegen,
//müssen wir den vorzeichenlosen Entfernungswert verwenden
		if (Math.abs(nDistX)<=nMinDist) {
//setzt das Bild auf die Zielpos
			this._x = this.zielPos[Number(this.bewRechts)];
//dreht die BewegungsVar um,
//so dass eine Bewegung nach links erfolgen kann
			this.bewRechts = !this.bewRechts;
//beim Erreichen eines Ziels müssen zwei Fälle unterschieden werden:
//entweder kommt die Grafik von links und möchte nun wieder nach Hause
			if (this.bewRechts == false) {
//dann setzen wir sie auf die unterste Tiefe
//diese ergibt sich aus der Tiefe des bisher am unteren Bildstapelende (was für eine Bezeichnung!)
//befindlichen Bildes - 1
				var nNeueTiefe:Number = aBilder[0].getDepth()-1;
				this.swapDepths(nNeueTiefe);
//und wir verschieben das letzte und damit oberste Bild
//im Bilderarray auf die erste und damit unterste Position
				aBilder.splice(0,0,aBilder.pop());
//oder (gehört zum entweder 2 km weiter oben) das Bild kommt von rechts
//und hat damit die komplette Ani abgeschlossen
			} else {
//dann wird das jetzt oberste Bild klickbar gemacht
//und das für die Bewegung verantwortliche onEnterFrame gelöscht
				aBilder[aBilder.length-1].enabled = true;
				delete this.onEnterFrame;
			}
		}
	};
}
//------------------ start ------------------
init();

3. Ordner picts mit Bildern namens grafiken1.jpg bis grafiken4.jpg

Das Beispiel von flashden ist nicht fehlerfrei (meins sicher auch nicht, aber es kostet zumindest nix): während der Animation nach rechts bzw. zurück nach links lässt sich ein weiterer Klick sowohl auf den Bilderstapel wie auf das gerade animierte Bild ausführen, wodurch die Bewegung innehält (bzw. das animierte Bild herumzappelt).

4. Ergänzungen und Optimierungen:
- Schnickschnack wie Einblenden und/oder von klein auf groß skalieren
- MovieClipLoader anstatt der hier verwendeten veralteten onEnterFrame-Methode
- Bei der Bewegung nach rechts zusätzlich Zufallsdrehung (wie bei flashden)
- Weitere Vars in die xml-Datei (Wert von nTempo etc.)
- Hintergrund für jedes einzelne Bild (z.B. per MovieClip-Zeichnungsmethoden)
- Tween-Klasse für die Animation des angeklickten Bildes anstelle des onEnterFrame
- und 100 andere Dinge

Hoffe, das gibt eine Idee, wie man so etwas umsetzen kann

Viel Spass
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben