In a previous tutorial video we covered how to create motion tweens in Animate Cc.
Make sure you've watched that video before you do this one because this depends on you knowing motion tweens before you can actually start
animating multiple properties on a motion tween.
So the name motion tween
implies that the only kind of animation that you can do is motion so moving left to right top to bottom or diagonally.
This is absolutely not true.
Motion tween can do motion,
but it can also animate a lot of different things such as rotation,
the scale, it can add a glow, a drop shadow, change the color.
There are a lot of different properties that you can animate with a motion tween, and you can in fact animate an object's
multiple properties so it can both go left to right, change the scale,
rotate, and change colors all simultaneously.
So let's see how this works.
Working from the previous example from the motion tween video, we have three stars that are moving across the stage.
I have staggered all three stars so that we can focus on one at a time.
Each of these lengths of animation is only one second long
because each of these are 24 frames of my frame rate is 24 frames per second.
One second worth of animation is really hard to see.
So you have a couple of options
with this. I'm gonna go ahead and change my size to normal.
For each of these you can lengthen
the amount of time, and then you can highlight and move this one over,
and lengthen the amount of time this one lasts,
and same thing I can highlight this one and move it down
and lengthen how long this lasts, or
you could change the frame rate by clicking on the pasteboard and changing the frame rate here and going slower.
With you with its frame rate change its gonna
make it really really choppy so by increasing instead the motion tween length,
this is gonna be really smooth animation, but it's gonna be a lot slower so we can see it.
So now working with this particular first star the yellow star it looks like a normal regular star that we see.
We can animate multiple properties not just motion. This one has a motion path
that's a little bit curved,
but let's say we also want to scale it. So this first keyframe if I click on the object it's 119 by
121 width and height. If I move my playhead over to the very last keyframe of that layer.
Then I can click on my object again and make it a lot smaller,
and if it goes onto my stage I can drag it out just a little bit more and what this is gonna
do is it's gonna make it animate from a large star on the first keyframe of that animation,
to a small star on the last keyframe.
So if I scrub that through it goes from a big star
to a little star.
Now the cool thing about this is I could actually move my playhead anywhere in that motion tween and I can change those properties
Midway, so let's say I want it to go from big
to little
to big
let's click on it again notice that each time I have to move the playhead and then click on the object again
and change the properties for that object.
Now as I do this, this motion path is getting a little bit weird, but that's ok, we're gonna
go ahead and see what happens. So as we scrub this it goes from big, to little, to big, to little.
So we can see the black dots indicating keyframes or changes in properties at each of these different points in time.
So I can scrub that back through and let's go ahead and try a different one.
Not just working with the width and height we can also do something called effects.
So let me lock the first layer and unlock this one to make sure that I'm targeting exactly what I intend to target.
So right now this star is pink if I go to color effect, I can actually change the brightness so it can get brighter
and duller and brighter and duller however
I want it to look. I can change the tint which is the color,
and I can even change the alpha which is going to make it fade in fade out. So let's try tint for this particular one.
So tint right now the style is pink and it's right now at a 25% tint.
So it doesn't look like it's 25% because the color of it is actually pink in the first place.
So let's say by this point in time
I want it to be zero tint because I like it to have the original color,
and maybe halfway through that pyramid. I'll click on the object and I want it to be... let's do
blue
and it's not going to show anything because I need to make this a hundred percent. So maybe by the peak of the pyramid
I want it to be red.
So I'm going to choose red and
by halfway through again I'll click
and do
hmm... kind of a purple color, and by the last keyframe in that motion tween
I'll change this to an orange.
Okay, so again every time we change properties
we see these property keyframes that indicate that there's some change at those points in time.
So as I go through now that star goes from pink to blue to red
to purple and then finally to orange.
Alright, so last but not least is the rotation and we'll also do something called a filter.
So let's lock down that first or that second star and unlock the third star
Click on this object, and we're gonna go over here, and we're gonna change a filter
So there are a bunch of filters, and these are only available when you have a movie clip symbol
You can add a drop shadow you can make it blurry you can make it glow and these are fun to really play with especially
some of these gradient glows and these gradient bevels
but I'll just do blur for right now because it's the easiest one to see. So as you can see it
got a little bit fuzzy, and I can say zero for both of those so it's totally perfectly clear on my first keyframe
Then I can move down in time, and I want to make really blurry about half way through so again
I'll click on the object and I'm gonna bump up the blur so it gets really blurry
and then by this point in time, maybe I want it to go back to
perfectly clear so if we scrub this we can see it goes from clear to blurry
and It's gonna go back from blurry to clear.
So if I click on this object
notice that there's nothing in here about rotation, again we can change the properties we can even change the color effect
we can change the width and height
you saw that we could change the X&Y coordinates or the motion you could either do it here or just by physically dragging
but then how do we change the rotation?
The rotations a little bit weird of a property because it's not tied actually to the object it's tied to the motion tween
so you have to actually click on the tween in order to get the rotation options
So you can rotate a certain amount of times, and then you can also do additional rotation
and then you can choose if it goes clockwise or counterclockwise so it's up to you
So for this particular object by the time it gets to the end of the motion tween I want it to have rotated
let's go ahead and click at the end of the motion tween. I always get that confused
I don't get it confused, but I just always forget so if you forget don't worry about it
just remember you gotta click on the motion tween. So let's say I want it to rotate
you know just two times, and then I'm gonna scoot it back, and you can see it's sort of
rotates and moves as it moves along and the longer your animation is the more you're gonna see this
If I had chosen to rotate it like 85 times
It would go so fast that you might not even be able to see it
So this really depends on how long the actual tween lasts in your animation
So let's go ahead and see what this looks like for right now
So that one gets bigger and smaller this one changes color
and then this one has that blur as well as some of that rotation
So you can do a lot of those property changes
and I encourage you to play with all those different filters and these different color effects. The last thing
I wanted to show you is that you can actually add multiple things to an object including texts
so if I wanted to add some text in here and I wanted to call this
I just need to unlock it I always forget
So let's call this star fall
and we can choose what color it should be I'm gonna make it white
and I'm gonna type in here like two hundred and fifty so it's massive
and that might be a little bit too massive too ambitious, okay
so let's say I want this to actually fade in and scale in and
do all kinds of other different stuff
well the first thing I got to go ahead and convert this to a symbol so MC title
and then I want to change certain properties so when it starts I'm gonna change the Alpha
to be 0% that means it's totally faded out, and by the end of it
oops I need to change the add an animation insert motion tween by the end of that animation
I want it to actually be 100% that means it's going to fade in.
Okay, then let's go back here click on our object
and then we can go ahead and scale that down
and
kind of recenter it
and then we might need to
change the width and height again.
So sometimes you have to change both properties
because it acts weird, okay, so there it's gonna fade in
and get bigger
and then you can actually start adding other kind of stuff so if I wanted to add more time to this animation
so let's say I want it to last as long as all this I can click here and hit f5
or
insert timeline
frame just so it lasts longer, and this is where I can start changing
maybe the color or the tint or I can add a gradient glow which is one of my favorite things to do
So I can say by here this object, let's go ahead and add a gradient glow
and
I want the gradient
Let's see color stop I want to choose
a green
and I know you can't see this but
There are these little things at the bottom that allow you to
Change the color and you can choose what type so I can do an inner gradient
and then I can change the colors for each one of these so it's gonna fade in
and then by this point maybe I want that inner gradient
that final color
To be a green so it's gonna change from orange to green and then maybe here I can have it change to another color
So it's just kind of playing around, but you can add multiple tweens.
You can scale it, you can fade it, you can change the gradient color, you can move it, you can do all those different things
in a motion tween, so don't think you just have to do motion when you're doing a motion tween