Animation is far reaching. It encompasses everything from low-budget flip
books to hyperdetailed, full-length Disney films. There are the cartoons
that we watched cross-legged on Saturday mornings growing up ("What's up,
Doc?" "Scooby Snack?" "Captain Caveman!"), those freaky Burl Ives-narrated
stop-action Christmas specials, and adult favorites like The
Simpsons, King of the Hill, and Wallace and Gromit. There
are the studio-backed animations and independents, traditional 'toons and
experimental animations. Block-busting special effects, which make the Millennium Falcon fly and the Titanic sink, are their own special breed of animation. Each of these types of animation has its own difficulties — budget and time constraints, technology limitations, and so on. But none share the unique challenges of Web animation.
We know. We've lived the paradox: Make it big and beautiful, and only some of your audience can see it; make it small and limited, and everyone can see it. We've been through the trials and errors of clunky first, second, and third versions of the hordes of graphics and animation programs. We've spent years muddling our way through new interfaces, finding workarounds for bugs, and struggling with the long way until we could forge our own short cuts.
All so you don't have to!
In this Animation Tutorial, we'll give you stylistic guidelines and general
animation tips, as well as building ideas, troubleshooting techniques, and
page-integration tricks for GIF89, dynamic HTML, and Macromedia Flash. Here
is the lesson-by-lesson plan:
What We'll Cover
Lesson 1: Tutorial Overview and Intro to Web Animation
Lesson 2: GIF89
Lesson 3: DHTML
Lesson 4: Flash
Lesson 5: Animation Approaches — Design
Lesson 6: Animation Approaches — Sound
Lesson 7: Animation Approaches — Styles and Integration
Prerequisites
Make sure you know what you're getting into:
Lessons 1, 5-7:
No prerequisites — just come as you are.
Lesson 2:
1. You need a basic knowledge of GIF animation
2. Required reading: Jim Frew's GIF Animation Refresher
Lesson 3:
1. Basic knowledge of dHTML and Dreamweaver
2. Required reading: Taylor's DHTML Tutorial
Lesson 4:
1. Basic understanding of Flash
2. Required reading: Mike Kay's Intro to Flash
Supplies
Before you get to the meat of this tutorial, you should also make sure you have all the tools you need. Use the examples on the pages that follow as a litmus test — don't proceed to the following lesson until you've downloaded all the plug-ins or a browser recent enough to let you see everything we show you today. At the very least, you need a JavaScript-enabled browser. Otherwise, you won't be able to see many of the rich examples, which use JavaScript to launch into a new window.
OK. Ready? Set? Let's go.
next page»
