/ animation
femte workshop
Med brug af Illustrator og kodning, skal vi lave en animation, der kan ses på en hjemmeside. Vi skal overveje animationsprincipper, under udførelsen af vores animation.
/ inspiration
En del af opgaven var, at vi skule vælge at animere noget, der havde en relation til os selv. Jeg valgte at, at lave noget med inspiration fra film The Rocky Horror Picture Show, da det er en film, der både æstetisk og indholdsmæssigt siger mig en del.
Jeg tog et quote fra film, og akkompagnerede den med de ikoniske læber fra filmens intro.
Derefter, overvejede jeg, hvilket animationsprincip, der ville give bedst mening at bruge, for at vække idéen til live. Jeg valgte “anticipation”, da det går godt til selve quotet. Jeg ville forsøge at opbygge en spænding, ved at give lidt adgangen. Herefter, udformede jeg et storyboard.
/ storyboard
Det tog noget tid, at lave mit storyboard, da jeg skulle regne frames ud for hvert bogstav først og derfefter finde ud af, hvad munden skulle gøre i hver af de frames.
Med udgangspunkt i anticipation, ville jeg forsøge at trække “forløsningen” i en tid, der stadig føltes rimelig. Derfor startede jeg med en fade in, efterfulgt af munden der bevæger sig, i stedet for at gå direkte til handlingen, som er blod, der løber ud af munden.
/ animation og kode
Min animation blev 33 frames, i 500 X 500 pixels. Jeg besluttede mig for at arbejde baglæns, så jeg startede fra slutningen og bevægede mig mod starten, da slutningen var mere detaljeret.
Med animationen tegnet færdig, skulle den sættes op i HTML og CSS, så den kunne vises i webformat.
Jeg startede med at sætte mit HTML dokument op. Jeg kaldte det Animation, som ses på linje 6. Det var en standart opsætning, hvor jeg linker mellem mit HMTL dokument og CSS dokument i min head. Det ses i linje 7, hvor der er en href til CSS dokumentet.
Derefter, lavede jeg et div-element i min body, som jeg gav klassen “sprite”. Denne klasse stiliserede jeg i mit CSS dokument.
I mit CSS dokument oprettede jeg klassen “.sprite”, som jeg havde lavet i mit HTML. For at styrer udtrykket af min kode. Da den enkelte frame er 500 X 500 pixels, valgte jeg dette i både height og width, så det er det enkelte billede, der biver vist. Jeg vælger min source, der skal vises (linje 4) og vælger, at denne ikke skal gentage sig på resten af siden.
Jeg gav animationen et navnet “play”, vælger at den skal have fem sekunders varighed, at den har 33 frames (steps) og skal gå i ring (infinite)
Jeg lavede keyframes til “play”, som fortalte koden, hvor animationen skal startede og slutte. På den måde, “trækker” den alle mine frames igennem på fem sekunder.
Den færdige video blev sådan her:
/ reflektion
Det var fedt at lære noget mere om animation og kodning, og illustrator bliver bare sjovere og sjovere, hvergang jeg bruger det. Jeg er ret glad for det endelige resultat, og jeg kunne mærke under arbejdsprocessen, at jeg arbejde virkelig målrettet og koncentreret.