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

Shape Tweens and Previewing in Adobe Animate

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 there. Uh, this video we're gonna look at shape tweens. So this is our first bit of animation,  so let's look at them. Let's make, uh, we'll do a real quick basic one,  then we'll implement into something a little bit more  exciting and show some of the quicks,  um, two A shaped tween. So we're gonna create a new HTML five canvas. If you can't see this, 'cause you don't show again,  somebody's turned that off, you can go to file new,  you end up with a similar looking window.

You just wanna make sure it's on HTML five canvas. We're gonna change the sizes later on when we start doing  banner ads, but while we're doing our drawing practice,  we're gonna leave this all as is and click okay. I'm gonna save this. I'm gonna put it onto my desktop  and do my Adobe Animate project files. I'm gonna call this one, I'm gonna call it 15 a. I use these numbering just to help me  with video editing later on,  but this one's gonna be called Shape  and underscore Tween, so make sure  that there's no spaces perfect.

Okay, so really basic shape tween is I'm gonna turn a square  and I'm gonna get it to morph into a circle. So I'm gonna draw a square over here. Now it's using a lot of my presets from  uh, the last thing I drew. So what I'm gonna do is undo that and  before I start drawing, I'm gonna have it with,  let's say no stroke. It's a little red line and the fill. I'm gonna go from my awful, uh, gradient just  to a simple green.

Okay, so I'm gonna start on the left hand side  here with a rectangle. I need to be able to see my timeline. If you can't see it, like I can't,  you click on this little tab here. Okay? If anything goes missing. So you do lose your timeline and you close it  and it can never be found again.

This is a handy one. If you go a window  and go down to workspaces and you say essentials. Okay, perfect. Gotta reset essentials, click yes,  it'll rejig everything back  to the way it came outta the box. You'll see this thing here has gone back to a single line. I'm gonna pop it out just so it's double line  so I can see it on my laptop  and you'll see my timeline is back.

Great. So I've got one layer, um,  and the only thing on that layer at the moment back  to my selection tool is, uh, square. And one of the rules for a shape  tool is you can't group them. Okay? So it can, uh, it can't be grouped  or turned into a symbol, which we're gonna do later on. Um, and then later on down here, let's say  after 40 frames, um,  so I'm gonna right click frame 40.

If you don't have a right click  and you're on a Mac, um,  you hold down the control key on your keyboard,  um, and click once. That'll give you a, a fake little right click. Um, but everyone else right click and go to insert. We wanna blank key frame  because what happens is the first key  frame's going to be a circle. And in this blank one over here,  you can see down here, um, key frames. Your key frame is the one that has the circle in it.

This little square thing here, I hate, okay, you're trying  to teach people here to ignore that thing. There. It doesn't do anything. It looks important. It looks like you click on it and do stuff. It doesn't, it's just happens to be there  to show you the ending of  where this one goes along and stops.

And this new one here, you see the difference  between a key frame that has something in it, it's black  and this one here that doesn't, okay, it's hollow. So I'm gonna get it to transform into a circle. So I'm gonna hold down the rectangle tool. No it's not. There it is. There's the oval tool.

Okay, I'm gonna pick a different color as well. Doesn't really matter whether it's a different color or not. And I am going to drag out a circle now while I'm dragging  it out, if I hold down shift, okay, like I did  with the transform tool earlier,  it lock the height and width. So we'll get a perfect circle. Okay? So over here, square  and over here circle, nothing really happens yet,  just kind of flicks between the two.

The magic happens with in between, anywhere in between here,  right click and go to this one that says Create shape tween. You'll notice the color changes to this green color  and you'll notice now once I start, what I'm doing is,  can you see this little red box here? I'm dragging it from left to right, left to right. Okay. And that's a shaped tween. Okay?

Morphs from one shape to the other. Um, it's best with not super complicated, um,  shaped tweens like text ends up looking a little bit hard  and goes all over the place  and also ends up burning up the CPU  and kind of running really fast and hot. So, um, nice simple shapes. It's perfect for. The other thing we're gonna do is preview in the browser. So we haven't done that yet.

So we've been previewing  or we haven't had to preview anything yet. So there's a couple of ways. Drag your play head back  to frame one hit return on your keyboard or the enter key  and you can see it plays through. Okay. That's one way of doing it. The other way to do it is under control  and we go to test a movie.

It's gonna be in browser. So I'm gonna click test, click on  that, and it opens up in a browser  and it previews it in a browser. It's always best to a browser rather than in Adobe Animate. It makes a good job of it,  but there's lots of things that don't work  until you're out in the browser. And this is its final home. Okay?

I've installed Chrome on my machine. Make sure you have Chrome installed  'cause it's probably the most popular browser in the world. Uh, rather than Safari or Firefox or anything else. So go and install that test  'cause it's the best way to test. Um, and it's, yeah, it's just a great way of previewing. There's a shortcut for previewing,  weirdly on my version on Max.

It doesn't show you. Um,  so it's if you hold down the command key and hit return. Um, so command key return, it opens up in a browser  and previews it, uh, on a pc it's, uh, control enter,  but on weirdly on a pc, it'll actually have it written here. Great. So that's how to preview our  lovely little shape tween. Alright, so we'll leave this basic shape tween here  and look at something a little bit more advanced in the next  video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025