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

Background Colour and Shape Problems

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

All right. This video is all about changing the background color  and then uh, learning about shapes  and drawing, kind of basic shapes. Now, you'd be, uh, inclined to skip this one  'cause it seems quite basic, but there are some issues when  it comes to flash and the way it draws objects  that you should probably check out. So we're gonna create our first document. We could go file new, or we could use this create new. Just make sure that it says HTML five canvas.

We're gonna save it. I'm gonna put it onto my desktop. I'm gonna make a new folder called, uh, let's call this one,  uh, Adobe Animate Project Files. Great. I'm gonna give it a name. When you're naming your files, uh, there's a bit  of a naming convention, so I'm gonna call this one, uh,  drawing shapes, but we're gonna call it drawing.

And you have to use underscore shapes or hyphens. It's up to you, but don't lose spaces in there. It causes problems later on. Great. Um, so first thing  I'm gonna do is change the background color. It's easy enough to do, it's called a stage over here.

You have to have nothing selected. So if you've got something on your  stage, you might not see this. So you deselect by clicking in the background  using this black arrow here. Okay. So I'm gonna click on the stage  and you can walk your way through these. These are the kind of pre-made, uh, colors for you.

Pre-made watches. If you've got a specific brand color  you're gonna be working with,  then you can click this little, uh,  rainbow wheel in the top right click on him  and you can type in your RGB color  or your H one number if you know it. Okay, I'm gonna cancel. I'm gonna pick a random color that'll look for me. Okay. And what I'd like to do now is do some basic drawings.

So I'm gonna grab the rectangle tool. Okay? And you've got a stroke, which is the line around the  outside and the fill. So that's gonna be the center of my rectangle. Um, so what I'd like to do is get rid of the stroke. I don't wanna line around the outside  and to do it, use this smaller icon here, this little one  that has a red line through it.

Click on that. Okay? So there's gonna be no stroke  and the fill color I'm gonna use, uh, what am I gonna use? A darker of gray. I'm building a kind of a city,  uh, nightscape thing. Okay.

Just 'cause it uses really simple shapes. So I'm gonna draw the building. Great. And it all seems very normal, okay? Until you start doing some other things. So say, I want to now draw some windows.

So I'm gonna use, uh, some windows. They're gonna be black. I'm gonna draw them, say, say I start  drawing 'em straight on the building here. Okay, great. Nothing really happens  except when I wanna move it, which there's,  if I use the rec, uh, the black arrow, okay? Which is called the selection tool.

Um, if I click this  and now move it off, can you see it's lift a big hole in my,  uh, original rectangle, which is a bit weird if you used  to other programs like Illustrator or Photoshop. Okay? So they like to kind of fuse together. So I'm gonna go undo edit, um,  undo control Z or Command Command Z. Undo, undo, undo until I get back. Undo until it's gone.

So to get round, that is a couple of things. Um, uh, the easiest way is to group it. So if I select you  and go to modify Group, group,  now if I draw something over the top, it won't get joined. It also does something else. A little weird. Okay, watch this.

If I draw my rectangle, if doesn't seem  to appear, because what happens is things  that are grouped are always on the top. So you can see there he is. Hello. Okay, he's underneath. So what you tend to do in Flash is that, um, instead of,  so I can group him now. So I'm gonna use my shortcut, which is command G  or control G on a pc.

And now he'll be there. That's great. Um, or what I tend to do is this. So bin this, I just draw them on the side here  and move them on afterwards. So draw it, select it, okay. Using my selection tool, then go to group  and then move it on afterwards.

You could use layers, which we're gonna  do in a little bit, okay? But you just need to realize that a couple of things. One is that if they're not grouped,  they will slice out each each other. And if they are grouped  and you've got things that aren't grouped,  they end up hiding underneath. Okay? So just some interesting things, um, before you go off  and start drawing stuff in Flash.

Um, another interesting thing is if I draw a shape,  let's say I draw another little building down here. Okay? And what, which that, I'll grab my selection tool. I'm gonna move it down a little bit, okay? And watch this. If I hover above this line, can you see my icon changes?

That little arrow gets a little bent. Um, lying around it,  it means I can do weird stuff like this. See, I can start dragging this. I have no idea, idea kind of building this is now. But, um, it means you can do some weird stuff  where you can grab the corners and start adjusting it. Okay?

'cause this is kind of ungrouped shape. Once it's grouped, you can't do those things. You could ungroup it and do it. That'd be work fine, but just one  of the, would you call it a benefit? Yeah, it's kind of handy. Um, I do, I tend to draw all  of my stuff in Illustrator first  and bring it in to, um, Adobe Animate.

That's totally fine. There's nothing wrong with that. Um, or you can draw straight into Adobe Animate. There's nothing wrong with that either. Just whatever you are quickest  with the most comfortable with the tools. All right, so before I go, I'm gonna go through  and duplicate this guy.

So I'm going to go copy paste. I'm just using copy paste a, control C,  control V on my keyboard. Okay? I'm gonna line these up. Now I'm gonna select all of these. There's an alignment tool.

So I'm gonna window where you go align,  and I'm gonna use one here, distribute centers. Great. And I'm gonna grab them all and just bump 'em across. I'm using my arrow keys on my keyboard, okay? Just using the little arrow keys to bump it left and right. And another cool trick in flash, or sorry, Adobe animate.

I've gotta stop doing that. Okay. Adobe animate is  that I can hold down the alt key on my keyboard  or the option key if you're on a Mac  and watch this when I start dragging it. Can you see it made a duplicate? Okay. So I'm gonna hold alt  and drag these guys down, so, so I've got a bunch of them.

Those are the windows for my very basic building. Alright, let's go to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025