Oblig.08 – Ferdig

Idag er innleveringsdagen for obligatorisk oppgave 08 – Flash. Igår klarte jeg heldigvis og ordne opp i problemene som oppsto ved integrering av fotogalleri og banner til mitt enkle nettsted. Jeg fryktet det kom til å bli vanskelig, og det var akkurat det som skjedde.

Først gikk jeg igjennom fotogalleriet; sjekket at alt var på plass og slik jeg ønsket. Deretter eksporterte jeg FLA filen til en SWF fil, altså en komprimert fil. Lagret denne filen i samme mappe som banneret. Jeg åpnet banneret i Flash, sjekket at animasjonen fortsatt fungerte og at alt var på plass. Deretter åpnet jeg Action Script vinduet og kodet riktig URL i parentesene, slik som vist under.

Jeg eksporterte denne til en SWF fil, og lagret i samme mappe som galleriet. Videre åpnet jeg Adobe Dreamweaver, index siden. Her importerte jeg banneret og la den inn nederst på siden. Jeg hadde allerede lagt til fotogalleriet i en egen Flash mappe, så denne var det bare å laste opp. Etter en del forsøk på å teste ut resultatet på mitt enkle nettsted, kom denne meldingen opp ved å klikke på banneret:

Noe var altså feil i kodingen til banneret eller plasseringen i mappene. Jeg prøvde meg frem; forandret kodingen, forandret mappeplassering, forandret filnavn etc. Den samme meldingen kom fortsatt opp. Etter mange timer begynte jeg å bli veldig frustrert, og da jeg spurte om hjelp på forumet til Noroff følte jeg meg både dum og fortvilet når jeg ikke skjønte forslagene de kom med. Uansett, etter mye fortvilelse greide jeg det tilslutt. Jeg lagret banneret som SWF på nytt, med et annet filnavn, la det til i Dreamweaver med en annen tittel, og lastet opp på nytt. Problemet var mest sannsynlig at filnavn og tittel var det samme, når jeg forandret dette var problemet løst.

Nå håper jeg virkelig at alt fungerer slik jeg ønsker, og at det fungerer likt på alle maskiner. For å komme til hovedsiden på mitt enkle nettsted hvor banneret er plassert, klikk her.

Banneret ser slik ut, og er allerede halvveis i animasjonen i denne printscreenen. Jeg har lagt til en svart ramme på banneret og sidene i fotogalleriet, for å skille de fra nettstedet og for å skape en bedre helhet i designet.

For å komme direkte til Flash fotogalleri, bruk denne linken, her.

Først kommer du til hovedside 1, som viser forsiden til fotoessayet og galleriet med fotografi, tittel og rammer. Deretter kommer du til hovedside 2, som viser titler til hvert bilde, samt tittel med tekst til fotogalleriet. Jeg håper teksten er med på å veilede brukeren til å forstå hva de ulike knappenes funksjon er. Dette er noe jeg har brukt mye tid på å få til, og for å forstå hvordan det fungerer anbefaler jeg å sjekke det ut. Fra denne siden kommer brukeren til selve galleriet, hvor knapper blir brukt for å ta brukeren tilbake eller videre i fremvisningen, eller tilbake til hovedside 2.

En annen viktig ting til denne oppgaven er rapporten, som teller 20%. Jeg legger mye arbeid i rapporten, det er veldig viktig for meg at denne fremstår profesjonelt og at den reflekterer min prosess og arbeidsmetode, samt idé og utvikling. Her kan jeg bruke litteratur og leksjoner fra Noroff som kilder, og begrunne mine valg. Hva har jeg lært? Hvordan har jeg lært det? Hvorfor? Hva har jeg gjort og hvordan?

Dette er noe jeg prøver å svare på i rapporten. I rapporten følger jeg et oppsett gitt av Noroff, hvor det starter med en innledningsdel, deretter en del om research og arbeidsprosess, videre en del om designvalg, så en del med egenevaluering og konklusjon, og tilslutt kildehenvisning og referanser. For de som ønsker å lese rapporten, totalt 10 sider, bruk linken under.

Rapport Oblig.8

– Annette B. D.

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.

Oblig.08 – Galleri prosess

Nå begynner fotogalleriet mitt å bli ferdig, har jobbe veldig intenst med det i mange dager i strekk. Siden det ikke er så lett å vise prosessen min her på bloggen har jeg tatt printscreen av hvordan hver scene i galleriet mitt ser ut. Tilsammen har jeg laget 8 scener, og når jeg tilslutt laster dette opp på mitt enkle nettsted, skal det være mulig å klikke seg fra scene til scene og tilbake til hovedsiden. Alt fungerer som det skal i programmet, og jeg er veldig spent på om alt vil fungere på mitt enkle nettsted. Jeg kommer til å laste opp galleriet mot slutten av denne uken, så frem til da kan dere ta en titt på disse printscreens.

Dette er hovedside nr. 1, altså den første siden brukeren vil komme til fra banneren som reklamerer for dette fotogalleriet. Nederst til venstre er alle lagene jeg har opprettet og jobbet med, og til høyre er alle symbolene jeg har jobbet med til fotogalleriet. På denne hovedsiden presenterer jeg forsiden til fotogalleriet, med tittelen på fotoessayet og et fotografi av et objekt som betyr mye for personen som er med i fotoessayet.

Dette er hovedside nr. 2, siden man kommer til fra hovedside nr. 1. Denne siden har jeg jobbet veldig grundig med, og utforsket, samt eksperimentert med ulike funksjoner man kan legge til på symbolene/knapper. Det har vært svært krevende å få til koding for Action Script riktig, men etter mye retting er alt på plass og slik jeg ønsker det. Tilsammen ble det 76 linjer med koding, et utsnitt kan du se i eksempelet nedenfor.

Den ene funksjonen gjør at du kan se små versjoner av bildene i fotogalleriet ved å holde pilen over bilde titlene/navnene. En annen funksjon gjør at brukeren kommer tilbake til den opprinnelig siden, altså slik det ser ut i eksempelet for hovedside 2. Den siste funksjonen er at brukeren kan klikke seg videre fra en av bilde titlene/navnene og komme til selve galleriet, hvor bildene blir vist på hver sin side.

Dette er siden man kommer til ved å klikke på bilde nr. 1 på hovedside 2, altså det første bildet fra fotoessayet. Her har jeg jobbet i flere lag, og vært svært nøyaktig med plassering av alle elementer på scenen. Denne siden inneholder et fotografi med en grå ramme i midten, en knapp på høyre side hvor brukeren kan komme videre til neste bilde og en logo nederst som fører brukeren tilbake til hovedside 2. Logoen har jeg laget selv i Flash, og det er denne jeg kommer til å jobbe med og bruke til banneren.

Dette er bilde nr. 2 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen på forrige side/scene, eller fra hovedside 2. Her har jeg også et fotografi med en grå ramme i midten, en knapp på høyre side hvor brukeren kan komme videre til neste bilde og en logo nederst som fører brukeren tilbake til hovedside 2. I tillegg til disse har jeg lagt til en knapp på venstre side hvor brukeren kan komme tilbake til forrige bilde.

Dette er bilde nr. 3 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her har jeg lagt til de tre samme knappene som på forrige side, en tilbake/forrige-knapp, en neste-knapp og en hovedside-knapp. Siden dette fotografiet er vertikalt/portrett har jeg igjen jobbet svært nøyaktig med plasseringen av bilde og ramme, samt andre elementer.

Dette er bilde nr. 4 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her er de samme knappene lagt til, nøyaktig på samme plass som de andre horisontale/landskaps fotografiene.

Dette er bilde nr. 5 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her er de samme knappene lagt til, på nøyaktig samme plass som blant annet forrige side.

Dette er bilde nr. 6 i fotoessayet, altså det siste bildet som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her er kun tilbake/forrige-knapp og hovedside-knapp lagt til. Siden dette er det siste bildet i dette galleriet skal ikke brukeren kunne gå videre, her stopper fremvisningen. Fotografiet og rammen har blitt plassert nøyaktig på samme plass som det andre vertikale/portrett fotografiet (bilde nr. 3).

Til fotogalleriet mitt har jeg jobbet svært grundig med plasseringen av elementene jeg har brukt, og benyttet hjelpelinjer, rutenett og linjal i programmet som veiledning. Jeg har vært nøye med navngivning av elementer (instance name), og å låse lag jeg ikke jober med for at ikke noe skal forsyve seg. Som font til tekst/titler har jeg brukt Copperplate, som er en serif font designet av Frederic W. Goudy, og som er både lettleselig og brukervennlig.

Hver scene har et eget Actions lag, hvor jeg har lagt inn koding i et eget vindu til knappene jeg bruker og den funksjonen de skal ha. Knappene har jeg laget enkle, slik at brukerne skal forstå hvor de skal klikke og hva knappenes funksjon er. Til knappene (< og >) har jeg brukt en stroke størrelse på 10, mens til rammene en stroke størrelse på 5. Dette har jeg gjort fordi knappene må være synlige og brukervennlige, mens rammene ikke trenger denne funksjonen siden de ikke er klikkbare. Rammene har jeg laget for å skape en helhet i designet, og fordi fotografiene skal være fokuset på siden/scenen, samt at fargene skal komme bedre frem. I designet av layout har jeg benyttet gjentakelse i farger, hvor fargene jeg bruker er svart, blå og grå. Dette er farger som også går igjen i fotografiene.

– Annette B. D.

 

Oblig.08 – Størrelse og dimensjon

Siden det ikke står noe i oppgaveteksten om hvilken størrelse man kan/skal bruke har jeg gjort research på dette og kommet frem til en egen løsning. Først formulerte jeg noen spørsmål og stilte disse i forumet. Det jeg lurte på var om man skulle bruke noen bestemt størrelse på dokumentet for galleriet og banner, og evt. hvilken størrelse de anbefalte å bruke. Jeg lurte også på hvordan man kan lage en bakgrunn, siden alle dokumentene på hver scene i Adobe Flash blir de samme. Det jeg fikk til svar var at jeg selv kunne bestemme størrelsen på dokumentet, men at det må være bestemt utifra hvilke rammer de skal vises i, altså for skjerm. Bakgrunn måtte jeg lage selv, men hvordan vet jeg fortsatt ikke, og for banner ble jeg anbefalt å lete på nettet etter standardstørrelser.

Etter å ha jobbet lenge med en test til fotogalleriet, hvor jeg brukte tiff-filer, bestemte jeg meg for å lagre disse for web and devices, og lagre i JPEG. Galleriet jeg jobber med nå bruker ikke like lang tid på å lagre og legge til elementer som test-galleriet. Her ser jeg allerede en forbedring jeg har klart å løse gjennom prosessen i denne oppgaven. Jeg har brukt en scene for hvert bilde i galleriet, og vet at dette gjør at filen min blir større. Ellers har jeg prøvd å forholde meg så mye som mulig til symboler, siden dette er plassbesparende og mer oversiktlig.

For reseach på skjermstørrelse har jeg brukt denne linken, her. Fra informasjon på denne siden har jeg valgt at galleriet skal ha dimensjonene 1024 x 768 pixler.

Jeg gjorde om dimensjonene på dokumentet i Adobe Flash, og følte denne størrelsen var svært stor. Selv om det står på nettstedet at de fleste bruker en større dimensjon enn 1024 x 768 pixler, valgte jeg å forholde meg til denne som en start. Jeg har aldri laget noe i Flash før som skal lastes opp på mitt enkle nettsted, derfor velger jeg trygge løsninger å forholde meg til som nybegynner. I følge en statistikk (se her) var 1024 x 768 pixler svært populært i 2006, mens det i år er kun 13% som bruker denne dimensjonen. De fleste brukere, hele 85%, benytter en skjermstørrelse som er større enn 1024 x 768 pixler. Jeg har også tatt i betrakning at jeg ikke skal bruke noen elementer utenfor Flash-filmen.

Når det gjelder standardstørrelser for banner var det mye informasjon å finne om dette på nettet, bla. Wikipedia og Flashbanners. Banner er en slags annonse, og en form for reklame. Ønsker man å markedsføre seg på internett gjøres dette stort sett ved hjelp av bannere, for å tiltrekke seg flere besøkende og vekke interesse.

Ut i fra disse eksemplene finner man mange standardstørrelse som går igjen. Noen av dem er leaderboard, skyscraper, square, button og vertical.

Siden jeg valgte en dimensjon som ikke lengre er så vanlig for skjermstørrelse, har jeg valgt og ikke bruke en standardstørrelse for banner heller. Først sjekket jeg Adobe Flash sine Standard templates banner, men de var enten for små eller for store for mitt ønske. Jeg ønsker en banner som er like bred som innholdet i mitt enkle nettsted, altså 640 pixler bred. Dette er noe jeg ønsker å utnytte, og da kommer høyden an på hvordan animasjonen min skal være. Banneren blir en form for leaderboard, som enten skal plasseres øverst eller nederst på mitt enkle nettsted.

Ut i fra research har jeg en god begrunnelse for hvorfor jeg har valgt akkurat disse dimensjonene på dokument for galleri og banner. Jeg har tatt egne beslutninger, og tatt hensyn til mitt enkle nettsted, hvor dette skal lastes opp og integreres. Hvordan resultatet blir gjenstår å se en gang til neste uke.

– Annette B. D.

Oblig.08 – Skisser

Nå har jeg jobbet med Flash fotogalleri intenst i flere dager, og har helt glemt wordpress. Dette er ikke noe jeg har for vane å gjøre, så nå kommer endelig et innlegg om skisser. Disse har jeg utført for noen uker siden, men de blir dessverre ikke postet før nå siden  læringsaktiviteter har blitt prioritert her på bloggen.

Jeg startet skisseprosessen med inspirasjon fra mitt moodboard, og begynte å skissere idéer til en logo for fotogalleriet. Det jeg har valgt å fokusere på er selvfølgelig jeans, som er svært viktig for personen som ble fotografert til fotogalleriet, og tilbehør, samt inspirasjon fra herre-mote gjennom tidene. Jeg er fornøyd med skissene jeg har produsert, og synes de forteller både hvilken stil jeg ønsker og hva som er fokus. Målgruppen til denne logoen er for personer med en stor interesse for denim og kvalitet, altså en ganske liten målgruppe. På verdensbasis vil jeg si at det er noen tusen som deler denne sære interessen.

Etter utvikling av skisser for logo, måtte jeg tenke ut design og layout for banner og fotogalleri. Jeg leste gjennom oppgaveteksten flere ganger og skrev ned de viktigste punktene. Deretter lagde jeg noen raske skisser over hva som var viktig å ha med, og hvordan jeg tenkte dette kunne gjennomføres i Adobe Flash (se skisser over).

Deretter lagde jeg noen presentasjons skisser, som jeg brukte en del tid på og som skulle se profesjonelt ut samtidig som jeg fikk ned idèene mine til layout og design av banner og fotogalleri. Først lagde jeg noen skisser til banneren som skal reklamere for fotogalleriet, her skal jeg lage en enkel animasjon. Min idé er en animajson av en jeans, som også skal fungere som logoen til fotogalleriet. Jeg vil også inkludere tekst i banneren, og kanskje noen flere elementer.

Videre skisserte jeg noen forslag til hvordan gallerisiden kan se ut, og her har det vært spesielt viktig å illustrere hvor de ulike knappene skal plasseres i forhold til bildene, samt størrelsen. Tilslutt skisserte jeg noen forslag til hovedsiden til fotogalleriet, og fra forrige innlegg har jeg bestemt at jeg skal ha to hovedsider. Den ene hovedsiden skal vise et fotografi som fungerer som en forside til fotogalleriet, og her skal tittel til fotoessayet plasseres. Den andre hovedsiden skal vise alle de seks bildene som fotogalleriet består av, og her kan brukeren klikke seg videre til hvert enkelt bilde.

Etter noen dager gikk jeg gjennom skissene mine igjen, og prøvde ut noen forslag i Adobe Flash. Siden jeg hadde mange skisser å gå ut i fra ville jeg velge de idéene jeg likte best til de ulike «sidene/elmentene» som skal produseres i denne oppgaven. Dette gjorde jeg ved å skissere de igjen, og denne gangen med litt mer detaljer. Nå håper jeg dere forstår hvordan jeg har tenkt å bygge opp design og layout til oppgaven, og som jeg har skrevet på arket kan forandringer oppstå underveis i prosessen.

Obligatorisk oppgave 08-Flash

Dette er en oppgave som innehar to deler; et Flash fotogalleri og en Flash interaktivt banner. Du skal i denne oppgaven produsere et Flash fotogalleri for Fotogalleriet som du utarbeidet i Oblig.07-Fotoessay. Itillegg skal du lage et Flash interaktivt banner som skal reklamere for Flash galleriet.

Dette er en stor oppgave som går over 5 uker, og i skrivende stund har allerede 3 uker av denne oppgaven gått. På disse tre ukene har jeg første og fremst arbeidet med tilhørende læringsaktiviteter og læringsvideoer, og opparbeidet kunnskap og erfaring rundt programmet Adobe Flash, samt prøvd meg på animasjon. Jeg har lånt mange bøker på hovedbiblioteket i Oslo, samt mitt nærbibliotek, om interaktivitet, animasjon, action script og Flash. Mange timer og dager har gått med til lesing av disse bøkene for å opparbeide kunnskap om å forstå flash.

Ved gjennomførelse av læringsaktiviteter har jeg bygd opp kunnskap rundt de ulike verktøyene man kan bruke i Adobe Flash. Dette har vært en viktig prosess for å forstå hvordan programmet fungerer, og hvordan jeg kan jobbe videre med de ulike verktøyene for å utføre denne oppgaven. Adobe Flash har mange av de samme verktøyene som de andre Adobe programmene, men også mange nye funksjoner og prinsipper man må lære. Til utførelsen av denne oppgaven skal først og fremst programmet Adobe Flash brukes, og Action script 3.0, samt andre valgfrie programvarer og utstyr.

Fotogalleriet skal inneholde minimum 2 sider, altså en hovedside og en galleriside. Her tenker jeg å utarbeide 3 sider, som blir to hovedsider og en galleriside. Jeg har utarbeidet en plan for hvordan jeg ønsker det skal være i Photoshop, og håper dette lar seg gjennomføre.

Jeg skal designe logo, design og layout for fotogalleriet, og så langt har jeg jobbet en del med skisser til dette. Her tenker jeg å ha en jeans som logo, siden personen jeg portretterer i fotoessayet har en sterk interesse for jeans. Før jeg begynte å skissere utarbeidet jeg et moodboard, og måtte bruke mange kilder for å finne rett inspirasjon. Moodboardet mitt ser slik ut:

I moodboardet har jeg lagt vekt på jeans i forskjellige fasonger, og i ulike settings. Noen er brettet, andre henger, og noen er utstyrt med belte og annet viktig tilbehør. Ellers har jeg også fokusert på herre-mote, både gammeldags og moderne. Siden tilbehør er svært viktig for en person med interesse for jeans har jeg også med dette i moodboardet.

Ved evaluering for denne oppgaven blir dette vektlagt:
Design og layout for Flash fotogalleri og Flash interaktivt banner 30 %
Presentasjon og formidling av produkter; bilder og banner 30 %
Teknisk 20 %
Rapport 20 % 

Skisser kommer i et eget innlegg, siden denne posten allerede er ganske utfyllende, og skal fungere som en innledning til oppgaven.

– Annette B. D.