8.2 AS 3.0 Peker

Lag en enkel grafikk i format 728 x 90 px i Adobe Flash. Bruk AS 3.0 til å lage en peker til den reflekterte dagbok. Last den opp på din individuelle webserver.

Dette er forrige ukes andre læringsaktivitet, utført denne uken. Først åpnet jeg Adobe Flash, og deretter forandret bredde og høyden i dokumentet slik oppgaven ber om. Siden jeg ville ha en bakgrunnsfarge på dokumentet valgte jeg en som passet til mitt enkle nettsted. Jeg ønsket å benytte logoen til WordPress, og fant en jeg kunne bruke på nettet. Logoen importerte jeg til library og dro den på scenen i et eget lag, til venstre i dokumentet. Videre laget jeg et graphic symbol, hvor jeg brukte tegneverktøyene i programmet for å lage en dagbok. Dagboken plasserte jeg til høyre i dokumentet, i et eget lag. Deretter benyttet jeg text tool, og skrev «min reflekterte dagbok», samt plasserte dette i midten av dokumentet. Tilslutt laget jeg et button symbol, hvor selve knappen var like stor som dokumentet. Knappen plasserte jeg over selve dokumentet på scenen, i et eget lag:

Siden jeg ønsket å ha en enkel banner som skal reklamere for min reflekterte dagbok, ville jeg ikke flere elementer på scenen/dokumentet. Jeg kunne laget en enkel animasjon for å gjøre banneren litt mer interessant, men siden denne skal plasseres på samme side som banneren til Oblig.08 ønsker jeg ikke at de skal konkurrere. Helt tilslutt opprettet jeg et eget Actions lag, og kodet slik at banneren fungerer som en peker til min reflekterte dagbok.

Slik ser kodingen ut; det gjelder å være svært nøyaktig med tegnsetting og rettskriving for å få funksjonen til å fungere slik du ønsker. For å se denne pekeren ferdig lastet opp på mitt enkle nettsted, bruk linken her. Siden oppgaven ba meg lage et dokument med 728 px bredde, blir hele innoldet på mitt enkle nettsted forandret. Dette skjer fordi jeg har satt bredden på innholdet til 640 px, så dette er noe jeg evt. må forandre på senere.

– Annette B. D.

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.

 

5.2 Interaktivitet – Action Script 3.0

I denne aktiviteten skal du designe og kode knapper til bruk i scenene du lagde i forrige aktivitet. 2 knapper skal lages, en for hver scene. Funksjonen til knappene skal være å kunne bevege seg mellom de to scenen ved hjelp av knappene.

Siden jeg lagde fire komposisjoner i forrige aktivitet ville jeg i denne aktiviteten prøve å bruke knapper for å kunne bevege seg gjennom alle de fire komposisjonene. Målet med denne aktiviteten er en praktisk innføring i Action Script 3.0, og å kunne bruke dette i en Flash film.

Først åpnet jeg det ene dokumentet jeg arbeidet på i forrige aktivitet. Deretter Insert-New symbol, og valgte en button symbol. Jeg har i denne aktiviteten designet mange typer knapper, og gitt de forskjellig navn. Ved File-Publish Preview-Flash kan man se en forhåndsvisning av filmen, og jeg opplevde at noe var feil i kodingen. Derfor prøvde jeg å designe nye knapper, gi de en ny plassering og navn, men det oppsto fortsatt feil (error).

Etter mye frustrasjon, siden jeg er helt ny i programmet er det heller ikke lett å vite hva som er den eventuelle feilen, tenkte jeg å bytte to de to knappene «forrige» og «neste», med en knapp som kan ta deg videre til neste scene/komposisjon. Siden oppgaven sier at man skal designe to knapper, valgte jeg å kalle deg ene knappen for «harmoni» og den andre for «kontrast». Jeg fortsatte som tidligere; skrev inn koding til hver scene, låste alle andre lag enn actions, påså at navngiving var riktig etc. Tilslutt fant jeg feilen, siden kodingen skal henvise deg til neste scene hadde jeg glemt et mellomrom mellom frame 1 og scene (og kanskje stor bokstav på S: eks. (1, «Scene 2»). Dette løste iallefall problemet mitt, så nå er jeg så fornøyd med at alt er på plass.

Videre la jeg til to nye scener, og lagde to helt like komposisjoner som jeg hadde utført i forrige aktivitet (men da i et eget dokument). Deretter la jeg til de to knappene til den komposisjonen de tilhørte, og endte tilslutt med fire scener hvor man bruker knapper for å bevege seg mellom scenene. Printscreen av arbeidene i programmet:

– Annette B. D.