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

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024