Using The Built in Event System
Quick overview: How to add events and remove events using the built in event system.rn
Video Transcript
00:00Okay, so now that we have all our connections set in place, let's start making events.
00:05So I'm going to delete this echo line, and let's just throw inside a new movie clip
00:11inside of our, inside of our adding events main movie clip.
00:17Okay, so we're going to create a new movie clip, and let's draw something into it.
00:28So we're going to go MC graphics, begin film, and let's make it reddish.
00:44And let's draw a rect.
00:50I want to put down the 00 coordinate, and we want it to be 10 pixels wide and
00:5410 pixels high, graphics, we're going to end film now.
00:59So we created our movie clip, all that's left is now to add it to the stage and
01:05give it a position.
01:06So let's give it a position of stage, stage width, divided by 2,
01:11y, stage, that's stage height, divided by 2.
01:18Okay, so now if we run it, we're going to see our movie clip in the center of
01:21the screen, which isn't really red, because we were supposed to do FF22.
01:27So we got a red movie clip in the center of the screen.
01:33And the next part that we want to do,
01:35we want to actually add an event to this movie clip.
01:36So let's add a click event to this movie clip.
01:38Let's start with adding a private function that's going to be our handler,
01:42which we'll call it on click, which it would accept a mouse event.
01:51And let's have our movie clip grow every time.
01:54So instead of using a direct reference of the movie clip,
01:57let's use our event itself, go to the target, and go directly through the target.
02:03Like we could add more than one movie clip, that will be our next step.
02:07So we're going to make our x 10% larger every time, and our y,
02:12oh, not x actually, let's do scale x.
02:16And our target, target y, scale y, same thing.
02:24We're going to make it just 10% larger every time we click.
02:28So now, obviously, if I run the file and I publish it,
02:30one thing is missing, because now when I'm clicking it,
02:32nothing is happening, is I didn't associate an event with this movie clip.
02:36I didn't associate this listener to any event.
02:39So the next step that I've got to do before I'll see any reaction of the mouse
02:44is adding my event.
02:45So traditionally, I would do mc.addEventListener.
02:49And we're not going to go into all the details of different properties.
02:51We've went through that in a previous course.
02:55We're just going to do the standard, which is mouse event.click.
03:00And we're going to add our event listener, which was our onclick.
03:03And now, if I run the file again, clicking will make it grow 10% each time.
03:11So now that we have one event running, to make it a bit more complex
03:16and make it a little bit more interesting
03:18and to kind of help explain why the event controller is
03:21very useful in a lot of scenarios, let's throw 100 events onto the stage
03:26instead of just one.
03:27So I'm just going to take these lines of code that we just did.
03:31I'm just going to loop through them and do the exact same thing 100 times.
03:37So I'm going to do a for loop.
03:39It's going to be an integer.
03:40It's going to be equal to start at 0.
03:43And we want it to be as long as it's smaller than 100.
03:47And grow it by 1 in every loop.
03:50And wrap our loop.
03:52So now we're going to run through this 100 times.
03:54I hope we just run through this 100 times like this.
03:56We're not going to see anything because everything
03:59is going to sit in the exact same position.
04:01Now just to make it cleaner, we're going
04:03to take our definition of our movie clip outside of our for loop
04:06so we don't have to redefine that this variable is a movie clip every time.
04:11Even though we're assigning into it a new movie clip every time,
04:15we don't need to recreate the variable for that
04:17because our variable is basically just a placeholder.
04:20So just to keep our code clean, we took out the definition outside of the loop.
04:26And the only thing else that we want to change here is that our x.
04:29We want to use our x instead of divide by 2.
04:31Let's take our math random.
04:34Make sure that it's spread randomly on the stage.
04:37And let's do the same thing for our y, random.
04:43And like that whenever we publish this.
04:45So again, all we're doing is we're creating a movie clip.
04:48We're making a rectangle.
04:50We're adding it to the stage.
04:52And we're giving it positions, random positions,
04:54both our x and y coordinates.
04:57And then adding to the movie clip an event.
04:59And every time we run through this loop, it's a different movie clip.
05:02So we have 100 events actually that are calling on click.
05:05So if I run the application, we've got a weird error here.
05:10Let's see where it's directing us to.
05:12So invalid XML name.
05:16We'll just double click on that and see where it takes me to.
05:19It seems like it's not happy with our for loop.
05:22And you see where I've added an extra bracket, which
05:26made Flash think this is an XML.
05:27So let me just delete that.
05:30And let's run it one more time.
05:33So now that we've run it another time,
05:35we have all of our movie clips, 100 movie clips,
05:37spread throughout the screen.
05:39And any one of them that we'll click on
05:40will grow in 10% every time we click on it.
05:43So all of them are clickable, which is great.
05:46Now one more thing that I want to do
05:48before we move on to the next section,
05:50I want to prepare our class to removing events.
05:56So I'm going to create here another private function.
06:01And I'm going to call that private function on.
06:04Let's call it on remove event, which on remove events
06:13would accept the same.
06:16It would be a mouse event as well.
06:21And for now, let's just trace here TBD.
06:27So we have our event here.
06:27We just need to associate it with the movie clip.
06:29So I'm just going to go back into our constructor
06:33and grab all the code from the loop,
06:36just take it out of the loop.
06:37So I want to create a variation.
06:41And let's fix this up.
06:45Let's change the color so we'll be able to recognize our movie
06:48clip right here.
06:49So zero, let's make it green this time.
06:52And let's make our movie clip initially 25 pixels in width
06:56and height.
06:58And instead of calling our on click event,
07:00which we're doing in the loop itself,
07:01let's call it on remove events.
07:05Let's just run this and see that it works.
07:07And we see we have a randomly positioned green movie
07:10clip that's larger than the rest.
07:11And when you click on it, we're going
07:13to get TBD in our output.
07:16OK, so the next step, which we want to actually do now
07:19that we've created our movie clips,
07:20we've created our TBD movie clip
07:22that is going to remove the events from the red click
07:27movie clips is, obviously, if we would
07:32use the traditional way, what we would have to do
07:34is we would have to save these names in some way.
07:36Or we would have to somehow recognize
07:38between the difference between these movie
07:41clips and this movie clip, even though they're the same.
07:43So if I would just go inside of on remove events
07:45and I would try to just take all the children of the movie
07:48clip, that wouldn't be correct because I
07:50would need to know how to differentiate between
07:53my regular movie clips versus this movie clip, which
07:55for now, they're the exact same thing.
07:57So if I wanted to, then I would have to create maybe an array
08:00and then push into that array every time my movie clips.
08:04So for this scenario, let's complete the sample
08:07with the traditional way.
08:08And what I would have to do is basically
08:10create your private variable.
08:12It would be an A movie clip, which would be a new array.
08:18And then every time I would add one of these movie clips,
08:21I would have to push them into my array
08:23so I could track them later on.
08:26So now, after I've added my array and I created my array,
08:30after I've added all the movie clips
08:31that I want to track into this array,
08:34now I could go into my event on remove events
08:36and I could loop through that array.
08:38So I could do a for var i again, which is an int.
08:44And as long as i is smaller, but this time
08:46we want to make it smaller from that array, which
08:48is AMC, we want to make sure that it's
08:50smaller than the length of that array.
08:53And we want to make our i grow every time by one.
08:57And if we do it this way, then we
08:58would have to actually go to amc.removeEventListener,
09:03the same old way that we used to do it.
09:05Oh, we have to do here.
09:08RemoveEventListener.
09:10And our first property that it's requesting from us
09:12is the type of event, which we know what type of event
09:16it was.
09:16It was our mouse event, that click.
09:21And we have to know also what type of event
09:23was it listening to, so it was listening to an on click.
09:27And we know all that.
09:28But as the project would go larger,
09:31it'd be much harder to track all these stuff,
09:34to remember that these are all the clips that you use,
09:36to remember that these are the events that you use,
09:38that these are the functions that you use,
09:39to make sure that you're not removing,
09:41you might not remove all the events.
09:42So this sample is much more simple,
09:44but even though it's much more simple,
09:46it shows you that there's quite a few steps.
09:48And when you're creating an event,
09:49if you want to get rid of it in a bundle,
09:52you actually have to group it into an array yourself.
09:56And not that hard, but let's just test it out.
10:00It just means that it adds a little bit more complexity
10:03into your code.
10:04So if I command enter and I run the application again,
10:07and I see we have a little error again.
10:09So access to undefined property, I
10:12was supposed to do a large C, because I saved the variable
10:14as a AMC with caps lock and C.
10:19So we're running it again.
10:21And this time around, if I click around these icons,
10:24they're growing, everything is working.
10:27As soon as I click on my green movie clip,
10:30it should disable the functionality.
10:32So now these items are not clickable anymore.
10:37So this sample showed how we were working,
10:39just a really simple sample of using events.
10:42They're standard weight.
10:44Next video, we're going to go back into the sample
10:47and modify it and try to convert it into the event controller
10:50and see what extra function values we could
10:52get from the event controller.