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 – 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.