Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding animation

From: Creating Drag-and-Drop Functionality with Edge Animate

Video: Adding animation

Now it's called Edge Animate for a reason because I can Changing the color so it matches the, monster. Since, I have this, Auto Key Frame Mode turned on.

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.

Show transcript

This video is part of

Image for Creating Drag-and-Drop Functionality with Edge Animate
Creating Drag-and-Drop Functionality with Edge Animate

19 video lessons · 1199 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

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.


OK
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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 lynda.com page and choose Site preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.