Applying Easing to Your Banner Ad in Adobe Animate for HTML5

Okay, so in the last video we put this together using a classic tween but there is a little bit, I call it power pointiness, it charges in and doesn’t have any sort of smoothness to it or slickness to it. And this is the kind of magic bit from where, you're self taught to somebody who’s done a little bit of training and figures out easing and motion blurring and that little trickery to make things look slick. So what were going to do is deal with easing and were going to turn the eyeball off on the type layer and deal just with this first one.

What were going to do is we’re going to do easing to start with. So easing is considered how slow and how varying speeds as it goes along in the animation. At the moment it has no varying speed, just the same speed all the way across. So what were going to do is click on this first key frame, its always the first key frame. So were going to play with this animation between here and here. It’s the only animation on this layer but between these two key frames, you always deal with the first key frame and you’ve got to highlight it here. Then what you want to do is you want to grab the ease and you’ve got to decide whether it eases in or eases out, now I know, because I've done it loads of times, you're going to always forget. So what you do is you test ease out, and I've just dragged it all the way to the right by clicking and dragging. You can type 100, there's also a minus 100 which is the full amount of ease. You can be anywhere in between, it doesn’t really matter but just give it a test.

So were going to do full ease in and you'll see what it does, lets give it a preview in a browser, ended up in one the wrong one, this is the guy I want. There you are, ease in wasn’t what I wanted, it’s going slow at the beginning and fast at the end. I want it to do the other one so I'm going to click on you, go back to my timeline, click on the timeframe and I want to ease out. And what that’s going to do, it’s going to look a little nicer watch this. Can you see it comes to a rest, so this is the original guy watch him go, he was the ease in. He comes to a dook at the end there. And this one here starts fast, watch, and comes to a nice rest, it will be a little bit more obvious when we do it to this type here.

So lets give this a go, so were going to go to the timeline, now I’m going to turn the eyeball off on our green blob and turn the eye on the type layer, I'm going to move my timeline along until I find its on frame 13, and I've clicked on my first key frame and here I've got ease in. I want it to be eased out, so I'm going to drag it all the way to 100. Or you just type in 100, and lets give that a preview. And hopefully this will be a bit more, there you go. See that has a lot more, I don’t know what to call it. It just looks nicer. Coming to a nice rest at the end here.

Now that’s using the default ease. I often go in and customize it. So that same key frame, instead of using this in and out. I always hit this pencil here and this curve, what you’ve got to think about with this curve is that this is when its started, so it starts all the way over here and then as it goes through, as it plays through, that’s when its finished, so that is right at the end, so you can kind of see that if it was our powerpointy version, it would be completely straight like this. So I can reset it, that’s what it looks like and ill preview it in the background here and that’s just the PowerPoint version. By dragging that ease to ease out, we've created this little curve here and that curve is fine, its like little gentle curve and it looks a bit nicer. I like to extreme this curve. And what I'm doing is I'm clicking the boxes in the corners, this little black box. This little guy pops out, so if I go to reset, I click on this box here. This little dot appears and if I click and drag it up or down, dragging it up is an ease out. Dragging it down, like a ski ramp is an ease in. so I'm going to drag it up, and I want to make it quite extreme. Hopefully now, I'm dragging this little dot out this way, watch this, it will come speeding in, maybe its coming in a little fast. Its definitely more extreme than what it was. Click okay, preview in a browsers always better than in adobe animate. Can you see its got an extreme, charges in and comes to a nice little rest there at the end.

So, I'm going to do that same thing, now one of the other things you can do is remember first key frame, were using this pencil now. It goes blank when you’ve done your own custom one, is you don’t actually just have to do an ease out or an ease in, you can do both. This is going to ease in and then get about half way and then ease out. So it’s going to do both ways. So watch this, its going to start quite slow and then get fast. So I quite like this, quite often most of the things end up being like this. Where it starts slow and ends slow but goes fast in the middle here. So preview in a browser, the only trouble with this one is that you don’t see it off screen because you cant see anything over here. So its probably better if its left as it was. So I'm going to undo, alright.

We should go back and do the one for this one as well. So I'm going to turn you off, click on that first key frame. Customize it and lets give it a little bit more extreme. Preview it now, little guys have a little bit more to them.

Alright, so that’s how to add a little bit more slickness to our ad banner. Lets move on to the next video.