Creating flash like animations with Canvas and HTML5

Question

This is a "where can I start" type question.

I'm in process of learning HTML5 and Canvas work but have a feeling that I'm looking in the wrong area.

I would like to learn how to create cartoon type flash-like responsive animations. Imagine this teddy bear:

When I point my mouse at it I want to make him walk across the screen by implementing my "moving feet" animations etc..When click, I want him to wave his paw.

With HTML5 and Javascript I can make him move/float across but I can't find the way to actually ANIMATE the movements.

Do I create small .mp4 files? Do I create a bunch of images to loop through them? Animated GIFs? I would like to stay away from flash ofcourse...

I thought HTML5 with Canvas animation would allow me to achieve what I want but other than drawing simple shape animations and Video work I can't seem to find tutorials or "How to" articles.

How can I achieve what I'm trying to do or do I need to look elsewhere? I would appreciate being pointed in the right direction.

Edit: I ran into the following game while doing research: http://www.cuttherope.ie/ How, for example is the monster animated in something like this?

Answer 1

Canvas will do you well here.

Animation is typically done merely by cycling through different PNG files (or a spritemap with different images). Here's a jsfiddle example I did not long ago that shows a simple animation on the canvas:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 6) * width, Math.floor(tile / 6) * height, width, height, x, y, width, height);
};

image.onload = function() {
    // draw all 12 tiles:
    var i = 0;
    setInterval(function() {
        context.clearRect(0,0,500,500);
        drawTile(0, 0, i, 48, 32);
        i++;
        if (i > 11) i = 0;
    }, 85);
}
image.src = 'http://i.stack.imgur.com/qkWe2.png';

If you look at the image in the example, you get an idea of what a sprite map for animation looks like:

Cycling thought the sprites in such an image based on a timer is all that's needed!

---

Making and moving clickable, selectable objects on the canvas takes a bit of footwork. There's nothing built in for object detection on the canvas. But if you've done programming before it isn't too hard, and I've written a popular tutorial on the matter that serves as a very gentle introduction. It should help you out.

Other than that, your best resource is, of course, Stack Overflow. :) We'll always be glad to answer individual questions as you come across them.

Answer 2

If the purpose of the exercise is to learn HTML5 and canvas then the following is probably not for you. If you need to create your teddy animation as quickly and easily as possible, and deliver it using standards based technologies, then I would suggest you download and explore the preview of Adobe Edge. It's a motion and interaction design tool similar to Flash (timeline and keyframes) which outputs a combination of HTML, CSS and JavaScript. I haven't played with the preview version but I'm pretty sure it will be capable of producing the sort of animation you're talking about.

Update:

You might also want to consider Zoë which can be used to export SWF animations directly to sprite sheets. It was created by the team which developed the Canvas library easel.js and can export the accompanying frame data as either JSON or easel.js. It will allow you to create your animations in Flash (which, let's face it, is still the best web animation tool around) but render them using HTML.