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

Basic Masks for HTML5 Banner Ads in Adobe Animate

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

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

Hey, we're back. I've got a coffee and we're gonna make some masks. So masking is really important in Adobe Animate. Um, we are gonna kind of start off with some basic masks  and then move into things like infographics. So we need to understand masks before we do that. So let's do a real basic one.

We're gonna start with a new canvas. Pick a background stage color. I always say don't worry about which color age is doing it. Save it underscores. And I'm going to import, um,  I'm gonna import one of our monsters  Who  It's been too long picking. I pick you hat and pipe, man.

Great. So we've got him, he's come through  as a bunch of different paces. So we're gonna group him together. So I've used modify group, um, and we're gonna get him. So, uh, there's kind of two parts. We're gonna use just a plain old mask  and you we're gonna animate this man and have a static mask.

In the next video we're gonna have a static man or monster  and animate the mask. Okay, so, um,  what we're gonna do first do is do our animation. So what I'm, if I can kind of talk you through it,  I'm gonna have like a porthole here  and he's gonna slide up into it like he's looking out  of a space window thing. Okay? So what I wanna do is convert him to a symbol. The first thing I do if I want to animate him,  it's called Mc, um, pipe man.

And we're gonna start 'em down here and  after about 20 frames, he's gonna have a key frame. I'm gonna slide him up, molding shifts. So he goes up in a straight line  and he's gonna kind of appear. So next step I'm gonna add my classic tween great preview. He slides up and I'm gonna add a little bit of easing  'cause I always do ease out, just real basic one. There he is.

Okay. And next thing I'm gonna do is we're gonna do the mask. So let's call this layer, um, monster  And let's lock it so we don't mess around with it. Make a new layer and we're gonna call this one mask. And essentially we're gonna go back to the frame one. Actually I'm gonna use this frame 20.

And what's gonna happen if I draw on frame 20  because there's no key frame,  it's gonna end up back at frame one. And that's kind of what I want. So all you need  to do is make sure when you are drawing,  um, I'm gonna draw a porthole. You can draw any shape you like. It could be type, it could be anything. You just gotta make sure that it's not grouped, okay?

'cause the masks needs this kind of raw shape. So one thing that can happen, um, depending if you've messed  around with it, is the oval tool. Some people have this called object drawing on  this will make it not work. So just make sure it is un pressed or yeah, not like that. Not down. Alright, so I've got my oval tool.

I'm gonna have a fill of white and a stroke of none. Doesn't matter what fill you have  because it's gonna be turned into a mask and be see through. So remember, um, well uh,  remember earlier we hold shift down  and it gives us a perfect circle. If you hold down shift and alt on your keyboard  and then drag out, you get from the center. If you're on a Mac, it could be called shift and option,  but on a PC it's probably called shift and alt. Hold those both down and it starts from the center.

So I want it kind of from the center of his eye. And even though I've, uh, my frame is at 20  because my key frames way back here mean,  but it ended up all the way back here. And that's kind of what I want in this case, which is great. Um, and what I'm gonna do is I am going to, all I have  to do is right click the layer called mask and call it mask. What happens is there's the little,  can you see the structure changes here. The top one mask, the one underneath.

So just make sure your mask is on top  and now what you'll see as our little man pop up. Awesome. That's how to make a mask. I'm going to do totally superfluous extra. I'm gonna pick a white border  and I'm going to make a 25 start from the center. I'm gonna make a new layer, okay?

And I'm gonna say, yep, I want  to actually look like a pothole. There we go. There's a lovely man. Alright, that's added a really basic mask. And what we've done is we've animated the layer  and the mask is just sitting there. And what we'll do in the next one is we'll animate the mask.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025