30/11/23
I denne workshop lærte vi, hvordan man kan bruge illustrator og CSS, for at lave en lille animation af fx et logo eller en mascot. Processen bestod i at lave et animation spritesheet i Illustrator, hvorefter man vha. nogle animation properties og @keyframes i CSS, kan få sit spritesheet til at bevæge sig.
Klik her for at se det endelige resultat
Processen:
Til at starte med lavede jeg et hurtigt og meget groft storyboard, men før jeg gik i gang i Illustrator glemte jeg at tænke over, hvilke animationsprincipper jeg gerne ville indrage, for at gøre min animation mere visuelt spændene og “realistisk”. Derfor kom det lidt som en eftertanke, da jeg allerede var igang i Illustrator, at prøve og bruge squash and stretch princippet, når blyanten hopper. Det er derfor at jeg ikke har tegnet, at blyanten hopper, på mit storyboard.
Grunden til jeg kom frem til idéen med blyanten, var fordi jeg før workshoppen havde prøvet at lave et lille logo til mit eksamensprojekt, hvor jeg i logoet også indrager en blyant. Derfor tænkte at det ville være smart at animere blyanten, så jeg evt. kunne bruge animationen på mit præsentationsporfolio til eksamen.
Efter jeg havde lavet storyboardet var det tid til at lave mit spritesheet i Illustrator. Her oprettede jeg en fil som i alt endte med at blive 12000px i længden (fordi jeg endte med at have 24 individuelle sprites i alt) og 500px i bredden (fordi hvert sprite havde en størrelse på 500px x 500px).
Jeg startede med at lave selve blyanten og dens skygge, som jeg derefter grupperede, så jeg kunne rykke rundt på dem som én enhed. Jeg valgte at tilføje skyggen for at gøre animationen mere visuel interessant og mindre flad.
Derefter lavede jeg en “hjælpe-cirkel” (den røde cirkel) jeg kunne bruge som guide for at lave de streger som blyanten tegner. Da jeg var færdig med hele mit spritesheet, slettede jeg selvfølgelig alle guide-cirklerne.
Efter blyanten har tegnet cirklen færdig, laver den et lille hop, hvorefter cirklen langsomt forsvinder og hele animationen starter forfra. Her brugte jeg så animationsprincippet squash and stretch, for at virkelig få blyanten til at se levende ud.
Først gjorde jeg blyanten meget tykkere og lavere, så det ligner at blyanten samler energi for at kunne hoppe, lidt ligesom når mennesker bøjer ned i knæ inden de hopper.
Derefter bevæger blyanten sig op, mens den gradvist bliver tyndere og længere, for at få det til at ligne at blyanten bliver strukket ud. Samtidig tilføjede jeg også en gaussisk slørings-effekt på blyanten og skyggen, for at give illusionen af, at det var en hurtig bevægelse.
Når blyanten så falder ned igen, bliver den endnu engang meget tyk og bred, så det ligner at blyanten bliver påvirket af faldet fra hoppet. Derudover tilføjede jeg også nogle små ovaler som flyver ud fra spidsen efter blyanten lander, for at at give en mere dramatisk effekt.
Da jeg var færdig med hele mit spritesheet, eksporterede jeg det som en png-fil, så jeg kunne sætte det ind min CSS-kode.
Selve HTML’en var meget simpel, hvor det eneste indhold jeg havde var et div-elementet som jeg gav klassen “pencil”, samt selve mit spritesheet, hvilket man ikke behøver at have med i html’en, men det er fint at have med så man kan se, hvordan det ser ud stillestående.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>animation</title>
<link href=”pencil-animation.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<img src=”img/pencil-animation kopier.png” alt=”detter er et sprite-sheet til en animation af en blyant, der tegner en cirkel”>
<div class=”pencil”></div>
</body>
</html>
Derefter lavede jeg CSS-dokumentet pencil-animation.css, som jeg har linket til i min html.
.pencil {
width: 500px;
height: 500px;
background: url(“img/pencil-animation\ kopier.png”) 0 0 no- repeat;
animation: pencil 1.3s steps(24) infinite;
}
@keyframes pencil {
0% { background-position: 0px; }
100% { background-position: -12000px; }
}
Her valgte jeg en vidde og højde på 500px, så det passede med den originale størrelse på de individuelle sprites. Ved background satte jeg url’en til mit spritesheet ind, derefter står der “0 0”, hvilket indikerer x- og y-værdierne for baggrundens positionen (i det her tilfælde animationens position, hvilket så er øverste venstre hjørne på skærmen. “no-repeat”, gør så at billedet ikke bliver gentaget, altså så det kun vises én gang. Ved min animation property, skrev jeg navnet på min animation “pencil”, derefter 1.3s (1,3 sekunder), hvilket er varigheden af animationen, og så steps(24), fordi der er 24 individuelle sprites og til sidst står der infinite, så animationen bliver ved med at køre i loop.
Til sidst bruge jeg en at-rule der hedder @keyframes, for at definerer antal af frames i min animation, og i det her tilfælde havde jeg kun 2 keyframes. 0% indikerer så første keyframe og 100% indikerer sidste keyframe. Første frame har så en baggrundsposition på 0px, så man ser første sprite på mit spritesheet og sidste frame har -12000px, fordi mit spritesheet er 12000px i alt, så det køre hele vejen igennem, fra første sprite til det sidste. Grunden til at det skal være -12000px er så animationen kan køre den rigtige vej.
Refleksion:
Jeg havde overordnet en meget positiv oplevelse med den her workshop. Det var meget tilfredsstillende til sidst, da man havde fået lavet koden og kunne se sin animation komme til live. Inden workshoppen var jeg nervøs for at vi skulle lave noget der var meget mere kompliceret, lidt ligesom det vi lavede med Anni, da hun underviste os i CSS animation. Men jeg var positivt overrasket da jeg fandt ud af at vi skulle bruge Illustrator først og selve koden var relativt simpel. Jeg brugte størstedelen af workshoppen på at sidde og lege med Illustrator og derefter gik det meget hurtigt med at skrive koden. Jeg synes også jeg lærte en masse nyt omkring Illustrator, ting som jeg slet ikke vidste man kunne i programmet, så workshoppen har været en lærerig oplevelse for mig.