Globale linker

Flash

Optimalisering

Hva skjer når du må vente stort mer enn 10 sekunder på en web-side. Du går et annet sted. Sånn er det med de som besøker sidene dine også. Husk alltid å ha dette i bakhodet når du lager innhold for websider, om det er HTML eller Flash.

Derfor er det viktig å optmialisere Flash-animasjonen din. Med et par enkle grunnregler kan du nå langt i arbeidet med å få ned filstørrelsen, og dermed nedlastingstiden for sidene dine.

Når en bruker besøker siden din, må Flash sende et par ting til brukerens maskin før animasjonen kan avspilles.

Timeline; inkludert ActionScripts og elementer som ikke er lagret som symboler (som f.eks. tekst og tegnede elementer som ikke er konvertert til symboler).
Flash Library; inkludert lyder, symboler og bitmaps (bilder) som er brukt i animasjonen.

Når Flash sender disse dataene gjennom nettet, sendes Timeline i Frame-rekkefølge, hvis animasjonen er delt opp i flere Scenes, vil hver Scene sendes i den rekkefølgen de ligger i Scene paletten. Til slutt sendes innholdet du har i Library paletten i den rekkefølgen de opptrer i.

Så det beyr at det ikke er noe lurt å legge alt innholdet i Frame 1 på animasjonen. Da må brukeren laste ned hele Flash-animasjonen før den kan spilles av.

Hvis du istedet sprer innholdet i animasjonen over flere frames og ikke minst Scenes, vil animasjone «streame» inn til brukeren. Da startet Flash å spille av animasjonen før alt er lastet ned, som f.eks. med en preloader. Tenk deg streameren som en vaktmester som ruller ut den røde løperen, og avspilleren som Kongen. For at streaming skal kunne funke, må streameren alltid være foran avspilleren, eller vaktmesteren må alltid være før Kongen. Hvis avspilleren tar igjen streameren vil animasjonen stoppe opp, eller hvis kongen går fortere enn vaktmesteren klarer å rulle ut den røde løperen, må Kongen vente.

Dette kan gjøres, ved å bruke et ActionScript, som kontrollerer hvordan Flash spiller av animasjonen. I en preloader, vil vi kasnje si: kjør preloader til Flash har lastet ned 70% av hovedanimasjone som ligger i Scene2. Da kan vi være rimelig sikre på at streamern alltid vil ligge foran avspilleren.

Det betyr også at det er extremt viktig å bruke symboler, i og med at når de først er lastet ned, kan de brukes om igjen. Hvis Flash hele tiden møter på nye elementer i Timeline'n, altså ikke symboler, vil den måtte laste inn veldig mange elementer. Har du i stedet vært flink og brukt og gjenbrukt symboler vil nedlastingen gå raskere.

Flash har selvfølgelig et verktøy som visualiserer nedlastingsprosessen, og den kalles bandwith profiler.

Med bandwith profiler får vi en grafisk fremstilling av hvordan animasjone vil oppføre seg når den lastes ned hos en bruker med en bestemt båndbredde. Den fremstillingen som vises er ut i fra en konstant overføringshastighet, og det har vi jo ikke i den ordentlige verden, så dette verktøyet kan bare gi oss en idé om hvordan animasjone vil oppføre seg.

Bandwith profiler finner vi ved kjøre animasjonen i test-modus, Control > Test Movie eller trykk CTRL+F5.

Et lite eksempel:

Åpne et nytt blankt dokument, gjør den 20 Frames lang ved å klikke og dra over 20 Frames og så trykke F5
I Frame 1 skriver du inn teksten: (bruk 24punkts Times New Roman)
Dette er en test for å se hvordan jeg kan optimalisere denne animasjonen ved å bruke bandwith profiler.
Gjør teksten om til et Graphic Symbol (F8) som du kaller text1
Fortsatt i Frame 1, plasserer du følgende tekst under den andre: (Arial 16pt)
Vi skal få Flash til å laste to forskjellige tekster, i forskjellig font, og så skal vi bruke bandwith profiler til å optimalisere animasjonen.
Konverter til Graphic Symbol som du kaller text2
Test animasjonen ved å trykke CTRL+Enter
Mens animasjonen går, hent fram bandwith profiler ved å trykke CTRL+B, eller View > Bandwith Profiler.

Bandwith Profiler

Som du ser i listen til venstre er animasjonen vår nesten 4k i størrelse (Size). Siden alt innholdet ligger i første Frame, må hele animasjonen og alt dens innhold lastes inn før brukeren kan se animasjonen. Tiden det tar å preloade animasjonen er 0,9 sekunder (preload), og dette er et 56kb modem det er tatt utgangspunkt i.

Den røde linjen (2) er mengen med informasjon i bytes, som ideelt sett kan lastes ned per sekund. Det det hele går ut på er at vi bør passe på at mengde data som skal lastes inn (1) ikke ligger over den røde linjen.

Du kan bytte modem ved å gå til Debug-menyen og velge en annen hastighet.

Slett teksten i Frame 1, og plasser text 1 i Frame 5 og text 2 i Frame 15 og test igjen ved å trykke CTRL+Enter.

En enda bedre forhåndsvisning av hvordan animasjonen vil streame får du ved å velge View > Show Streaming (CTRL+Enter) når du er inne i preview.

Sett ned hastighten på modemet til 14.4 så ser du tydelig hva som skjer, og hold et øye med den grønne streken øverst. Der hvor player (den lille grå trekanten) tar igjen streamer (den grønne streken) har du et problem. Animasjonen vil stanse opp og vente på at innholdet blir lastet inn før den kan vandre videre.

Hvis du vil vite hvilken Frame som er synderen, klikk på det som stikker over den røde streken og ta en titt i listen til venstre. Her står det hvilken Frame du har markert.

Altså, viktig:

Lag symboler som du bruker om igjen.
Lag en liten preloader, som kan vises mens resten, eller en del av animasjonen lastes inn.

Gå til neste side hvor vi ser på publisering.