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

Motion Tweens vs Classic Tween 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

Hi there. Uh, in this video we're gonna look at the difference  between a motion tween and a classic tween. So up until now in this video series  we've been using classic tweens. And classic tweens are nice and simple. I love them. And you will find most of the people, uh,  that are doing kind of ad banners are using classic tweens.

Motion. Tweens are the kind  of newer version of a classic tween. Um, and they have some pros and some cons. But lemme go through both of them  and you can decide which one you prefer to use. They're quite similar, but they have some, yeah,  some, um, differences. Let's look at it.

So if I go  to create new, I'm gonna save this one. Cool. All right. So I've got my file. And a classic twe remember has, uh, you draw something. Let's say it's a bit of type.

Okay. And what I would like to do  for a classic tween is I convert it to a symbol. I call it mc Monster one. Okay? And I started over here  and I'm gonna put a key frame in here and I move it across. Add my classic tween drop done.

So that's a classic tween. Uh, um, a motion tween is very similar. Okay? So I'm gonna turn the eyeball off on this layer. Make a new layer. Call this one motion,  call this one classic.

Great. So motion tween, exact same thing. I'm gonna grab this one and I'm gonna do monster. Okay? And I'm gonna move it in. So the same principle, right, is I go through,  I convert it to a symbol.

It still has to be a movie clip. So we're gonna call this one bar  Grill. So nothing different so far. Um, and the difference is I don't have  to add a key frame potentially here. Okay? So what it does is it extends itself  out for one second.

And what you do is, oh, actually, sorry. What I need to do is, um, uh, I don't put a key frame in  and then add the classic tween. What I do is I initially add the motion tween. So instead of doing classic tween, we do motion tween. Okay? Nothing much different here except  that we don't have a last key frame.

'cause what happens with the motion between,  it's quite clever, it means that watch the, if I,  so at frame one, I want it to be off. And at frame 25, I drag it in, watch what happens  to the, um, timelines in the bottom. Can you see the key frame got added? Okay. And it's added automatically. So that's, that's a perk.

I guess you don't have to add that key frame. So that saves a little bit of time and it's really good. Um, uh, it hasn't perks. The perks are that it has this motion path,  which we'll look at in the next video  and it allows you to,  probably the biggest one is it's reusable. If you do an animation and you wanna use it over  and over again, a motion tween,  you can save what's called a motion preset. Whereas a classic tween, if you've got say a slides image  slideshow and you've got lots to do, um,  and it's the same thing over  and over again, a classic tween is gonna take you forever  because you're gonna have to do it for every single layout.

Whereas you can save a preset here. And what I don't like about it is, uh,  the complexity that comes along. So you've gotta decide for yourself,  am I a motion tween person or a classic tween person? You've done this course, so you're probably gonna do a lot  more classic tweens 'cause you've followed me. Um, but motion tweens. Yeah, they can be really useful.

So where it is, is what happens, uh,  the kinda next big step now is  that say I wanna apply some easing, um, to it. Now easing with a classic tween,  you do it to this first one, right? And you get this little fly up menu here,  and you decide on what it looks like with a motion. What happens is you double click this layer, okay? And this guy opens up, I'm  gonna make it this a little bit bigger. I'm gonna drag you down so you can see it.

Okay? You get this thing. This is where, this is  where it blows my mind, uh,  where students get their mind blown most  of the time it looks reasonably simple. And if you've come from after effects, um, which I have,  I'm really, uh, you know, I'm good at  after effects, I still find it a little bit tough. So what it's showing you is kind of the,  you can see there's an X and Y well,  you can see there's an X, Y, there's an X, okay? And then there's a Y the Y's not doing anything.

It's not going up and down, it's just going left and right. So there's the X and it's moving left and right. And these are pixels. So it's starting at like 300 pixels  and moving across, well, starting at like,  what is it past 700, which means it's off screen  and moving into about 300 pixels, which means it's there. Okay? So that's okay.

Um, and to add easing. Now down the bottom here, you click add ease. Okay? And I can say I want it to be a simple start and stop one. If I click on this, it's my kind of little curve here,  so it's gonna get slow in the middle. Um, so let's give it a preview.

All right, so they're both running at the same time. So I'm gonna delete this layer here. Let's go to double click to make 'em smaller. Grab this layer, then the classic twin,  save it, preview it again. Okay, so we've got it easing. So, uh, again, it's not that much different.

Double click it other than this thing here is just a tiny  bit more complicated, but still not too bad. And where it gets a little weird is when you've,  because you've just got one in two key frames,  it's okay when you start getting to, actually  before I go any further, there's a couple  other cool easings in here. Um, there's some pre-made ones like  Bounce, which is quite cool. Click bounce there goes  doing some weird bouncing stuff. Okay, so there's some pre-made  easings in there, which are quite cool. Um, and there's a little bounce there.

So the next thing I wanna show you is if you  have more than another key frame. So I've got one, I've got two, and I wanna do another one. If I'm gonna insert a key frame here,  this is where it gets quite cool. I can put a key frame in just for the scale  or just for the skew or the rotation. Whereas a classic tween allows you only to do it from all. So if you need real control over your, um, animation.

So you only want to do things like, I want  to add a key frame, but not for position, just for scale  or just for skew and operate them separately. So you want to add easing differently to all of them. You can use that. I'm gonna do all for the moment. Okay? And then I'm gonna move along.

Here's there, and I'm going to, so he starts there. I'm gonna get rid of that bounce, easing,  it's making it all look very weird. No ease. Actually I'll add just a basic start, stop, ease. Great. So it comes along and then there, there's nothing.

So I'm gonna get it to move there. And maybe then along a little bit further,  I'm gonna add another key frame. And I'm gonna get it to move that way. And this is where my mind goes a bit blank. I'm looking at this going, all right,  I can start playing with the easing here. And I just can't.

I find it's quite tough to work with. I like using classic tweens where you work on the bird fish,  the key frames, okay? And you just open that single little, um,  easing dialogue box and work with it. This one here has the problem where, um, if I apply easing,  say it's the spring. Okay? One here, I've got the spring one, okay.

It looks nice and simple there,  but when you start looking at the actual document,  it applies it across the whole thing rather than  for a key frame to key frame. And I can't find for the live, for me, like this is,  this thing's been out for ages, um, in old flash as well. And I, I still couldn't find it. If you are a master of the, um,  the motion editor thing here,  and you can tell me how to get the easing for it, just  because I just want the easing between these two  and maybe I wanna pause  and then I want more easing between these two key frames. I can't get it to apply  and I can't find anyone that's done it either. So I think it's not possible.

So yeah, the easing is across the whole thing and it's fine. This is the way I hate on, here we go. This is why I hate on the motion twin, mainly  because you get all this control,  but then the easing applies  to every single key frame along this thing. And say, this guy gets moved along quite a few times,  moved across the logo, gets moved up, down, left, right, um,  changes, transitions,  and you've got this one ease to control it all  to close this back down, double click it safety. So I do hate on the, uh,  motion tween rather than the classic tween. I miss, I I'm a fanboy for, uh, classic tweens.

But if you find yourself in a position  where you need a lot more control  and that's, that's a perfect way to do it, okay, is  to use a motion tween where you get to kind  of set key frames for different parts of it. Where of the other big perks is that it's reusable. So watch the second right click this one. And I can say, actually, I want to  save motion preset. Great. And I call this one the crazy spring.

Crazy spring Great. And say I open up a new document, it's another day,  but I've got the same thing to do. Okay. Quite a repetitive job. So I'm gonna draw this guy for a classic tween,  sorry for a motion tweens. It's the same converted to symbol course one EMC box.

And the cool thing about it now is I can get a window,  I can get a motion preset  and I can say, you my friend, um,  there's my custom preset, some default ones in there. Okay, here's my crazy spring. If I double click it, oh, double click it,  click on it, double click it. Apply even, okay? It's gone and applied it. It's kind of using the end point instead of the start point.

It's kind of not what I wanted. So there is a little trick. I can undo that. Okay. And go to my motion presets again. And if I hold shift and click it, nope.

Hold control and click it and alt and click it. And nope, none of those work. There's one that says, uh, apply a current position  or end a current position I want to go to. I can't remember. End a current position. Great.

So it kind of starts there now and moves across. So, uh, for usability, awesome. Um, go and become the motion tween person, um,  and more kind of complex control. Lovely. But if you're anything like me,  you'll end up doing classic tweens a lot more. I.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025