Vi vil lave en preloader, som viser brugeren hvor meget af Flash filmen som er downloadet. Da nogle SWF-filer kan være tunge, er det en god service, så brugeren har en ide om, hvor lang tid det cirka tager.
For at lave en preloader er det mest hensigtsmæssigt at tage udgangspunkt i en allerede oprettet Flash film, eller oprette en film med et eller flere store billeder, da der skal være noget at downloade.
1. Åbn en ny Flash film, omdøb laget til ’indhold’, indsæt en keyframe i frame 2 og importer et billede til Stagen. Skaler billedet, så det passer til Stagen.
Nu skal vi have lavet teksten til preloaderen. Der skal både være en statisk hjælpetekst og en dynamisk tekst, som skal indeholde, hvor mange %, der er downloaded.
2. Placer markøren i frame 1 og indsæt på Stagen et statisk tekstfelt med teksten ’…::: LOADING’.
3. Indsæt til venstre for denne tekst et dynamisk tekstfelt med teksten ’0 %’. Giv dette felt instance name ’preloader_txt’.
Egentlig behøver vi ikke skrive ’0 %’ i feltet, da det skal opdateres dynamisk, men vi bruger det bare så vi kan finde tekstfeltet.
Nu skal vi have skrevet koden. Vi skal bruge informationer om, hvor meget der er loaded, og hvor meget Flash filmen fylder i alt. Dette findes i henholdsvis properties loaderInfo.bytesLoaded og loaderInfo.bytesTotal. For at få det i % skal disse to tal divideres og ganges med 100.
4. Indsæt et lag ’actions’ og åbn frame 1 og skriv i Actions Panel:
stop();
addEventListener(Event.ENTER_FRAME, opdaterLoader);
function opdaterLoader(e:Event):void {
var procent: int = int(loaderInfo.bytesLoaded/loaderInfo.bytesTotal*100);
if (procent == 100) {
removeEventListener(Event.ENTER_FRAME, opdaterLoader);
nextFrame();
}
else {
preloader_txt.text = procent + ” %”;
}
}
Koden består først af en stop-method for at undgå at filmen går videre af sig selv. Dernæst en eventlistener, som hele tiden kalder funktionen ’opdaterLoader’ så længe vi er i denne frame.
Funktionen ’opdaterloader’ opretter først en variabel som en heltals-datatype (int). Denne variabel tildeles værdien af loaderInfo.bytesLoaded/loaderInfo.bytesTotal*100. Dette skulle gerne blive det hele antal % der er downloaded.
Dernæst undersøges om procent = 100, hvis det er tilfældet, skal Flash filmen gå videre til næste frame (nextFrame), samtidig med at eventlisteneren fjernes, da der ikke længere er brug for den.
Hvis det ikke er tilfældet, dvs. hvis der stadig mangler at blive downloadet noget, så sættes det dynamiske tekstfelt lig med variablen ’procent’ efterfulgt af strengen ” %”.
5. Afspil din Flash film.
Umiddelbart ser du ikke din preloader, men Flash filmen hopper straks til frame 2 med billedet. Det skyldes at det går hurtigt med at downloade filmen, især når den ligger lokalt. For at undersøge, om preloaderen virker, kan du simulere din download. Først sættes hastigheden, og dernæst simuleres downloadningen.
6. I test mode vælg View > Download Settings > T1
7. Vælg herefter View > Simulate Download
Nu skulle filmen gerne virke.
For at sætte prikken over i’et vil vi også gerne have lidt grafik på vores preloader. Det skal bestå af et aflangt rektangel, som bliver fyldt op, men filmen hentes.
8. Træk i indholdslaget under teksten i frame 1 et rektangel. Vælg både en stroke color og en fill color Vælg evt. en gradient for fill color.
9. Marker nu fyldet ved at klikke på det én gang med Selection Tool og konverter det til et MovieClip med navnet mcPreloaderFyld. Giv det instance name ’preloaderFyld_mc’.
10. Marker nu kanten (du kan evt. trække fyldet til side først) og konverter det til et MovieClip med navnet mcPreloaderKant.
11. Sørg til sidst for at fyldet er placeret præcist ovenpå kanten.
Grunden til, at vi konverterer grafikken til MovieClips er, at vi skal styren den via ActionScript. Det kan vi ikke, hvis vi kun har at gøre med shapes.
Nu skal vi have skrevet koden, så grafikken opdateres. Det er faktisk lettere end du tror. Vi kan nemlig bruge propertyen ’scaleX’ på vores movieClip. ScaleX-propertyen går fra 0 (ingenting) til 1 (normal størrelse. ScaleX skal altså sættes lige med variablen ’procent’ / 100, da ’procent’ går fra 0 til 100.
12. Åbn din eksisterende kode og tilføj følgende linje til sidst i funktionen ’opdaterLoader’:
preloaderFyld_mc.scaleX = procent/100;
13. Simuler nu din Flash film, som gerne skulle ligne nedenstående billede indtil den er færdig med at loade.
