[FLASH] preloader

We gaan een preloader maken op een manier dat we deze voor elk project kunnen gebruiken met een minimum aan aanpassingen.

Eerst en vooral gaan we een container op de scene plaatsen, waar we onze site in kunnen inladen: Teken een vierkant op de stage en selecteer deze volledig. Zet om naar een movieclip en noem deze container. Geef hem ook onmiddellijk een instance name: container.

Extra info: De naam container is niet zomaar gekozen. In de “flashwereld” is dit een veelgebruikte naam om een movieclip aan te duiden waar men iets anders in inlaadt. Dit kunnen zowel foto’s als swf’s zijn.

Noem de laag waar de movieclip op staat ook container, zodat je weet op welke laag de container staat.

Dubbelklik op de container en delete het vierkant. Keer terug naar de scene. Je hebt nu een lege movieclip “container” waar we straks onze site zullen inladen. Het registratiepunt van deze movieclip zal de linkerbovenhoek van de site zijn. Hou hiermee rekening wanneer je de container positioneert op de stage.

Maak een nieuwe laag aan en noem deze actions. Nu gaan we eerst een movieclip loader aanmaken. Dit gebeurt op dezelfde manier als we een variabele aanmaken:

//maak een niewe MovieCliploader aan

var myMovieClipLoader:MovieClipLoader = new MovieClipLoader();

Extra info: de naam myMovieClipLoader is zelf gekozen, maar beschrijft wel goed wat het is. Ook deze manier van naamgeven is in de “flashwereld” algemeen aangenomen.

We gaan nu een listener creëren. Een listener is een object, dat we kunnen toevoegen aan de moviecliploader. De listener zal dan controleren wat de status is van de moviecliploader. Hiervoor hebben we verschillende functies ter beschikking: bv onLoadComplete(), onLoadInit(), onLoadProgress, ...

//maak een nieuwe Listener aan

var myListener:Object = new Object();

Extra info: ook hier is de naam zelfgekozen.

Nu gaan we de listener aan de de moviecliploader koppelen zodat de listener weet naar wie hij moet “luisteren”.

//koppel myListener aan myMovieClipLoader

myMovieClipLoader.addListener(myListener);

Dan gaan we een functie maken die wordt uitgevoerd op het moment dat de site ingeladen wordt. Deze functie zal elke keer uitgevoerd worden wanneer er vooruitgang is in de download.

//creëer hier de fuctie die moet uitgevoerd worden wanneer er vooruitgang is in de download.

myListener.onLoadProgress=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

{

}

We gaan deze functie even van ontleden:

myListener.onLoadProgress

Omdat we de myListener gekoppeld hebben aan de myMovieClipLoader zal de myListener in actie treden elke keer we iets inladen via de myMovieClipLoader.

De myListener gaat beginnen “luisteren” naar de status van het ingeladen object (foto of swf). Elke keer er vooruitgang is in de download gaat de onLoadProgress geactiveerd worden.

=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

We koppelen aan de onLoadProgress een functie, zodat deze functie kan uitgevoerd worden, wanneer de onLoadProgress geactiveerd wordt.

Tussen de haakjes gaan we de elementen definiëren die we in de functie gaan gebruiken.

Wanneer we iets inladen in onze container, kan het nuttig zijn als we onze container kunnen aanspreken. We kunnen dit doen via “container” omdat we de movieclip deze instance name gegeven hebben. Maar als we in de functie container gaan gebruiken als aanspreekpunt, kunnen we de functie alleen gebruiken als we iets inladen in de container mc. Daarom kunnen we beter tussen de haakjes definiëren, dat de movieclip waar we iets gaan inladen - in dit geval container – aangesproken wordt binnen de functie als mc.

Tussen de accolades gaan we dan de acties plaatsen die moeten uitgevoerd worden als er vooruitgang is in de download. Om dit even te testen plaatsen we tussen de accolades:

//deze code dient om te controleren of de download lukt

trace(mc + “ wordt geladen: Er is al “ + bytesLoaded + “ kb ingeladen van de “ + bytesTotal + “!”);

Als we nu de movie testen zal de movie nog altijd niet ingeladen worden omdat we nog nergens de echte download gestart hebben. Daarom voeren we volgende code toe:

//start hier de eigenlijke download

myMovieClipLoader.loadClip("site.swf","container");

Extra info: “site.swf” moet je vervangen door de naam van de site die je wil inladen.

We gebruiken dus de myMovieClipLoader om de site.swf in te laden in de container. Omdat we aan de myMovieClipLoader de myListener gekoppeld hebben, wordt de download geobserveerd door de myListener.onLoadProgress functie.

Nu moet je ervoor zorgen dat je deze preloader-file in dezelfde map bewaart als een site die je gemaakt hebt.

Het document van je preloader maak je best even groot als dat van je site, met hetzelfde aantal frames per seconde, dezelfde achtergrondkleur, ...

De container movieclip plaats je linksboven ((0,0).

Nu zou de site moeten ingeladen worden in de container. In het outputvenster zou zoiets moeten verschijnen:

_level0.container wordt geladen: Er is al 70625 kb ingeladen van de 81858!

_level0.container wordt geladen: Er is al 81858 kb ingeladen van de 81858!

Je ziet dat de mc in de code vervangen is door de instance name van de container. Dit zorgt ervoor dat wanneer we een tweede container zouden maken om iets anders in te laden, we dezelfde code kunnen gebruiken. We zouden alleen dit moeten toevoegen:

//start hier de eigenlijke download van de tweede swf

myMovieClipLoader.loadClip("site2.swf","container2");

Extra info: deze code moet je dus niet toevoegen, het is enkel een voorbeeld van hoe je twee swf-en zou kunnen inladen in twee verschillende containers in dezelfde movie.

Wanneer je je flashmovie test, is de site natuurlijk al ingeladen op je pc, want hij staat al in dezelfde map. Je kan de download gaan simuleren door een tweede maal op Ctrl + Enter te duwen. Dan gaat flash doen alsof de in te laden swf nog niet op je pc staat en hij ingeladen wordt. Op deze manier kan je ook locaal op je pc zien wat je bezoeker online zal te zien krijgen.

Als je deze simulatie wil instellen kan je dit doen door in de preview op view te klikken en dan op download settings. Hier kan je dan kiezen welke internetverbinding je wil simuleren.

De site wordt al ingeladen en we hebben een functie om het proces te bekijken. Nu moeten we deze functie nog koppelen aan een preloader. Als eerste preloader gaan we een dynamic tekstveld plaatsen op de stage. Een dynamic textfield omdat we uiteraard de inhoud van textfield willen veranderen. We gaan hier namelijk het percentage in weergeven dat al gedownload is.

Om dit te kunnen moeten we natuurlijk een instance name geven aan het dynamic textfield: preloader_text

In onze onLoadProgress functie voegen we tussen de accolades volgende code toe:

//bereken percentage

percentage=Math.round((bytesLoaded/bytesTotal)*100);

preloader_text.text=percentage + " % is ingeladen";

Eerst berekenen we het percentage dat al gedownload is. Dan gebruiken we het percentage om een zin te construeren die in het textfield wordt getoond.

Voor alle duidelijkheid even de volledige code die we tot nu toe hebben:

//maak een niewe MovieCliploader aan

var myMovieClipLoader:MovieClipLoader = new MovieClipLoader();

//maak een nieuwe Listener aan

var myListener:Object = new Object();

//koppel myListener aan myMovieClipLoader

myMovieClipLoader.addListener(myListener);

//creëer hier de fuctie die moet uitgevoerd worden wanneer er vooruitgang is in de download.

myListener.onLoadProgress=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

{

//deze code dient om te controleren of de download lukt

trace(mc + " wordt geladen: Er is al " + bytesLoaded + " kb ingeladen van de " + bytesTotal + "!");

//bereken percentage

percentage=Math.round((bytesLoaded/bytesTotal)*100);

preloader_text.text=percentage + " % is ingeladen";

}

//start hier de eigenlijke download

myMovieClipLoader.loadClip("site.swf","container");

Nu gaan we een animatie toevoegen die het reeds geladen deel visueel gaat voorstellen.

We gaan eigenlijk een animatie maken van 100 frames: 1 frame per ingeladen percentage.

Hiervoor teken ik een balk met outline op de stage (zie voorbeeld) op een nieuwe laag. Noem deze laag preloader_anim. Selecteer de rechthoek door erop te dubbelklikken (zodat de outline mee geselecteerd is). Converteer naar een movieclip en noem deze preloader_anim. Geef ook als instance name preloader_anim.

Dubbelklik op de rechthoek om in de movieclip binnen te gaan. Selecteer de vulling van de rechthoek. Cut (Ctrl+X) en maak een nieuwe laag, die je onderaan plaatst. Paste in place (Ctrl + Shift + X) en noem deze laag vulling. De andere noem je outline.

Plaats een keyframe op frame 100 op de vulling laag en plaats een frame op frame 100 van de outline laag.

Op de eerste frame van de vulling laag selecteer je de vulling. Duw deze met de transform tool plat tot een smalle lijn aan de linkerkant van de outline.

Selecteer nu de eerste frame en kies in het propertiespaneel voor shape tween.

Voeg een laag actions toe en plaats een stop op de eerste frame.

Keer terug naar de scene.

In de onLoadProgress function accolades plaatsen we onder de code die er al in staat:

//zet de animatie op de frame die hoort bij het reeds gedownloade percentage

preloader_anim.gotoAndStop(percentage);

In deze movieclip kan je eender welke animatie van 100 frames gebruiken als preloader voor je site.

Dan moeten we natuurlijk nog de actie toevoegen die ervoor zorgt dat je iets kan uitvoeren op het moment dat je site gedownload is.

//creëer hier de functie die moet uitgevoerd worden wanneer een element is ingeladen via de myMovieClipLoader

myListener.onLoadComplete=function()

{

//dit kan eender welke actie zijn die je wil uitvoeren op het moment dat je site is ingeladen.

gotoAndStop(2);

}

Voor alle duidelijkheid nog één keer alle code:

//gebruikte variabelen:

var percentage:Number = new Number();

//maak een niewe MovieCliploader aan

var myMovieClipLoader:MovieClipLoader = new MovieClipLoader();

//maak een nieuwe Listener aan

var myListener:Object = new Object();

//koppel myListener aan myMovieClipLoader

myMovieClipLoader.addListener(myListener);

//creëer hier de fuctie die moet uitgevoerd worden wanneer er vooruitgang is in de download.

myListener.onLoadProgress=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

{

//deze code dient om te controleren of de download lukt

trace(mc + " wordt geladen: Er is al " + bytesLoaded + " kb ingeladen van de " + bytesTotal + "!");

//bereken percentage

percentage=Math.round((bytesLoaded/bytesTotal)*100);

preloader_text.text=percentage + " % is ingeladen";

//zet de animatie op de frame die hoort bij het reeds gedownloade percentage

preloader_anim.gotoAndStop(percentage);

}

//creëer hier de functie die moet uitgevoerd worden wanneer een element is ingeladen via de myMovieClipLoader

myListener.onLoadComplete=function()

{

//dit kan eender welke actie zijn die je wil uitvoeren op het moment dat je site is ingeladen.

gotoAndStop(2);

}

//start hier de eigenlijke download

myMovieClipLoader.loadClip("site.swf","container");