Obligatorisk oppgave 08 – Flash fotogalleri og flash interaktivt banner

I denne obligatoriske innleveringsoppgaven skulle vi både lage et Flash fotogalleri med bildene vi tok i forrige obligatoriske oppgave, obligatorisk oppgave 07 «Fotoessay» , og vi skulle lage et interaktivt banner i Flash som skulle integreres i «enkelt nettsted» (obligatorisk oppgave 06). Det interaktive banneret skulle linkes til Flash fotogalleriet ved bruk av actionscript 3.0.

Det har vært vanskelig å holde progresjonen i studiet i det siste av forskjellig årsaker, så jeg hang litt etter på Flash og måtte jobbe meg intensivt gjennom mange videoleksjoner før jeg kunne begynne å jobbe med oppgaven. Jeg hadde begynt å leke med Flash tidligere i høst, men det er så lenge siden at jeg måtte begynne helt på nytt. Har heller ikke fått gjort alle læringsoppgavene før den obligatoriske denne gangen, og håper jeg ikke har gått glipp av mye ved å mangle noen av disse. Føler uansett «at det har løsnet», og Flash og animasjon er gøy! Og jeg kommer definitivt til å gjøre øvelsene i etterkant og leke meg mer med Flash, for det er virkelig morsomt å se når man får ting til å virke, at det beveger seg og gjør slik man vil at det skal!

Skisser

Jeg begynte med noen skisser til hvordan jeg ville ha fotogalleriet og banneret, disse kan du se her. Jeg forandret noe retning både under skissearbeidet og etterpå, fordi jeg fant løsninger jeg syntes fungerte bedre.

Del 1: Flash fotogalleri

Jeg fulgte videoleksjonen om fotogalleri og satte inn bildene med samme layout som i PDF-dokumentet jeg lagde i obligatorisk oppgave 07 fotoessay (se dokumentet på issuu.com her). Jeg begynte å lage usynlige movieclip-knapper. Her er et par screenshots fra dette arbeidet:

Men jeg likte ikke layouten særlig godt, og fant ut at det er en god grunn til at alle app’er, bildesites og previews (thumbnails) av fotografier ofte er kvadratiske. Det er rett og slett penere og mer ryddig. Dermed redigerte jeg alle bildene om til kvadrater, og begynte på nytt.

Først en test, ser det bedre ut?

Javisst. Dermed fortsatte jeg med denne layouten.

Actionscript 3.0 koding

Selv om jeg fulgte oppskriften til punkt og prikke, fikk jeg erfare at det skal veldig lite til før det blir feil og ting ikke virker. En bitteliten feil i actionscript-koden eller en forskjell i en bokstav eller uteglemt endelse i instance-navnet, kan få hele flash-dokumentet til å snurre rundt i loop, eller at ingenting skjer. Jeg passet på å teste «publish preview» skritt for skritt, så da gikk det lettere å finne feilen. Likte godt at Adobe Flash sin egen feilkode sender deg til den linjen som er feil hvis du klikker på den. Jeg var veldig stolt da alle feil var funnet, alt var kodet, og det virket!

Ferdig fotogalleri

Del 2: Interaktivt banner

Det interaktive banneret skulle reklamere for fotogalleriet og ved bruk av actionscript 3.0 skulle det sende deg til fotogalleriet når man klikket på det. Banneret skulle inneholde en enkel animasjon.

Jeg har nettopp vært gjennom leksjonene for Shape Tween, Classic Tween og Motion Tween og har testet dem litt for moro skyld. Jeg fikk veldig sansen for motion tween og begynte først å lage banner på denne måten. Men jeg fant ganske fort ut at det var vanskelig å få til den type animasjon jeg ønsket med motion tween, fordi man ikke kan forandre på instance’en på scenen underveis. Kanskje jeg bare er uvitende, men jeg valgte i hvertfall å begynne på nytt, og denne gangen ved bruk av Classic Tween.

Jeg er fortsatt ikke helt sikker på når jeg burde bruke graphic symbol og når jeg burde bruke movie clip i den typen animasjon som jeg nettopp har laget, jeg prøvde ut begge deler. Men det viktigste er at jeg fikk det til å virke til slutt! Tror jeg må lære litt mer om bruken av de forskjellige symbolene, alt etter hva slags type animasjon man skal lage.

Jeg jobbet ganske mye med å legge inn hold, insert frames, teste ut blanke keyframes, slette frames og så videre. Teksten ville ikke oppføre seg slik jeg ville at den skulle før jeg brukte break apart og konverterte den til symboler.  Jeg brukte easing både på teksten og på objektene (saks, kam, kaffe), men easingen på objektene gjorde bevegelsene hakkete, så her fjernet jeg den. Jeg beholdt easingen på teksten. Jeg vet ikke om jeg burde vært bevisst på det totale antallet rammer, om dette bør være delelig med 24, siden jeg har en framerate på 24 fps, men jeg har ikke tatt et slikt hensyn. Jeg har kun lagt til og fjernet rammer helt til jeg var fornøyd med bevegelser, hold og flyten i animasjonen.

Her er et par screenshots fra arbeidet med banneret:

Ferdig resultat:

Jeg lastet opp begge Flash-filene (fotogalleriet og banneret) på serveren, og la inn flashbanneret via «insert media, swf» nederst på mitt enkle nettsted. Til å begynne med fikk jeg ikke filmen til å virke på web uten at jeg høyreklikket og valgte «play». Derfor lastet jeg banneret opp på Deviantart.com for å teste det der. Der virket det perfekt.

Etter dette prøvde jeg å laste inn en oppdatert versjon av Flash på min pc, og restartet Internet Explorer, og merkelig nok så virket banneret fint på mitt enkle nettsted etter dette! (Rart, for det var jo samme pc og samme IE nettleser jeg brukte når jeg kikket på filmen hos Deviantart.com!).  Men da var alt i boks! 🙂

Slik ser det ut på nett (screenshot):

Lenke til enkelt nettsted med interaktivt banner:

Klikk for å se banneret integrert nederst på mitt enkle nettsted (scroll nedover).

desember 2, 2011 | Categories: Flash, Obligatoriske oppgaver, Visuell kommunikasjon | Tags: actionscript 3.0, banner, Flash, interaktivitet | Legg igjen en kommentar