Web Motion: Animate a CSS Sprite Sheet
30mBeginner2014-01-30
Authors
Tom Green
Teacher, Author, Professor
Course details
CSS sprite sheets have opened up another door for web motion, allowing you to efficiently animate a series of images—anything from button states to character poses. In this quick course, Tom Green shows you how to animate a character's walk cycle by creating a sprite sheet in Flash, editing in Fireworks, and putting it into motion (and into your HTML) with Edge Animate.
Skills covered
FireworksFlash ProfessionalEdge AnimateWeb GraphicsWeb StandardsWeb DesignPhotoshopFront-End Web DevelopmentAdobeWeb DevelopmentDeep Dive (X:Y)
Concepts
Animate a CSS Sprite Sheet
- 01 - Project overview and plan
- 02 - CSS motion overview
- 03 - Sprite sheet creation in Flash CC
- 04 - Sprite sheet editing in Fireworks
- 05 - Assembling the project in Edge Animate
- 06 - Testing and output