Ordforklaring
- “Frames” Engelsk for ‘billeder’. Bruges normalt i animationsindustrien når man snakker om billeder i sekundet.
- “Animationsprincip” refererer til de 12 animationsprincipper af Frank Thomas og Ollie Johnston, to animatorer fra Disney der skrev en bog om animation.
- “Storyboard” er et Engelsk term til et billedligt referat af en sceneoversigt i en film/animation. Det er en visuel repræsentation af filmen for hver enkel scene.
Idé og koncept
Jeg startede workshoppen med at skrive nogle idéer ned som jeg kunne arbejde videre med:
| Idéer: – En bold der føler sig lukket udenfor af nogle firkanter – Julemanden der lander på en ferieø og får en martini – En Minecraft creeper der eksploderer på en græsplæne – En snemand der bliver bygget af faldende sne og falder sammen |
Jeg forsøgte mig først med idéen med julemanden med en hurtig skitse, men indså at udførelsen ville være for kompleks til tidsrummet i workshoppen. I stedet gik jeg med min første idé, som også var min yndlings, da der var en fortælling bag.
Idéen var at lave en animation om ikke at passe ind i en gruppe/blive udelukket. Her overvejede jeg at bruge nogle firkanter (inspireret af ordsproget at “være firkantet” hvor man ser alting forenklet), og en bold/cirkel, som skal fremstå blød, som en fodbold eller lign. På den måde kan den få noget personlighed i dens bevægelser, da jeg havde tænkt mig at bruge animationsprincipperne “squish & stretch”, så bolden er mere livagtig. Desuden brugte jeg også “solid drawing” på firkanterne (bolden bør også have haft noget dybde, men det er mere komplekst på et rundt objekt), for at give hele animationen noget dybde, så man også kan se at firkanterne egentlig er kasser, som danner en mur når stablet på hinanden. Desuden har jeg brugt andre animationsprincipper, som jeg nævner længere nede.
Storyboard
Med min idé på plads manglede jeg et storyboard. Det var en relativ simpel animation, ihvertfald når det kommer til antal scener. Under selve animation ville jeg indse at det krævede overraskende mange frames, for at give et overbevisende udtryk.
Som vist på storyboardet, var det vigtigt at bolden havde specifikke udtryk igennem animationen. Nogle af de mindre vigtige udtryk ekskluderede jeg, for at prioritere det som ville sælge animationen i sidste ende – f.eks. havde det meget lidt betydning om bolden hoppede ind i billedet i starten, men det var vigtigt at den gav udtryk for at være overrasket når firkanten passede ind i hullet, mens bolden ikke gjorde.
Det var også vigtigt med “staging”, for vise historien klart og tydeligt. Derfor er muren tydeligt inde i billedet lige fra starten af, og bolden kommer sekundært ind i scenen.
I storyboardet havde jeg også overvejet en form for interaktion mellem firkanten og bolden, men det valgte jeg heller ikke at inkludere, da det havde ingen betydning for resultatet.
Udvikling
Jeg brugte Adobe Illustrator til at lave selve animationen. Jeg brugte et stort artboard delt op i 500x500px med rulers, for at vise selve animationens vindue. Undervejs brugte jeg bare animationsprincippet “straight ahead”, hvor jeg animerede frame-by-frame.
Selve illustrationen forblev relativ simpel, da den ikke behøvede at være særlig komplex for at sælge idéen bag. Jeg havde overvejet at lave bolden som et 3D element i Illustrator, men holdte mig til at lave den 2D, da det ikke ville tilføje meget til illustrationen, i forhold til hvor meget tid vi havde til workshoppen.
Nogle animationer har forskelligt antal frames alt afhængigt af hvad der sker i animationen. F.eks. behøver en tennis spiller en del frames når de står stille, for at give indtrykket af langsom bevægelse, mens der behøves færre frames når de skyder, for at vise at de bevæger sig hurtigt.
Min animation, derimod, behøvede ikke at benytte sig af dette princip, da der ikke var de store bevægelser. Jeg kunne have brugt det til når bolden hoppede, eller mens den stod stille, men det ville jeg kun have inkluderet hvis der havde været mere tid til workshoppen
Jeg animerede også hele hver frame sit eget lag, da jeg havde flere lag med clipping masks og lign., hvilket kun gav bedre overblik over animationen (og slet ikke fordi jeg har et ekstremt tilfælde af OCD).
Der var nogle gange hvor jeg måtte gå tilbage og rette nogle frames, hvor det hjalp meget at jeg havde opdelt illustrationerne i deres egne lag.
HTML/CSS
HTML
En simpel HTML kode. Der skulle ikke være andet indhold end selve animationen på siden, så det eneste betydelige er i <body>, hvor jeg inkluderede selve mit ‘sprite’, altså hele animationen, som blev lavet i ét langt billede (i <img> tagget).
Så er der selve animationen i <div> tagget. Jeg gav den en klasse, som jeg brugte i CSS koden senere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS animation Illustrator</title>
<link href="css-animation-illustrator.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="css-animation-illustrator.png"/>
<div class="animation"></div>
</body>
</html>CSS
Derefter var det tid til CSS. Jeg brugte “.animation” klassen fra min HTML, hvor jeg satte højden på billedet til 500x500px. Dette ville blive selve animationen. Med “background” linkede jeg til billedfilen, og “0 0” definerer positionen af billedet med horisontal og vertikal position. “no-repeat” betyder at baggrunden ikke gentager sig.
Så kom animationsdelen. “play” refererer til navnet af animationsværdien, “03s” er afspilningstiden i sekunder og “steps (21)” definerer antal frames i animationen – “Infinite” looper animationen – uden denne ville animationen bare stoppe.
Der er brug for 2 af disse værdier, da animationen har 2 rækker (pga. canvas størrelsen i Illustrator).
.animation {
width: 500px;
height: 500px;
background: url('css-animation-illustrator.png') 0 0 no-repeat;
animation: play 03s steps(21) infinite,
play2 06s steps(2) infinite;
}@keyframes play {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -10500px;
}
}
@keyframes play2 {
0% {
backgorund-position-y: 0;
}
100% {
background-position-y: -1000px;
}
}“@keyframes” er et term der kommer gammeldags animation, hvor det definerer starten og slutningen på en animation. Dette term bliver også brugt i Adobe programmer, som Premiere, hvor det definerer start og slut på en effekt. I dette tilfælde er det bare navnet på animationsværdien i CSS. “play” og “play2” er igen bare et brugerdefineret navn på værdien.
“0%” definerer på hvilket tidspunkt i animationen den følgende værdi skal ske – i dette tilfælde skal billede køre fra 0px på den horisontale akse (“background-position-x”), til -10500px, altså køre mod højre. Dette sker da vi allerede har sat højden og bredden til 500x500px, hvilket i praksis bare beskærer billedet.
“100%” definerer slutningen på animationen. I dette tilfælde kunne der også have blevet brugt “to” og “from”, som også bare betyder 0% og 100%, men ved at bruge procent slipper man for at gå tilbage og skrive al CSS kode om, hvis man vil tilføje flere animationer, f.eks. ved 50% igennem animationen.
Der er to sektioner med @keyframes, hvor den næste hedder “play2”. Denne flytter billedet 1000px ned langs den vertikale akse (“background-position-y”), hvor den starter animationen på række 2, indtil animationen starter helt forfra.
Resultat & reflektioner
Alt i alt har det været en god workshop, uden store problemer. Jeg kunne måske have gjort lidt mere ud af at overveje tid, da jeg kun havde 1 time til sidst til at skrive koden – derfor blev jeg først færdig med animationen 10 minutter før deadline.
Men selve teknikken, kodningen og illustrationen var der ingen problemer med. Vi sad 3 personer i sidste øjeblik og arbejdede sammen om at finde ud af at skrive koden til et sprite med 2 rækker, da den var anderledes end det eksempel vi havde fået af lærerne.
Det kan diskuteres om det var nødvendigt at bruge tid på at organisere hver frame i sit eget lag, men jeg synes det hjalp mig undervejs, plus jeg foretrækker at have orden i mine filer.
Efter afleveringen skulle vi rundt at se hinandens animationer, hvorefter vi skulle stemme på vores favorit. Jeg kunne bedst lide Simones og Signes, da de var meget godt animeret og tegnet, men endte med at stemme på Signes, som også vandt i sidste ende.
Min animation vandt dog også “Most creative”, efter lærernes valg. Min sidste animation til workshop vandt også, så noget må jeg da gøre rigtigt.
- Overvej tid til hver enkelt opgave. Det er måske ikke nødvendigt at lave en tidsplan når der er begrænset tid, men overvej ikke at bruge 90% af tiden på én enkelt opgave, når der skal laves andet.
- Kend koden i stedet for at sidde og lære den i sidste øjeblik. Selvom det var relativt nemt at forstå koden når vi også var flere om at finde ud af det, kan det stadig være en mere kompleks kode næste gang, og det kan gå ud over deadline.