Motion Tweens vs Classic Tween in Adobe Animate

Hi there, in this video were going to 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 that are doing ad banners are using classic tweens. Motion tweens are a newer version of a classic tween and they have some pros and some cons but let me go through both of them and you can decide which one you prefer to use. They're quite similar but they have some differences so lets look at it.

So, if I go to create new, I'm going to save this one, alright so I've got my file, and a classic tween remember, you draw something, lets say it’s a bit of type. And what I would like to do for a classic tween is I convert it to a symbol, I call it mc monster 1. And I start it over here, and I'm going to put a key frame in here, and I'll move it across. Add my classic tween which I've done. So that’s a classic tween.

A motion tween is very similar, so I'm going to turn the eyeball off on this layer, make a new layer, call this one motion. Call this one classic. So a motion tween, exact same thing, I'm going to grab this one and I'm going to do monster. I'm going to move it in, so the same principle right, is I go through, and I convert it to a symbol, it still has to be a movie clip, so were going to call this one bar/grill. So nothing different so far, and the difference is I don’t have to add a key frame potentially here, so what it does is it extends itself out for one second and what I need to do is I don’t put a key frame 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. Nothing much different here except that we don’t have a last key frame. Because what happens with the motion tween, its quite clever it means that watch this, if I, at frame one I want it to be off and at frame 25 I drag it in, watch what happens to the timeline at the bottom. Can you see the key frame got added and it’s added automatically. So that’s a perk I guess, you don’t have to add the key frame so that saves a little bit of time and its really good, it has some 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 its reusable. If you do an animation and you want to use it over and over again, motion tween, you can save what’s called a motion preset. Where as a classic tween, if you have say a slide image slideshow and you’ve got lots to do and it’s the same thing over and over again, classic tween is going to take you forever because you have to do it for every single layer where as, you can save a preset here.

What I don’t like about it is the complexity that comes along, so you’ve got to decide for yourself am I a motion tween person or a classic tween person. You’ve done this course so you're probably going to do a lot more classic tweens because you followed me but motion tweens, they can be really useful.

So the next big step now is say I want to apply some easing to it, now easing with a classic tween you do it to this first one and you get this little fly up menu here and you decide what it looks like. With our motion tween what happens is you double click this layer and this guy opens up. I'm going to make it a little bit bigger. You get this thing, this is where students get their mind blown most of the time, it looks reasonably simple and if you come from after effects, which I have. I'm good at after effects, I still find it a little bit tough. So what its showing you is the x and y, there's an x and then there's a y, the y’s not doing anything its not going up and down its just going left and right, so there's the x and its moving left and right and these are pixels so its starting at 300 pixels and moving across, well starting at past 700 which means its off screen and moving into about 300 pixels which means its there. So that’s okay, to add easing now, down the bottom here you click add ease, and I can say I want it to be a simple start and stop one. I'm going to click on this, its my little curve here, so its going to get slow in the middle, so lets give it a preview. Alright so they're both running at the same time so I'm going to delete this layer here, lets go to double click him to make him smaller, grab this layer, bin the classic tween. Save it, preview it again. So we've got our easing, so again its not that much different, double click it, other than this thing here is just a tiny bit more complicated but still not too bad. Where it gets a little weird is when you’ve, because you’ve just got two key frames its okay.

Before I go any further, there's a couple of other cool easing’s in here, there's some premade ones like bounce, click bounce, doing some weird bouncing stuff. So there's some premade easing’s in there which are quite cool and there's the little bounce there.

So the next thing I want to show you is if you have more than another key frame. So I've got one I've got two and I want to do another one, if I'm going to 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 where as the classic tween allows you only to do it for all. So if you need real control over your animations so you only want to do things like I want to add a key frame but not for position just for scale and just for skew and operate them separately say you want easing different to all of them. I'm going to do all for the moment, and then I'm going to move it along there he is there. And I'm going to so he starts there, I'm going to get rid of bounce easing, it’s making it all look very weird. Actually ill add just the basic start/stop ease. So it comes along, and then there there's nothing so I'm going to get it to move there and then maybe then along a little bit further I'm going to add another key frame and I'm going to get it to move that way and this is where my mind goes a bit blank. I'm looking at this and I'm going alright I can start playing with the easing here and I just cant, I find its quite tough to work with.

I like using classic tweens where you work on the key frames and you just open that single easing dialogue box and work with it, this one here has the problem where if I apply easing, say it’s the spring one here. It looks nice and simple there but when you start looking at the actual document it applies it across the whole thing rather than from key frame to key frame and I cant find for the life of me, this thing has been out for ages in old flash as well and I still couldn’t find it. If you are a master of the motion editor thing here, and you can tell me how to get the easing to work, because I just want the easing between these two and maybe I want a 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 the easing is across the whole thing and its fine.

This is why I hate on the motion tween, 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 changes transitions and you’ve got this one ease to control it all. To close this back down, double click it, ahh safety.

So I do hate on the motion tween rather than the classic tween, I'm a fan boy for classic tweens. But if you find yourself in a position where you need a lot more control, that’s a perfect way to do it, is to use the motion tween where you get to set key frames for different parts of it.

One of the other big perks is that it’s reusable. So watch this, I can right click this one and actually I want to save motion preset, and I'm going to call this one the crazy spring, and say I open up a new document, its another day but I've got the same thing to do, quite a repetitive job, so I'm going to draw this guy, for a motion tween, so same, convert it to a symbol, call this one mc box. And the cool thing about it now is I can go to window, I can go to motion preset and I can say you my friend is my custom presets. Here’s my crazy spring, if I double click it, click on it. Double click it, apply even. Its gone and applied it, its kind of using the end point instead of the start point, its not what I wanted. There is a little trick, can undo that and go to my motion presets again and if I hold control and click it, alt and click it, nope none of those work. There's one that says apply at current position or end at current position. I'm going to go to end at current position. So it starts there now and moves across. So for reusability, awesome, go and become the motion tween person and more complex control, lovely but if you're anything like me you'll end up doing classic tweens a lot more.