Studio Dmss

Animation

Workshop beskrivelse

Torsdag d. 28 november havde vi workshop om animation. Vi skulle skabe en kort animation, som relaterede sig personligt til os ved hjælp af Adobe Illustrator og kodning (HTML5 og CSS). Resultatet skulle både være en teknisk øvelse i Illustrator, HTML5 og CSS og et kreativt element, der kunne indgå i vores procesportfolio.

Arbejdsproces

Idéudvikling og planlægning

Jeg startede arbejdet med at læse om de 12 animationsprincipper for at finde ud af, hvilken retning jeg ville vælge. Jeg besluttede mig hurtigt for at arbejde med princippet ‘squash and stretch’, da jeg fandt det overskueligt at arbejde med. Den viden, jeg fik om principperne, fandt jeg via dette link: https://the12principles.tumblr.com/

Derefter reflekterede jeg over, hvad der kunne have personlig betydning for mig, og kom frem til, at jeg ville lave en animation af en kænguru, da det er mit yndlingsdyr. Jeg lavede skitser af bevægelserne og udarbejdede et storyboard, som I kan se nedenfor.

Adobe Illustrator

Jeg begyndte derefter at arbejde med de forskellige frames i Adobe Illustrator. Jeg havde lidt erfaring med programmet på forhånd, så det var nemt at komme i gang. Jeg forsøgte først at skabe min egen kænguru fra bunden, men indså hurtigt, at det ville tage længere tid end forventet. Derfor valgte jeg at bruge en allerede animeret kænguru, som jeg fandt på nettet, som udgangspunkt. Jeg brugte ‘Pen Tool’ til at trace de individuelle dele af motivet (f.eks. ben, hale og hovede), så jeg kunne animere kænguruen til at hoppe. Arbejdet tog tid, men jeg kom i mål og kunne derefter fortsætte med kodningen i workshoppen. Motivet som jeg fandt på nettet samt min egen version kan I se nedenfor.

Inspirationsmotiv fra nettet

Illustrator-motiv i opdelte elementer

Spritesheet

HTML

Jeg opbyggede mit HTML5-dokument, som i kan se nedenfor.

Øverst i dokumentet linker jeg til det tilknyttede CSS-stylesheet. I HTML’en har jeg inkluderet tre elementer:

<h1> for at give siden en titel (Kangaroo Animation

<img>-tag for at indsætte spritesheetet

<div>-element, hvor animationen skal vises. Jeg har givet <div>-elementet en klasse, så jeg nemt kan referere til det i CSS-filen og style det der.

CSS

Jeg har brugt følgende CSS til at animere kænguru-motivet:
 
.sprite: bestemmer størrelsen (400px) på elementet og sætter baggrundsbilledet til spritesheetet. Animationen play kører over 3 sekunder med 15 trin (steps (15)), så hver frame vises i rækkefølge.
 
@keyframes play: Ændrer ‘background position’ fra 0px til -6000px, hvilket får spritesheetet til at bevæge sig og skabe animationen.

Det endelige resultat

Refleksion

I workshoppen den 28. november fik jeg en bedre forståelse for både Illustrator og kodning. Jeg valgte at animere en kænguru ved hjælp af animationsprincippet “squash and stretch”. I Illustrator brugte jeg ‘Pen Tool’ til at trace en kænguru, og selvom jeg oprindeligt havde planlagt at tegne den selv fea bunden, valgte jeg at arbejde ud fra et eksisterende motiv for at spare tid.

I HTML5 byggede jeg et simpelt dokument og brugte CSS til at animere spritesheetet. Jeg lærte, hvordan man bruger keyframes til at ændre baggrundsbilledet og skabe bevægelse. Samlet set var workshoppen en god måde at få styrket mine færdigheder i både design og kodning, og jeg fik praktisk erfaring, som jeg kan bruge fremover.