Viewers: in countries Watching now:
Drag-and-drop functionality is perfect for any game or interactive web project. Edge Animate makes it easy to implement. Plus, the drag-and-drop interactions you add work even on smartphones and tablets. Learn how to create draggable objects, add target areas where users can drop them, create reactions to those drops, and change content and object positioning accordingly. Author Paul Trani walks you through each step of the process in this project-based course.
Typically, with drag and drop projects like this one, you're going to have more than one or two items that you're dragging and dropping. And quite frankly, if I only had two elements, I can get away with just having the code right on each one of these elements. But, really, I need to add that same code for all of these different items. Well, I can do that and I can duplicate all that code or I could create one function and then pass in properties specific to each item. And that's what I want to do, create one function, that's my drag and drop function, and pass in parameters such as eyes and mouth into it.
All right, so, jumping into Edge Animate, diving right in here, here are my eyes. The first thing I'm going to do is I'm actually going to set up my function, and I'm going to set it up on my stage, okay? It's going to exist on my stage. So clicking right here, I'm going to open up the actions, this is on creation complete. Just add it, if it's not already added and right in here, this is where I'm going to add a function and I'm just going to type in sym, and I'm going to call it dragDrop. It's going to be a function that can accept a couple of parameters.
In fact, what I want to do now, is I want to actually accept a couple parameters. Let's accept the parameter Item, okay. And, what I can do is I can fire off an alert. When this function gets called and I want to trace out the item that gets passed to it. So here's my function name. It's going to accept this item parameter. Whatever that is, it's just a box that I'm going to put content in but ultimately it's going to give me a pop-up that is the name of that item.
All right, so let's create that, let's keep in mind drag and drop. Going over here to my eyes. Opening up the actions for my eyes, just minimize this panel, right down here, this is all the code I want to get rid of. But first I need to call that function I had created. So sym, it's on the inside of this composition so get composition and I'm going to get the stage, because that's where I put the function and let's just add parentheses behind each one getStage.dragDrop that's the name of that function.
Remember, it's going to accept that parameter called Item, but that could be anything so in this case it's going to be eyes. Just like that so call that a function and we're going to trace out or give me that alert box of I's and sure it will do all this other stuff but this is going to happen on mouse over so saving this running it as soon as I roll over it. There's my pop up says eyes perfect that's exactly what I want. But nothing's happening yet alright I need to make this more efficient now that I have my functionals squared away so going back into edge animate right in here minimizing that panel.
And for drag drop this is what I want to do I want to determine what's different for each one of these functions per element and whether its eyes or mouth I know this parameter's going to change as well as the position that it snaps back to. So, that's going to be another parameter I add. I'm going to say eyes, and then 30 pixels. 30 pixels that's going to be my left, and then top is going to be 130 pixels.
Just like that. So drag and drop is going to accept these three parameters. Now I'm going to take this and I'm going to cut it, and I'm going to paste it inside of this drag and drop. Going back to my stage, opening up the actions and right in here I can even get rid of this alert. I'm going to paste it right over that. So far so good. But I need to accept those three parameters. So it's going to be item comma the left and again just another, another parameter that I'm defining right now cause I wanted to get the position from the left side and from the top side.
All right, this could be anything you want just remember what they're called and now I can start replacing, say for instance, item. And now I can start replacing everywhere where it says eyes with the word item. Copying item, I'm going to paste it over eyes. The quotes and everything, pasting it right in there. Pasting it in here. For the acceptable droppable element, pasting it in there for the timeline to play. Even down here, for, it's snapping back to its original position. I need it to say, hey, you know what, target the eyes and then, right here, where it says 30 pixels.
I want this to be different, per each element. So, copying the left pasting it right here. Copying the top, pasting it right here. All right, so far, so good and I'm just going to hit the tab key just to kind of help me visualize this a little easier. Just indenting this content just makes it easier to read but doesn't change the functionality. But now this is set up and I'm really excited to try this out. Although it is anti-climatic because really this is going to work like it always has, but it's much more efficient.
Click. Good. Click. Good. Dropping it over here should snap into its original position just like that. That's exactly what I want. I want that to act the same. Now, selecting these eyes again. I replaced all that code with this one line so all I need to do is copy this line for my mouth. As I go in to this mouth functionality and I'll just paste that at the top and start customizing it.
So instead of it saying eyes, it's going to say mouth and instead of having the eyes position, it's going to have the mouth position which is zero pixels and then 242. Just doing a copy and paste and then I can eliminate all this code. Making my whole project more efficient. With that done I'm going to save it. Save this project. Run it. Now both should work. Dropping the eyes, dropping the mouth. Everything looks great.
I can move them on back too. Now, taking this to a whole new level, I can start doing that with more elements and this makes everything quite easy. Because if I want to, say for instance, add that functionality to this tie. It's a matter of taking this same line calling that same function and just swapping out those three parameters. So copying that line going down for that bow tie opening up the actions, remember this is on mouse over pasting in that line and I can say hey for the tie.
We want to move it back to it's original position which happens to be 40 pixels by 400 pixels so 40, 400. Copying this line one more time, let's do it for these ears right here. Clicking on the actions for the ears on mouse over, do the same thing. Ears 40 pixels from the side 30 pixels from the top and I've just added two new elements in a fraction of the time.
Dropping on the eyes. Let's try the ears. It's kind of fun. The mouth and then the little bow tie right there. So you see how making functions and calling those functions, can really make your project efficient and just easier to manage.
There are currently no FAQs about Creating Drag-and-Drop Functionality with Edge Animate.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.