Layoutstiler – CURB

Denne uka skulle vi jobbe med layout på nett. Vi skulle lage en webside for det fiktive magasinet CURB som vi har jobbet med tidligere.

Vi skulle lage minst seks skisser hvorav en skulle ha symmetrisk layout, asymmetrisk layout og en kombinasjon av symmetrisk/asymmetrisk.

Her er skissene.

Deretter valgte jeg ut den skissen jeg likte best, som ble den i midten til høyre, og begynte å lage wireframe ut i fra den.

Jeg satte sammen nettsiden i photoshop og la den deretter inn i dreamweaver.

Der ga jeg hvert element en div id og la til bakgrunnsfarge i en CSS fil. Så midstilte jeg innholdet og lastet den opp på nett.

Jeg gikk for en relativ enkel layout, slik at det skal være lett å finne fram på siden. Dette er en kombinasjon av symmetri og asymmetri, der innholdet er symmetrisk, men teksten er ikke midtstilt. Jeg synes midtstilt tekst på en nettside senker leservennligheten en del. Headeren er asymmetrisk for å gjøre siden interessant. Jeg har brukt bevel & emboss på knappene og innholdet for å få det fremhevet.

Her er mitt resultat. *Dette er en dummy side, så knapper er ikke aktive.

Reklamer

Læringsaktivitet – Lydeffekter

I denne oppgaven skulle man legge på lydeffekter på animasjonen av en bil.

Det gikk ganske greit, men jeg hadde et lite problem med første lyd-klippet. Lyden av en bil som starter opp så ut til å bare bli spilt av annenhver gang. Men jeg fikk løst det ved å bytte fra «Start» til «Event» under properties.

Nederst på denne siden er animasjonen med lyd.


Læringsaktivitet – Easing Prinsippet

I denne oppgaven skulle man animere en bil som flyttet seg fra A til B ved hjelp av classic tween og easing.

Easing gjør at bilen ikke starter brått, holder konstant fart og stopper brått. Det blir et akselerasjons punkt og en «bremselengde».

Jeg lagde bilen i ett lag og hjulene i et annet lag, slik at jeg kunne få hjulene til å stå stille og bevege seg. Det jeg måtte passe på var at easing in/out var lik på bilen og på hjulene, ellers ville hjulene akselerere mer enn bilen og omvendt.

Nederst på denne siden finner du animasjonen.


Læringsaktivitet – Classic Tween

I denne oppgaven skulle man animere en pendel som brukte et sekund fra side til side.

Denne oppgaven hadde ikke noen problemer slik som med shape tween.

Her tegnet jeg en pendel og gjorde det om til et graphic symbol og flyttet ankerpunktet fra midten til øverst i midten. Deretter lot jeg den gå fra -30 til 30 grader. Så passet jeg på at ekstremposisjonene var plassert slik at den brukte et sekund fra ene siden til den andre.

Her finner du animasjonen.


Læringsaktivitet – Shape Tween

Her var oppgaven å bruke shape tween for å lage en animasjon hvor geometriske former skulle omformes til navnet mitt.

Denne oppgaven gikk ganske bra, bortsett i fra at jeg ikke fikk til shape tween med det samme. Det viste seg at jeg hadde bruk graphic objects, og da går ikke shape tween. Så det jeg gjorde da var å høyre-klikke på elementene og velge «break apart».

Her finner du animasjonen.

 


Læringsaktivitet – Formprinsipper

 

Da hadde man omsider funnet en løsning på det å laste opp flash filer på en grei måte. Siden det tydeligvis er vanskelig å få lastet opp en flash fil her, så kommer jeg til å legge ved en link til mitt personlige nettsted, der jeg legger alle flash filer på samme plass i kronologisk rekkefølge. (Fra nå av, vel og merke).

I denne oppgaven skulle vi lage en flash som inneholdt 5 scener.

4 av scenene skulle visualisere og forklare 4 av formprinsippene.

Formprinsippene er:

  • Balanse
  • Kontrast
  • Bevegelse
  • Proporsjon
  • Rytme
  • Harmoni og dynamikk
  • Enhet og helhet

Den 5. siden skulle da være index-siden der man kan klikke seg fram og tilbake mellom bildene.

Opplastingen ble forsinket fordi Flash programmet sluttet å svare og ble dermed lukket uten at jeg fikk mulighet til å lagre noe som helst. Problemet viste seg å være at jeg rett og slett prøvde å legge inn alt for store bildefiler, slik at programmet kræsjet. Løsningen fikk jeg ved hjelp av forumet på Moodle.

Men utenom det, så gikk oppgaven ganske greit, actionscript gikk greit og alt gikk på skinner da jeg fikk løst kræsjet av programmet.

 

Her er link til flash-oppgaven.


Læringsaktivitet – Link mellom scener

I denne aktiviteten skulle vi linke sammen bildene fra forrige oppgave.  Det som ble problemet mitt var at da jeg klikket på scene 1 for å komme til scene 2, så var det noe med kodingen av actionscript som gjorde at jeg ikke kunne gå tilbake til scene 1 igjen. Det viste seg at jeg hadde valgt «go to frame» i stedet for «go to scene».

Man klikker på ‘R’ og ‘I’ for å komme seg fram og tilbake mellom scenene.

Men igjen, siden jeg ikke får lastet opp flash direkte i wordpress, så kan man se den her.