Oblig.08 – Banner prosess

Nå begynner banneren, som skal reklamere for fotogalleriet, å bli ferdig. To dager før innlevering gjenstår det å gå igjennom Flash arbeidene mine, ferdigstille rapporten og få integrert banneren på mitt enkle nettsted, samt laste opp fotogalleriet. Jeg er veldig spent på om jeg klarer å få til dette på første eller andre forsøk, og gleder meg til å få alt på plass, samt vise dere hva jeg har jobbet med i 5 uker.

Banneren skal inneholde en enkel animasjon. Jeg har valgt å lage en animasjon av en bukse/jeans som blir brettet, og har jobbet med fire hovedstadier i animasjonen. Disse tegningene har jeg tatt prinscreens av, så dere kan se hvordan buksen ser ut i de ulike stegene. Først en tegning av en jeans i full lengde og bredde, bakfra. Deretter en tegning av en jeans som er brettet til den ene siden, hvor det andre «beinet» ligger bak. Videre en tegning i prosessen som viser hvordan buksen ser ut idet den blir foldet en gang. Den siste tegningen viser hvordan en jeans ser ut når den er ferdig brettet, kompakt og plassbesparende.

 

Jeg har brukt veldig lang tid på å utvikle disse fire stadiene i animasjonen, og det har vært svært krevende å bruke Adobe Flash sine tegneverktøy. Jeg har allerde gjort noen forandringer til tegningene for å forenkle de enda mer. Etter mye jobbing med å tegne og finpusse på buksene har jeg laget et movie clip. Jeg har brukt en blå farge i stroke for å illustrere hvilken farge jeansen har. Jeg startet med å velge Create Shape Tween mellom de fire tegningene, og laget en animasjon på tilsammen 10 sek. Videre jobbet jeg med plassering av shape hints, altså hint man kan legge til for å få mer kontroll over animasjonen. Problemet mitt var at mellomposisjonene fra det ene stadiet til det andre ble helt feil, og absolutt ikke slik jeg hadde tenkt det. Jeg prøvde videre, og jobbet svært lenge med å få tweeningen slik jeg ønsket. Resultatet ble greit nok for å være nybegynner, men jeg følte meg veldig usikker på om dette kom til å bli godkjent.

Min eneste mulighet for å rette opp i animasjonen var rett og slett å starte på nytt, men jeg hadde fortsatt mine fire stadier å arbeide etter. Jeg opprettet et movie clip, startet med det første stadiet, og forandret tegningen i hver enkelt ramme. Deretter fortsatte jeg med å legge inn 2 sek pause, for deretter å jobbe videre med det andre stadiet, samt gradvis forandre tegningen. Arbeidet fortsatte med pause, steg 3, lage forandringer i 24 frames, pause, steg 4, pause. Animasjonen min ble 10 sek denne gangen også, men selve animasjonene kun 1 sek hver, med 2 sek pause/hold. Jeg har jobbet utrolig presist og vært nøyaktig med plassering, samt hvordan jeg har laget animasjonen. Mye tid er blitt brukt til å gå gjennom og rette opp animasjonen, og jeg føler selv jeg er mer tilfredsstillt ved dette resultatet.

På scenen skrev jeg inn tekst som skal brukes på banneren, og la til jeans animasjonen min. Måtte jobbe nøyaktig med plassering her også, og hvordan de ulike elementene skulle stå i forhold til hverandre. Tilslutt la jeg til en effekt på fotoessayets tittel for å få banneren mer interessant, en Clockwise rotasjon, som skal gjenta seg 2 ganger i sekundet. Utfordringen var å få dette til å stoppe akkurat i det animasjonen starter.

Jeg har valgt å benytte de samme fargene på animasjon og tekst som i fotogalleriet, for å skape en helhet og følelse av at alt henger sammen. For å få banneren til å fungere som en knapp/peker har jeg opprettet et button symbol og laget en knapp som er like stor som banneren, altså 640 px x 320 px. Knappen er usynlig og har kun innhold på Hit- stadiet. Fra banneren skal brukeren kunne trykke og komme direkte til fotogalleriet. Se printscreen under for hvordan banneren ser ut i scenen, det lyse blå laget illustrerer knappen.

– Annette B. D.

7.3 Bil; Start – Stopp

Du skal i denne aktiviteten lage en grafikk av en bil. I selve scenen skal du forflytte bilen fra et punkt A- til et punkt B. Bruk Classic tween for å lage mellomposisjonene. I tillegg skal bilen ha en «myk» start og slutt, bruk easing prinsippet til å utføre dette.

Først lagde jeg et nytt symbol, et movie clip symbol. Her tegnet jeg en bil ved hjelp av Adobe Flash sine tegneverktøy. Selve tegningen tok litt tid, siden jeg er ny i programmet og ikke helt kjent med alle verktøy. Etter mye pirke-arbeid med bilen, la jeg til farger og gikk tilslutt over alle anchor points i tegningen med selection tool. Dette gjorde jeg for å slette noen punkter, og for å rette opp tegningen, samt fylle hull.

Etter selve tegne delen, dro jeg bil-symbolet over i en scene, og flyttet bilen helt til venstre i bildet. Deretter gikk jeg til frame 72 i timeline og valgte Insert keyframe, så flyttet jeg bilen helt til høyre i bildet. Så valgte jeg create Classic tween, og bilen forflyttet seg fra punkt A (venstre) til punkt B (høyre). Videre arbeidet jeg i Properties panelet til høyre i Flash med easing prinsippet. Her jobbet jeg ut i fra en kurve; jo brattere kurve, jo raskere fart. Her er en printscreen av kurven:

Nå viser animasjonen min en bil jeg beveger seg fra høyre til venstre med en myk start og en myk slutt. For å se animasjonen av bilen gå til mitt enkle nettsted, nest nederste på siden, her.

For å øve meg enda mer på animasjon ville jeg prøve å få bilen jeg å kjøre opp og ned en hompete vei, og med noen hindringer i veien. Jeg opprettet et eget lag hvor jeg tegnet en hompete vei, og steiner. Opprettet et nytt lag hvor jeg dro inn bil-symbolet mitt. Deretter valgte jeg create Motion tween, og lagde dette helt til frame 96, altså en animasjon på 4 sek. Med motion tween kommer en «motion» strek, som man kan forandre opp eller ned. Denne motion kurven forandret jeg noe etter tegningen av veien, og fikk tilslutt bilen min til å følge veien fra venstre til høyre.  For å se animasjonen av bilen min som kjører opp og ned en vei, se nederst på nettstedet mitt, her.

– Annette B. D.

Uke 23 – Typografi/bilde – Action Script

Denne uken kommer jeg til å jobbe videre med programmet Adobe Flash. Jeg har brukt dagen idag og gårsdagen på å se gjennom ukens 10 videoleksjoner, og lese gjennom leksjoner om Action Script 3.0. I tillegg til dette har jeg vært på biblioteket og lånt flere bøker, denne gangen mer i dybden av illustrasjon og animasjon ved Flash.

Fra leksjonene har jeg lært at Action Script 3.0 er et objektorientert programmeringsspråk som Flash bruker. Det vil si at jeg må bruke et eget Actions panel i programmet for å legge inn forskjellige koder, som kan være en hendelse eller en funksjon. Et eksempel på dette er kommandoen stop, den gjør at flashfilmen stopper ved en ramme. Det finnes to typer actions; 1. Frame actions, som utfører en kommando når filmen når en definert ramme og 2. Button actions, som utfører en kommando etter interaksjon fra brukeren.

Huskeregler for Action Script (det jeg har lært så langt som er svært viktig):
– Navngi koding riktig, og påse at alle elementers navn er riktig. Movie Clip skal navngis med _mc, og button skal navngis med _btn
– Opprett et eget lag hvor du kan legge inn Actions, husk og lås andre lag du har i programmet når du arbeider.
– Bruk labels for navigering, og i sammenheng med kommandoen goto.
 Avslutt alltid syntaxen med semikolon ; 

– Annette B. D.