This course has been archived, the content is no longer up-to-date or relevant to most students.

Applying Easing to Your Banner Ad in Adobe Animate for HTML5

This lesson is exclusive to members

Course contents
SECTION: 6
Warnings & errors 1:10
SECTION: 7
Width tool 5:23
SECTION: 14
Project 9:34
SECTION: 15
Buttons 12:14
SECTION: 17
Bone Tool 6:53
SECTION: 18
Stop looping with JS 1:45
SECTION: 22
Conclusion 1:37

Questions

0
0
0
0

Course info

53 lessons / 5 hours

Overview

This course is for visual, creative people who need to start making HTML5 banner ads. I made this course for people that are struggling to get their heads around the new world of HTML5 advertising. This course is step by step with exercise files. I’ve saved a copy of each Adobe Animate file after every video so if you get lost you can compare your files to my completed files. At the end you’ll be able to create, test and upload standard banner ads.

This course is perfect for people completely new to the digital advertising world. We’ll cover all the basics. It’s also great for people who previously worked in Adobe Flash to produce SWF advertising.

Because this is such a new industry I’ll be around to help you with any questions. Use the forums on the pages and I’ll respond.

Thanks for considering my course. If you’re not sure if it’s right for you. Simply sign up, try it out and if you’re not happy I’ll refund you no problem. - Dan.

What are the requirements?

  • You'll need a copy of Adobe Animate CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Adobe Animate or digital advertising knowledge is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 53 lectures 3 hours of content!

  • Forum support from me. 

  • How to build banner advertising

  • How to keep file sizes down.
  • Firm understanding of the publishing process for ad networks like Google Doubleclick, Adwords, Simek etc. 

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Visual people. Creative people. Graphic designers. Marketers. Past users of Flash.

  • NO: This course is not for developers. This course will cover standard animated banners. Not dynamic banners like expanding banners, video banners or game banners. 

Course duration 5 hours + your study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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

So easing is uh, considered like how slow  and how like 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 we are gonna do is click on this first key frame. It's always the first key frame. So we're gonna play with this animation  between here and here. It's the only animation on this liar.

But um, so between these two key frames, you always deal  with the first key frame  and you've got to highlight it here. Then what you wanna do is you want to grab the ease, okay? And you gotta decide whether it eases in or eases out. Now I know 'cause it loads  of times you are gonna always forget. So what you do is you just 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, full amount of ease in.

You can be anywhere in between. Okay? It doesn't really matter but just give it a test. So we're gonna do full ease in and you'll see what it does. Let's give it a prevena browser. Ended up in the wrong one.

This is the guy I want you out there buddy. Okay, ease in wasn't what I wanted. It's kind of going slow at the beginning  and kind of getting fast at the end. I want it to be the other one. Okay? So I'm gonna click on you back to my timeline.

Click on this key frame and I want to ease out. Okay? And what that's gonna do, it's gonna look a little nicer  with this 'cause he comes to a rest. So this is the original guy. Watch him go. He was the ease in, okay?

And he kind of comes to a duke at the end there. And this one here kind of starts fast watch kind  of comes to a nice rest. It'll be a little bit more obvious when we  do it to this type here. So let's give this a go. So I'm gonna go  to the timeline now I'm gonna turn the eyeball off on our  green blob and turn the eye on the type layer. I'm gonna move my key, uh, my hit timeline along.

So I find it's on frame, I got it on frame 13 here  and I'm clicked on my first key frame  and here I've got ease in. Okay? I want it to be eased out actually. So I'm gonna drag all the way to a hundred  where you just type in 100 and let's give that a preview  and hopefully this'll be a bit more. There you go. See that has a lot  more, I dunno what to call it.

It just looks nicer. Okay, coming  to a nice rest at the end there. Now that's using the default ease. I often go in and customize it. So the same key frame, instead of using this kind of like in  and out, I always hit this pencil here and this curve. Okay?

What you've gotta think about is with this curve is  that um, this is, it's when it started. So this starts all the way over here  and then as it goes through, okay, as it plays through,  that's where it's finished. Okay? So that is right at the end. So you can just kind of see  that if it was our PowerPointy version,  it would be completely straight like this. Okay?

So I can reset it. That's what it looks like  and I'll preview it in the background here. And that's just the PowerPoint version. By dragging that ease to ease out,  we've created this like little curve  here and that curve's fine. Okay? It's like a little, little gentle  curve and it looks a bit nicer.

I love to extreme this curve, okay? And what I'm doing is I'm clicking the boxes  in the corners, okay? This little black box, this little guy pops out. Okay? So if I gotta reset, if I click on this box here,  this little dot appears and if I click and drag it up  or down, okay, um, dragging it up is an ease out. Dragging it down like a ski ramp okay?

Is an ease in. So I'm gonna drag it up, okay? And I want to kind of ex make it quite extreme. You, you  and hopefully now I'm dragging this little dot out this way. Watch this. It'll come come, it'll come speeding in.

Maybe it's coming in a little fast,  but definitely more extreme than what it was. Great. Now click. Okay. Preview browser is always better than in uh, Adobe animate. You see it's got a kind of extreme kind  of charges in it comes to a nice little  rest there at the end.

Okay? So I'm gonna do that same thing now one  of the other things you can do is um,  maybe the first key frame we're using this pencil. Now it goes blank when it,  when you've done your own custom one is you don't actually  just have to do an ease out or an in. You can do both, okay? This is gonna ease in  and then get about halfway and then ease out. So it's gonna do both ways.

So watch this, it's gonna start quite slow  and then get quite fast. So I quite like this quite often. Most of the things end up being like this where it kind  of watch this, it's kind of start slow and end slow,  but it goes fast in the middle here it's preview a browser  and in trouble with this one is that  you don't really see it off screen  'cause you can't see anything over here. So it's probably better just left as it was. So I'm gonna undo, all right, um, we should go back  and do the one for this one as well. So I'm gonna turn you off.

Click on that first key frame,  customize it and let's give it a little bit more extreme. There we go. Preview it. Now little guys have a little bit more to them. All right, so that's add to add a little bit more slickness  to our um, ad banner. Uh, let's move on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025