SECTION: 1
Overview
2:41
SECTION: 2
Industry overview
10:52
SECTION: 3
Drawing tools
16:21
SECTION: 4
Color
9:44
SECTION: 5
Shape tweens
11:30
SECTION: 6
Warnings & errors
1:10
SECTION: 7
Width tool
5:23
SECTION: 8
Class tweens
17:34
SECTION: 9
Fonts
6:16
SECTION: 10
Create a banner ad
16:44
SECTION: 11
Images
27:50
SECTION: 12
Nested animations
16:23
SECTION: 13
Sound
6:53
SECTION: 14
Project
9:34
SECTION: 15
Buttons
12:14
SECTION: 16
Masking & infographics
43:50
SECTION: 17
Bone Tool
6:53
SECTION: 18
Stop looping with JS
1:45
SECTION: 19
Motion tweens
16:35
SECTION: 20
Keeping file size down
13:18
SECTION: 21
Publishing
42:15
SECTION: 22
Conclusion
1:37
This course has been archived, the content is no longer up-to-date or relevant to most students.
The Various Ways to Create HTML5 Banner Ads
SECTION: 1
Overview
2:41
SECTION: 2
Industry overview
10:52
SECTION: 3
Drawing tools
16:21
SECTION: 4
Color
9:44
SECTION: 5
Shape tweens
11:30
SECTION: 6
Warnings & errors
1:10
SECTION: 7
Width tool
5:23
SECTION: 8
Class tweens
17:34
SECTION: 9
Fonts
6:16
SECTION: 10
Create a banner ad
16:44
SECTION: 11
Images
27:50
SECTION: 12
Nested animations
16:23
SECTION: 13
Sound
6:53
SECTION: 14
Project
9:34
SECTION: 15
Buttons
12:14
SECTION: 16
Masking & infographics
43:50
SECTION: 17
Bone Tool
6:53
SECTION: 18
Stop looping with JS
1:45
SECTION: 19
Motion tweens
16:35
SECTION: 20
Keeping file size down
13:18
SECTION: 21
Publishing
42:15
SECTION: 22
Conclusion
1:37
Questions
Student Gallery
Be the first to share something.
Course info
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
Founder of Bring Your Own Laptop & Chief 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 what other ways can you build HTML five banner ads? So we're gonna do in this course, Adobe Animate, and that in my professional opinion, is the one that's gonna have the, it's gonna be the industry standard. Um, it's not quite perfectly interesting standard yet, but Adobe are putting their weight behind it. They used to have it with Flash, so I imagine this is going to be the biggest product. Um, so that's Adobe Animate. You can still use the legacy one, remember?
Um, uh, edge Animate. Okay. The one that's been discontinued. You can totally do that. I was teaching people how to do banner ads for a long time, uh, for the last year or so, and that one before it got discontinued. Okay?
And it works fine. Um, uh, and if you are, so those are great for visual people, okay? If you are like a graphic designer or a web designer or a visual person, you're gonna have to use some of those kind of like helpful animation products. Another one of those is Google Web Designer or WD okay? And that is made by Google and it's good. It's quite similar to Edge Animate and Adobe Animate.
And the only problem with it is that it's, it's really specifically for the Google network. So if you are only doing ads for, uh, Google, double Click, or AdWords and that's it, uh, then that might be the product for you. It's pretty good. I've played with it. Um, uh, I haven't used it as much as some of the Adobe products though, so that might be a product for you. It's just a bit of a pain when you want to go off and do it for Seismic or any of the other, other ad networks that you might be doing it to.
So at Google Web Designer, check that one out. Um, if you are more of a coder or a developer, um, then you're gonna be using something like, uh, if you wanna do it in Pure Codes, you wanna open up a text editor and you wanna start typing, um, and doing that, the syntax for it, rather than animating it on a timeline. Um, you wanna look at something like Green Sock, like, um, uh, your shoe and your sock. So Green Sock, okay? Also gets called, uh, was it Green Sock Animation? Green Sock Animation Platform.
K or GSAP gets referred to quite a bit. That's a way of doing the exact same thing as we're gonna do here in Animate, but only doing it in code. Another way of doing that exact same thing, uh, in code is maybe create Js. So create js is another way to do it in code. So you wanna go off and see if you can find those sorts of things, if you'd rather do it in code. Now I'm talking really fast 'cause I've had a big coffee.
Okay? And I'll slow down for the next video, I promise. Uh, let's move on to that one now.
Um, uh, edge Animate. Okay. The one that's been discontinued. You can totally do that. I was teaching people how to do banner ads for a long time, uh, for the last year or so, and that one before it got discontinued. Okay?
And it works fine. Um, uh, and if you are, so those are great for visual people, okay? If you are like a graphic designer or a web designer or a visual person, you're gonna have to use some of those kind of like helpful animation products. Another one of those is Google Web Designer or WD okay? And that is made by Google and it's good. It's quite similar to Edge Animate and Adobe Animate.
And the only problem with it is that it's, it's really specifically for the Google network. So if you are only doing ads for, uh, Google, double Click, or AdWords and that's it, uh, then that might be the product for you. It's pretty good. I've played with it. Um, uh, I haven't used it as much as some of the Adobe products though, so that might be a product for you. It's just a bit of a pain when you want to go off and do it for Seismic or any of the other, other ad networks that you might be doing it to.
So at Google Web Designer, check that one out. Um, if you are more of a coder or a developer, um, then you're gonna be using something like, uh, if you wanna do it in Pure Codes, you wanna open up a text editor and you wanna start typing, um, and doing that, the syntax for it, rather than animating it on a timeline. Um, you wanna look at something like Green Sock, like, um, uh, your shoe and your sock. So Green Sock, okay? Also gets called, uh, was it Green Sock Animation? Green Sock Animation Platform.
K or GSAP gets referred to quite a bit. That's a way of doing the exact same thing as we're gonna do here in Animate, but only doing it in code. Another way of doing that exact same thing, uh, in code is maybe create Js. So create js is another way to do it in code. So you wanna go off and see if you can find those sorts of things, if you'd rather do it in code. Now I'm talking really fast 'cause I've had a big coffee.
Okay? And I'll slow down for the next video, I promise. Uh, let's move on to that one now.
