Video Transcript
Now, what we need to do is give users control of the pin with another common movie clip method and that is dragging methods. We have all heard about drag and drop objects and we are going to set our pin up to be one of them. To do that, we need a couple of handlers and our start and stop drag methods. So, let me just go right up to the top of my handle events and let us set this up. Since we want to set our MC pinup for that, I am going to start our .syntax out with MC pin and we will just build a handler to pick out some kind of a mouse event.
Now, up to this point, we have been using an on release method, so, I will start that one out that way. We will setup our function syntax and since we are already in the scope of the MC pin, I will just use this and we will call the method. The method that we are going to look for is called start drag. It is actually a pretty simple method. It does have a few properties available to it so we run through those real quick. But for basic purposes, this is going to start our pin as a dragable element. Now, the first perimeter we see in here is lock center. Now, I can see our pin actually has a registration point right out there on the point. I can see it in the library thumbnail that I have right up here on the side.
What lock center will do is, if you were to click on this pin object in any place and release your mouse button, a lock center perimeter of true would bounce your cursor so that you are grabbing it from where of the registration point was. Now, since it would make too much sense to grab the pin from the point, we would be grabbing it from the plastic base. I am going to set that first perimeter as false. The remaining perimeters allow us to put in limits on where the user will be able to drag this element. Now, you will notice that these are all in braces so they are all optional. If I leave them all blank, my user will be able to drag the pin just about anywhere on the screen.
Now, you could get in trouble this way with the drag and drop object because our users might be able to drag the item off the screen and then they would not be able to pick it up again and pull it back on. So, it is very common to actually set limits that are at the minimum of the screen that you are working on itself. Now, I am going to make sure that we can keep this inside the screen, so, for the left and the top values, I am going to use the perimeters of the frame that we saw. So, I am going to use 65 for each one of those and I will just press the show code hint button up in here so to show it again. We have got our left in top; we now need to set our right dragging limit and our bottom dragging limit.
Now, our screen was 700 pixels wide. So, if I go to 635 for the right limit and what do we set something like 400 for the bottom limit. Maybe a little bit more, 450, I think our screen is 500 tall. And once again, we can change this if we need to adjust but that will set a position for my user can actually drag the pin around on the screen. Now, we want to try out the start drag command and I point out that I got an on release function setup for it. So, we will test our movie as is and we should be able to click on the pin. I am going to release and you can see I can drag the pin around where do I need to go. Now, obviously we are missing one thing because I cannot really get rid of the pin. We do not have the drop portion in here. And now that we are looking at the pin, a more normal way to deal with the drag and drop object is to actually click to grab the pin and that would be a press event and not drop it until we actually do the release event.
So, let us switch some things around. I close my window up. I am going to change the start drag to an on press event. Now, we will add on our list event so we can drop it. Once again, with our function syntax, and to drop it, it is actually pretty easy. We will do another method; we will do this, stop drag. Now, this method has no perimeters because it simply stops the dragging operation. So, let us test our movie and we will try our start and stop drag functions.
Now, I can press to grab or hold the clip and while I am holding down the mouse button, I can drag it anywhere I want to on the screen. Let us test out those limits, I should be able to, there you can see, I cannot drag it further than the edge of the screen on the left and the right. Looks like I need to adjust my left and my top perimeters, we will just fix those up.
Now, we have already got our bubble set to unload whenever they touch this pin. So, if we start spotting a bubble on the screen. We should be able to run over and by maneuvering a collision with these two objects, we should be able to get a bubble to pop.
Now, what we need to do is give users control of the pin with another common movie clip method and that is dragging methods. We have all heard about drag and drop objects and we are going to set our pin up to be one of them. To do that,...
click to read more