From Flash to Canvas

For a very long time, I tinkered with Flash. I started like most people, with simple animations that were tweened on the timeline. Over time, I moved away from the timeline and started writing class files and making full use of the display list.

But these days, Flash has fallen out of fashion. It’s not tough to understand why. Flash is expensive, and it’s the kind of thing that can be abused rather easily. I’m not talking about security, either. I’m talking about hefty files will all sorts of animation on the timeline and an aggravating animation to watch while you wait for it to download. Even worse, some sites have Flash intros just for the sake of having one. (Rule of thumb: if you think you need a “skip intro” button, then you shouldn’t have an intro at all. Seriously.)

But for all that, Flash was a king. There was no way to duplicate what Flash can offer. Vector graphics, animation… Flash had a monopoly on the good stuff. Well, until now.

Now we have HTML 5. With the video element, we can show content without a proprietary plugin. And with the canvas element, we can even do animation.

HTML5 CanvasI figured it was time to get started on the transition, so I picked up a book on the subject. It’s an O’Reilly book, of course.

So far, it looks promising. The bad news is that the canvas element doesn’t have a display list like Flash does. Everything gets wiped out and redrawn every time you update it. The good news is that you can manipulate it with regular old JavaScript, and you can easily interact with other elements on a page. For instance, if you want a button to affect the canvas, it doesn’t have to be inside the canvas.

Over all, it looks very promising. It’s an open web standard, so there are bits that aren’t fully supported everywhere, but there’s quite a bit you can do right now. In fact, right now is the best time to learn it. Don’t worry if you’re currently a Flash person. Many of the concepts are similar, even if the language is a little different.

Over the next few months, I’m going to be tinkering with the HTML 5 canvas, just like I used to do with Flash. I’ll be pulling the Flash examples from this site and replacing them with something a little more modern. We’ll see what I can come up with.