Preloaders, simpel en met percentage

flash preloader met percentage weergave.
flash preloader zonder poespas (simpel)

Flash preloader.

Het maken van een preloader is alles behalve moelijk.
Een preloader is niet meer dan een grafische weergave van het "tot nu toe" gedownloade gedeelte.
Dit is voor mensen met een breedband verbinding niet echt relevant, maar voor mensen die nog via de ouderwetse inbelverbinding op internet gaan, kan dit een uitkomst bieden, ze zien dan daadwerkelijk dat er iets aan de hand is, en het lijkt dus niet of er niets gebeurd.
Klik hier voor een voorbeeldje met een preloader, die tijdens het laden het gedownloade percentage laat zien.
Het bestand in het voorbeeld is ongeveer 600 kb, dus als je gelijk een foto ziet dan is je verbinding te snel om de preloader nodig te hebben, maar het ziet eruit zoals hieronder, alleen na de 100% komt er dan de foto.

afhanklijk van de downloadsnelheid loopt het percentage op natuurlijk.

Zoals je kan zien heb ik gewoon een cirkeltje rond het percentage gedeelte laten draaien maar dat kan je zelf zo gelikt maken als je zelf wilt natuurlijk, dat is niet relevant aan het eigenlijke topic van deze tutorial.

begin in je nieuwe flash file met het maken van 2 layers.
De onderste laag noem je "actions"
De bovenste laag noem je "weergave"
Maak op de "actions" laag een keyframe aan (insert keyframe), en open daarna het actions panel (f9).
Plak in het actions panel met die keyframe geselceteerd de volgende code.

bytes_loaded = Math.round(this.getBytesLoaded()); bytes_total = Math.round(this.getBytesTotal()); getPercent = bytes_loaded/bytes_total; this.loadText = Math.round(getPercent*100)+"%"; if (bytes_loaded == bytes_total) { this.gotoAndPlay(3); }

Maak nu op de actions laag een tweede keyframe aan (insert blank keyframe).
En plak de onderstaande code met de 2e frame geselecteerd in het actions panel.

this.gotoAndPlay(1);
Nu hebben we alles gehad qua code die er nodig is voor een preloader.

Maak een tweede frame aan (insert frame) dus geen blank keyframe hier.
Tot zover hebben we het allerbelangrijkste achter de rug, nu nog de eigenlijke site/foto/muziek bestand op frame 3 zetten, het maakt eigenlijk niet uit op welke laag je dat precies zet, zolang het maar op frame 3 staat, of verder weg, dus om netjes te werken zou ik een nieuwe laag maken met daarop het eigenlijke content.
Ik heb een foto gebruikt die normaal gezien veel te groot is om zonder preloader te laten zien.

In mijn voorbeeldje heb ik een cirkeltje rond het percentage laten draaien, dat gebeurt als volgt.
Maak een nieuw symbol (ctrl+f8) met als behavior "movie".
En maak een draaiend rondje :-)
klik voor motion tween tutorial met een beetje fantasie kom je er wel uit.
En dat draaiende rondje heb ik op de "weergave" laag gezet rond het "loadText" veld.
Dit kan natuurlijk veel flitsender en spacier, maar het is pure opvulling, dus laat ik dit aan jullie fantasie over.

Simpele preloader, zonder gegevens

Er is een veel simpelere manier om een preloader te maken dan bovenstaande, hij geeft dan geen gedownloade data weer, maar alleen een animatie die de kijker bezig houdt.
Maak eerst een movie (ctrl+f8) die de kijker duidelijk maakt dat er iets gebeurt..
bijvoorbeeld :

Ga weer terug naar je main scene, en insert een keyframe.
Copy paste de volgende code in het actions panel met dat keyframe geselecteerd.

if (_framesloaded>=_totalframes) { gotoAndPlay (2); } else { gotoAndPlay (1); }
Open je library (f11) en sleep je "hou de bezoeker bezig" movie uit de library op je main scene (ja nog steeds op frame 1)
Nu maak je een tweede keyframe aan (insert blank keyframe), en hierop plaats je het veel te grote bestand zoals fotos etc.

Tot zover deze tut over flash preloaders.

Voor de luilakken onder ons heb ik hier de werkende preloader fla staan, met percentage.

In dit topic vraagt er iemand om een swf met laadbalkjes, de downloads vind je ook op dat topic

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage