Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Beginner
If you've got some questions about working with sprite sheets or setting up animations, make sure you check out the movie on using sprite sheets for animation. Once you create a DisplayObject you can perform actions with the object using event handlers. So let's take our ship animation and have it display a different sequence when clicked on. So what we're doing here is creating an event handler on our ship that checks to see if it is being clicked on. If that's the case, then we're asking the ship to go and play another animation sequence. This is the animation sequence called explode which is right here. So I'm going to save this and I'm going to refresh, and then I'm going to click and see what happens.
So you could see that right now nothing is happening and that's actually because of a problem with the browser. So we're using Google Chrome right here, if I right-click and select Inspect Elements, you could see that there is 10 errors happening on this movie. If I click on it one more time you'll see 12 and 14. So I'm going to click on the errors and see what it's telling me. What this is saying is that this browser is having an issue when you're trying to access pixel data with a local domain. What that means is because we're working with a local file not a file on a website, this browser has some security issues with that.
And so what we could do is just put these files on a server or find a browser that works well without those security issues. And thankfully Safari works pretty well, so I'm going to right-click on the index file, I'm in Espresso, my editor, and then I'm going to Open With Safari and now when I click on the ship you could see the animation sequence that explodes the ship play. So that's just something you have to be aware of if you are working with local files and you're using bitmap data. So let's go back into our script right here and you may notice that we were able to use something called gotoAndPlay.
So if you come from an Adobe Flash world, you'll notice that that's a very familiar method that you can use with flash ActionScript. EaselJS brings in a couple of those different types of methods, so you could do stuff like gotoAndPlay and gotoAndStop and then use a frame name or a frame number. So if I gotoAndStop frame 10, then I'll save this, refresh, and when I click you'll see that this stops at frame 10. If you go to the EaselJS manual for BitmapAnimation, you could see that there are a lot of properties and methods that we're familiar from working with Flash.
So we have stuff like currentAnimation, currentFrame. We have stuff like the gotoAndPlay, gotoAndStop and other things that are super familiar if you're working with Flash. EaselJS also allows you to work with events like MouseOver, but not by default because they can be expensive. So let's try a MouseOver event on the ship. And we'll have a gotoAndPlay our explode animation. Save it, refresh, and when I move my mouse over that ship should be exploding, but it's not.
And that's because EaselJS allows you to use MouseOver events, but not by default because they can be expensive processing wise. So we have to actually turn on those types of events and you could do that with this simple command stage.enableMouseOver, so that method once we save and we refresh, will allow us to use MouseOver events just like that. Now if you want to check for drag and drop events, it's a little different than what you do in Flash. We have to check for a double event so we have to modify this.
First to check for an onPress event, onPress is what happens when you click the mouse on an object and then hold it there. And then we have to check for and onMouseMove event. Inside the onPress event, we're going to check for and onMouseMove event. And inside the onMouseMove handler we're going to make whatever we clicked on be in the same position as whatever we're dragging. So if I save and refresh I can click and drag on this element.
So EaselJS is going to give you a rich library of methods and properties to work with. It's really cool that it works with a lot of methods that you're going to be familiar if you're coming from Flash. There are a couple of challenges you have to watch out for like turning on MouseOver event and dealing with browser security issues.