Drag and drop is a very intuitive way of interaction from the user. It's a control scheme that is very easy get used to, and using it you can create many very interesting mechanics. There are two sections in this tutorial. The first section explains the tutorial for those using Adobe Flash, the second section explains Drag and Drop for FlashDevelop users. There are actually many ways to achieve the drag and drop effect, but there are two methods that are used the most commonly. The first one is to use Flash's built in startDrag function, and the second one is to set the object position to the same as the mouse position.
The first method is a tad bit simpler, but the second one has more advantages. When you convert the above logic to code, you will see that it's actually very simple. Create a MovieClip in Flash or dynamically generate one , and instance name is something. The above code is in fact very simple, when clicked, startDrag, when released, stopDrag. This position is a little more complicated, since you need to save the offset everytime if you don't want your mouse to always align with the origin of you shape.
The idea is to check if you are dragging the shape or not, and use and enter frame function to move the object if you are dragging it. Both of these methods can apply to any shape or interactive object, but they do have their differences.
For example, you can try changing the starDrag method's frame rate to one, and the circle will still follow the math at a decent speed. With the EnterFrame method, you can only reach the top frame rate. Why would you use one method over the other? It depends on your specific needs. If you want something frame rate independent, you should use the first method. If you want something that gives you more flexibility, use the second one.
Once you have made these changes, click OK to close the Convert to Symbol dialog and to be left with a newly converted movie clip. And with that last step, you are done with making sure our movie clip is ready for the next section which involves writing a few lines of code. Now that the visual part of the work is done, all that is left is to add the interactivity by writing a few lines of code. We are going to add some code to your timeline itself, so right click on the first keyframe in your timeline and select Actions to bring up the Actions window:.
You should be able to drag the circle around. There are two ways to specify code. You can have the code directly on a frame like I've explained right now. The other approach is to have your code in a separate AS file and have it be linked via your document's Document Class. I tend to prefer the Document Class approach, but for simple pieces of code, the frame approach is fine as well.
Now that you have a working example, let's quickly look at why the code works so that you can take what you've learned and easily apply it to other things you may be working on. In these two lines I am setting up our event listeners to listen for when we click to start the drag and when we release the click to stop the drag. When these events are heard, depending on the event, we should call the startDragging and stopDragging functions. In order to use the events for listening to the mouse, you need to add this import statement that contains everything needed to tell Flash what to do.
Most of the time, Flash will add the import statements automatically as you start typing out classes like MouseEvent in your code. Sometimes, Flash doesn't do that. During those times, you'll need to add it yourself. You will know when you need to add it, for when you test your application, the compiler will complain that it doesn't know about a particular class you forgot the import statement for.
All this code does is call the startDrag function on our movie clip whose instance name is dragger.
0コメント