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.
With the 2014 release of Edge Animate CC it's even easier to add interactivity, to any object that you want to add interactivity to. Say for instance these eyes. As I double-click on those eyes, you can see that the time lens is set to Autoplay. I'm going to uncheck that because what I want to do, is on roll over, I want the eyes to blink. I want to do the same thing for the mouth as I double-click on that on that symbol. I'll uncheck Autoplay there. Go back to the stage and now with the eyes selected, and this goes for any element, you can open up the actions for it.
And I want to play a certain timeline, okay? Notice how it gives me the opportunity to pick a target, which has always been a difficult issue for people using Edge Animate. I can locate the stage. Here's all of my elements on the stage. And in this case, I want to locate the eyes, right down here. And then all I need to do, it says press Enter to finish or Delete to cancel. And this is what it's going to enter in. I'm going to hit Enter. There's my code. Perfect, that's exactly what's going to happen. I'm going to do the same thing again for this mouth.
Selecting the mouth, opening up the actions, on mouseover. Playback, Play, the mouth. Hitting Enter. There it is. All right, I'm going to take this a step further, because I can also, on the rollover of the mouth. I can play another timeline, and really it's all a matter of just targeting that timeline. So when you roll over the mouth, may be I want both the eyes and the mouth to play their timeline. I can locate the eyes there, same thing now they're both right here and that will take place when I roll over the mouth.
Saving this file, I'm going to Preview it in a Browser. Here it is, I'm going to roll over the eyes. You see that work. Roll over the mouth. You can see how the eyes and the mouth both work. One more thing I'm going to do, because I basically made these interactive, like their buttons and I still just have the arrow cursor. So what if you want to change the cursor? Well, that's what I want to do now. In fact I want to change the cursor for all of these elements. So I'm just holding down the Shift key. Selecting everything. And with them all selected, including this Reset button right over here, I'm going to go over to Cursor, and rather than changing it from Auto, I want to actually change it to the Pointer, okay.
So whenever you roll in any of these items, you are going to get that hand, and that way people know that they can interact with that element. Saving it. Previewing it again, you'll see that in place. So I encourage you to take advantage of the built-in code snippets, as well as the ability to target other timelines that are in other symbols.
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.