PDA

Volledige versie bekijken : Fotoviewer met preloader


ArowanaW
%Europe/Berlin %758 %2009, 19:12
Hey, ik ben bezig met een simpele fotoviewer voor een site.
En met simpel, bedoel ik écht simpel, geen fade in en out, geen gedoe, gewoon simpel. Ik heb dit dus:


stop();

var path:String = "http://delinkhier.nl/images/";
var pNumber:Number = 0;
var pArray:Array = ["blablabla.png", "filler.png", "hierstaatniets.png", "afbeelding.png"];

loadPic();

imageViewer.prev.onRelease = function(){
if(pNumber == 0){
pNumber = pArray.length -1;
}
else{
pNumber --;
}
loadPic();
}
imageViewer.next.onRelease = function(){
if(pNumber == pArray.length -1){
pNumber = 0;
}
else{
pNumber ++;
}
loadPic();
}

function loadPic(){
loadMovie(path + pArray[pNumber], _root.imageViewer.container);
}


Dat werkt wel aardig voor mij, alleen als er een grote afbeelding tussen zit moet ie dus laden, en dat wil ik niet. Dus moet er dus een preloadertje komen per foto. En dat wil niet lukken. Een preloader aan het begin van de movie werkt niet omdat de foto's dan nog niet worden ingeladen, maar het lukt me niet om in de function loadPic() iets in te bouwen met een preloader. Kan iemand helpen?

Jan
%Europe/Berlin %852 %2009, 21:26
In plaats van loadMovie gebruik je beter loadClip (van de MovieClipLoader class), daar zit een ingebouwde 'preloader' bij (onLoadProgress).
Voorbeeld en uitleg vind je hier:
http://www.flashfocus.nl/forum/showpost.php?p=345219&postcount=5

Groeten;
Jan

ArowanaW
%Europe/Berlin %902 %2009, 22:39
Oké, dank je voor je hulp.
Ik snap het idee erachter, maar ik heb problemen met wat ik waar moet zetten en ik welke volgorde. Want de manier waarop ik het plaatje laadt, staat in een functie. En waar moet ik dan al die onLoadStart enzo laten?
Zou je een voorbeeld voor mijn fotoviewer kunnen posten?

ArowanaW
%Europe/Berlin %906 %2009, 22:45
function loadPic(){
//loadMovie(path + pArray[pNumber], _root.imageViewer.container);
var photoListener:Object = new Object();
var picLoader = new MovieClipLoader();
picLoader.addListener(photoListener);
picLoader.loadClip(path + pArray[pNumber], _root.imageViewer.container);
}
photoListener.onLoadStart = function(
photoListener.onLoadProgress = function(target:MovieClip, geladen:Number, totaal:Number){
preloader._visible = true;
var percent = Math.round(geladen/totaal* 100);
preloader.bar._xscale = percent;
}
photoListener.onLoadComplete = function(target:MovieClip){
preloader._visible = false;
}


Zoals je ziet weet ik niet echt wat ik er verder mee aan moet..

Jan
%Europe/Berlin %035 %2009, 01:51
var photoListener:Object = new Object();
var picLoader = new MovieClipLoader();
picLoader.addListener(photoListener);
photoListener.onLoadStart = function(target:MovieClip)
{
preloader._visible = true;
}
photoListener.onLoadProgress = function(target:MovieClip, geladen:Number, totaal:Number)
{
var percent = Math.round(geladen/totaal* 100);
preloader.bar._xscale = percent;
}
photoListener.onLoadInit = function(target:MovieClip)
{
preloader._visible = false;
}

function loadPic()
{
picLoader.loadClip(path + pArray[pNumber], _root.imageViewer.container);
}
Je hoeft die MovieClipLoader en de listeners en zo maar 1 keer te declareren.
Het enige dat je moe(s)t veranderen is de url bij loadClip en dat deed je al. :)

Groeten;
Jan

ArowanaW
%Europe/Berlin %064 %2009, 02:32
Het werkt perfect, dankje! :D
En lekker late reactie, half 3 alweer..

Vet, hij doet het!