>>>>>>>> Et inlæg om preloading - hvorfor, hvornår og hvordan. <<<<<<<<
:::::::::::Det sure opstød...
Det er som om de fleste brugere af flash glemmer at de har med et såkaldt
streaming medie at gøre. Dvs. at det er muligt at begynde at afvikle
flash-filmen før at den er 100% downloadet til brugerens maskine.
Jeg syntes det er ærgeligt (og egentligt ret tåbeligt) at tvinge brugeren
til at sidde og vente på at hele (den/de ofte ret store flash-film),
specielt når underholdningen i ventetiden som oftest ikke er mere end en
sørgelig progress-bar og en procentangivelse af hvor længe man skal vente
endnu. Det er jo slet ikke sikkert at brugeren vil se hele filmen, så
hvorfor skal han hente den hele?. Eller endnu værre - Når brugeren bliver
tvunget til at vente på at en tung intro downloader, så der er noget at se
på imedens det rigtige site downloader - fuldstændigt åndet!
:::::::::::Hvad gør man så?:
Lige så snart der er nok i cachen til at begynde oplevelsen - så gør det
dog! En meget omfattende flash-side kan med meget få og enkle midler komme
til at se ud som om den fylder næsten ingen ting.
Der er masser af kneb at bruge når flashfilmen(e) skal optimeres. En ting er
selvfølgelig komprimeringen af evt. pixelgrafik og lyd, men en anden og lige
så vigtig ting er god planlægning og opdeling.
:::::::::::Den lille lette:
Som regel er der ingen grund til at lave hele sit site i en enkelt kæmpe
flashfilm, og hvis det er, så sørg for at der er et fornuftigt lineært
forløb i filmens enkelte scener. Altså - placér de scener som du mener der
er størst sansynlighed for at brugeren vil se som noget at det først i
begyndelsen af filmen, og gem de mindre vigtige ting til sist. Der er ingen
der siger at en flashfilm rent scene-mæssigt skal følge et naturligt lineært
tidsforløb. et simpelt ex.:
(scener)
velkommen
galleri1
galleri2
galleri3
farvel
minelinks
ommig
(menuen)
velkommen
hvem er jeg
galleri 1, 2 og 3
de fedeste links
farvel og på gensyn
Der er selvfølgelig stor fornuft i at have en velkomst/intro til at ligge i
begyndelse. Men selv om at det næste punkt i en evt. menu ville hedde "hvem
er jeg", så læg scenen senere i filmen, for du kan æde din hat på at
brugeren hellere vil kigge i gallerierne end at læser om hvor fed du er.
Det her lille ex. kan snildt sættes i gang allerede når velkomsten og det
første galleri er loadet. Det der er masser at se på (brugeren bydes
velkommen på en fancy måde, og har derefter hele galleri 1 at kigge i,
imedens resten hentes).
Resultat > Fucking fast site!
:::::::::::Den store og mere flexible løsning:
Men hvad så hvis vi har med et meget større site at gøre... Hvad hvis der er
tale om et virkeligt dybt site, med masser af niveauer osv. Hvad gør en
klog?
Skær kagen i stykker! Find frem til en naturlig opdeling af dit site, og i
stedet for at lave hver del i hver sin scene, så lav det i flere enkelte
film. Hver af disse enkelt film kan så hentes ind i - hvad vi kan kalde for
index-filmen - når der er brug for dem, eller endnu bedre... Lige FØR der er
brug for dem.
Der er to metoder at gøre dette på. De lige gode begge to, men hver har sine
fordele.
I begge tilfælde begynder du med loadMovie -funktionen. Men allerede
herefter skal du til at vælge. Hvor skal den loadede film hen (location)?
Skal den placeres i en af de såkaldte levels (loadMovieNum)? Eller skal den
hentes ind i et andet movieclip (loadMovie)?
// levels - hvad er det?:
Flash har noget (et begreb om du vil) der hedder levels. Det har intet at
gøre med de lag du kan se når du sidder og roder med programmet. Det er en
slag usynlige lag der ligger oven på hinanden når din flash-film afvikles.
De har alle sammen hver deres nummer, startende med _level0 som det første
lag.
_level0 er altid det nederste af alle _levels'ne. Dvs. at hvis din første
flashfilm er en blank grøn baggrundsfarve, og du derefter loader en ny film
med en rød cirkel ind i _level1 (altså oven på _level0), så vil du ende med
en grøn baggrund med den rød crikel oven på - akkurat som hvis den rød
cirkel lå på et alm. lag inden i den grønne film. Man kan altså lave en
slags lagkagesamling af flere film der tilsammen udgør en helhed.
Her vil den skarpe læser så spørge "hvad med baggrunds-farven i filmen med
den rød cirkel - den der ligger øverst??". Det er let nok. Den eneste
baggrundsfarve du skal bekymre dig om der den i level0. Alle øverige filmen
der loades ind i ovenliggende levels er "gennemsigtige", altså som om den
rød cirkel ligger på en glasplade oven på den grønne film. Baggrundsfarven i
filmen med den røde cirkel spiller ingen rolle overhovedet!
Men... Det vigtigt at lægge mærke til at det ikke kun er rent visuelt at
film i de øvre levels er gennemsigtige - også rent funktionelt. Tilbage til
ex.
Forestil dig at vi lægger en knap i den grønne film i level0 lige der hvor
den rød cirkel også ligger (bare oppe i level1). Den rød cirkel vil dække
for knappen så vi ikke kan se den, men markøren bliver stadig til en hånd,
når vi ruller ind over knappens hit-area. Knappen duer altså stadig, og de
actions vi har knyttet til den vil blive udført hvis vi klikker.
Ok, så langt så godt. Men der er flere ting omkring de hersens levels, som
vi skal have afklaret.
Placering af loaded film i levels.
En film der loades ind i f.eks. _level1 oven på en anden i _level0, vil
altid placere sig således at dens eget nulpunkt ligger præcist oven på
værtsfilmens nulpunkt. Med andre ord. Den lægger sig med sit øverste venstre
hjørne lige præcist oven på værtsfilmens øverste venstre hjørne. Det betyder
at hvis du laver alle dine del-film i den sammen str. som din "index-film"
så kan du placere grafik mm. helt nøjagtigt hvor du vil, da alle filmen
altid vil lægge sig nøjagtigt lige oven på hinanden.
OK, så fik vi placeret filmene og deres indhold.
Men hvad med tidslinierne?
En hver film der er loadet ind i et level har sin egen hovedtidslinie, lige
som den du kigger på når arbejder på scenen i din flashfilm - Det man kan
kalde for "roden" i din film. Den grønne film i _level0 har sin
hovedtidslinie, og ligeså har filmen i _level1 (den med den røde cirkel) sin
egen hovedtidslinie. dette betyder at man skal være en anelse mere
opmærksom, når man skal reffererer til noget i sin film, altså hvis man
f.eks. skal lave en tellTarget. tilbage til ex.
I filmen der ligger i _level1 befinder sig den rød cirkel. Cirklen er et
movieclip med instance-navnet "lise".
Vi vil gerne have "lise" oppe i _level1 til at reagere på at vi trykker på
knappen nede i _level0. Den absolutte sti til "lise" ser således ud:
_level1/lise
bemærk at vi har hæftet navnet på den level "lise" befinder sig i på stien
til "lise". Vi starter altså med at fortælle flash-playeren hvilket level
den skal lede i for at finde "lise". Hvis "lise" i stedet for at ligge hvor
hun gør havde ligget på den grøne scenen nede i level0, så havde den
absolutte sti til "lise" set således ud:
/lise (eller: _level0/lise)
Eller den endnu kortere relative sti til "lise":
lise
..Lige som vi kender det. Vi tilføjer altså bare _level'en og dens nummer når
vi skal reffererer til noget i filmene.
Spørgsmålet om hvor vidt det er lettets at bruge den absolutte sti eller en
relativ sti, når man skal reffererer til noget er lidt en smagssag, og et
spørgsmål om at tænke sig om. Der er ikke så meget der kan gå galt hvis man
altid bruger den absolutte sti, men nogle gange kan det være meget
omstændigt - hvis man f.eks. altid skal starte helt ude i roden, og derefter
bore sig ned igennem en masse movieclips, inde i nogle andre moiveclips, som
igen ligger inde i. osv. Ex.
Inde i movieclippet "lise" ligger der en knap der for tæller "lise" at hun
skal gøre et eller andet. Den absolutte sti til "lise" vil være:
_level1/lise
Den relative vil være:
"" (flash4)
_this (flash5)
"Besparelsen" er til at se selv om at dette er et meget simpelt ex.
Hvis du bare ønsker at fortælle filmen i _level1 at den skal gøre et eller
andet (f.eks. at den skal stoppe) så reffererer du bare til den level den
ligger i:
tellTarget ("_level1") {
stop ();
}
Nok om levels..
Som tidligere nævnt er er også et andet sted man kan gøre af loadede film -
Man kan putte dem i movieclips!
// Movieclips - Dem kender du!:
Det hele foregår på sammen måde som jeg lige har ridset op, med den ene og
store forskel, at endestationen for den loadede film ikker er et level, men
derimod et movieclip. Tilbage til ex. Vi har fundet ud af at det er
uhensigtsmæssigt at filmen med "lise" i ligger oppe i _level1 og blokerer
for alting. Den indeholder nemlig ikke kun "lise" men også en hel massen
andet grafik og sheit der hele tiden ligger i vejen. Det ville være meget
federe hvis filmen med "lise" og alt det andet bare var et alm. movieclip på
scenen nede i _level0. No problemmo.
Vi laver et nyt og HELT TOMT movieclip i filmen med den grønne baggrund. Vi
knalder et instance at det tomme clip ud på scenen og giver det
instance-navnet "lisefilmen" (hvad du kalder movieclippet er sådan set lige
meget, det skal bare være noget du kan huske, når du senere skal refferere
til det. Find på et system du syntes er smart).
Nu har vi altså en tom grøn scene, med et tomt movieclip der hedder
"lisefilmen".
I den første frame i den grønne films hovedtidslinie laver vi en loadMovie
der ser sådan her ud:
loadMovie ("minlisefilm.swf", "/lisefilmen");
Det første parameter er navnet på selv swf-filmen, og det andet og meget
mere interessante, er den location vi har specifiseret til at være et target
i stedet for en level.
Altså. "Hent venligst den film der hedder 'minlisefilm.swf' og læg den ind i
det her tomme movieclip med instance-navnet 'lisefilmen', som i øvrigt
ligger i roden af min film.
Actionen kunne også have set således ud:
loadMovie ("minlisefilm.swf", "_level0/lisefilmen");
Her er vi bare lidt grundigere med stien.. som i det her tilfælde faktisk
også kunne have set sådan her ud:
loadMovie ("minlisefilm.swf", "lisefilmen");
OK. Det der nu sker er at hele den film vi før havde til at ligge oppe i
_level1, nu ligger inde i movieclippet 'lisefilmen'. Faktisk opfører hele
filmen sig fuldstændigt som om den er et ganske alm. movieclip - og det er
godt!
For det betyder at vi kan flytte rund på lisefilmen som det passer os. gøre
den halvgennemsigtig, skallére den osv.
Faktiskt behøvede det movieclip vi hentede minlisefilm.swf ind i ikke at
være tomt. Hvis der havde været noget i det, var det bare blevet erstattet
med inholdet af 'minlisefilm', men det det beholder sit instance-navn.
::::::::::::: Humlen ved det hele:
Det er er super-duper mega smart ved de her teknikker er at du nu
fuldstændigt kan kontrollere hvor, hvornår, og hvordan ting og sager skal
loades i din film, i stedet for at preloade hele dynen på en meget stor og
tung og langsom og tåbelig gang.
Tricket ligger i at hente de dele som man gætter på at brugeren ønsker at se
som det næste. Før han beder om det! Ex.
Forestil dig et galleri af billeder der er delt op i 5 kategorier med 10
billeder i hver.
Den ufixe flasher vil tvinge brugeren til at hente HELE galleriet på én
gang, og sikkert lang tid før han har brug for det. Den smarte henter én
kategori ad gangen imedens brugeren ser på den forrige. Dette sikrer at vi
ikke tvinger brugeren til at downloade noget som han ikke har tænkt sig at
se på. Det kan jo være at det kun er kategori 1 og 2, som han syntes er
fede. Altså inge spild af båndbredde og tid.
Teknikken garanteret IKKE at brugeren ikke på noget tidspunkt vil komme til
at vente et øjebklik eller to. Men den minimale ventetid (delene af sitet
fylder jo ikke meget hver især) som han måske vil oplever er minimal og
næsten ligegyldig i forhold til ventettide ved dørmåtten til flash-fjolsets
site.
Mulighederne for at udnytte og kombinere disse loadMovie-fif er uanede. Find
ud af hvad der passer til dig og din side. Måske vil det være smart at få
cachet en del swf-filer fra starten, således at de ikke skal loades fra
nettet, men fra brugerens egen cache når han vil se dem (hvilket naturligvis
går super meget hurtigere fordi de allerede er downloadede). Eller måske er
der et afsnit på din side som ikke fylder meget rent kilobyte-mæssigt, men
som taget lang tid for brugeren at "processe" (f.eks. hvis han skal læse en
masse tekst).. så udnyt tiden og få loadet det næste han skal se, ind i en
level længere op (og så bare med en tom stop-keyframe som det første, så er
den lige til at kalde og sætte i gang når det passer).
Måske har du et eller andet (mere eller mindre fedt) soundtrack til at
kører/loope i baggrunde imens brugeren surfer rundt hos dig. Sæt siden i
gang før lyden kommer på (lydfiler er noget af det tungeste).. og load
lyd-swf-filen ind i et movieclip eller level, når alt det andet er på plads.
Lav nogle fede sider uden tons tunge pre- eller pre-preloadere. Sæt showet i
gang lige så snart det er muligt.
Et rigtigt godt værktøj til at finde ud af hvor meget (eller endnu bedre:
hvor lidt) det mest nødvendige for at siden funger fylder er den Bandwidth
Profiler og Show Streaming funktion der ligger oppe i menuen View, når du
tester din movie. Indstil i menuen Debug hvilken type forbindelse du ønsker
at optimere til, og hopla. se hvor lidt der behøves!
Lige her til slut, så vil jeg bare gøre opmærksom på at dette er nogle
simple tips og triks, som de fleste kan få glæde af. Der er helt sikker
nogle af jer derude der vidste det her i forvejen, og som har rettelser,
bemærkninger og sikker og prygl til mig.. Og finno med det. Men så lad os da
fortælle det til dem der ikke ved hvad vej jorden drejer, så vi i fremtiden
slipper for meter lange progressbars, beskeder om at "16 k af 2467 k nu er
hentet" og så fucking videre.
/peo
peo@bandage.dk
www.bandage.dk
--
----------------------------------------
Bandage aps
Vesterbro Torv
Vesterbrogade 53, 1.sal
1620 Kbh. V.
Tlf.: 33236015
www.bandage.dk