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

Adding animation

Adding animation provides you with in-depth training on Web. Taught by Paul Trani as part of the Cre… Show More

Creating Drag-and-Drop Functionality with Edge Animate

with Paul Trani

Video: Adding animation

Adding animation provides you with in-depth training on Web. Taught by Paul Trani as part of the Creating Drag-and-Drop Functionality with Edge Animate
please wait ...
Adding animation
Video Duration: 5m 30s 1h 14m Beginner


Adding animation provides you with in-depth training on Web. Taught by Paul Trani as part of the Creating Drag-and-Drop Functionality with Edge Animate

View Course Description

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

Adding animation

Now it's called Edge Animate for a reason because I can add animation to any of these elements that you see here. But I'm going to go beyond basic animation and show you some cool things you can do, starting with these eyes. So double-clicking on the Eyes symbol, I want to make them look like they're blinking. So I'll just use the Ellipse tool, and I'll quickly draw an ellipse that covers that eyeball, just like that. In this case, I'm just going to give it a radial gradient. Changing the color so it matches the, monster. So, quickly adding the element that I want to animate.

In this case, I want this eye to look like it's blinking, so I'll nudge it over with my arrow keys. I wanted to animate. So at this point, I'm going to go down in here, to my timeline panel, right down here. I see the ellipse, and what I want to is I want to turn on the Toggle Pin Tool just like that. Toggle Pin Tool will pin the current properties, about a half a second in as I move that out. And, now I get to play with this all I want. In fact, I don't want to move it and that might be your first thought as to kind of transform it or scrunch it or something.

But in this case I want to adjust the clippings. I'm going to animate the clipping by, turning it on, just like that. Now what I want to do is I want to animate the bottom so it clips it. So as I, push it to the, left taking that down to. About 0, ss like that. You can see, it's going to start open, and then as I, move the marker in, you can see how it closes the eye, just like that. And, the great thing is, I can always take, any one of these key frames, right here I can right-click, I can copy it.

And then, I can paste it right here. So, Edit >Paste. There's my key frame. Turning of the Toggle Pin Tool I can scrub though it and you can see it go up and down. Last thing I'm going to do is add some easing, selecting Easing. As I have this portion of that, particular transition selected. I can do Ease In and Out. Quad. So it's going to, start out slow and end slow. So I'm going to do that for both transitions, Ease In and Out Quad, just like that, and now, we can watch it.

Very smooth, very nice. Now I need to do this twice, so what do you do? You just select you element, duplicate. And there's the second one, I can move it on over. Since, I have this, Auto Key Frame Mode turned on. I want you to be aware of when it's turned on it's actually going to add a key frame, in this case as I moved it, over to the right. You can always delete that. And you can see how now, the eyes are blinking, all right, so that's animation in a nutshell. But, I'm going to, take it to another level now because there is something called Sprite Sheets and I can import Sprite Sheets into Edge Animate.

In fact, I can use something like, Flash Professional CC. To generate a Sprite Sheet and then import that, animation is basically what it is, right into Edge Animate. And that's what I'm going to do now. So, I'm going to open, Flash Professional and I currently have this, mouth.fla file open, it's actually in your assets folder. And what you can do with anything that's animated in, Flash, as you can see as I double-click on this symbol, I can see that mouth opening up. So, I can use, a tool like Flash that I'm familiar with.

To create animation and then all I need to do is a right click, and generate Sprite Sheet from that selected, symbol. Generate Sprite Sheet. You can see the Sprite Sheet that's going to be generated. I can click Preview and see that animate. That looks good. My data format. I'm going to change that to Edge Animate because there's a data file that goes and travels along with this particular PNG file. From there, I'm going to output this PNG file, selecting browse, and, I'll just export it out to my desktop.

And click Export. Now, if you don't have, Flash Professional, the mouth SVGN data file are both located in the assets folder. All right, so going back into Animate, what you can do is you can actually open up. Your, Library Panel. And right over here, under symbols, you can click this plus sign and import Sprite Sheet. From there I'll go to my desktop. I'll locate that mouth PNG, select open, it gives me, that PNG file.

And then I want to load in the, EAS file. Notice how it automatically recognizes the EAS file. That's the data file, that's going to come along with that SVG file. Selecting OK you can see there's my mouth symbol 1. I'm just going to rename it, call it, Mouth, to keep it simple. And then, right over here underneath the eyes, I'm going to take that mouth, drop it, right in here. Okay? Now let's take a look at it. As I double click that symbol, I can see all of those various key frames, that were generated from that data file and everything looks good.

Keep in mind, this is set to AutoPlay. And this symbol of the eyes, that's set to AutoPlay, so we can take a look at this, as I save this file, I'll preview it in the browser to see those animations. So, I encourage you, to take a look at your properties panel, because you can animate a lot of those elements as well as take advantage of Sprite Sheets that can be generated from, Flash Professional.

There are currently no FAQs about Creating Drag-and-Drop Functionality with Edge Animate.






Don't show this message again
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.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a Member and Create Custom Playlists

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

Get started

Already a member?

Log in

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:

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.

You started this assessment previously and didn’t complete it.

You can pick up where you left off, or start over.

Resume Start over

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.