Home/ Questions/Q 8199799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T06:14:42+00:00

This is a where can I start type question. I’m in process of learning

  • 0

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:
teddy bear image

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0