Tirsdag den 29. april deltog vi i den sidste workshop på forløbet – denne gang med fokus på animation. Dagen blev introduceret af vores undervisere Annie og Jesper, som præsenterede dagens opgave: Vi skulle udvikle en illustration, som senere skulle animeres ved hjælp af CSS-animationer. Formålet var også at skabe noget, der potentielt kunne bruges i vores kommende eksamensprojekt.
Opgave beskrivelse
Aflever blogindlæg på din procesportefølje:
1) Lav et blogindlæg om din procesportefølje
2) Beskriv det animationsprincip, du har brugt. http://the12principles.tumblr.com/
2) Vis storyboard
3) Beskriv processen, fra spritesheet til arbejdsanimation, forklar den anvendte kode i detaljer
4) Vis det endelige resultat
Aflever linket til dit blogindlæg i Animation Workshop Opgave (dette dokument).
Jeg gik hurtigt i gang med idéfasen. Mit eksamensprojekt skal have fokus på kodning og IT, så jeg besluttede at arbejde videre med computeren som visuelt hovedtema. Jeg begyndte at søge inspiration på nette og fandt en masse relevant inden på Pinterest. Jeg fandt blandt andet denne gif af en computer, som gav en god grobund for en animation, jeg selv ville lave. Her kunne jeg se de forskellige steps, der var blevet brugt til at lave animation, dog skulle jeg selvfølgelig sætte mit eget pre på animation.
Jeg begyndte derefter at tegne min ide til animationen på mit storyboard. Jeg var lidt tvivl hvordan den skulle bygges op på, så tegnede storyboardet færdig, da jeg havde lavet animationen færdig.
Derefter begyndte jeg at illustres min ide i adobe illustrator. Jeg lavede et dokument, så jeg kunne lave et spritesheet. Herefter fandt jeg ud af mit artbord skulle være 200 px i højden og da jeg ikke helt kendte længden på min animation endnu, startede jeg med 2.000 px (200px * 10 frames) i bredden. Jeg indsætte derefter guidelines, så jeg nemt kunne se hvor meget plads jeg havde til at tegne min illustration. Da jeg gerne vil tegne en macbook, havde jeg taget et billede ind, som jeg valgte at bruge som baggrunds billede og dermed kunne tegne oven på det. For at tegne benyttede jeg værktøjet “pen tool”. Dermed begyndte tegningen af macbooken. Det var meget vigtigt at den frame, der var før, blev kopieret over i den næste, hvorefter man kunne tegne de næste bevægelse, og derefter fjerne tegningen fra før. På den måde kunne man være sikker på, at animationen ville være sammenhængende som muligt, og ikke hoppe fra side til side. Dette var meget svært og min animation endte også med at hoppe lidt. Som illustrationen tog til, var de 10 frems ikke nok, der blev dermed tilføjet flere og animationen endte med 21 frams.
Her ses mit spritsheet. Det er normalt et langt billede, men for at se hvad der sker, har jeg valgt at dele den op i flere dele.
Det hele består af en HTML-fil og en tilhørende CSS-fil, som arbejder sammen for at få animationen til at fungere. Jeg vil nu dykke ned i henholdsvis HTML og CSS.
HTML indeholder strukturen til animation. Dokumentet starter med koden !Doctype, som fortælle browseren, at dette er et HTML5-dokument. Herefter starter HTMLen og går videre i en head, som indeholder metadata, altså informationer om dokument, for eksempel vores meta charset, som angiver det tegnsæt vi benytter, så tegnene som æ, ø og å bliver vist korrekt. Det er også her vi har vores tittel til vores fane. Til sidst i min head, har jeg link, som linker til et eksterne CSS fil, jeg har oprettet. Det er også den som styre det visuelles udtryk og animation. Går vi videre ned til bodyen i koden, placeres alt det indhold man gerne vil have skal være synlig på ens hjemmeside, som i dette tilfælde er vores animation. Dette gøres ved at lave en div og class, så at denne boks bliver animeret gennem vores CSS.
Dermed kan man gå over den eksterne CSS fil, som jeg har lavet. Starter med at definere mit .computer element ved at give det en fast højde-hight og bredde-width på 200×200 pixels. Dette definere hvor stor en del af billedet der skal vises ad gange. Derefter tilføjes mit billede af min animation som har navn “Endelig version” ved hjælp af background. Billedet bliver placeret øverst i venstre hjørne 0 0. For forhindre billdet i at gentage sig selv benyttes koden no-repeat. For at få animationen til afspille og køre i 4 sekunder og benyttede hele billedet 24 frems, bruger jeg animation: play 4s steps(24). Da vi skulle fremvise vores produktioner for klasse skulle vores animation køre i et loop, dette gøres ved infiite, som får animatioen til at gentage for evigt.
For at få animationen til at rykke sig fra start til slut, starter med at give animationen navnet play, derefter defineres den ved at benytte @keyframes play. Jeg vil nu gerne have animationen starte ved første frem, derfor sætter den backgrond-position: 0px. Den skal derefter slutte i det sidste fram, dermed skal billedet rykkes sig fra start til slut, dettte bliver gjort ved at benytte backgrond-position: -4800px. De 4800px er længden på mit billede af min animation.
Alt dette kode for min animation til at bevæge sig fra start til slut i et loop.
Animation skulle tage udgangspunkt i de 12 animationsprincipper, vi skulle dermed vælge hvilke principper vi vil arbejde med. Jeg havde mere travlt med at vælge hvordan min animations skulle se ud end at vælge hvilke principper jeg skulle benytte. Så nå jeg kigger på min færdig produktion af min animation, kan jeg se at jeg har benyttede “Squash and Stretch” og “Anticipation”. Ved “Squash and Stretch” princippet ses det på den lille gule cirkel på computer skærmen, der ændrer størrelse i takt med åbningen af computerskærmen. Jeg har også benyttede princippet “Anticipation”, i det computerskærmen gå fra at være lukket til gradvist at åbne sig op. Benytter det også ved bygning af ansigtet, da det bliver bygget stille og roligt op, men farve, så øjne og til sidst en mund og dermed et ansigt.
Her ses det færdige produkt
Refleksion
Når jeg ser tilbage på hele forløbet, er jeg både tilfreds og stolt over det endelige resultat. Det har været en spændende og udfordrende proces, hvor min kreativitet virkelig er blevet sat i spil. Når først idéen er på plads, går det som regel hurtigt fremad for mig.
Jeg havde lidt erfaring med Adobe Illustrator fra tidligere undervisningsforløb, men i dette projekt har jeg opnået en langt dybere forståelse for programmet. Især værktøjet “Pen Tool” er blevet min faste makker – selvom vi til tider har været lidt uenige.
Det har også været rigtig fedt at arbejde med HTML og CSS på en ny måde. Normalt bruger vi det mest til at designe hjemmesider, men i dette projekt har jeg opdaget, hvor meget mere CSS kan – ikke kun til styling, men også til at skabe animationer, der giver liv til designet.
Til sidst har jeg virkelig fået øjnene op for, hvordan kreativitet og teknisk kunnen hænger uløseligt sammen. Selv en tilsyneladende simpel idé – som en computer, der åbner og smiler – kan indeholde flere lag af overvejelser, tekniske greb og visuel kommunikation.