Sprite Animation – Mushroom!

Her har jeg arbejdet i Adobe Illustrator og med html og css. Jeg har lavet en lille animation med en lille blå svamp, der bliver stor ved at holde vejret og når den mister pusten bliver den lille igen.

Her kan du se den: http://temasa.dk/animation/mushroomanimation/mushroom.html

Selve tegningerne er lavet i Illustrator. På første billede kan hele serien på 40 billeder ses. På de to næste kan man bedre se hvordan den lille blå svamp går fra at være stor til lille. Jeg har opdelt alle ting på forskellige lag, for at undgå at der var noget der skulle forsvinde bag hinanden, en streg eller farve. Jeg startede med at farve alle billederne ved brug af min wacom tablet, indtil jeg fandtfrem til en nemmere måde at markere og farve hele omridset – hvilket resulterede i, at jeg sparede meget mere tid og kunne hurtigere fokusere på selve kodningen bag det, når jeg var færdig med alle billederne.

Når alle billeder var færdige blev de gemt som et billede der så ved hjælp af HMTL kunne kører i loop og derved vises som en lille animation.

Jeg fik lavet en HTML og CSS. I min HTML lavede jeg en div class sprite som blev linket sammen med CSSén hvor jeg tilføjede min .png af det store svampe billede, satte ind hvor hurtig den skulle afspille og hvor mange billeder der skulle vises.

I denne workshop har jeg lært hvor vigtigt det er, at få den rigtige bevægelse i en animation og hvor vigtigt det er, at følge;

Selve opgaven i sig selv var sjov og udfordrende, men også en god læreproces  hvor jeg skulle lære at holde fokus rigtigt og planlægge min tid, da vi havde en deadline der skulle nås. Jeg blev bidt af selve det at lave en sprite (animation) og jeg glæder mig til at lære nye måde at forsimple selve arbejdsprocessen på. Dette projekt gav mig blod på tanden og jeg endte med, at gå hjem og finde flere forskellige videoer både om the 12 principles of animation, Illustrator og hvordan jeg kunne forbedre mine teknikker indenfor programmet.

Skriv et svar

Luk menu