Til denne workshop skulle vi lave en animation skulle vi lave en animation ved brug af CSS og Illustrator. Vi startede med at blive introduceret til opgaven, og fik vist hvordan man i Illustrator kunne lave et artboard, hvor vi kunne lave hvert frame til animationen som et billede/tegning. Jeg startede med at lave et storyboard til min animation, som skulle være en bold, der hopper, rammer væggen og flyver mod “kameraet” og looper. Jeg valgte denne animation da jeg havde en idé om at det ville være relativt simpelt at lave i Illustrator.
Derefter begyndte jeg at lave mine illustrationer i Illustrator. Jeg begyndte med at lave rummet, hvori bolden skulle hoppe, og kopierede dette “lag” til de andre frames i artboardet. Derefter tilføjede jeg bolden, og satte den i position på hvert frame samt lavede den “splattet” ud, når den ramte en af overfladerne. Dog fandt jeg ud af, at jeg ikke havde frames nok til at gøre den lige så smooth som jeg gerne ville have den, samt skabe det loop jeg ville. Derfor tilføjede jeg flere frames til mit artboard og udfyldte dér hvor jeg ikke syntes at det var smooth nok.
Da jeg havde fået lavet alle mine frames begyndte jeg på det HTML og CSS, som Anni og Jesper havde vist i starten af dagen. Jeg satte min illustration ind, og tilpassede CSS’en ift. steps, hvor hurtigt den skulle være, samt hvor keyframen på 100% skulle være. Min animation kan ses nedenfor til højre:
Refleksion
Denne workshop synes jeg egentlig ikke har givet mig så meget. Det har været sjovt at se hvordan man kan bruge CSS til at skabe noget animeret, men jeg synes, at det har virket som en lidt besværligt proces, som jeg ikke helt ved hvad jeg ville skulle bruge til hverken nu eller i fremtiden. Jeg synes, at workshoppen, hvor vi arbejdede i After Effects (Moving art) gav mig meget mere og gav meget mere mening ift. hvad man kunne opnå med det, samt hvad det kan bruges til. Dog kan jeg sige, at det har hjulpet mig med min “forståelse” af Adobe-programmerne, som flere af de andre workshops også har, idet flere af disse programmer egentlig er meget lig hindanden, men med forskellige formål.