02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoNext Video

EC.add - Adding Events

How to add events using the EC.add.rn

Video Transcript

00:00Okay, so welcome back. I renamed the files to help us keep history of our previous work.
00:07So the next step that I want to do is we want to start working with the event controller.
00:11And we're going to start seeing the event controller's functionality.
00:14So the first thing that we want to do is we want to import our event controller.
00:18So I'm going to do import underscore es, fla, events, ec, which stands for our event controller.
00:27Now, if we look at our project, we'll see that we have here, in our loop, we're adding an event.
00:31We're adding 100 events. Out of the loop, we're adding one more event.
00:36And in our remove events, we're running through all the events from our loop and removing them.
00:43Now, it's not that complicated, but as your code evolves and becomes more complex
00:49and you have a few variations of different things, it could be loaders, it could be basically anything.
00:55Anything you want, what if you wanted to cluster different things together
00:58and make it a little bit easier to group items on the fly?
01:03And that was one of the main reasons why the event controller was created.
01:06One is also to help you group events on the fly, and secondly, to help you track and remove events.
01:13So before we get into those details, let's see how we add events using the event controller.
01:18So the first thing, we already imported the event controller.
01:21So all we really have to do is let's just duplicate the line of adding the event into this MC and let's change it around.
01:29So one, I'm going to delete add event listener here and put it inside of a function.
01:37And I'm going to call it ec.add. And that's all I had to do to add the event in the exact same way as we did previously.
01:46And what this will do is, behind the scenes, it's going to register this event and make it easier for us to remove it,
01:53make it easier for us to track our event and see where it's at any given time.
01:58Now, let's change the external one as well. So same thing, I'm just going to copy it.
02:07I'm going to come down, just delete these lines, wrap it into a function.
02:14And I'm going to call my ec.add. So now if you look at it, basically the biggest difference here between the event controller
02:20and the standard add event listener is that the standard add event listener is connected to your object,
02:26which every event dispatcher would have these properties of adding events and removing events.
02:32Instead of you directly calling the function of adding event listener, what you're actually doing is you're going through a wrapper.
02:40And this wrapper will do this add event listener command inside of this add method.
02:45But before it does that, it's booking it, it's logging it into memory, it's clustering it,
02:50it's giving it a few rules to make it easier for us later on to manipulate it as we need to.
02:56So the biggest difference here is basically, instead of talking directly to the event dispatcher, in our case, a movie clip,
03:04we're passing over that movie clip as the first parameter.
03:08Now the rest of the parameters are equivalent, are the same as the add event listener.
03:13So if you go back into our previous course, you'll see all the details of what you could do with them.
03:18For now, we're going to focus only on the basics, which is the event type and the event listener.
03:24But you could, if you wanted to, you could go inside and add your capture, you could add your priority and such.
03:34Now, although you could type this whole long string, by default, most of the time you'll just want to use with the default,
03:45unless you need to get into there. And if you do, then you'll see that scenario when it's relevant and when it's important.
03:52And because of that, although we have one more parameter that we added into the event controller,
04:00which basically enables you to give a name to an event or a name to more than one event.
04:06And the way you do that, you pass in as the last parameter, you pass a unique ID.
04:11And that unique ID could be a unique ID for that specific event, for that specific object, it could be for a group of different objects,
04:18it could be anything you wanted to be, and that freedom and control is really in your hands.
04:23So before we add this extra parameter, what I want to do is I want to go back up,
04:28and I just want to create a global variable that will be a UID.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!