Click on any phrase to play the video from that point.
[CS6]
If you're working on a game or an animation
and really need to get optimal performance out of it,
you can use what is called sprite sheets,
which can be easily generated from Flash Professional CS6.
What I want to do with this movie clip right here,
which happens to be a nice little animation,
is I can go ahead and just select it and generate a sprite sheet from that movie clip.
And I can even select multiple movie clips, if I want.
So you can see it here, the sprite sheet.
I can scroll down through it, but it's better just to select the Preview tab
to give you a good idea of what's going on.
So back in the sprite sheet, probably the first and most important thing
I want to talk about is EaselJS.
This is an open source JavaScript framework
that you can really take advantage of,
and it's actually geared toward Flash developers, because
when you look at that code, it actually looks a lot like ActionScript.
Nonetheless, this is going to be HTML content,
which is what I'm making.
So I have that selected; I'm going to go ahead and trim this sprite sheet.
As I check that you'll see a little bit of a shift as it compacts all of these graphics,
makes it a little more efficient as well as stacking the frames.
So it gets rid of any duplicate frames.
Okay, that's all I'm going to do is check those 2 boxes,
browse to my desktop, where I will save this out to.
And then I'll just click Export.
All right, let's take a peek at what was generated,
because what I have now is this JavaScript file and then the PNG file.
This is the sprite sheet.
But let's take a look at this JavaScript file.
Just peek under the hood at it.
So here I am in this JavaScript file that looks pretty complex.
It's just coordinates for all of those frames, and that's fine.
I don't need to mess with any of it; I just need to be mindful
of this name, SwimDog, right there.
So if I ever need to use it--say, for instance, on my HTML page,
I can do so.
So on this HTML page, you can see for this HTML canvas element,
I'm creating these new SwimDogs that are being placed at random positions on this canvas.
Right here is where we have the AddChild as well.
So you can see it really starts to look like ActionScript, which is great.
Lastly is the big payoff,
which is just going to be running this file.
You can see, easy enough.
There's my animation playing really well, using sprite sheets,
and EaselJS.
So I encourage you to check it out, give it a try for yourself,
and you'll really notice you'll be able to get that great performance.
[Adobe]
