Lag en Flash preloader med ActionScript 3.0

Denne innføringen viser hvordan du lager en preloader med Adobe Flash CS4 ved hjelp av ActionScript 3.0.
Når en stor flash-film lastes ned fra internett kan det lang tid, særlig om båndbredden er liten. En preloader er en liten film som lastes raskt ned i starten av filmen, og som stanser visningen av filmen samtidig som den gir informasjon om hvor lang tid nedlastingen tar.

ActionScript 3.0 er også tilgjengelig for fri bruk gjennom Adobe Open Source Flex SDK rammeverket.

Denne innføringen er basert på en av de flotte video-tutorialene til tutvid, overført til Adobe Flash CS4.

Åpne Flash CS4, og velg ‘Flash File (ActionScript 3.0)’ som type flash prosjekt.

Opprett tilsammen 3 lag i Timeline, og gi dem navnene ‘actionscript-preloader’, ‘preloader’, og ‘innhold’.

Reorganiser lagene slik at de får rekkefølgen som er vist i illustrasjonen over. Rent teknisk sett er det likegyldig hvilken rekkefølge lagene har, men for oversiktens skyld er det greit å organisere dem slik.
‘actionscript-preloader’ -laget skal inneholde actionscript-koden, og siden denne koden berører innholdet i alle lagene i flash-filmen er det logisk at dette laget er øverst. ‘preloader’-laget skal innholde grafikken til preloaderen (nedlasteren) til filmen, og siden denne blir vist før innholdet i filmen er det logisk å plassere dette laget over laget ‘innhold’ som inneholder grafikken til selve filmen.

Marker laget ‘innhold’ i Timeline, og velg ‘Rectangle Tool’ (tastatursnarvei R). Tegn en firkant i scenen.

Flash-filmen skal ikke begynne å kjøre før hele filmen er lastet ned. Derfor må frame 1 i filmen settes av til preloaderens grafikk og actionscriptet. Preloaderens grafikk består som regel av små bilder som nettleseren raskt laster ned. Actionscriptet stopper filmen i frame 1, mens resten av filmen lastes ned. Under nedlastingen vises preloaderens grafikk,samtidig som actionscriptet viser info om hvor mye som lastes ned.
Når hele filmen er lastet ned sender actionscriptet filmen videre til frame 2.
Derfor må grafikken til hovedinnholdet i flash-filmen plasseres i frame 2.
Klikk på keyframen i ‘innhold’-laget, og flytt den til frame 2.

Marker key-framen i ‘preloader’-laget i Timeline,og tegn en ny firkant i scenen ved hjelp av ‘Rectangle Tool’. Denne firkanten skal være den grafiske nedlastings-indikatoren, som øker etterhvert som mer og mer av filmens innhold lastes ned.
Velg ‘Selection Tool’ (tastatursnarvei V), og dobbelklikk på firkanten i scenen, for å markere både fyllet og linjen til firkanten.
Åpne ‘Properties’-vinduet, og gi firkanten en bredde på 300 piksler og en høyde (H) på 10 piksler.

For at actionscriptet skal kunne kommunisere med de grafiske elementene i preloaderen, må de gjøres om til symboler. Når disse symbolene gis egne navn (Instance name) kan actionscriptet gi og få beskjeder fra de grafiske elementene. Vi skal derfor gjøre firkanten om til et ‘MovieClip’ som er en type symbol:
Dobbelklikk på firkanten i scenen for å marker både fyll og linje, og velg ‘Modify -> Convert to Symbol’ i filmenyen øverst i Flash CS4 vinduet. Dette åpner ‘Convert to Symbol’ vinduet. Velg ‘Movie Clip’ som symbol-type, og gi det nye MovieClipet navnet ‘mcPreloader’.

Pass på at ‘Registration’-punktet settes til senter-venstre (se illustrasjon). MovieClipets registreringspunkt må settes til senter-venstre fordi nedlastings-indikatoren skal utvides fra venstre til høyre etterhvert som innholdet i filmen lastes ned. Når actionscriptet registrerer hvor mye av innholdet som lastes ned, gir scriptet beskjed til nedlastings-indikatoren om å utvide seg i MovieClipets X-retning etterhvert som innholdet lastes ned. MovieClipet bruker da registreringspunktet som startpunkt for økningen av lengden.

Nå skal vi gjøre ferdig preloaderen:
Dobbelklikk på MovieClip ‘mcPreloader’ i scenen for å åpne MovieClipet. Dette åpner MovieClipets egen Timeline. Øverst oppe i Scene-vinduet står det nå ‘mcPreloader’ bak tittelen på scenen (Scene 1). Dette forteller at du nå redigerer MovieClipet.

Dobbelklikk på navnet til laget i MovieClipets Timeline (Layer 1), og gi det navnet ‘Fyll nedlastings-indikator’. (Trykk enter-tasten på tastaturet for å avslutte navneendringen). Opprett to nye lag, og gi dem navnene ‘Ramme til nedlastings-indikator’ og ‘Tekst’:

Vi skal flytte kantlinjen til firkanten over i et eget lag. Det er kun fyllet i firkanten som skal vokse fra venstre til høyre under nedlastingen, mens kantlinjen rundt skal være statisk. På denne måten vil kantlinjen fungere som en boks som viser hvor mye nedlastings-indikatoren har igjen før hele filmen er lastet ned.
Klikk på laget ‘Fyll nedlastings-indikator’ for å markere dette laget. Klikk deretter på et tomt sted i scenen med ‘Selection Tool’ verktøyet, for å velge bort markeringen av firkanten i scenen. Beveg musepekeren bort til linjen i firkanten, slik at det dukker opp en bøyd strek ved siden av musepekeren. Dette indikerer at du kan velge kantlinjen til firkanten. Dobbelklikk på kantlinjen for å velge alle 4 linjene rundt firkanten:

Når linjene er markert vises de som tykke hvitstiplede linjer (se bildet ovenfor). Velg ‘Edit -> Cut’ i filmenyen for å klippe vekk kantlinjene. Marker deretter laget ‘Ramme til nedlastings-indikator’ i timeline, og velg ‘Edit -> Paste in Place’ i filmenyen, for å lime inn kantlinjene i sitt eget lag. Kommandoen ‘Paste in Place’ limer inn kantlinjene på nøyaktig samme plass i scenen som de ble klippet ut.Klikk på et tomt sted i scenen for å fjerne markeringen av kantlinjen, og skjul visningen av fyllet i firkanten (klikk på øye-ikonet i ‘Fyll nedlastings-indikator’ -laget i timeline) for å se at kantlinjen nå ligger i et eget lag (‘Ramme til nedlastings-indikator’ -laget):

Nå som elementene til den grafiske nedlastings-indikatoren er lagt i egne lag, skal vi gjøre dem om til symboler med egne instans-navn, slik at actionscriptet kan kommunisere med dem:
Klikk på laget ‘Ramme til nedlastings-indikator’ for å markere alle kantlinjene til firkanten i scenen, og velg ‘Modify -> Convert to Symbol’ (F8) i filmenyen.
I ‘Convert to Symbol’ -vinduet som åpnes velger du ‘Movie Clip’ som symbol-type, og gir det nye MovieClipet navnet ‘mcNedlasterLinje’. Legg merke til at ‘Registration’ -punktet er satt til senter-venstre. Klikk ‘OK’ for å gjøre kanlinjene til et MovieClip:

Gjør det samme med fyllet til firkanten i laget ‘Fyll nedlastings-indikator’, og gi det nye MovieClipet navnet ‘mcNedlasterFyll’.
Om du nå åpner ‘Library’ -vinduet vil du se at .fla fila innholder 3 MovieClip, der to av MovieClipene (mcNedlasterLinje og mcNedlasterFyll) ligger inni det tredje (mcPreloader):

Før actionscriptet kan kommunisere med MovieClipene må hvert MovieClip i scenen ha et eget unikt navn (Instance name). Dette kommer av at et symbol (slik som f.eks. et MovieClip) kan gjenbrukes flere ganger i en flash-film, og når actionscriptet skal kommunisere med et symbol må det vite nøyaktig hvilket av symbolene det kommuniserer med:
Klikk på MovieClipet ‘mcNedlasterLinje’ i scenen, og åpne ‘Properties’ -vinduet. Øverst i  vinduet er en tekstboks som heter ‘<Instance Name>’.
Rett under tekstboksen står det hvilket MovieClip som er markert i scenen. Pass på å sjekke at det er MovieClipet ‘mcNedlasterLinje’ som er valgt, og gi det instans-navnet ‘NedlasterLinje_mc’.
Det er dette instans-navnet som actionscripet forholder seg til. Gi også MovieClipet ‘mcNedlasterFyll’ (i ‘Fyll nedlastings-indikator’ -laget) et unikt instans-navn på samme måten, ved å gi det instans-navnet ‘NedlasterFyll_mc’:

Preloaderen skal også ha en statisk tekst som forteller brukeren av flash-filmen hva som skjer.
Klikk på ‘Tekst’ -laget i timeline, og velg ‘Text Tool’ -verktøyet. Klikk og dra ut en tekstrute i scenen, og skriv teksten ‘Laster …’ i ruten:

I ‘Properties’ -vinduet setter du tekst-størrelsen til ’22’, og velger ‘Static Text’ som tekst-type. Velg en passende tekst-farge i valget for ‘Color’:

Bruk ‘Selection Tool’ verktøyet, og plasser teksten over nedlastings-indikatoren.
Klikk på et tomt sted i scenen for å fjerne markeringen av den statiske teksten, og velg deretter ‘Text Tool’ verktøyet igjen. Klikk og dra ut en ny tekst-rute til venstre for den statiske teksten. I denne tekst-ruten skal preloaderen hele tiden vise hvor mange prosent av filmen som er lastet ned. Denne informasjonen skal tekst-ruten få av actionscriptet. Derfor behøver du ikke skrive inn noe tekst her, men tekst-ruten må være av tekst-typen ‘Dynamic Text’ for å kunne kommunisere med actionscriptet. Velg ‘Dynamic Text’ som tekst-type i ‘Properties’ -vinduet, og gi også tekstruten et unikt instans-navn (prosent_txt), slik at actionscriptet vet at det er denne tekst-ruten som skal ha info om prosenten:

I tillegg til disse opplysningene skal preloaderen også vise nøyaktig hvor mange bytes hele flash-filmen består av, og nøyaktig hvor mange bytes som til enhver tid er lastet ned. Utregningen og registreringen av dette gjøres av actionscriptet, og vi skal sette inn tekst-ruter som tar i mot og viser disse dataene fra actionscriptet:
Opprett to nye tekst-ruter av typen ‘Dynamic Text’, og gi dem henholdsvis instans-navnene ‘hittilLastetKb_txt’ og ‘totaltAntallKb_txt’. Sett tekststørrelsen til 12. Plasser tekst-ruten ‘hittilLastetKb_txt’ under venstre hjørne av nedlastings-indikatoren, og plasser tekst-ruten ‘totaltAntallKb_txt’ til høyre for tekst-ruten ‘hittilLastetKb_txt’. Opprett deretter en tekst-rute av typen ‘Static Text’. Skriv inn teksten ‘av’, og plasser denne tekst-ruten mellom de to dynamiske tekst-rutene:

Når preloaderen kjører vil disse tekst-rutene vise hvor mange bytes som er lastet av det totale antall bytes som skal lastes. Husk på å høyrejustere teksten i tekst-ruten ‘hittilLastetKb_txt’ (velg ‘Align Right’ i ‘Properties’ -vinduet). Ved å gjøre dette unngår du at det oppstår mellomrom mellom teksten i tekst-ruten ‘hittilLastetKb_txt’ og teksten ‘av’ i den statiske tekst-ruten.

Nå er alle elementene i preloaderen på plass. Det mangler bare å gi selve preloader-MovieClipet et eget instans-navn: Gå tilbake til scenens timeline (Main Timeline), ved å klikke på ‘Scene 1’ linken øverst i scene-vinduet (se tidligere bilde). Marker MovieClipet ‘mcPreloader’, og gi det instans-navnet ‘preloader_mc’ øverst i ‘Properties’ -vinduet:

Med alle elementene til preloaderen gjort om til symboler med egne unike instans-navn, slik at actionscriptet kan kommunisere med dem, er det tid for å legge inn actionscriptet i ‘actionscript-preloader’-laget øverst i timeline.
Klikk på ‘actionscript-preloader’ -laget for å markere det, og klikk på ‘Actions-Frame’-fanen. Dette åpner actionscript-editoren.

Actionscriptet i ‘actionscript-preloader’-laget kan kommunisere med preloaderen og alle elementene inni preloaderen fordi disse har fått egne unike instans-navn.
Hele scriptet gjengis under, med kommentarer (linjene med // eller /* foran) for å beskrive hva scriptet gjør:

————————————————————————————————————————————————————-

// Denne kommandoen stopper filmen i frame 1, slik at preloaderen får lastet ned hele filmen før visningen starter:

stop();

/*
Preloader-kodens oppgave er å registrerehvor mange bytes av filmen som er lastet ned, og sammenligne denne mengden med filmens totale fil-størrelse. Denne kontrollen må gjøres kontinuerlig gjentatte ganger, helt til hele filmen er lastet ned. Selv om filmen er stoppet  frame 1 looper den innom frame 1 med frameratens fart: Dersom filmens framerate er satt til 24 frames per second (fps) vil altså filmen loope innom frame 1 24 ganger i sekundet. For at preloader-koden skal kontinuerlig sjekke hvor mye av filmen som er lastet ned, festes den til frame 1 (som kontrolleres 24 ganger i sekundet) ved hjelp av en ‘event listener’. Funksjonen ‘nedlaster’ bruker ‘EventListener’ for å jevnlig sjekke hvor mye av filmen som er lastet ned.
*/

addEventListener(Event.ENTER_FRAME, nedlaster);

// Oppretter funksjonen «nedlaster»:

function nedlaster(e:Event):void{

/*
Oppretter variabelen «sumLasting» som får vite flash-filmens totale størrelse av propertyen ‘bytesTotal’til
actionscript-klassen ‘loaderInfo’.
*/

var sumLasting:Number = loaderInfo.bytesTotal;

/*
Oppretter variabelen «erLastet» som får vite hvor mye av flash-filmen som er lastet av propertyen ‘bytesLoaded’ til
actionscript-klassen ‘loaderInfo’.
*/

var erLastet:Number = loaderInfo.bytesLoaded;

/*
Oppretter variabelen «total» som inneholder summen av antall-bytes-som-er-lastet delt på antall-bytes-som-hele-flash-filmen-er-på.
Dette tallet brukes senere både til å bestemme lengden på den grafiske nedlastings-indikatoren, og til å beregne
prosenten av hvor mye som er lastet ned:
*/

var total:Number = erLastet/sumLasting;

// Setter opp to valg for hva som skal skje på de oppgitte vilkårene:

// Dersom variabelen ‘erLastet’ er lik variabelen ‘sumLasting’ skal EventListener fjernes, og flash-filmen skal fortsette til frame 2:

if (erLastet == sumLasting){
removeEventListener(Event.ENTER_FRAME, nedlaster);
gotoAndStop(2);

// … så lenge vilkårene for valg nr.1 ovenfor ikke er oppfyllt skal flash-filmen gjøre dette:

} else {

/* Tallet i variabelen «total» legges inn i ‘scaleX’-propertyen til MovieClip ‘NedlasterFyll_mc’
som ligger inni MovieClip ‘preloader_mc’.
*/

preloader_mc.NedlasterFyll_mc.scaleX = total;

/* Ved å multiplisere tallet i variabelen ‘total’ med 100, får vi prosenten av hvor mye som er lastet.
Dette prosent-tallet legges inn i ‘text’-verdien til tekst-ruten «prosent_txt. Prosent-tallet får
mange unødvendige desimaler, så vi bruker ‘Math’-klassens ‘Math.floor’-metode for å runde ned tallet
til nærmeste hele tall. Tekst-strengen ‘%’ legges til på slutten slik at man kan se at det er
prosenten som vises i tekst-ruten:
*/

preloader_mc.prosent_txt.text = Math.floor(total*100) + «%»;

/*
Verdien til variabelen ‘erLastet’ og tekst-strengen ‘bytes’ legges inn i ‘text’ verdien
til tekst-ruten ‘hittilLastetKb_txt’.
*/

preloader_mc.hittilLastetKb_txt.text = erLastet + «bytes»;

/*
Verdien til variabelen ‘sumLasting’ og tekst-strengen ‘bytes’ legges inn i ‘text’ verdien
til tekst-ruten ‘totaltAntallKb_txt’.
*/

preloader_mc.totaltAntallKb_txt.text = sumLasting + «bytes»;
}
}

—————————————————————————————————————————————————-

Når du trykker ‘Ctrl + Enter’ på tastaturet kjøres filmen (swf-fila) i flash-playeren. Fordi filmen kjøres fra din egen PC går nedlastingen så fort at den knapt vises. Simuler nedlasting ved å velge ‘View -> Simulate Download’ i menyen til flash-playeren. Dersom hastigheten fremdeles er for rask, kan du bestemme nedlastingshastigheten ved å velge ‘View -> Download Settings’ i menyen:

Dersom preloaderen fremdeles vises for raskt, kan du gjøre filmen tregere ved å gjøre .fla-fila større: Importer f.eks. et stort foto til scenen i laget ‘innhold’, slik at fotoet legges i hovedinnholdet i filmen.

Denne preloaderen kan videreutvikles på mange måter. Den grafiske nedlastings-indikatoren f.eks. vil fungere som før selv om den roteres i andre retninger, fordi MovieClipet skaleres i sin egen x-retning og ikke i forhold til scenens koordinater:

Du kan også maskere nedlastings-indikatoren slik at det f.eks. ser ut som om den øker med en sirkel om gangen:
Opprett et nytt lag over ‘Fyll nedlastings-indikator’ -laget, og gi det nye laget navnet ‘maskering’. Med ‘maskering’-laget aktivt tegner du en sirkel med ‘Oval Tool’ verktøyet, og kopierer den flere ganger slik at hele nedlastings-indikatoren er dekket med en kjede av sirkler. Høyreklikk på ‘maskering’-laget, og velg ‘mask’ i menyen som åpnes for å gjøre grafikken i laget om til en maske:

Dersom du låser ‘maskering’-laget og ‘Fyll nedlastings-indikator’ -laget (klikk på ‘Lock’-ikonet til lagene) aktiveres maskeringen i scenen:

Om du ikke har Adobe Flash kan du også bruke Open Source Adobe Flex SDK for å lage swf-filer ved hjelp av ActionScript 3.0:

http://www.adobe.com/devnet/flex.html

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex4sdk

Eclipse IDE er en gratis open source programmering editor som du kan bruke til å lage swf-filer ved hjelp av Flex SDK. Ved å installere Flex som en plug-in i Eclipse kan du utvikle og bygge flash-programmer på en enkel måte.

 

Last ned artikkelen som pdf