Workshops, 1. sem

CSS Workshop

Formålet med denne workshop var at lave en animation med HTML og CSS

Inden det hele gik i gang, havde vi en gennemgang af forskellige koder og animationer fra Andrea og Anni. Filerne ligger på Fronter og står nederst i blogoplægget.

Vi startede med at tegne vores spritesheet i Adobe Illustrator. Her brugte jeg pentool og pencil til at tegne blomster og sommerfugle.

Mit artboard i Adobe Illustrator satte jeg til at være 400px højt og 2000px bredt. Jeg arbejdede med 5 frames og indsatte ‘rulers’ for nemt at kunne holde animationen indenfor hver frame. Mine frames havde en størrelse på 400px x 400px.

Spritesheet for animationen

Jeg valgte at lade blomsterne stå stille og få sommerfuglene til at bevæge sig. Filen skulle nu exporteres (save for web) og gemmes som en PNG-8 fil (filnavn “blomster.png”)

Herefter åbnede jeg programmet Brackets, hvor jeg gik i gang med at kode min animation.

HTML for animationen

Linje 4: Jeg sætter mine character settings til at være UTF-8, så jeg kan bruge unicode.
Linje 6: her linker jeg til den CSS fil, som jeg styler I og er gemt i samme mappe som HTML filen.
Linje 11: Jeg har defineret en class i min <div> til at være “sprite”, fordi det er et spritesheet, jeg skal animere.

CSS for animationen

Linje 4-9: her henviser jeg til min sprite class, hvis størrelse er 400px x 400px.
Linje 7: her henviser jeg først til min png-fil og angiver herefter ‘0 0 no-repeat’ som betyder at png-filen placeres i øverste venstre hjørne og at den kun skal vises én gang.
Linje 8: her angiver jeg at animationen skal vare i 1 sekund ved at skrive ‘play 1s’. Herefter angiver jeg ‘steps(5)’ som henviser til hvor mange frames min png-fil består af og som skal afspilles. Til slut betyder ‘infinite’ at animationen skal fortsætte indtil browseren lukkes.
Linje 12: ‘@keyframes’ henviser til navnet jeg kaldte min animation tidligere: ‘play’.
Linje 13: her angiver jeg at ved 0%, altså starten af animationen, skal billedets position være ved 0px (første frame)
Linje 14: her angiver jeg at ved 100%, altså slutningen af animationen, skal billedets position være ved -2000px (sidste frame)

Se på det sådan, at spritesheetet starter ved 0px og slutter ved -2000px, da artbordet lavet i Illustrator var 2000px bredt.

Det færdige produkt
http://ksm-design.com/blog/workshop/css/blomster.html

Filer:
FRONTER, PDF: CSSworkshop-studentinfo.pdf
FRONTER, PDF: cssSpriteAnimation.pdf

Reflektion:
Jeg gik ind til denne workshop uden at føle at jeg havde styr på det. Så det var rigtig svært at komme igang, men når man havde siddet og leget lidt med det, var det som om at forståelsen for koderne kom til én lige så stille. Jeg valgte at lave en simpel animation og følte egentlig ikke, at jeg lå på samme niveau som resten af klassen. Til min store overraskelse, kom lærerene faktisk ned bagefter og roste min animation fordi jeg havde fået sommerfuglene til at bevæge sig ret naturligt og fået ‘baggrunden’ til at være på præcis samme sted ved hvert frame. Så alt i alt, var det en god oplevelsen, trods min usikkerhed.