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

Creating Clusters

Setting up clusters of events and removing them.rn

Video Transcript

00:06Okay, so what I've done next is I've created a UID, which I called project event controller, the name could have been anything.
00:14Now that I've created the UID, the next thing that we'd want to do is pass that UID as the last parameter to our add event.
00:21So basically, if I run through our add again, then we had our movie clip, which was our first parameter, which could be any event dispatcher.
00:30The rest of the parameters are the default event parameters that are exactly the same thing as you would do with the add event listener.
00:37And our last parameter would be the UID.
00:40Now, with that said, it's a lot of typing. And most of the time, our recommendation is like one, using the, it's beyond our recommendation really.
00:51Most of the time I work without them because I just use the default. Once in a while you might need them.
00:56But just to help you cut down the amount of code, another nice short way of typing it is you could just add your event.
01:04I'm going to just comment down the last one.
01:07And you could delete the false, zero, false, which are not mandatory parameters for the add event listener.
01:16So basically what will happen in this scenario, if you pass as your fourth parameter, the UID,
01:22it will recognize that you didn't send a Boolean and it would realize that it's a string and append,
01:28and will put the right parameters in place and set the UID as the UID of your event listener.
01:35So now that we set our UID in our object, the next step is we want to do it,
01:43so we did it in the loop of the 100 items, we want to do it as well to this external controller or green controller.
01:51So we're going to pass it a UID as well. Now we give it a UID as well.
01:56That didn't change too much in our code. And now if we run the application again, we'll see that really nothing changed.
02:02All that happened now is behind the scenes, everything has never the same ID.
02:07We're still looping through everything to disable.
02:10And you see now we're disabled. But we don't have to anymore.
02:14Because now we could actually, if we wanted, we could comment out this loop completely.
02:20And instead of having this loop, we could pass in just one command.
02:25First we're going to do ec.remove.
02:30And when we could pass into the remove, we could pass inside a string, and that string could be our UID.
02:38Because we passed to all our objects, we set their UID to be of that string.
02:42Now we could pass the UID as the remove, and if we do that, it's going to remove all the events in one line of code.
02:50So if we run the application again, now that we're using the remove, so first we can see that everything is working here.
02:58It's clickable. As soon as I click on my green button, nothing is clickable anymore.
03:05But what you probably maybe have noticed is now that my green controller is not operational anymore as well.
03:12So if I just put your little trace to make sure that that's true.
03:17So now if I run the application again with the trace, first time around we're going to get the trace.
03:21But then if we click again, no matter how many times we click, we're not going to get any more events anymore.
03:26It's not going to dispatch events anymore.
03:28Because every single event on the display here has been associated with this UID.
03:34Now, in our scenario, we don't really want our remove events to be disabled.
03:37So if we don't want our remove events to be disabled, we could just not pass that UID, or pass a different UID.
03:44So if I just deleted the UID from our controller, and I run the application again,
03:50now if I click on the green controller, it's going to click once.
03:55But no matter how many times I click on it, it won't disable, because we never removed it.
03:59It's events. We removed only the events that were associated with the UID.
04:05Now this is the most simplistic way of working with the IDs.
04:10And before we start playing around with different variations of it, I want to show you one more way of removing events.
04:16Because sometimes you just want to remove an event directly.
04:20So in this scenario, I'm just going to cancel that out.
04:23So right here we're removing basically only one event of one object.
04:27What if you want to remove more than one event of one object?
04:30So in our scenario, what if we had your add a click, but we had your also,
04:35let's say we had your add, let's say rollover, rollover.
04:46And we're going to add another function, we'll be on roll.
04:52Let me just copy this again.
04:55I'm just going to create a few more events.
04:57So we had a rollover.
04:59Let's have a roll out.
05:02So we created an on roll and an on out.
05:08All we have to do now is create a function for these new events.
05:15So I'm going to create another private roll, which again accepts a mouse event.
05:29And let's just put your little trace that says on.
05:41And let's duplicate this function and we'll call it on out as we did in our event.
05:57So now we have more than one event running at the same time.
06:00So basically every single movie clip here has three events.
06:03It has a click, it has a rollover, it has a roll out.
06:07So now as we run on that application, when we roll over an item,
06:10it's going to say it's on it, we roll out, it's going to say it's out of it.
06:13And when we click on it, it will grow.
06:16So now basically we have over 300 events in our application running at the same time.
06:22And now it gets a bit more complicated.
06:24So if, for example, if we were still using our traditional looping through and removing event by event,
06:30then we would have to add here another three removes.
06:33But instead of that, what we could do, because we want to remove all the events of a specific object,
06:38what you could do is just pass that object to the remover.
06:44If you don't have any, if there aren't any other parameters,
06:47the remove function will understand you want to remove all the events associated with that object.
06:53So now if you run that application again, and we have our roll on, roll off, and things are clickable,
06:59as soon as we click on the remove, which is now looping through all the objects,
07:03it's going to remove all the types of events.
07:05So now there aren't any new rollovers or clicks or anything like that.
07:11So that's a great extra feature, but still you're looping through,
07:15and we don't really need to loop through in our scenario.
07:17Although sometimes you'll want to remove events of only one object, and that's how you would do that.
07:22But in our scenario, we want to make our code a little bit smarter.
07:25So what we could do here is if we go back up into IDs,
07:29we could start playing around with IDs and giving unique IDs to different scenarios.
07:36So let's start off by just first giving these IDs.
07:41Okay, so on our click event, let's add here, you know, let's add your string.
07:45So right now all the IDs had the exact same ID, which was project event controller.
07:50Let's add, instead of that, all the clicks will be called project event controller underscore click.
07:57And let's call all the rollovers project event controller underscore roll.
08:06And we could call all the rollouts, same thing.
08:11We'll take our UID, which is project event controller, and let's add to it.
08:15Let's add to it out.
08:18So now we're working with unique IDs for every single event.
08:23So if I wanted to remove only the click events to all these items,
08:29for example, I wanted to remove only this ID.
08:31So I wanted the rollover, the rollout to continue working whenever we click on remove events.
08:36So I could come inside of my remove events and just, again, type EC, remove, and pass that ID.
08:45And because that ID is a unique ID to that cluster, it doesn't really matter,
08:49it's going through all the objects.
08:51So all the objects, we associated them UID click.
08:55So now if we run the application just by removing that ID and not removing everything,
09:01we could actually decide that we want the click now to work.
09:05And you see the rollovers are working, the click is working.
09:08But as soon as we click on the green button, now the rollovers continue to work.
09:14It's kind of hard to see it.
09:16Let me clear.
09:18So we'll go back into the window.
09:21So we cleared it.
09:22But even though the clicks don't work anymore,
09:25you can see that rollovers are still functioning the exact same way as they did before,
09:29which is exactly what we wanted.
09:31So it's that easy that we could even if we wanted to say like we want to disable the clicks
09:35and we want to cancel the out events.
09:39Because we created click, UID click, UID roll, and UID height up and out,
09:46we could define now and say we want to get rid of the out, we want to get rid of the click,
09:50but we're going to leave the rollovers for any reason.
09:53Obviously, this is a very random scenario here,
09:56but it could be very, very helpful in live environments.
10:00So now if I click on the green button, the click event should be disabled,
10:04the event should be removed, the roll outs should be removed.
10:07And now when I roll over items, we're just going to see the word on
10:10because the roll out is not functioning anymore.
10:14So now we broke it down into the different segments.
10:17And if we wanted to, of course, we could add also the rollovers
10:21if we wanted completely to remove everything.

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!