Lynda HTML5 For Flash Developers

So in the last movie, I showed you how to use the CreateJS Library to do Canvas animations

in a way that's very similar to how we do them in Flash with the similar API.

Well there is also a CreateJS extension for Flash Professional CS6; if you go to

So what it downloads is this ZXP file, which when you run it, will install that

extension for Flash CS6.

So if I go over to Flash, in the exercise files, I've included this doggy.fla

file and this contains an animation created by Chris Georgenes.

His animation studio Mudbubble is one of the greatest Flash character animating studios out there.

And inside of this Library we've all of these clips, and we have this swimDog movie clip

that when I play it, you can see what the animation looks like.

And if we go inside of that movie clip, you can see there is this big timeline vector

animation with all of these different body parts.

So it's very easy now to export this for HTML5 Canvas.

If we go to Window > Other Panels > Toolkit for CreateJS, I want to actually dock it over

here with these other panels.

I can now export this animation for HTML5 Canvas.

Now this Library will also include images that are on the timeline, any sound effects

that are on the timeline.

I can choose a few different options here, whether I want to use the hosted CDN JavaScript

files, whether I want this animation to Loop,

but all I'm going to do is to click Publish and what it's going to do is, it's going convert

that animation to run in HTML5 Canvas, and you can see the results here and it runs just beautifully.

So if I right-click and go to the Developer Tools, we can look at actually what was created.

So it created a Canvas element for me.

If I go into the head tag, we can see that I have those JavaScript files, and this is

the one that was generated this doggy.js.