New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

EaselJS First Look
Illustration by

Using sprite sheets for animation


From:

EaselJS First Look

with Ray Villalobos

Video: Using sprite sheets for animation

A sprite sheet is a bitmap that combines a series of frames into a grid and is commonly used to create animations in games. EaselJS makes it super easy work with sprite sheets. It has a special class called a BitmapAnimation class, so let's take a look. The BitmapAnimation class is a child of the DisplayObject. You can see how it works right here. In addition to this class, you're going to need to look up the SpriteSheet class because the bitmap animation class takes a sprite sheet that is on this page of the EaselJS documentation.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
EaselJS First Look
1h 28m Beginner Sep 21, 2012

Viewers: in countries Watching now:

EaselJS is a free JavaScript library that makes creating interactive web content for HTML5 more straightforward and intuitive. This course transitions web designers, animators, and content creators who may be used to working with Adobe Flash and ActionScript to this new open web standard. Author Ray Villalobos first explains the capabilities of the EaselJS framework and the HTML5 Canvas element, and what they mean for web design. The rest of the course shows how to use EaselJS's helper classes and hierarchal display list to load images, draw, animate, and handle mouse input from visitors.

Topics include:
  • Installing EaselJS
  • Understanding how Canvas draws and animates
  • Drawing lines and strokes
  • Drawing with graphic primitives
  • Using the chaining and compacting commands
  • Animating shapes
  • Working with text
  • Importing bitmaps and vector graphics
  • Working with sprite sheets
  • Handling mouse events
Subjects:
Web Web Design Web Development
Software:
CreateJS EaselJS
Author:
Ray Villalobos

Using sprite sheets for animation

A sprite sheet is a bitmap that combines a series of frames into a grid and is commonly used to create animations in games. EaselJS makes it super easy work with sprite sheets. It has a special class called a BitmapAnimation class, so let's take a look. The BitmapAnimation class is a child of the DisplayObject. You can see how it works right here. In addition to this class, you're going to need to look up the SpriteSheet class because the bitmap animation class takes a sprite sheet that is on this page of the EaselJS documentation.

You can create a sprite sheet in any program that lets you generate a bitmap. I've placed an example sprite sheet in the images folder so you could see what one looks like. For the ship I'm animating the red lights so that it looks like the light travels from side to side in the ship. At the end of the animation, I drew an explosion sequence. There is a bunch of programs that make it easier to generate sprite sheet. I like working with vector art, and the ship was originally drawn an Illustrator. You can see the graphic right here. So what I did is I created a series of guides that defined the size of 100x100 pixels and then on each one of the "frames" I create the different parts of my animation.

Once I have this artwork done, I like to use Fireworks, since Fireworks lets you just copy and paste Illustrator graphics, and it has some excellent animation features. So this file called ship.fw.png is also inside my images folder. Once you bring the ship in, you can create a series of States. States are Fireworks' version of frames of animation, so when you go to State 2, I just change the color of the lights on the second and third dot and I continue doing that for every one of these frames.

To create a new frame in Fireworks all you do is just grab an existing frame and you drag it onto this icon that'll create an additional frame at that position. So now we have two frames that look exactly the same. So let me go ahead and get rid of that one. So as I go through and I create my frames of animation, my object will animate. There's even a way of previewing that. You can hit this Play button; you could see how the whole animation plays out. And these are just the different frames that I've inserted into Fireworks. So right over here is where our explosion sequence happen, and I just copy and paste the graphics from Illustrator as well.

These are still vector graphics, so that's kind of cool. So once you have all the states of your animation, you're going to need to create a Slice. Slices are how you export pieces of a Fireworks' document. So you can use this tool right here to create a slice the size of the canvas. I'll just draw a rectangle, and now that becomes a slice. I am going to put this on State 1 so we could see the ship. Once we got our Slice, then we need to go to the File menu and select Export. From here you want make sure that you choose under the Export option to export as CSS Sprites.

I am going to put this on the Desktop. And normally we would click on Options right here and modify some of these options. This is going to create a CSS file as well as the sprite graphic. We're not going to need the CSS class, so most of these options are not going to matter for us. You may want to set the Padding to 0. I think the default is 10 px. It remembers the last thing that you did. We don't need any extra room around each graphic for game sprites, so we could just set the Padding to 0. The layout is not really going to matter; you can set it to be Horizontal, Vertical, or Grid.

And the last thing is the Optimization Preset. You want to make sure you choose something that's not JPEG. A PNG will be a transparent background image, so that's what you want. then I am going to hit OK, I'll go ahead and select Export, and don't worry about this dialog box. So when that happens, let's go back to our Desktop. So if you go to the Desktop, you'll now have a CSS file, which you don't really need. I can just toss that and you'll also have a PNG. So I am going to hit the spacebar because I'm on a Mac to preview that and you can see that the sprite sheet has been generated for you.

So I already have a copy of this in my images folder. So if you want to learn more about Adobe Fireworks and how to generate sprite sheets, check out my course Fireworks CS6 Essential Training. There is a section down here on Drawing with Fireworks as well ask Creating Sprites. So once you have a sprite sheet, it's time to bring it into your EaselJS project. this is mostly like working with a bitmap, but Easel uses a special class called the BitmapAnimation class. Like the bitmap, it's also a child of the DisplayObject.

So you have the full power to transform and animate this element. So let's take a look at this setup. Our index page looks just like every other index page we've been using in this course. So make sure you watch the movie on creating a template and installing EaselJS. Our JavaScript file looks a lot like what we would have if we were drawing a bitmap. We've got a canvas set up, as well as a stage, and we've got a couple of variables for keeping track at the center of the stage. Right here we've set up our animation, and in this listener function all we need to do is update the stage.

If you want to review importing bitmaps, take a look at the video on importing bitmap and vector graphics. Let's go back and take a look at the SpriteSheet class. You can see that it looks a lot like a JSON document. So you specify a JSON variable that keeps track of the different animation frames in your sprite sheet, so let's go ahead and create one. We'll call it ss and we'll add a sprite sheet by using the SpriteSheet class. So inside an animations object we're going to create a few name and value pairs.

So under this fly variable, which is going to be a sequence that I can call with JavaScript, I can put in the series of frames that I want to play whenever somebody calls this animation. So when somebody calls the fly animation, it's going to play frames 0 to 15. Then we'll define and explode animation. In the explode animation I am going to specify frames 16 to 20, and then I can also specify that after this animation plays I want to go back to the fly animation.

That way after my ship explodes it will go back and play the animation of the ship flying. Now we'll create an images variable, and here we'll pass it along that location of our sprite sheet. Now we'll create a frames object and then this object will pass along some of the parameters for our animation. So we can pass along a registration point for X and Y. I know that my ship is a 100x100, so the registration will be at 50, 50. And now I'll tell it the height as well as the width of the document. This way when EaselJS encounters the image, it'll know how to break it up.

So if you need help understanding JSON, make sure you check out my course on Building Facebook Applications with HTML and JavaScript. There is a chapter on adding JSON data feeds and a movie called Introducing Jason. Once you've finished defining the sprite sheet, then it's time to create our ship variable and use the bitmap animation class passing our sprite sheet. Now if we want to, we can tell the ship to center on screen. Then we can tell EaselJS to play a specific sequence, and this is very much like what you would do in Flash. We set the ship to gotoAndPlay a specific sequence.

So I want to specify my fly sequence and that will show our ship in normal mode. Now we need to add our ship as a child of the stage. So I am going to save this, and let me refresh my screen, and we should see our ship appearing with the animations. The animation that is playing is from frame 0 to 15, and that makes our lights go from side to side. So if we want to, we can play another part of the animation. Let's go ahead and try playing the explosion. I am going to save this, and when I refresh you'll see the ship exploding and then immediately go back to the animation of the ship flying.

That's because we specify that at the end of the explode sequence, we would go back to the fly sequence. Because this class is a descendent of the DisplayObject, like the bitmap or shape, we can transform or animate the ship in the Ticker loop. If you want to learn more about animating and transformation, make sure you check out the movies on transforming and animating shapes and animating the bitmap class with math.

There are currently no FAQs about EaselJS First Look.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed EaselJS First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.