Creating Drag-and-Drop Functionality with Edge Animate
Illustration by John Hersey

Creating a function to control multiple objects


Creating Drag-and-Drop Functionality with Edge Animate

with Paul Trani

Video: Creating a function to control multiple objects

Typically, with drag and drop projects like this one, you're going to It's going to be a function that can accept a couple of parameters.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Creating Drag-and-Drop Functionality with Edge Animate
1h 14m Beginner Jul 01, 2014

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.

Topics include:
  • Creating graphics and importing them into Edge Animate
  • Adding animation and interactivity
  • Making items draggable
  • Adding a droppable target area
  • Controlling multiple objects
  • Resetting positions of objects
  • Testing and publishing your project
Edge Animate
Paul Trani

Creating a function to control multiple objects

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.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Creating Drag-and-Drop Functionality with Edge Animate.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.