Besvrivelse
Vi havde semesterets sidste workshop, animation, tirsdag d. 29/04 2025. Denne workshop gik ud på, at man skulle bruge css og Adobe Illustrator til at lave en animation. Animationen skulle tage udgangspunkt i det storyboard man lavede baseret på et af de 12 animationsprincipper.
Kl. 14 skulle alle vores animationer stå klar og spille, da vi og underviserne skulle gå rundt og se de forskellige produktioner. Som afslutning havde vi en astemning. De tre kategorier var ”most creative”, ”best production” og “peoples choice”. Jeg vandt desværre ikke nogen af kategorierne.
Proces
Animationen skulle arbejdes ud fra en af de 12 animationsprincipper. Her valgte jeg at tage udgangspunkt i ”slow in & slow out” for at give lidt realisme, da elementer ikke bevæger sig lige hurtigt hele tiden. Det bevæger sig langsomt i starten og mod slutningen af bevægelsen, og hurtigere ind i mellem.
Da vi gik i gang opgaven, startede jeg med at drage inspiration fra Pinterest. Tanken var, at jeg gerne ville lave noget, jeg eventuelt kunne bruge til præsentationsportfolien. På Pinterest fandt jeg et “P”, der lignede, at det var lavet ud af kode-tags. Det var den, der satte gang i tanken om, at det kunne være et potentielt logo, hvis jeg valgte at min portfolio skulle fremhæve kodningen.
Da jeg havde samlet noget inspiration til en ide og besluttet mig for en animationsprincip, lavede jeg et storyboard så jeg hele tiden havde noget visuelt at gå tilbage til. Og så var det i gang med at lave det.
Jeg besluttede størrelsen på min animation, og justerede derudfra størrelsen på mit artboard. Artboardet opdelte jeg i lige store dele, og tilføjede mine elementer. Eftersom min animation involverede, at mine elementer skulle bevæge sig helt ud af frame, og derefter re-enter, kunne jeg heldigvis bruge copy/paste, og på den måde spare lidt tid.
Da spritesheetet” var færdig, var det blevet tid til at kode, så det ville ende ud som en animation.
Af underviserne fik vi tildelt et eksempel på, hvordan vores kode kunne se ud, det er ud fra det eksempel, jeg har opbygget min kode.
Efter jeg havde lavet koden, så den fungerede, synes jeg ikke min animation så ud som jeg havde forestillet mig, det var derfor tilbage til tegnebrættet og foretage nogle justeringer. Det var dog kun nogle mindre rettelser, da jeg ikke synes at pausen var lang nok til at fornemme opbyggelsen af kode eller c’et. Jeg copy/pastede derfor de to sprites et par gange, og var derefter også nødt til at tilpasse min kode til den nye spritesheet
HTML
Min html er bygget supersimpelt op, da det er i css filen det foregår. I min html har jeg linket til mit eksterne stylesheet, der refererer til min css fil. Derudover har jeg indsat et div-element, som eg har givet class=”sprite” for at referere til den i min css.
CSS
I min css tager jeg fat i min class ved at skrive ”.sprite”, derefter tildeler jeg den de størrelsesforhold, der passer til min illustration. For denne animation er det 500px × 500px.
Baggrunden bliver sat til at være et billede at mit spritesheet, som placeres i position 0,0.
Jeg angiver animationens navn, varighed, antal sprites og antal afspilninger
Jeg indsætter keyframes for at definere starten og slutningen på min animation, og skriver det sådan, at den startet ved 0px og slutter ved -9500px. Det bliver -9500px eftersom jeg har 19 sprites, der hver er 500px bred, som rykker sig ud af frame, for at gøre plads til næste sprite.
Refleksion
Jeg kunne godt lide, at workshoppen var en blanding af det kreative og kodning. Der var dog ikke lige så meget kode bag det som jeg have forestillet mig, men det har stadig været en god øvelse til at lære det css animation, vi brugte.
Kodningen af animationen gik meget bedre end forventet, nok fordi der ikke var så meget kodning som jeg havde troet.
Opgaven I sig selv var sjov og lærerig. Jeg lærte hvordan man bruger Adobe illustrator og css til at lave en animation, som kan bruges på hjemmesider. Jeg fik genopfrisket Adobe Illustrator, da det er længe siden, jeg sidst har arbejdet med det.
Der var øjeblikke, hvor jeg var en smule irriteret og lidt skuffet over udseendet af min animation. Jeg synes desværre ikke helt at jeg fik vækket mine ideer til live som jeg havde forestillet mig. Men øvelse gør mester.
Jeg kunne helt klart godt finde på at lege noget mere med css animation, og til den tid bruge noget mere tid på det og være helt enig med mig selv om, hvordan jeg ønsker resultatet, ender ud.
Resultat
Se resultatet i videoen herunder, alternativt se den i browser her