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

Animating a Mask for HTML5 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, welcome back, were going to do our animated mask now. so in the previous one we animated the actual object and the mask was quite static. So this one were going to do the opposite. Were going to make our object static and animate the mask and this is really good for reveals. So lets go to create new canvas, I'm going to import a graphic, I've got this car mask, this is the best car ever made and thank you chevycamarotv and I'm going to click here, its going to be 500 by 333. I just happen to know the size of this, it’s a random number for advertising so, I've got it in and I'm going to call this one Chevy and I'm going to make a new layer, I'm going to call this one mask. You'll notice how down here it’s quite hard, I cant see any of my names. Watch this, I can drag this out by grabbing that little bar there just to see, just to make sure alright, lets get it right Dan.

Alright, so my masking layer, this is where I'm going to do my animation, I'm going to turn this off for the moment, and what I'm going to do is you could use a classic tween so you could play with scale and rotation and moving the mask around. What were going to do in this case, just for something different is were going to do a shape tween so I'm going to save it actually and I'm going to call this one you, and I'm going to grab my rectangle tool, I'm going to give it no stroke, I'm going to give it a fill colour of it doesn’t matter because its going to become invisible to become a mask. So I'm going to turn this on for a second because what id like to do is id like to start somewhere. So maybe across the wheel here is when the first part of the mask is going to be.

And how it works with a shape tween is instead of going to our modify convert to symbol, that works for a classic tween but not for a shape tween. A shape tween can’t be grouped and it cant be turned into a symbol, it just needs to be this raw spotty shape. So I've got my first shape there, actually I might start it quite small, there it goes right in the center there. I'm just moving this around and then after maybe 10 frames, I'm going to put in a key frame and I'm going to make it a bit bigger, and remember the cool thing that we can do with shapes that aren’t grouped and aren’t turned into symbols is I can grab this, I'm going to deselect off, and I'm going to do some stuff before I go. Can you see I can just drag these off, just dragging the lines, how good is this going to look, who knows, I'm just winging it, I'm going to add another key frame here and its going to be the same size except deselect I'm going to make it look like its rebounding a little bit. And then it’s going to get a lot bigger. So maybe after these frames, this one here. Put another key frame in, I'm going to grab my free transform tool, scale it up to fit the sides, and go back to my move tool, deselect it, its going to rebound out.

I'm going to go really fast past it so I can actually catch a glimpse of it. Shrink it down a little bit. Just so it covers the edges here. I add sound effects as I'm talking, you can add your own. So, gets there, there, boom. So the next thing I need to do is add my shape tween. Now watch this I selected across all four of these and I can just add them up in one big go. So it’s going to go, that took forever, so I might grab this and tuck it in there. Trim off these last bits, everything but the key frame. Clear frames, its hard to see in here, I've done it forever and its still hard to find clear frames. I didn’t even want clear frames, I wanted remove frames. It’s hard to know, the language in these ones is quite tough when you get into that right click, they all seem to say the same thing. You'll get used to them.

Now the next thing I need to do is extend the car along, I'm could put a key frame in here or if I'm going to be super sensible I'm going to put in just another frame because it doesn’t need another key frame because I'm not going to do anything with it, its just going to extend all the way along. Now what I'm going to do is the magic, just like we did before, right click the mask and go to mask, and hopefully now if I preview it, and that’s how to do the opposite, animate the mask. There's no reason why I couldn’t animate the layer underneath as well, and that’s when you get some complex trick things where ones moving, the objects moving one way and the mask is moving the other and were going to do some of that stuff when we do things like more animated infographics in the next video tutorials. Alright, that’s how to animate a mask.

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