Flash preloader tutorial.

_{door vinTage op 09-01-2007}

Wilde je een preloader in actionscript3 maken, lees dan DEZE preloader tutorial.
Voor een preloader in actionscript2, ga dan verder met lezen.



Een preloader is gewoon een animatie die getoond word tijdens het inladen van je flashfilm.
Als je flashfilm fotos of audio bevat, zal het een aanzienelijk grotere filesize hebben.
Dit heeft tot gevolg dat het even kan duren voordat alle data is gedownload en intussen kan de bezoeker niets zien, als ze wel al iets zien, zal dat niet smooth gaan en eventueel met horten en stoten.


Om ervoor te zorgen dat dit dus niet gebeurd, zorgen we dat eerst alles word gedownload naar de bezoeker, maar laten de bezoeker ook gelijk weten dat het nog even kan duren voordat ze iets zien.
Dit kan natuurlijk gepaard gaan met een leuke animatie en eventueel een overzichtje van wat er al gedownload is.

Dit gaan we ongeveer maken



De theorie van een simpele preloader
Op zich is een preloader maken is helemaal niet moelijk.
Wat een preloader doet, is 2 waarden contineu met elkaar vergelijken.
Deze twee waardes zijn:
* de totale bestandsgrote van je swf
* de al gedownloade bytes

Die waardes kunnen we opvragen dmv:


Tijdens een contineu doorlopende functie vergelijken we die waardes, zolang die waardes niet gelijk laten we iets zien wat de bezoeker bezighoud.

De meest bekende preloaders zijn die met een laadbalkje wat de voortgang toont en het aantal gedownloade procenten, dus deze preloader gaan wij ook maken.



de flash preloader maken
Begin met het tekenen van je laadbalkje, om het simpel te houden nemen we gewoon even de "Rectangle tool" en tekenen een rechthoek op de scene.
Neem als fillColor de kleur die je wilt, en de lijnkleur mag je ook zelf kiezen.
De hoogte en lengte van het geheel maakt niet zoveel uit, maar probeer het wel op ware grote te tekenen.

Nu we dus een rechthoek hebben gemaakt klik je IN de rechthoek op de fillcolor, deze zal nu geselecteerd worden, klik nu op f8.
In het schermpje wat verschijnt vul je in "laadbalk" en selecteerd de optie "movie".

De geselecteerde fillcolor is nu een movieClip geworden, deze movieClip moeten we nu de instanceNaam "laadbalk" geven.
Dus open het properties scherm (ctrl + f3) en vul daar "laadbalk" in bij de instancenaam.
( De rand van de rechthoek moet los blijven en hoort dus niet bij deze movieClip )


We willen de bezoeker ook de bestandsgrote tonen en het aantal procent wat er is al gedownload, dus we hebben nog een tekstveld nodig.
Maak dus een dynamisch tekstveld, en geef deze de instancenaam hoeveel_procent.



Het preloader actionScript
Een preloader moet verschijnen VOORDAT er iets anders verschijnt, logisch dus, dat je de preloader op het ALLEREERSTE keyFrame zet van je flashmovie.

Dus selecteer het eerste keyFrame, open het actionscript paneel (F9) en plaats daar het onderstaande actionScript:


Wat er gebeurd is dus een constante vergelijking van de filesize en het aaantal gedownloade bytes, zodar deze waardes gelijk zijn heb je dus alles gedownload en gaan we naar het begin van de flashmovie.



Test je preloader
Als je local test, zal je je preloader nooit te zien krijgen, dit omdat je niets hoeft te downloaden want de data staat al op je harddisk.
Maar niet getreurd, flash heeft hier een mooie functie ingebouwd.

Als je je movie test (dmv ctrl+enter), klik dan nogmaals op ctrl+enter.
Als het nog te snel gaat naar je zin, dan kan je een andere verbindingssnelheid instellen dmv: view/download settings/



Via customize kan je zelf een verbindingssnelheid opgeven.



Sidenote
Ik heb het in deze flash preload tutorial alleen gehad over een laadbalk en procenten, maar je kan natuurlijk VEEL meer!!
Laat je fantasie de vrije loop en bij problemen kan je altijd terecht op mn forum

Verder is er een kleine bijkomstigheid omtrent het preloaden van attachMovie, uitleg daarover vind je hier


Tot zover mn tutorial over preloaden, mocht er iets niet duidelijk zijn, dan kan je deze flash preloader downloaden als voorbeeld.