BIlder vorladen für tweening klasse

[inctube]

Hey Leute,

ich habe mithilfe der tweening Klasse eine Bildergallerie erstellt und da fahren die bilder so rein. die bilder lese ich über eine for schleife aus einer xml datei ein.
funktioniert alles ganz toll, nur wenn ich es hochlade, dann fahren die bilder nicht so schön rein, sondern poppen nacheinander einfach auf.

Nun zu meiner Frage, wie kann ich das abfangen, sprich den tween erst laufen lassen, wenn alle bilder geladen sind? habs mit nem container probiert, in den ich erst alle bilder reinlade und wenn der geladen ist der den tween startet. geht aber auch nicht.

Und dann noch meine zweite frage bzgl. der tweening klasse, ich kann die vorschau immer nur einmal starten, wenn ich es ein zweites mal starte, dann geht die tweening klasse nicht mehr? hat das schon jemand gehabt?

 

[Tobias Menzel]

Hi,

habs mit nem container probiert, in den ich erst alle bilder reinlade und wenn der geladen ist der den tween startet

Das ist aber eigentlich schon der richtige Ansatz: Du lädst die Bilder alle in einen unsichtbaren Container, überprüfst den Status aller Bilder (z.B. mit getBytesLoaded() oder der _width-Eigenschaft) und lässt die Animation erst starten, wenn alles geladen ist. In einigen der Galerien, die ich im Sammelthread gepostet habe, gehe ich einen ähnlichen Weg.

Warum es bei Dir nicht funktioniert, kann ich nicht sagen, ohne Dein Script gesehen zu haben. Vielleicht postest Du die Datei einmal?

Wie dem auch sei: Hier mal ein Beispiel für eine Funktion, die eine Anzahl Bilder (die in einem Array übergeben werden) vorlädt:

function preloadImages(img:Array, callback:Function) {
    var m_ct = _root.createEmptyMovieClip("m_ct", 5000);
    m_ct._visible = false;
    var ct = new Array();
    for (var i=0; i<img.length; i++) {
    ct[i] = m_ct.createEmptyMovieClip("ct" + i, i);
    ct[i].loadMovie(img[i]);
    var done = true;
    m_ct.onEnterFrame = function() {
        done = true;
        for (var i=0; i<img.length; i++) {
            if (ct[i].getBytesLoaded() < 10 || ct[i].getBytesLoaded() < ct[i].getBytesTotal()) {
                done = false;
            }
        }
        if (done) {
            callback();
            delete this.onEnterFrame;
        }
    }
}

Die Funktion ruft die Funktion, die in "callback" übergeben wurde, auf, sobald alle Bilder vorgeladen wurden.

Gruß
.

 

[inctube]

Also die Funktion verstehe ich nicht so ganz. Ich habe meinen Code mal angehängt

this["mc"+i].sub._visible = false;


for (var i = 1; i<=_root.wieviel; i++) {
	this.attachMovie("mc1", "mc"+i, i);
	this["mc"+i].sub.loadMovie("traditional/pencil/minis/"+"img"+i+".jpg");
//Dieser Teil soll erst starten wenn alle Bilder von loadMovie geladen sind
	if (this["mc"+i].sub.getBytesTotal() == this["mc"+i].sub.getBytesLoaded()) {
		this["mc"+i].sub._visible = true;
		this["mc"+i]._x = cur_x;
		this["mc"+i]._y = cur_y;
		this["mc"+i]._xscale = 10;
		this["mc"+i]._yscale = 10;
		xW = cur_x*2+(((i+2)%3)*80);
		yW = cur_y*2*Math.ceil(i/3);
		this["mc"+i].tween("_x", xW, 2, "easeInQuint");
		this["mc"+i].tween("_y", yW, 2, "easeOutQuart");
		this["mc"+i].tween("_xscale", 100, 2, "easeOutQuart");
		this["mc"+i].tween("_yscale", 100, 2, "easeOutQuart");
		this["mc"+i].brightnessTo(60, 3, easeInBack);
		this["mc"+i].onRollOver = function() {
			this.brightnessTo(0, 1, "easeOutQuart");
		};
		this["mc"+i].onRollOut = function() {
			this.brightnessTo(60, 1, "easeOutQuart");
		};
		this["mc"+i].onRelease = function() {
			myName = this._name.substr(2, 2);
			_root.text_cont.maske_text_cont1.gotoAndPlay(2);
			_root.text_cont.maske_text_cont2.gotoAndPlay(2);
			_root.text_cont.year.text = _root.datumArray[myName-1];
			_root.text_cont.titel.text = _root.titelArray[myName-1];
			_root.text_cont.technik.text = _root.technikArray[myName-1];
			_root.text_cont.why.text = _root.whyArray[myName-1];
			_root.myLink = _root.linkArray[myName-1];
			_root.text_cont.txt.gotoAndPlay(2);
			//Große Bilder
			_parent.big.alphaTo(0, 1, "linear", 0, bildle);
			if (_root.mc_layer._currentframe == 1) {
				_root.mc_layer.gotoAndPlay(2);
			} else {
				_root.mc_layer.gotoAndStop(10);
			}
		};
	}
}

Also ich hab langsam keine Ahnung mehr an was des liegt. Mit nem Container hab ichs ja auch schon probiert und des hat au net so hingehauen.

Danke für eure Hilfe

 

[Tobias Menzel]

Hi,

nee, das wird so nicht gehen, weil Du ja kontinuierlich auf das Laden der Bilder warten musst. So wie Du es hast, wird für jedes Bild in der Schleife nur einmal getBytesLoaded() überprüft - und das ist am Anfang immer 0.

Verwende einfach meine Funktion so wie ich sie gepostet habe und gib die Funktion, in der Deine Aufbauanimation starten soll, als Callback an:

var wieviel = 12;

// Bilder in ein Array schreiben:
var images = new Array();

for (var i=0; i<wieviel; i++) {
    images.push("traditional/pencil/minis/" + "img" + (i + 1) + ".jpg";
}

function aufbauStarten() {
    // Hier Deinen Aufbau rein
}

// und dann einfach meine Funktion aufrufen:
preloadImages(images, aufbauStarten);

Gruß
.

 

[inctube]

Ist das dann so richtig?
Ich glaub net, weil des tut net, was mach ich falsch?

var wieviel = _root.wieviel;
function preloadImages(images, aufbauStarten) {
	var m_ct = _root.createEmptyMovieClip("m_ct", 5000);
	m_ct._visible = false;
	var ct = new Array();
	for (var i = 0; i<img.length; i++) {
		ct[i] = m_ct.createEmptyMovieClip("ct"+i, i);
		ct[i].loadMovie(img[i]);
		var done = true;
		m_ct.onEnterFrame = function() {
			done = true;
			for (var i = 0; i<img.length; i++) {
				if (ct[i].getBytesLoaded()<10 || ct[i].getBytesLoaded()<ct[i].getBytesTotal()) {
					done = false;
				}
			}
			if (done) {
				callback();
				delete this.onEnterFrame;
			}
		};
	}
}
// Bilder in ein Array schreiben:
var images = new Array();
for (var i = 0; i<wieviel; i++) {
	images.push("traditional/pencil/minis/"+"img"+(i+1)+".jpg");
	trace(images);
}
function aufbauStarten() {
	// Hier Deinen Aufbau rein
	for (var i = 1; i<=_root.wieviel; i++) {
		this.attachMovie("mc1", "mc"+i, i);
		this["mc"+i]._x = cur_x;
		this["mc"+i]._y = cur_y;
		this["mc"+i]._xscale = 10;
		this["mc"+i]._yscale = 10;
		xW = cur_x*2+(((i+2)%3)*80);
		yW = cur_y*2*Math.ceil(i/3);
		this["mc"+i].tween("_x", xW, 2, "easeInQuint");
		this["mc"+i].tween("_y", yW, 2, "easeOutQuart");
		this["mc"+i].tween("_xscale", 100, 2, "easeOutQuart");
		this["mc"+i].tween("_yscale", 100, 2, "easeOutQuart");
		this["mc"+i].sub.loadMovie("traditional/pencil/minis/"+"img"+i+".jpg");
		this["mc"+i].brightnessTo(60, 3, easeInBack);
		this["mc"+i].onRollOver = function() {
			this.brightnessTo(0, 1, "easeOutQuart");
		};
		this["mc"+i].onRollOut = function() {
			this.brightnessTo(60, 1, "easeOutQuart");
		};
		this["mc"+i].onRelease = function() {
			myName = this._name.substr(2, 2);
			_root.text_cont.maske_text_cont1.gotoAndPlay(2);
			_root.text_cont.maske_text_cont2.gotoAndPlay(2);
			_root.text_cont.year.text = _root.datumArray[myName-1];
			_root.text_cont.titel.text = _root.titelArray[myName-1];
			_root.text_cont.technik.text = _root.technikArray[myName-1];
			_root.text_cont.why.text = _root.whyArray[myName-1];
			_root.myLink = _root.linkArray[myName-1];
			_root.text_cont.txt.gotoAndPlay(2);
			//Große Bilder
			_parent.big.alphaTo(0, 1, "linear", 0, bildle);
			if (_root.mc_layer._currentframe == 1) {
				_root.mc_layer.gotoAndPlay(2);
			} else {
				_root.mc_layer.gotoAndStop(10);
			}
		};
	}
}
// und dann einfach meine Funktion aufrufen:
preloadImages(images, aufbauStarten);

Gruß Marco

 

[Tobias Menzel]

Hi,

nein, Du darfst an den Bezeichnern meiner Funktion nichts ändern:

function preloadImages(img, callback) {

Auch wenn Deine Funktion "aufbauStarten" heisst, und das Array "images", so werden diese Werte an die lokalen Variablen "callback" und "img" der Funktion übergeben.

Bei mir funktioniert Dein Script (mit diesen Änderungen) soweit, dass Deine Funktion aufgerufen wird (ich habe lediglich die Tweening-Klasse nicht importiert, in sofern seh ich nichts, aber das Vorladen funktioniert). Du kannst in meiner Funktion vor dem Aufruf der Callback-Funktion den Hilfscontainer noch löschen:

if (done) {
	m_ct.removeMovieClip();
	callback();
	delete this.onEnterFrame;
}

Gruß

P.S.: Bitte beachte unsere Netiquette ("net", "des"), danke.
.

 

[inctube]

Also ich hab die Sache nochmal umgebaut und jetzt sitze ich hier seit einiger Zeit und jetzt gehts immer noch nicht. Ich bin echt verzweifelt.
Ich hoffe ich nerv nicht
den code habe ich nochmal hinzugefügt.

var wieviel = 12;
// Bilder in ein Array schreiben:
var images = new Array();
for (var i = 0; i<wieviel; i++) {
	images.push("traditional/pencil/minis/"+"img"+(i+1)+".jpg");
}
function preloadImages(img, callback) {
	var m_ct = _root.createEmptyMovieClip("m_ct", 5000);
	m_ct._visible = false;
	var ct = new Array();
	for (var i = 0; i<img.length; i++) {
		ct[i] = m_ct.createEmptyMovieClip("ct"+i, i);
		ct[i].loadMovie(img[i]);
		var done = true;
		m_ct.onEnterFrame = function() {
			done = true;
			for (var i = 0; i<img.length; i++) {
				if (ct[i].getBytesLoaded()<10 || ct[i].getBytesLoaded()<ct[i].getBytesTotal()) {
					done = false;
				}
			}
			if (done) {
				m_ct.removeMovieClip();
				callback();
				delete this.onEnterFrame;
			}
		};
	}
}
function aufbauStarten() {
	for (var i = 1; i<=_root.wieviel; i++) {
		this.attachMovie("mc1", "mc"+i, i);
		this["mc"+i]._x = cur_x;
		this["mc"+i]._y = cur_y;
		this["mc"+i]._xscale = 10;
		this["mc"+i]._yscale = 10;
		xW = cur_x*2+(((i+2)%3)*80);
		yW = cur_y*2*Math.ceil(i/3);
		this["mc"+i].tween("_x", xW, 2, "easeInQuint");
		this["mc"+i].tween("_y", yW, 2, "easeOutQuart");
		this["mc"+i].tween("_xscale", 100, 2, "easeOutQuart");
		this["mc"+i].tween("_yscale", 100, 2, "easeOutQuart");
		this["mc"+i].sub.loadMovie("traditional/pencil/minis/"+"img"+i+".jpg");
		this["mc"+i].brightnessTo(60, 3, easeInBack);
		this["mc"+i].onRollOver = function() {
			this.brightnessTo(0, 1, "easeOutQuart");
		};
		this["mc"+i].onRollOut = function() {
			this.brightnessTo(60, 1, "easeOutQuart");
		};
		this["mc"+i].onRelease = function() {
			myName = this._name.substr(2, 2);
			_root.text_cont.maske_text_cont1.gotoAndPlay(2);
			_root.text_cont.maske_text_cont2.gotoAndPlay(2);
			_root.text_cont.year.text = _root.datumArray[myName-1];
			_root.text_cont.titel.text = _root.titelArray[myName-1];
			_root.text_cont.technik.text = _root.technikArray[myName-1];
			_root.text_cont.why.text = _root.whyArray[myName-1];
			_root.myLink = _root.linkArray[myName-1];
			_root.text_cont.txt.gotoAndPlay(2);
			//Große Bilder
			_parent.big.alphaTo(0, 1, "linear", 0, bildle);
			if (_root.mc_layer._currentframe == 1) {
				_root.mc_layer.gotoAndPlay(2);
			} else {
				_root.mc_layer.gotoAndStop(10);
			}
		};
	}
}
preloadImages(images, aufbauStarten);

Danke

 

[Tobias Menzel]

Hi,

wenn Du an den Anfang Deiner Funktion eine trace-Aktion setzt:

function aufbauStarten() {
    trace("aufbau");

, wird das dann angezeigt? Bei mir tut es das und das zeigt, dass zumindest das Vorladen funktioniert. Ob Deine Funktion das macht was sie soll, kann ich nicht sagen, da mit die Klassen fehlen, die Du verwendest.

Du könntest allerdings mal alle nötigen Dateien posten und ich sehe es mir mal an.

Gruß
.

 

[inctube]

Also jetzt gehts.
Danke schonmal!
Jetzt gibts nur noch ein anderes Problem:

Ich setze eine Variable in der Funktion für die kleinen Bilder (tweening funktion), die ich für die folgende Funktion brauche.

this["mc"+i].onRelease = function() {
    myName = this._name.substr(2, 2);

Das ist die folgende Funktion, die lädt praktisch ein großes Bild.

function bildle() {
	_parent.big.big_pics_sub._x = (-674/2)+14;
	_parent.big.big_pics_sub._y = (-490/2)+13;
	_parent.big.big_pics_sub.loadMovie("traditional/pencil/bigs/"+"bigimg"+myName+".jpg");
	myInt = setInterval(loader, 500);
}
function loader() {
	_root.loadIt = true;
	clearInterval(myInt);
}

Irgendwie fehlt aber jetzt die Variable myName, was kann ich dagegen tun

 

[Tobias Menzel]

Hi,

hmm, wo liegt denn "myname"? Machs notfalls global bzw. auf _root:

_root.myname;

Gruß
.