Einfache Slideshow, Bilder aus XML

[tequito]

Hallo,

ich würde gerne eine ganz simple Slideshow realisieren. Es soll ein Bild von rechts nach Links einfahren, dort 2 Sekunden stehen bleiben und dann nach links rausfahren und das nächste Bild gleich nach dem ersten reinfahren.

Die Links der Bilder sollen aus einem XML kommen.

Es soll keinerlei Interaktion möglich sein, mit Tweens könnte ich es machen, aber es soll über eine XML-datei laufen.

Wie mache ich das?

 

[Tobias Menzel]

Hi,

mit der Suchfunktion und dem Begriff "Slideshow" solltest Du schon einmal einiges finden.

Prinzipielle Vorgehensweise:

• ein Array erstellen
  
  
• XML-Datei einlesen und für jeden Knoten:
  
  
  • einen leeren MovieClip erstellen und eine Referenz darauf in Dein Array schreiben
    
    
  • Das jeweilige Bild in den entsprechenden MovieClip laden
    
    
  • den MovieClip auf eine hohe negative horizontale Position setzen
  
  
• Nun kannst Du ein Intervall setzen, welches:
  
  
  • z.B. im Abstand von drei Sekunden den jeweils nächsten Clip aus Deinem Array nimmt,
    
    
  • und eine onEnterFrame-Methoder erstellt, welche diesen Clip von links nach rechts wandern lässt (ist der MC rechts angekommen, wird die onEnterFrame-Methode entfernt)

Gruß
.

 

[tequito]

Ich bin leider Anfänger und das klingt sehr schwer. Hast du ein paar Beispiele wo ich mir anschauen kann wie das geht?

 

[Tobias Menzel]

Hi,

eigentlich erstellen wir hier keine kompletten Vorlagen, aber probiers mal mit folgendem Code in einer neuen (leeren) .fla:

var xm = new XML();
xm.ignoreWhite = true;

var img = new Array();

var current = 0;

var speed = 10;

xm.onLoad = function() {
	parse(this.childNodes);
}

xm.load("simpleslide.xml");

function parse(obj) {
	for (var i=0; i<obj.length; i++) {
		img[i] = this.createEmptyMovieClip("img" + i, i);
		img[i].pic = img[i].createEmptyMovieClip("pic", 1);
		img[i]._x = -5000;
		img[i].pic.loadMovie(obj[i].attributes.src);
		img[i].onEnterFrame = function() {
			if (this.pic._width > 0 && this.pic._height > 0) {
				delete this.onEnterFrame;
				nextLoaded();
			}
		}
	}
}

function nextLoaded() {
	current ++;
	if (current >= img.length) {
		current = 0;
		nextImg();
	}
}

function nextImg() {
	img[current].go();
	current ++;
	if (current > img.length - 1) current = 0;
}

MovieClip.prototype.go = function() {
	this._x = -this._width;
	this._y = Stage.height / 2 - this._height / 2;
	clearInterval(this.iv);
	this.iv = 0;
	this.slideTo(Stage.width / 2 - this._width / 2, 1);
}

MovieClip.prototype.hold = function() {
	clearInterval(this.iv);
	this.slideTo(Stage.width + 1, 2);
}

MovieClip.prototype.slideTo = function(dx, waitAndGo) {
	clearInterval(this.iv);
	this.onEnterFrame = function() {
		this._x += speed;
		if (this._x >= dx) {
			this._x = dx;
			delete this.onEnterFrame;
			if (waitAndGo == 1) {
				this.iv = setInterval(this, "hold", 2000);
			} else if (waitAndGo == 2) {
				nextImg();
			}
		}
	}
}

Die dazugehörige XML-Datei (simpleslide.xml) sollte in etwa so aussehen:

<img src="bild1.jpg" />
<img src="bild2.jpg" />

Informationen zu den verwendeten Methoden/Grundlagen bekommst Du, wenn Du die entsprechenden Begriffe (XML, childNodes, setInterval, prototype, onEnterFrame, createEmptyMovieClip) in unserer Suchfunktion verwendest und/oder in der Flash-Referenz nachschlägst.

Gruß
.