Som en øvelse til prosjekteksamen og for å hjelpe en venninne, har jeg laget en hjemmeside i WordPress. Hun har nettopp sluttet i jobben og begynt som frilansjournalist, og hun trengte en hjemmeside for å presentere seg selv og hva hun kan tilby.
Her er noen screenshots fra hjemmesiden – banneret i topp rulerer i tre versjoner:
Og her er en link til siden: www.brunmark.no
I denne oppgaven skulle vi designe en klokke med pendel. Pendelen skulle deretter animeres ved hjelp av Classic tween i Adobe Flash.
Her er et bilde av min pendelanimasjon:
Jeg har lagt ut Flash-filmen på Deviantart.com, klikk her for å se animasjonen.
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!
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.
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.
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!
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:
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).
Oppgaven denne gangen var å lage en shape tween i Flash der geometriske former skulle formes om til navnet mitt. Shape tween brukes til animasjon av grafiske elementer i Flash (kan ikke brukes til symboler). Jeg har lagt inn ekstra rammer (insert frames) for å forlenge bevegelser og testet ut bruk av “shape hint”.
Det er ikke lov å laste opp Flash-filmer (.swf-filer) i denne bloggen (WordPress.com). Fant ut at jeg vil ha et sted jeg kunne legge ut flash, why not? 
Så nå har jeg laget meg en profil på Devianart. Her er en link til Shape Tween flash filmen. Ikke så imponerende, men det er min aller første. http://grymonicah.deviantart.com/#/d4hr88j
Og her er noen screenshots.
Dette er noe jeg må jobbe mer med senere. Men akkurat nå må jeg rushe videre på neste oppgave og den obligatoriske, pga at jeg ligger en del etter.
I denne øvelsen skulle vi designe og kode knapper til bruk i scenene vi lagde i forrige aktivitet.
Før jeg skulle begynne på selve læringsaktiviteten så jeg i gjennom videoleksjonene om dette emnet og fikk lyst å teste det ut på to fotografier som jeg tok i sommer. Etter at jeg testet og fikk det til å virke, hadde jeg planer om å gjøre det samme på scenene “harmoni” og “kontrast” fra forrige gang, men ble opptatt i en lang periode med jobb og annet slik at dette ikke ble gjort.
Jeg vil gjerne likevel legge ut scenene og knappene jeg lagde på de to makrobildene, for å vise at jeg har jobbet med aktiviteten og at jeg fikk det til, men denne bloggen lar meg ikke laste opp Flash-filmer. Så istedet har jeg lagt til Flash-filmen nederst i footer på mitt “enkle nettsted” midlertidig, og det virker!
Her er link til mitt enkle nettsted, sjekk nederst i footer: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
Om jeg har fjernet dette igjen når du leser dette, kan du se på skjermdumpene nedenfor hvordan det så ut.
Scene 1 - Interaktivitet actionscript 3.0
Scene 2 - interaktivitet actionscript 3.0
I denne aktiviteten skulle vi jobbe med typografi og bilder i Flash. Vi skulle lage to komposisjoner i Flash, den ene med likhet/harmoni mellom bilde og typografi, enten i form av plassering eller utforming av elementene. Den komposisjonen skulle ha kontrast mellom tyopgrafi og bilde. Deretter skulle vi lage en .jpeg av de to scenene og legge dem ut her på dagboken.
Noen ideer og skisser i forbindelse med denne aktiviteten:
Og her er mine to scener:
Harmoni
Her er det lyse, grå farger og runde former både i tegningen av ansiktet, i formene av begge elementer (som er like) og valg av snirklete font med runde former. Håndtegnet portrett og håndskriftlignende tekst viser likhet og harmoni.
Kontrast
Her har jeg mest tenkt på kontrasten mellom hvit skrift og mørk bakgrunn/mørkt bilde.
Det er en stund siden jeg laget disse og jeg var egentlig ikke helt fornøyd. Hadde tenkt å jobbe mer med dem, og sannsynligvis lage noe helt nytt, men så kom tiden og tok meg – fikk ikke gjort det. Derfor legger jeg ut disse likevel for å vise at jeg har jobbet med denne aktiviteten.
I denne aktiviteten skulle vi jobbe med symboler i Flash, for å få innblikk i hvordan man bygger opp innholdet i scenen ved bruk av arkivet/library og symboler.
Først skulle vi lage tre forskjellige typer symbols; tre enkle “graphic symbols”, et enkelt movieclip og en button ut fra avataren vi lagde i forrige aktivitet. Her skulle vi gjøre endringer på en buttons fire stadier; 1) Up 2) Over 2) Down og 4) Hit. Og så skulle alle legges inn i scenen.
Her er min avatar som Flash button i fire stadier:
UP
OVER
DOWN
HIT
Og her er alle sammen satt inn i scenen, i forskjellige lag.
Alle symbolene satt inn i scenen
Det er foreløpig enkelt og greit å lære seg dette, fint å teste ut og finne ut hvordan det henger sammen. Men jeg gleder meg til vi skal lage noe som beveger seg, der alle delene har en funksjon og avhenger av hverandre…
I denne læringsaktiviteten skulle vi lage en digital avatar av oss selv. Avataren skulle tegnes direkte i Flash, på bakgrunn av et bilde av oss selv hvor vi skulle forenkle formen. Avataren skulle være 200 x 200 pixsler.
Definisjon på en avatar:
“An avatar is a computer user’s representation of himself/Herself or alter ego, whether in the form as a three-dimensional model used in computer games, a two-dimension icon (picture) or a one-dimensional username used on Internet forums and other communities, or a text construct found on early systems such as MUDs. It is an object representing the user.”
Her er bildet jeg brukte som utgangspunkt og noen skisser hvor jeg forsøkte å forenkle. Jeg har ikke mye trening i å forenkle og ser at jeg godt burde trene mer på det, for å få bedre “swung” over linjene…
Jeg ønsket å ha med ting som jeg mener representerer meg, nemlig store øyne, mørkt hår, smilet og prikkete skjerf, siden jeg liker prikker veldig godt.
Skisse nr.6 ble utgangspunktet jeg brukte for å tegne i Flash.
Jeg åpnet bildet i Flash, og tegnet lagvis oppå med pen tool. Deretter fylte jeg inn med paint bucket og malerkost-verktøyet.
Det var litt uvant hva som gikk av og ikke gikk an med fill og paint og strokes, i forhold til Illustrator og Photoshop, og jeg har nok ikke helt fullstending kontroll på tegningen i Flash ennå. Men her er avataren som ble resultatet:
|
Kommentarene