Storyboard:
Jeg startede med at lave et storyboard over de frames jeg gerne vil have i min animation. Idéen med min animation var en kisten som der skulle åbne sig og så skal man se alt det gode der ligger i kisten. Men så viser det sig at kisten har tænder som der beskytter skatten og så lukker den i
Illustrator:
Jeg startede med at lave det frame der havde mest indhold i. Det var den frame hvor at kisten er åben og man kan se dens tænder og mønterne i kisten. Den lavede jeg først så jeg nemmer kunne kopier og bruge indholdet i de andre frames.
Min CSS Kode:
I den første del af koden laver jeg den class som min div skal bruge. Classen hedder sprite og første skriver jeg hvor stor hver frame af min animation er og fortæller hvad for et billede det skal bruge og hvor lang tid animationen skal spille.
.sprite{
width: 400px;
height: 400px;
background: url(“../images/spritesheet.png”) 0 0 no-repeat;
animation: play 1.5s steps(6) infinite;
}
Her laver jeg så animationen som den skal afspille:
@keyframes play{
0%{
background-position: 0px;
}
100%{
background-position: -2400px;
}
}
Animations Princip:
Jeg har brugt animations princippet Squash & Stretch som man bruger til at overdrive bevægelser med at deforme sine figurere til at strække sig. Det har jeg brugt i min animation med kisten og man kan se det når det er at kisten den lukker så bliver den helt trukket ud for at vise at den lukkede meget hårdt
Færdige animation:
Refleksion:
Jeg har arbejdet med Sprite Sheets før så jeg havde allerede en god forståelse for hvordan de virkede inden den her workshop, men har dog aldrig brug illustrator til at lave en før. Jeg syntes faktisk ikke det var så svært da vi allerede havde haft om hvordan man lavede former med pen tool så det var næsten kun det jeg brugte i min animation. Animationen kunne dog sagtens blive forbedret med flere frames så den ser mere smooth ud :).