Join Paul Trani for an in-depth discussion in this video Adding animation, part of Creating Drag-and-Drop Functionality with Edge Animate.
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.
- 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