✔ AS: Fehler in dynamischer Slideshow

S

scrotum

Erfahrenes Mitglied
Hallo zusammen

Ich habe ein Array mit den Bilderpfaden. Diese Bilden sollen dann, wenn sie geladen sind, in einer slideshow einfaden (Tween).

Mein Problem ist es jetzt, dass alle Bilder gleichzeitig eingefadet werden und nicht wie gewünscht nacheinander nach ein paar Sekunden. Und auch sonst könnte es noch Fehler im Code haben.

Ich versuchte mit einem SetIntervall die Funktion "fademc" immer nach 3 Sekunden das nächste Bild einzufaden wenn es geladen ist. Leider funktionert das nicht.

Kann mir jemand helfen?

Hier der Code:
PHP: 
import mx.transitions.Tween;
import mx.transitions.easing.*;


bilder = ["_img/image1.jpg", "_img/image2.jpg", "_img/image3.jpg"]


for (var i=0; i < bilder.length; i++){
        var clip:MovieClip = this.createEmptyMovieClip("halter" + i, (i + 1));
        clip.createEmptyMovieClip("container", 1);
        clip.container.loadMovie(bilder[i]);
        clip._alpha = 0;
        var probieren = eval("halter" + i);
        fademc(probieren, 0)
        //setInterval(fademc(probieren, 0), 3000);
        //clearInterval(Interval_id );
    }
    
        
function fademc(fadein_mc, fadeout_mc) {
        var gesamt     =     fadein_mc.getBytesTotal();
        var bereits =     fadein_mc.getBytesLoaded();
        if (bereits*100/gesamt >= 100) {
            new Tween(fadein_mc, "_alpha", Strong.easeOut, 0, 100, 3, true);
            }
    }
 
Hi,

ja, da ist einiges im Argen:
  1. es macht keinen Sinn, mahrere Intervalle in der Schleife aufzurufen - dann starten ja alle Aufrufe gleichzeitig nach drei Sekunden.

  2. Du solltest die Intervall-IDs irgendwo zwischenspeichern ("Interval_id" ist bei Dir eine Variable, die nicht existiert), um die Intervalle auch wieder löschen zu können.

  3. eval() ist veraltet - verwende einfach Array-Zugriffsoperatoren

  4. In der Funktion "fademc" wird das letzte Bild nicht ausgeblendet.

  5. Deine Überprüfung des Ladestatus macht an dieser Stelle keinen Sinn - ist das betreffende Bild noch nicht geladen, so brichst Du den Vorgang einfach ab.

  6. im Übrigen müsstest Du "fadein_mc.container.getBytesTotal()" testen, da Du die Bilder ja nicht direkt in die Halter lädst.

Probiers so:
Code: 
import mx.transitions.Tween;
import mx.transitions.easing.*;

bilder = ["bild1.jpg", "bild2.jpg", "bild3.jpg"]

var current = 0;

for (var i=0; i < bilder.length; i++){
	var clip = this.createEmptyMovieClip("halter" + i, (i + 1));
	var container = clip.createEmptyMovieClip("container", 1);
	container.loadMovie(bilder[i]);
	clip._alpha = 0;
}

var iv = 0;

nextImage();

function nextImage() {
	clearInterval(iv);
	var fadeIn = this["halter" + current];
	if (!isComplete(fadeIn["container"])) {
		iv = setInterval(this, "nextImage", 500);
	} else {
		var fadeOut = this["halter" + (current - 1)];
		fademc(fadeIn, fadeOut);
		current ++;
		if (current >= bilder.length) clearInterval(iv);
		iv = setInterval(this, "nextImage", 3000);
	}
}

function isComplete(src) {
	var cur = src.getBytesLoaded();
	var max = src.getBytesTotal();
	return (cur > 10 && max > 10) && (cur >= max);
}
		
function fademc(fadein_mc, fadeout_mc) {
	var t1 = new Tween(fadein_mc, "_alpha", Strong.easeOut, 0, 100, 3, true);
	var t2 = new Tween(fadeout_mc, "_alpha", Strong.easeOut, 100, 0, 3, true);
}

Gruß
.
 
Hallo Tobias!

Vielen Dank für deine Mühe! Ich habe den Code ausprobiert, und es funktioniert soweit! Leider verstehe ich den Code nicht komplett. Aber wenn du deinen Code noch mehr auskommentieren könntest (mit deinen Überlegungen) wäre das der Hammer :). Denn ich muss wahrscheinlcih noch ein paar Änderungen machen oder features hinzufügen und da wäre es für mich schon nützlich deinen Code auch zu verstehen, damit ich das hinzufügen der weiteren features alleine bewältigen werde... hoffentlich ;-)

Du bist King! :). Vielen Dank nochmals!

Edit: Ich habe da schon eine Frage. Was muss ich machen, um das ganze in einen Loop zu bringen. Also wenn das letzte Bild erreicht wurde, nicht einfach aufhören sondern es sollte wieder von vorne anfangen. Ich dachte ich kann einfach das einsetzen bei der Funktion nextImage():$
if (current >= bilder.length) {
clearInterval(iv);
current = 0;
}

also eifnach die current-variabel wieder auf 0 setzen. Geht leider nicht, kannst du mir nochmals helfen oder einen Tipp geben? Danke!
 
Zuletzt bearbeitet:
Hi,

hier noch mal mit Kommentaren und einer kleinen Fehlerkorrektur (Intervall darf beim letzten Bild nicht neu gestartet werden):
Code: 
import mx.transitions.Tween;
import mx.transitions.easing.*;

bilder = ["bild1.jpg", "bild2.jpg", "bild3.jpg"]

var current = 0; // Nummer des aktuellen Bildes

for (var i=0; i < bilder.length; i++){ // Alle Bilder laden
	var clip = this.createEmptyMovieClip("halter" + i, (i + 1));
	var container = clip.createEmptyMovieClip("container", 1);
	container.loadMovie(bilder[i]);
	clip._alpha = 0;
}

var iv = 0; // Intervallhandler für Dein Intervall

nextImage(); // erstes Bild aufrufen

function nextImage() { // ruft jeweils das nächste Bild auf
	clearInterval(iv); // Intervall erst mal löschen
	var fadeIn = this["halter" + current]; // Bild, das angezeigt werden soll
	if (!isComplete(fadeIn["container"])) { // Wenn das Bild noch nicht geladen ist ...
		iv = setInterval(this, "nextImage", 500); // probieren wir es in 0.5 Sekunden noch mal.
	} else { // ansonsten (Bild ist geladen) ...
		var fadeOut = this["halter" + (current - 1)]; // Bild, das ausgeblendet werden soll
		fademc(fadeIn, fadeOut); // Bilder ein- und ausfaden
		current ++; // aktuelles Bild hochzählen
		if (current >= bilder.length) {
			clearInterval(iv); // wenn letztes Bild erreicht: Intervall beenden
		} else { // ansonsten ...
			iv = setInterval(this, "nextImage", 3000); // nächstes Bild in 3 Sekunden aufrufen
		}
	}
}

function isComplete(src) { // gibt "true" zurück, wenn das jeweilige Bild komplett geladen ist
	var cur = src.getBytesLoaded();
	var max = src.getBytesTotal();
	return (cur > 10 && max > 10) && (cur >= max);
}
		
function fademc(fadein_mc, fadeout_mc) {
	var t1 = new Tween(fadein_mc, "_alpha", Strong.easeOut, 0, 100, 3, true);
	var t2 = new Tween(fadeout_mc, "_alpha", Strong.easeOut, 100, 0, 3, true);
}

Gruß
.
 
Vielen Dank!

Noch ein paar kleine Fragen:

Code: 
var fadeIn = this["halter" + current]
Code: 
var fadeOut = this["halter" + (current - 1)]
Code: 
!isComplete(fadeIn["container"])

Dies sind doch alles Arrays oder? Ich verstehe den Sinn nicht ganz. Für was steht das "this" in diesem Zusammenhang und wieso diese Arrays?

Hast du schon mein Edit gesehen, ich habe versucht, das ganze zu loopen. Also wenn das letzte Bild erreicht worden ist, soll es wieder von Anfang beginnen. Siehe Ergänzung oben.

Nochmals vielen Dank! Du hast mich einen Riesenschritt weitergebracht.
 
Hi,

statt
Code: 
var irgendwas = eval("sonstwas" + 2);
kann man auch schreiben:
Code: 
var irgendwas = this["sonstwas" + 2);
Sprich: Mit dem Array-Zugriffsoperator können alle Member eines Objekts oder einer Zeitleiste angesprochen werden.
Code: 
var foo2 = "Hallo Welt";

trace(this.foo2); // Ausgabe: "Hallo Welt";

trace(this["foo" + 2]); // Ausgabe: Hallo Welt";

Ein Looping erreichst Du, indem Du die Funktion "nextImge" so umschreibst:
Code: 
function nextImage() {
	clearInterval(iv);
	var fadeIn = this["halter" + current];
	if (!isComplete(fadeIn["container"])) {
		iv = setInterval(this, "nextImage", 500);
	} else {
		var fadeOut = (current > 0 || touched == false)? this["halter" + (current - 1)] : this["halter" + (bilder.length - 1)];
		fademc(fadeIn, fadeOut);
		current ++;
		if (current >= bilder.length) {
			current = 0;
		}
		touched = true;
		iv = setInterval(this, "nextImage", 3000);
	}
}
Dazu musst Du einmal die Variable "touched" mit dem Wert "false" auf der Zeitleiste anlegen:
Code: 
var touched = false;

Gruß
.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück