les 12
 

les1les2les3les4les5les6les7les8les9les10les11les12
pagina 1 | pagina 2 | pagina 3 | pagina 4 | pagina 5 | pagina 6 | pagina 7 | pagina 8
De preloader



Wanneer je movie wat meer tijd nodig heeft om te laden is het prettig als je je publiek enig inzicht kunt verschaffen in hoe het laden verloopt. Meestal gebeurt dit met een soort van statusbar: een preloadbar of kortweg preloader genoemd. Zo'n statusbar is gebaseerd op een aantal eenvoudige principes.

getBytesLoaded() en getBytesTotal()

Wanneer je een movie laadt kun je met de functie getBytesTotal() opvragen hoe groot de movie is. Dit kun je doen voor de hele movie, maar bijvoorbeeld ook voor externe .swf of .jpg bestanden die je met loadMovie() aan het laden bent. Met de functie getBytesLoaded() kun je opvragen hoeveel bytes er inmiddels al geladen zijn. Met de waarden van getBytesLoaded() en getBytesTotal() kun je eenvoudig het percentage geladen bytes van de movie berekenen. Dit percentage wordt vervolgens gebruikt om de _xscale waarde van een movieclip (vaak in de vorm van een balkje) aan te passen. Dit laatste wil je met enige regelmaat doen, want het aantal geladen bytes verandert natuurlijk steeds. Voor dat doel wordt het onEnterFrame event gebruikt.

De onderdelen

Download het bestand preloader-1.fla

In dit bestand vind je 2 layers:
  • In de bovenste layer actions staat nu slechts een stop(); actie.
  • In de onderste layer staat een foto, om er voor te zorgen dat de movie groot genoeg wordt om een preloader te kunnen testen.

    Deze foto wordt geladen in frame 2 van de movie. Zouden we dat namelijk in frame 1 al doen dan wordt eerst de foto geladen voordat de preloader in beeld komt. Nu wordt eerst frame 1 geladen en daarmee de preloader gestart. Wanneer de movie klaar is met laden springen we met een nextFrame() naar het volgende frame. Dan verdwijnt dus de preloader uit beeld en komt de eigenlijke movie in beeld, in ons geval de grote foto.
    • Maak een nieuwe layer aan onder de layer actions en plaats hierin een movieclip in de vorm van een balkje.
    • Geef deze de instancename mc_statusbar. Let er op dat je deze movieclip zelf niet gescaled is, want dan geven de _xscale aanpassingen die we later met actionscript gaan doen vreemde resultaten. Als je de maten van het balkje wilt aanpassen moet je dat dus _in_ de clip doen. Zorg er bovendien voor dat de balkvormige graphic in de clip is uitgelijnd met de linkerbovenhoek op het registratiepunt.
    • Maak boven de layer met het balkje een nieuwe layer aan en teken hierop een kader, ter grootte van het balkje.

      Download eventueel preloader-1b.fla.

    • Maak in frame 1 van de layer actions een onEnterFrame event.
    • Plaats binnen dit event de volgende code:

      geladen = this.getBytesLoaded() ;
      totaal_te_laden = this.getBytesTotal();
      percentage = ( geladen / totaal_te_laden ) * 100;
      this.mc_statusbar._xscale = percentage;
    Zoals je ziet wordt hier het percentage berekend door het aantal geladen bytes te delen door het totaal aantal te laden bytes, en dit te vermenigvuldigen met 100. De zo ontstane waarde wordt aan de _xscale eigenschap van mc_statusbar toegekend.
    • Test de movie. Waarschijnlijk staat de statusbar meteen op 100.
    • Zet de player in de ontwikkelomgeving daarom op

      "56k" > (menu optie debug --> 56K)

      en kies voor

      "show streaming" (menu optie view --> show streaming)

      om te zien hoe deze movie zou laden als je een verbinding met een 56k modem had.
    Als alles goed is zie je de preloader dan in actie.

    Download preloader-2.fla

    Klaar met laden

    Wanneer de hele movie geladen is willen we naar het volgende frame springen. De code daarvoor moet iets zijn als:

    if ( test-om-te-kijken-of-de-movie-is-geladen ){
       nextFrame();
    }
    • Bedenk zelf wat er moet staan in plaats van test-om-te-kijken-of-de-movie-is-geladen, en voeg dat toe aan de code.
    • Test de movie.
    Download preloader-3.fla

    Het if statement is nog niet helemaal klaar. In sommige gevallen (helemaal aan het begin van het laden) kan het voorkomen dat zowel getBytesLoaded() als getBytesTotal() gelijk aan 0 is, of gelijk aan 4. In dat geval kun je dus ten onrechte denken dat de hele movie geladen is (ze zijn immers aan elkaar gelijk). Om dat de ondervangen breiden we de code iets uit door te testen of getBytesLoaded() groter is dan 20. Alleen wanneer getBytesTotal() en getBytesLoaded() aan elkaar gelijk zijn _en_ getBytesLoaded() groter is dan 20 weten we zeker dat de hele movie is geladen.
    • Breid de code uit met dit nieuwe criterium.
    Er zijn meerdere mogelijke oplossingen, waaronder: preloader-4a.fla en preloader-4b.fla

    Als het goed is werkt de preloader nu naar behoren. Het enige vervelende is dat het onEnterFrame event nog steeds wordt aangeroepen, zelfs als de hele movie is geladen en de preloader dus overbodig is geworden. De code in het onEnterFrame event blijft tevergeefts uitgevoerd worden. Nu is dat met 1 onEnterFrame event niet zo erg, maar als je op verschillende movieclips onEnterFrame events hebt gedefinieerd wil dat nog wel eens zwaar worden voor de computer/processor. Het is daarom een goede gewoonte om ongebruikte onEnterFrame events op te ruimen. Dit doe je met de volgende opdracht:

    delete this.onEnterFrame;

    Op zich zou je deze opdracht voor de nextFrame() opdracht in de code kunnen plaatsen, maar op de een of andere manier is het een beetje raar om het onEnterFrame zichzelf te laten verwijderen (want daar komt het dan in feite op neer). Je kunt jezelf tenslotte ook niet bij de kraag pakken. Het is dan ook netter om vanuit het onEnterFrame event een functie aan te roepen die de delete opdracht uitvoert:

    function stopStatusBar(){
        delete this.onEnterFrame;
    }

    Hier definieren we zelf een functie stopStatusBar. Lees eventueel het stukje over het maken van functies in les 5 door: onderste alinea's les 5

    - Plaats deze functie in de code en zorg dat deze op de juiste plaats wordt aangeroepen: stopStatusBar() ;



  • pagina 1 | pagina 2 | pagina 3 | pagina 4 | pagina 5 | pagina 6 | pagina 7 | pagina 8

     

    download de nieuwste flashplayer bij Macromedia.
    zegt de buurvrouw © buuv.nl / bourgondien.nl 1999-2003 - contact: info@webklus.nl