Bilderleiste, dynamische bilder und Preloader

[Pixelbar]

Hallo erstmal,

Vorweg muss ich sagen das ich schon mehrere Tage im Forum herumstöbere um eine Lösung zu meinem Problem zu finden. Doch ich konnte bisher nichts finden was mir in gewisser Art und Weise weiter half.

Es geht um folgendes: ich hab eine Art Bildergallerie gebaut die Bilder dynamisch aus einem Ordner ausliest (PHP liefert da die Anzahl Bilder und den Ordnernamen). Flash baut sich daraus eine Bilderleiste mit Thumbnails (die sich in einem anderen Ordner befinden). das Script liegt in einem MC und sieht so aus:

_global.aktiv = folder;
_root.advertising.gotoAndStop(2);
var breite = 800;
var hoehe = 70;
//var a = _global.anzahl;
var i = 1;
var speed = 2; //je kleiner desto schneller
var abstand =15;
var starty = 0;
var pfad = folder+"/thumbs/";
var mitte = breite/2;
maske._height = hoehe;
maske._width = breite;
maske._y = starty;
var laenge;
maske.swapDepths(1000);
this.setMask(maske);

laden = function () 
{
	if (i <= anzahl) 
	{
		if (i == 1) { createEmptyMovieClip("spacer",999);
spacer.beginFill(0x000000);
//weiss.lineStyle(0,0xFFFFFF,100);
spacer.moveTo(0,0);
spacer.lineTo(0,0); //oben X Y
spacer.lineTo(0,0); //unten X Y
spacer.lineTo(0,0); // links X Y
spacer.lineTo(0,0); // rechts X Y

spacer.endFill(); }

		this.createEmptyMovieClip('pic'+i, i);
		this['pic'+i].loadMovie(pfad+"thumb_"+i+'.jpg', 0);
		with(this['pic'+i]) {
			this['pic'+i]._alpha = 50;
		}

		this.onEnterFrame = function() 
		{
			if (this['pic'+i]._width > 10) 
			{
				this['pic'+i]._y = starty;
				if (i == 1) { this['pic'+i]._x = abstand } else {
				this['pic'+i]._x = this['pic'+(i-1)]._x+this['pic'+(i-1)]._width+abstand; }
				
				delete this.onEnterFrame;
				i++;
				laden();
			}
		};
	} else 
	{
		this.laenge=this._width
		for (var k = 1; k <= anzahl; k++) 
		{
			this['pic'+k].id = k;
			this['pic'+k].onRelease = function() 
			{
			_global.bildid = this.id;
			_root.bild_gross.gotoAndPlay(21);
			_root.bigshader.gotoAndPlay(2);
			_root.pfeilnav.bildnum.text = bildid;
			_root.pfeilnav.bildinfo.text = " / "+anzahl;
				//buttonaktionen
			};
			this['pic'+k].onRollOver = function() 
			{
				this.fadeIn(15);
			}
			
			this['pic'+k].onRollOut = function() 
			{
				this.fadeOut(5);
			}
		}
		move()
	}
};

MovieClip.prototype.fadeIn = function(faktor) {
	this.onEnterFrame = function(){
		if(this._alpha < 100){
			this._alpha += faktor;
			}
	}
};	
MovieClip.prototype.fadeOut = function(faktor) {
	this.onEnterFrame = function(){
		if(this._alpha > 50){
			this._alpha -= faktor;
			}
	}
};

move = function () 
{
	this.onEnterFrame = function() 
	{
		var x = this._xmouse;
		var y = this._ymouse;
		var h = hoehe;
		var b = breite;
		for(var i=1;i<= anzahl;i++)
		{
		var mc=this['pic'+i]
		mc._x += speed1;
		if(mc._x>=breite)
		{
			mc._x -=laenge
		}
	
		if(mc._x<=-mc._width)
		{
			mc._x +=laenge
		}
			}
		if((x > 0 && x < (mitte-10) && y > 0 && y < h) ||(x < breite && x > (mitte+10) && y > 0 && y < h) )
		{
		var r = this._xmouse-mitte;
		var sp = -r;
		speed1 = sp/(10*speed);
		}else{
	    speed1=0
		}
	}
};
laden();

Das funktioniert auch alles soweit. Wenn man auf eines dieser Thumbnails klickt wird ein größeres Bild eingeblendet (welches in einem anderen MC eingebunden ist). Das ganze läuft durch einen kleinen Clip (zum überblenden) und wird dann folgendermassen aufgerufen (also das grosse Bild)

if(!bildid) { var bildNummer = 1; } else { var bildNummer = bildid; }


	createEmptyMovieClip("mcBildcontainer",100);
	mcBildcontainer.loadMovie(folder+"/"+bildNummer+".jpg"); 
	mcBildcontainer._y=0;
    mcBildcontainer._x=0;
	mcBildcontainer._alpha = 0;
	

	this.onEnterFrame = function(){
				
	var breite = mcBildcontainer._width;
	_root.bild_gross.weisser_bg._width = breite+20;
	_root.bild_gross.shader100._width = breite+20;
	_root.bild_gross.shader75._width = breite+20;
	//_root.pfeilnav._x = breite+55;
	_root.adve._x = breite+55;
	_root.fash._x = breite+55;
	_root.vari._x = breite+55;
	_root.homeb._x = breite+55;
	_root.kont._x = breite+55;
	_root.downloadimage._x = breite-55;
	for(var s=1;s<= breite;s++) {
	_root.bild_gross.shader100._x -= 3/15;
	_root.bild_gross.shader75._x -= 2/11;
	} 
	
	if(mcBildcontainer._alpha < 100) { mcBildcontainer._alpha += 9; }
	if(_root.bild_gross.weisser_bg._alpha < 100) { _root.bild_gross.weisser_bg._alpha += 9; }
	
	}

Das geht auch noch soweit. Nur würde ich das ganze gerne Preloaden weil die Bilder relativ fett sind und es sich je nach Ordner um eine ganze Palette an Bildern handelt. Die Frage ist nur wie.

Wenn ich einen normalen Preloader mache gibt der mir nur 30kb an, was ja auch normal ist (ist eben die Grösse vom swf), das lädt der ann ganz fix aber sobald es an die Bilder geht bleibt er hängen.

Hab schon verschiedene Sachen versucht aber er bleibt dann immer hängen oder findet keine entsprechenden Daten (undefined oder NaN).

Kann mir jemand da helfen? Müssen die Elemnte einzeln preloadet werden oder kann man alles auf einmal preloaden?

Ich bin für jede Hilfe dankbar...

[fraggle two]

hi,

probiers mal damit...

PHP-Code:

if (!bildid) {
    var bildNummer = 1;
} else {
    var bildNummer = bildid;
}
var loadChecker:MovieClip = this.createEmptyMovieClip("helper", 5000);
var clip:MovieClip = this.createEmptyMovieClip("mcBildcontainer", 100);
var loaderBar:MovieClip = this.createEmptyMovieClip("loaderBar", 1000);
loaderBar.beginFill(0xFF0000);
loaderBar.moveTo(10, 10);
loaderBar.lineTo(100, 10);
loaderBar.lineTo(100, 100);
loaderBar.lineTo(10, 100);
loaderBar.lineTo(10, 10);
loaderBar.endFill();
loaderBar._x = 0;
loaderBar._y = 0;
loaderBar._width = 100;
loaderBar._height = 5;
loaderBar._xscale = 0;
loadChecker.onEnterFrame = function() {
    var geladen = Math.round(clip.getBytesLoaded());
    var gesamt = Math.round(clip.getBytesTotal());
    var proz = Math.round((geladen*100)/gesamt);
    if (geladen>=gesamt && geladen>5) {
        delete this.onEnterFrame;
        trace("geladen");
        clip._y = 0;
        clip._x = 0;
        clip._alpha = 0;
        this.onEnterFrame = function() {
            var breite = clip._width;
            _root.bild_gross.weisser_bg._width = breite+20;
            _root.bild_gross.shader100._width = breite+20;
            _root.bild_gross.shader75._width = breite+20;
            //_root.pfeilnav._x = breite+55;
            _root.adve._x = breite+55;
            _root.fash._x = breite+55;
            _root.vari._x = breite+55;
            _root.homeb._x = breite+55;
            _root.kont._x = breite+55;
            _root.downloadimage._x = breite-55;
            for (var s = 1; s<=breite; s++) {
                _root.bild_gross.shader100._x -= 3/15;
                _root.bild_gross.shader75._x -= 2/11;
            }
            if (clip._alpha<100) {
                clip._alpha += 9;
            } else {
                delete this.onEnterFrame;
            }
            if (_root.bild_gross.weisser_bg._alpha<100) {
                _root.bild_gross.weisser_bg._alpha += 9;
            }
        };
    } else {
        loaderBar._xscale = proz;
    }
};
clip.loadMovie(folder+"/"+bildNummer+".jpg"); 


da haste auch gleich noch nen ladebalken dazu...

gruß
mike

[Pixelbar]

so etwas ähnliches hatte ich auch schon mal. (War aber lange nicht so ausgereift).

Aber auch hier hab ich den Fall das der Film anläuft, stockt und dann direkt das Bild anzeigt. Vom Ladebalken sieht man leider nichts...

Kann es ein Problem sein das ich das ganze verschachtelt hab. Um an den Bild MC dranzukommen müsste man eigentlich folgendes eingeben:
(Beispiel höhe)

_root.bild_gross.bild_mc.mcBildContainer._height

Ich dachte das so zu verschachteln weil da kommt noch ein weisser hintergrund bei, ein shader (zum ausblenden) und zwei animierte Layer zum einblenden.

Zu bemerken ist auch das bild_mc eigntlich nur das Skript zur generierung von mcBildContainer enthält.

bin ich jetzt ein verschachtel Freak oder ist das richtig so? Kann das Probleme machen?

[fraggle two]

testest du lokal?

[fraggle two]

so wie ich es da geschrieben habe müßte das script auf der zeitleiste von

_root.bild_gross.bild_mc

liegen...

[fraggle two]

ein problem könnten noch die drei verschiedenen sachen die in der onEnterFrame schleife ausgeführt werden sollen sein...

am besten wäre du machst für jede if-geschichte eine eigene schleife, da du dann besser unter kontrolle hast was wann passieren soll...

ich hab sie jetzt mal abgebrochen wenn clip._alpha >= 100 ist...

ausserdem weiß ich auch nicht so genau wofür du die for-schleife da einsetzen willst...
warscheinlich zum verbreitern von irgend etwas aber dazu solltest du ne frame-schleife nehmen, da die for-schleifen so schnell abgearbeitet werden das du davon nix siehst...

gruß
mike

[Pixelbar]

Jo, momentan teste ich alles lokal. Habe mir aber künstlich ein paar bilder "aufgebläht" damit der auch was zu laden hat. Vorher hatte ich das nicht gemacht, aber ainmal im Netz da wusste ich das ein Preloader unvermeidlich ist.

ich geb mich mal ans umbauen, ich hatte schon so einen Verdacht als hätte ich es ein wenig auf die Spitze getrieben mit dem verschachteln. Ich poste dann das Resultat.

Danke nochmal

[Pixelbar]

Zitat von fraggle two

ausserdem weiß ich auch nicht so genau wofür du die for-schleife da einsetzen willst...
warscheinlich zum verbreitern von irgend etwas aber dazu solltest du ne frame-schleife nehmen, da die for-schleifen so schnell abgearbeitet werden das du davon nix siehst...

Die For Schleife verkleinert zwei Blenden. Eine schneller als die andere und beide haben einen anderen Alphawert (übereinander ergibt das schwarz). Aber wenn du sagts ne Frameschleife macht das besser werde ich das mal versuchen (for schleife ; jaja wenn en PHP Freak sich an AS gibt passiert sowas schon mal)

ich mache dann auch schon mal die verschiedenen Bedingungen in verschiedenen onEnterFrame dann mal sehen was es gibt.

Falls ich dieses Jahr nicht mehr posten kann, wünschich auf jeden Fall noch nen GUTEN RUTSCH

[fraggle two]

dito...

[~pyropete~]

Zitat von Pixelbar

Jo, momentan teste ich alles lokal. Habe mir aber künstlich ein paar bilder "aufgebläht" damit der auch was zu laden hat.

Ist egal, das lokale Streaming funzt nicht mit nachgeladenen Inhalten. Schiebs alles hoch und guck nochmal.

--pp

PS: Aja, ebenso!

[fraggle two]

hi nochmal...

wichtig ist immer 2x strg+enter zu drücken...

dann funzt das auch mit dem lokalen streaming...

gruß und rutsch
mike

[pape]

...aber nicht für nachgeladene Inhalte, sondern nur für den Film, welcher gerade mit strg+Enter ausgeführt wird! (d.h. nen preloader für bilder, di emit loadMovie geladen werden, wird lokal nicht lange bzw. nicht angezeigt)

pape

[Pixelbar]

Hallo zusammen,

Es stimmt effektiv, lokal ist kein Balken zu sehen aber sobald es online ist sieht man den Balken (endlich fortschritte )

Das komische ist jetzt aber, sobald man ein bild schon mal geladen hat kommt der Balken nicht mehr. (Holt der die Bilder dann aus dem Cache?) Es wäre aber gut wenn der de Bilder jedes mal neu laden würde , bzw das der Ladebalken immer wieder kommt (selbst wenn es nur für einen Bruchteil von ner Sekunde ist).

Ich werde das ganze noch umbauen (so mit prozent und so). Ne andere Frag ist ahebt ihr eine Ahnung wie man das ganze noch auf die Bildleiste anwenden kann?

[Pixelbar]

Hab mal alles ein wenig geändert und der Preloader scheint auch zu funktionieren (bei mir auf jeden Fall). Habs bei mir getestet im Explorer, Firefox (Mac & PC), Safari.

Bei mir ist kein Problem doch ich habe von Leuten gehört das das große Bild nicht lädt oder die Bilderleiste nicht lädt. Hat jemand ne Ahnung woran das liegen kann?

Guckst du hier: http://www.gregorcollienne.com/neu

[fraggle two]

hi,

ich kann online auch keine bilder sehen...

unter dieser url von der die bilder wohl geladen werden liegt aber auch nix ausser ein rotes rechteck...

http://www.gregorcollienne.com/neu/advertising/20.jpg

gruß
mike

ok... ich sehe doch bilder ausser bei advertising...