IntroductionWelcome| 00:00 | Welcome to Flash CS4 Animation.
I'm Todd Perkins. I'm Adobe certified
| | 00:06 | instructor in Flash and I absolutely
love creating animations in Flash.
| | 00:11 | I'm excited to walk you through how to learn
the advanced topics in creating Flash animations.
| | 00:17 | Throughout this title we will look at
advanced animation topics like how to
| | 00:21 | master the new motion tween model,
how to add realism, 3D elements, how to
| | 00:27 | animate complex bone systems, how to
work with masks on an advanced level and
| | 00:32 | even how to animate characters.
| | 00:34 | And always remember that you can
always pause, stop and re-watch movies to
| | 00:38 | learn the concepts in more
detail. So let's gets started.
| | Collapse this transcript |
| Using the example files| 00:00 | If you are a premium subscriber to lynda.com
or have purchased this title on a disk
| | 00:05 | then you have access to the Exercise
Files for this title. Exercise Files in
| | 00:10 | this title are organized by chapters.
In each movie, I will say what file we
| | 00:14 | are working in, so you can open
up that file and follow along.
| | 00:18 | To make life easy for you, I have saved
final versions of each file having the
| | 00:23 | name of the file. And the way that I
name those files is I ended the file name
| | 00:27 | with _final. So, in the movie where I
use the file ActionScript Animation,
| | 00:32 | the final file for that is
ActionScript Animation_final.
| | 00:35 | If you don't have access to the
Exercise Files, don't worry. You can still
| | 00:39 | follow along. I will show you what you
have to do to set up your files in the
| | 00:42 | same way so that you can learn the same
techniques and practice them yourself.
| | Collapse this transcript |
| Getting into this course| 00:00 | Let's have a little overview of some
of the concepts that you are going to
| | 00:03 | learn throughout this title. You are
going to learn how to master motion tweens
| | 00:08 | and how to add realistic Squash and
Stretch effects to your animation.
| | 00:11 | You will also learn how to work with
the Motion Editor on an advanced level.
| | 00:16 | In that way you can add really
customized easing to your animations.
| | 00:20 | (Claws snap.)
| | 00:21 | You will learn how to add Perspective
Shadows and 3D Rotation to elements and
| | 00:26 | we will work with nested
animations and syncing sounds.
| | 00:30 | You will learn how to work with
bone systems in Flash to create complex
| | 00:33 | animations using symbols and shapes.
You will learn how to create interactive
| | 00:38 | bone systems that you can click and
drag to move around without writing a
| | 00:42 | single line of code.
| | 00:43 | You will learn how to use the 3D
tools in Flash to create layered 3D
| | 00:47 | animations. You will learn how to
animate masks on an advanced level, like you
| | 00:52 | can see with the eyes of the spider in
this movie. You will learn how to use
| | 00:56 | mask to create an Iris effect.
| | 00:58 | You will learn how to use masks to
create blinking effects like this one here
| | 01:03 | and finally you will learn how to
create a walk cycle animation using the bone
| | 01:07 | systems built into Flash. I am really
excited to show you all these techniques
| | 01:11 | and can't wait to get started. So let's
move forward learning how to animate in Flash.
| | Collapse this transcript |
|
|
1. Mastering Motion TweensReviewing motion tweens| 00:00 | In this chapter we are going to look at
motion tweens at a more advanced level
| | 00:03 | than what we did in the Essential
Training title. We will start off by simply
| | 00:07 | reviewing how motion tweens work.
| | 00:10 | If you are following along you can
open up Review_Motion_Tween.fla from the
| | 00:15 | Chapter 01 folder. You can also just
create a movie clip on the Stage. You can
| | 00:21 | create a motion tween using a symbol
by right-clicking or Ctrl-clicking the
| | 00:26 | frame where the symbol is in the
Timeline. So I am going to right-click in the
| | 00:30 | animation layer, I am going to choose
Create Motion Tween, and by the way you
| | 00:33 | may have noticed Create
Classic Tween as an option here.
| | 00:36 | Classic tweens represent the older
versions of motion tweens, so that the
| | 00:40 | motion tween of Flash CS3 and previous
versions of Flash are now called classic
| | 00:46 | tweens. So they are still there
in case you ever want to use them.
| | 00:49 | Notice that Flash automatically
extends the Timeline for one second of
| | 00:52 | animation. So I now have 18 frames. So
now if I want to animate properties, I
| | 00:57 | can go to frame one and adjust any
properties I want to animate. So let's say I
| | 01:02 | am going to make the monster move from
where it is now, down to the bottom of
| | 01:06 | the Stage. So I am going to go to the
frame one and then I am going to push
| | 01:09 | Down on my keyboard and then I am
going to push Up on my keyboard.
| | 01:11 | So what that did is it moved the
monster down one pixel and back up one pixel
| | 01:15 | which doesn't really do anything
visually but what it does is by adjusting the
| | 01:19 | property on a particular frame in a
motion tween we are telling Flash to
| | 01:23 | memorize that property value. So by
adjusting the Y position of the monster we
| | 01:29 | had the Flash memorize that position
and make what's called a Property Keyframe.
| | 01:34 | So remember a keyframe is a place
where you tell Flash exactly how you want
| | 01:37 | something to look in a particular frame
and now what I will do is I will scroll
| | 01:41 | to the last frame and then I will
move the monster straight down by holding
| | 01:43 | Shift on my keyboard and using the
Down arrow. The reason why I am using my
| | 01:47 | keyboard instead of clicking and
dragging is so I don't accidentally move the
| | 01:51 | monster a little bit to the right or
to the left; if I go to the playhead we
| | 01:55 | can preview the animation.
| | 01:57 | So Flash has created a motion tween
and then if you look at the purple line
| | 02:00 | that I have here, Flash created a
motion path. Remember that if you click and
| | 02:04 | drag that line or you move around
anchor points in it, the Flash will modify
| | 02:09 | the motion path. I am going to undo
the change that I just made by pressing
| | 02:12 | Command+Z on the Mac or Ctrl+Z on the PC.
| | 02:15 | So there is a symbol motion tween. So
what I have to do to create a motion
| | 02:19 | tween is right-click or Ctrl-click
where your symbol is that you want to
| | 02:22 | animate and then choose Create Motion
Tween. From there all you need to do is
| | 02:26 | modify the properties that you want
to animate at the beginning and ending
| | 02:29 | frames of your animation.
| | Collapse this transcript |
| Adjusting motion tweens in the Property Inspector| 00:00 | Now we will look at manipulating a
motion tween using the Property inspector.
| | 00:04 | If you are following along, go ahead and
open up Property_inspector.fla from the
| | 00:08 | Chapter 01 folder. You would also just
create a simple motion tween on the main Timeline.
| | 00:13 | So here what I am going to do is
modify the motion tween that I have using a
| | 00:17 | Property inspector by first selecting
the motion tween in the Timeline. With
| | 00:21 | the motion tween selected, you can go
to the Property inspector and you will
| | 00:24 | see some properties that yon
can modify with your animation.
| | 00:26 | First of all we can change the easing.
So let's say we wanted to make it look
| | 00:30 | like the monster was speeding up as he
was following down. So I can click and
| | 00:34 | drag to the right and that will ease
out. So I will make the animation go
| | 00:39 | slower as the monster moves down. I
will test the movie right now and that's
| | 00:43 | not the effect we want, we actually
want easing and we want it to start out
| | 00:47 | slow and speed up. So I will click and
drag this slider to the left to ease in.
| | 00:50 | So I will test the movie and there is
the monster flying, a little bit faster
| | 00:55 | as he moves down.
| | 00:57 | If that easing isn't sufficient for you,
don't worry we will look at easing in
| | 01:01 | a lot more detail in a later movie.
You can also adjust the Rotation. I am
| | 01:05 | going to first set easing back to 0
using my keyboard and then for the
| | 01:09 | Rotation, I am going to click and drag
the time(s) slider to make the monster
| | 01:14 | rotate one time.
| | 01:16 | Now when I click and drag the playhead,
you see that he rotates down one time
| | 01:21 | along the path. There is also the plus
button that allows you to add additional
| | 01:27 | rotation. If I click and drag the slider,
the monster rotates a little bit more
| | 01:31 | to notice that the additional rotation
is applied at the end there. So I can
| | 01:35 | select the frames and I can add as
much as additional rotation as I want and
| | 01:39 | that applies to the monster
at the end of the animation.
| | 01:42 | You can also control where the
Direction is, clockwise or counterclockwise,
| | 01:46 | that's CW or CCW respectively. And
you can choose whether you want the
| | 01:53 | animation to orient to a path. To do
that I am going to turn off the Rotation,
| | 01:57 | so I will set the Rotation to the 0 and
then for the plus value, for additional
| | 02:00 | rotation, I will set the value to 0
and then what I am going to do is modify
| | 02:04 | the Motion Path.
| | 02:06 | So I am going to hover over the Motion
Path until I see my cursor update then I
| | 02:09 | will click and drag the Path. Preview
the animation to make sure that it's
| | 02:13 | working correctly and then I will
click the Orient to path checkbox. Notice
| | 02:20 | that property keyframes are created in
every frame of the animation, watch when
| | 02:24 | I test the movie. The
monster rotates along the path.
| | 02:31 | Now lets say I wanted to rotate
along the path but have his feet kind of
| | 02:36 | aligned with the path more. So let's say,
I select the monster and I still have
| | 02:41 | that Orient to path option checked
because I didn't uncheck it. I will rotate
| | 02:45 | the monster so its body is following
the path and as I preview the animation,
| | 02:50 | you can watch him rotate.
| | 02:54 | So obviously you can go through each
of these frames and adjust any of the
| | 02:58 | Rotation values as you want to. Now I
will uncheck Orient to path and I will
| | 03:03 | straighten out the Motion Path a little
bit. I will do that with the Selection
| | 03:08 | tool and I will click and drag the
Motion Path to straighten it out. Preview
| | 03:14 | the animation, it looks good and it's
just that the monster is not straight. So
| | 03:18 | I am going to straighten him out using
the Free Transform tool and that looks good.
| | 03:24 | Now with the tween is still selected I
will modify the Motion Path. I can click
| | 03:29 | and drag the Path to move it on the X axis,
the Y axis. I can also adjust its height.
| | 03:36 | Notice that I can't adjust its width,
that's because this is a vertical path
| | 03:41 | and it doesn't have any thickness to it.
So if I were adjusting a horizontal
| | 03:44 | path then I could adjust
its width and not its height.
| | 03:46 | So using the Property inspector, you
can fine-tune your motion tweens by
| | 03:51 | controlling easing,
rotation and the Motion Path.
| | Collapse this transcript |
| Working property keyframes| 00:00 | I mentioned in an earlier movie that
animations are created using property
| | 00:04 | keyframes. In this movie, we will
take a look at adding, removing, and
| | 00:09 | modifying property keyframes. If you
are following along, you can open up
| | 00:12 | Property_Keyframes.fla in the Chapter
01 folder where you can just create a
| | 00:16 | simple motion tween on the Stage; so
one way to create property keyframes is on
| | 00:21 | the Stage and the Timeline.
| | 00:23 | To create a property keyframes, simply
take your motion tween and put the play
| | 00:28 | head on any kind of frame and then move
your object on that frame and you will
| | 00:33 | see that a property keyframe is created.
In the Timeline, property keyframes
| | 00:36 | just play as small black diamonds.
| | 00:40 | So I can move to any frame and move
this monster around and I am creating the
| | 00:44 | property keyframes. So notice that the
Motion Path is adjusted to follow the
| | 00:48 | property keyframes. So there is our
animation but let's say I want it to remove
| | 00:54 | one property keyframe. Using the
Timeline, you can't really remove just one
| | 00:58 | keyframe. Watch when I right-click or
Ctrl-click in between in the Timeline.
| | 01:04 | The option to remove keyframes is Clear
Keyframe and then we have the option of
| | 01:09 | what type of keyframe we want to remove,
Position, Scale, Skew, etcetera or All.
| | 01:14 | Let's say I just want it to remove a
Position keyframe. When I choose Position
| | 01:18 | that removes all of the Position
keyframes and I no longer have an animation.
| | 01:22 | So what I am going to do is press Ctrl+
Z on the PC or Command+Z on the Mac to
| | 01:26 | undo that change I just made.
| | 01:28 | So now let's say we really need a
little bit more control over this animation,
| | 01:32 | we just want to remove one property
keyframe. So to do that we are going to
| | 01:36 | need to use the Motion Editor, so
select your tween, move over to the Motion
| | 01:40 | Editor and you can see the
property keyframes in the Motion Editor.
| | 01:43 | Let's say I wanted to remove the middle
three property keyframes and just have
| | 01:48 | it go from the first one to the last
one still. One thing you can do is move to
| | 01:54 | a frame where you want to remove the
keyframe, so I am going to go to frame six
| | 01:56 | here, you notice that there is a --
property keyframes are black squares and
| | 02:00 | animations are connected using solid
black lines. Let's say, I want to remove
| | 02:04 | the keyframe here. I can simply put
the playhead where I want to remove and
| | 02:08 | then click the Add or Remove
Keyframe button in the Motion Editor for the
| | 02:12 | property you want to remove. So I will
click that for the X position and notice
| | 02:16 | that it removes the
keyframes for the X and Y position.
| | 02:19 | Remember that Position property
keyframes are connected so removing one or
| | 02:24 | adding one will remove or add the other.
In other words, removing an X keyframe
| | 02:30 | will remove the Y keyframe there as
well and adding an X keyframe will also add
| | 02:34 | a Y keyframe.
| | 02:35 | Let me show you another way to remove a
property keyframe in the Motion Editor.
| | 02:40 | That way is to use the keyboard
shortcut Command on the Mac, Ctrl on the PC.
| | 02:45 | Hold that button down, hover your
mouse over the animation line, when I hover
| | 02:50 | over the solid black area my cursor
will be a pen with a plus sign, that tells
| | 02:56 | me that if I click there I will add a
property keyframe. Well, right now I
| | 02:59 | don't really want to do that, I want
to actually subtract the property keyframe.
| | 03:02 | So what I am going to do is hover over
one of the property keyframes and you
| | 03:06 | will see that there is a minus sign
by the pen icon. So I will click on the
| | 03:10 | property keyframe I want to remove and
it's gone. So I will do that with the
| | 03:13 | other one, still holding Command on
my keyboard, I will click the property
| | 03:17 | keyframe I want to remove and they are
gone. So I scrub the playhead and there
| | 03:21 | is my animation and I have all the
control I need over the property keyframes.
| | 03:26 | Another thing you can do in the Motion
Editor is move property keyframes. So
| | 03:30 | let's say I wanted the monster to
move up and down like he was jumping, for
| | 03:34 | example. So what I am going to do is
click the Y area under Basic Motion in the
| | 03:39 | Motion Editor to expand it, so notice
it's a little bit bigger now. I am going
| | 03:42 | to click and drag the Motion Editor
up to get a little bit more space to
| | 03:45 | animate here and then I am going to
view the rest of the Stage in my visible
| | 03:50 | area by choosing View > Magnification
> Fit in Window. So now I can see the
| | 03:56 | animation curve here, the Y position
is at its lowest value on frame one, its
| | 04:01 | highest value on frame 18.
| | 04:02 | So what I am going to do is select the
last property keyframe in the Y position
| | 04:11 | and notice that it turns green and this
is probably going to be really hard to
| | 04:13 | see on my screen, so you are going to
have to try it yourself and see that the
| | 04:16 | property keyframe is green. So now
instead of being a black square, it's a
| | 04:19 | green square. What I can do is click it
and drag it, so I am going to click and
| | 04:25 | drag it over to frame nine and I have
moved the property keyframe to frame
| | 04:29 | nine. So now the monster
moves down in nine frames.
| | 04:34 | Now notice there is a dotted line
between frame nine and frame 18. So what I am
| | 04:38 | going to do is hold Command on my
keyboard or Ctrl on the PC. I am going to
| | 04:42 | hover over frame 18 in the Y position
and I am going to click to create another
| | 04:47 | keyframe and I will click and drag that
frame down so that it's even with frame
| | 04:53 | one. So I have 440 on frame 18 and
then 440 on frame one. Now the monster
| | 05:00 | jumps, so it goes down and hits the
ground and jumps back up. So I will test
| | 05:04 | the movie to see that in action,
Command+Return on the Mac, Ctrl+Enter on the
| | 05:07 | PC and there is the monster moving up and down.
| | 05:10 | So using the Motion Editor, you have a
lot more control over property keyframes
| | 05:14 | and you can easily add,
remove, or adjust them as needed.
| | Collapse this transcript |
| Controlling easing in the Motion Editor| 00:00 | In this movie, we will look at
controlling easing using the Motion Editor. If
| | 00:03 | you are following along, just create
a simple animation of something moving
| | 00:07 | down or open up Easing_Motion_Editor.
fla from the Chapter 01 folder. So here I
| | 00:14 | have a really simple animation. We have
the monster moving from near the top of
| | 00:18 | the screen to the bottom of the
screen, pretty straightforward.
| | 00:22 | Now we will look at applying easing to
this animation to have them speed up as
| | 00:26 | he moves down. So what I am going to
do is apply Simple (Slow) Easing. Easing
| | 00:31 | is defined by animation curves. What I
am going to do is click on Simple (Slow)
| | 00:35 | in the Eases section and if it's not
there you can click the plus icon and
| | 00:39 | click Simple (Slow) then
you should see it in there.
| | 00:42 | And then I am going to click and drag
the slider all the way to the left, so
| | 00:45 | it's at -100. Now we will take a look
at this animation curve here, now this
| | 00:51 | Easing curve represents a property's
value over a period of time, 0 represents
| | 00:57 | the starting point of the property's
value or the first property's value on the
| | 01:01 | first frame of the animation. And 100
represents the property's value on the
| | 01:05 | last frame of the animation. So if this
happened to be a straight line it would
| | 01:09 | have an even amount of movement
between each frame to get to the last frame.
| | 01:13 | But with easing you have a curved
line so it gives a different amount of
| | 01:17 | movement between each frame.
| | 01:19 | Notice that the curve stays pretty
low for the first few frames. This means
| | 01:25 | that the outage is going to stay
towards its initial value at the beginning in
| | 01:29 | essence moves slower at the
beginning and speed up toward the end of the
| | 01:33 | animation. So what I am going to do
is scroll up and make sure that Simple
| | 01:38 | (Slow) Easing is applied to the Y
property and sure enough it is and if I click
| | 01:44 | on the Y property you can
see the easing curve applied.
| | 01:47 | So notice there is a solid black
line where the start and end Property
| | 01:51 | Keyframes are and the actual
animation is going to have the values on this
| | 01:55 | animation curve that we see in blue.
So instead of just being in equal
| | 02:00 | increments, as the black line shows,
the values go up slowly at the beginning
| | 02:04 | and then quickly as the animation
proceeds because of the Easing curve applied.
| | 02:10 | So let's see that in action. I am going
to test the movie using Command+Return
| | 02:13 | on the Mac, Ctrl+Enter on the PC. So
you see the monster gets faster as it
| | 02:17 | falls down.
| | 02:20 | Let's look at a few other types of
Easing. Scroll down in Motion Editor, and
| | 02:24 | then add a new Easing type by clicking
that plus icon in the Easing section and
| | 02:29 | then click Bounce, and scroll down
and then you can look at the curves in
| | 02:35 | detail for the Bounce Easing, if you
click in the empty space next to bounce.
| | 02:39 | So you can see that the value goes all
the way up to 100 at frame five, it goes
| | 02:45 | back to on the 0 at about frame nine
and then it does this Bounce effect. Now I
| | 02:50 | am going to scroll up to the top and I
am going to apply the bouncing animation
| | 02:55 | to the Y property by clicking the
drop down menu and choosing Bounce.
| | 03:00 | Notice the Easing curve applied, so
that green dotted line is how the animation
| | 03:04 | is going to work. And if I scrub the
playhead, you can see that in action.
| | 03:09 | Test the movie using Command+Return
on the Mac, Ctrl+Enter on the PC. So it
| | 03:13 | looks like that the monster is
bouncing against near the top of the screen.
| | 03:16 | So using the Motion Editor, you don't
have to be stuck with robotic animation.
| | 03:20 | You can adjust the Easing using
several different built-in easing methods to
| | 03:24 | make your animation a little more
smooth or a little bit more realistic.
| | Collapse this transcript |
| Creating custom easing in the Motion Editor| 00:00 | In this movie, we will look at applying
custom easing to an animation using the
| | 00:04 | Motion Editor. If you are
following along go ahead and open up
| | 00:07 | Custom_Easing.fla from the Chapter
01 folder. You can also just create an
| | 00:11 | animation of something moving downward.
| | 00:15 | Right now, I have Bounce easing
applied to the Y property of my animations.
| | 00:18 | What I am going to do is put in on No
Ease, so that now the animation just
| | 00:23 | moves downward. I am going to zoom out
a little bit to see it little better. So
| | 00:27 | I am going to use the keyboard shortcut
Command+2 on the Mac, Ctrl+2 on the PC
| | 00:31 | and that's the keyboard shortcut for
View > Magnification > Show Frames. So
| | 00:35 | that just makes the Stage go into our
viewable area. Okay, so now let's scroll
| | 00:40 | down, I will remove my Bounce easing
by clicking the minus sign in the Eases
| | 00:44 | section and I will choose Bounce. So
now I no longer have my Bounce easing, I
| | 00:48 | am going to add custom easing by
clicking the plus button in the Eases section
| | 00:51 | and I will choose Custom.
| | 00:53 | Now the great thing about custom
easing is that it has anchor points that you
| | 00:57 | can adjust the handles on and you can
add more anchor points so you have a lot
| | 01:01 | of control over easing here. So I am
going to expand the Custom Easing section
| | 01:06 | by clicking in the blank space for
that easing. So now my custom area is
| | 01:11 | expanded and right now it's just a
straight line going from 0% on frame one to
| | 01:16 | 100% on frame 18.
| | 01:16 | What I am going to do here is use my
custom easing to make the monster jump up
| | 01:23 | and down and I will apply Ease In
when the monster moves down, so it will
| | 01:28 | speed up as it moves down and I will
apply Ease Out on the way up when the
| | 01:32 | monster moves back up.
| | 01:34 | So again I am not going to control
that using keyframes for the Y property, I
| | 01:38 | am going to control that all using my
custom easing. So the first thing I will
| | 01:42 | do is I am going to select the ending
keyframe in my custom easing and I will
| | 01:47 | click and drag it all the way down. So
I have it at 0 the whole way, now I am
| | 01:52 | clicking and dragging in the Bezier
handle so I have a straight line. And if
| | 01:57 | it's not probably straight it doesn't
really matter because we are going to be
| | 02:01 | modifying it a lot in just a minute here.
| | 02:03 | Now what I am going to do is add in a
keyframe at frame nine. So I am going to
| | 02:09 | put my cursor at frame nine, I am
going to hold the Command key on the Mac or
| | 02:12 | Ctrl on the PC until I see a pen with
a plus icon by it. Then I will click
| | 02:17 | there to add a keyframe and now I would
want to do is make this keyframe be at
| | 02:23 | a 100% so the monster will be all the
way down at frame nine. So with that
| | 02:27 | keyframe selected, I am going to click
and drag the slider on the left side of
| | 02:32 | the Motion Editor, all the way to a 100%.
| | 02:34 | You could also just click and drag the
keyframe up but you have to drag it for
| | 02:37 | a little bit longer period of time if
you do that. So I prefer to drag the
| | 02:40 | slider. So now you see how this bell
curve and if I scrub the playhead I am
| | 02:45 | not going to see the animation applied
because I need to apply the easing in a
| | 02:48 | property value. So I will do that
right now and then we will fine-tune our easing.
| | 02:53 | So for the Y property, I will change
the easing to Custom and now you can see
| | 02:58 | the animation curve applied. So instead
of going from the top of the screen to
| | 03:03 | the bottom of the screen at the end,
we have our easing curve applied so it
| | 03:07 | goes to the bottom of the screen
halfway through and then back up to the top of
| | 03:10 | the screen at the end of the animation.
So let's test the movie and see this in action.
| | 03:16 | So now the monster is bouncing up and
down. It looks pretty good, it looks like
| | 03:20 | some easing is applied but what I want
to do is have a more cartoonist effect
| | 03:24 | by exaggerating the animation. So I am
going to scroll down to my Easing area.
| | 03:28 | I will click to expand to my custom
easing and I am going to adjust my curve
| | 03:35 | here. So notice that it is a straight
line from frame one to frame nine here,
| | 03:42 | so I am going to exaggerate that by
clicking and dragging up the handle and
| | 03:46 | notice that the animation moves slower
up; the curve gets a lot steeper around
| | 03:50 | frame five, see that. I told you the
same thing at the end of the animation, to
| | 03:54 | have the monster slow down towards the
end. So I will select that last keyframe
| | 03:59 | and then click and drag that handle to the left.
| | 04:01 | So the animation will go like this
where the monster moves slowly as he is
| | 04:06 | going down then really quickly until
he hits the ground and then bounces back
| | 04:12 | up really quickly and then slows down
as he approaches the top. So let's test
| | 04:16 | the movie now and see this animation
curves in action. Command+Return on the
| | 04:20 | Mac, Ctrl+Enter on the PC. And
there is a lot more realistic with jump.
| | 04:28 | So using custom easing in the Motion
Editor, you can create customize curves to
| | 04:33 | apply the any property in your animations.
| | Collapse this transcript |
| Squashing and stretching with custom easing| 00:00 | One of the basic principles of
animation is something called squash and
| | 00:03 | stretch. In this movie we'll take a
look at how to apply squash and stretch to
| | 00:08 | an animation.
| | 00:09 | To understand squash and stretch I am
going to test the movie here. The file
| | 00:13 | that I am using is Squash_Stretch.fla
in the Chapter 01 folder, so we'll test
| | 00:18 | the movie and we'll watch
the monster moving up and down.
| | 00:20 | You may notice that there is something
that just doesn't feel quite right about
| | 00:25 | this animation, and that's because the
monster doesn't adjust it all when it
| | 00:29 | hits the ground. I'll close the Preview
window. Let's talk about squash and stretch.
| | 00:34 | When the monster hits the ground its
body should contract just a little bit to
| | 00:40 | emphasize the impact of the monster
with the ground. The principle of squash
| | 00:44 | and stretch says basically just as much
as the object contracts vertically, it
| | 00:49 | should expand horizontally. So it
should squash in one dimension and it should
| | 00:54 | stretch in the other dimension.
| | 00:56 | So let's take a look at how to do that
in this movie, and again if you don't
| | 01:00 | have access to Exercise Files you
can just create a simple animation of
| | 01:03 | something moving up and down.
| | 01:05 | Now I remember I am applying custom
easing with a bell curve to make the
| | 01:10 | monster move up and down.
| | 01:12 | What I am going to do is go to Frame 1
and then I am going to scroll up; I am
| | 01:16 | going to remove the easing for my Y
property. And the reason why I am doing
| | 01:21 | this is so that I can adjust squash
and stretch in relation to the monster's
| | 01:25 | position. So what I am going to do is
go to the last frame now and when the
| | 01:31 | monster is at the bottom of the screen
I want it to squash and stretch a little
| | 01:34 | bit. So what I am going to do is go
down to the Transformation area and I am
| | 01:38 | going to make sure that Scale X and
Scale Y are unlinked. So you should see the
| | 01:42 | Unlink icon.
| | 01:43 | Now I am going to click-and-drag Scale
X to scale out the monster to about 125%
| | 01:53 | on the Scale X property, and then I am
going to click-and-drag the Scale Y in
| | 01:56 | the other direction to about 75. So
it's up 25% in Scale X and down 25% in
| | 02:03 | Scale Y. I also don't need any easing
applied at this point. So I am going to
| | 02:07 | turn easing off for all of
the Transformation properties.
| | 02:10 | So we go to no easing, and notice that
when I squash and stretch the monster
| | 02:15 | it's not touching the bottom
anymore that's, because it's squashing and
| | 02:18 | stretching based on its
transformation point which is in the center.
| | 02:22 | So what I am going to do is scroll up
back to the Y property and click-and-drag
| | 02:26 | this Slider on the last frame to move
the monster down so its feet are at the
| | 02:31 | bottom of the Stage.
| | 02:32 | So I basically we have the monster
starting up with no scale applied and then
| | 02:37 | finishing off squashed and
stretched. So that looks good.
| | 02:41 | Now what I am going to do is apply
the Custom easing to the Y position, and
| | 02:46 | then I am going to scroll down, and I
am going to apply that same custom easing
| | 02:51 | to my Transformation properties. So I
am going to click the drop-down for ease
| | 02:55 | for all the Transformation properties
and I'll choose Custom. That will apply
| | 02:59 | my same bell curve to my
squash and stretch animation.
| | 03:04 | So if I scrub the playhead, I'll see
this squash and stretch animation goes
| | 03:08 | along with up and down animation.
So now I'll test the movie using
| | 03:11 | Command+Return on the Mac or Ctrl+8 on the PC.
| | 03:13 | So now here you may notice that the
monster is kind of squashing and stretching
| | 03:18 | a little bit early. You pretty much
don't want any squash and stretch to happen
| | 03:23 | until the monster hits the ground,
because obviously the squash and stretch is
| | 03:28 | to represent the impact of the
ground on the monster. So what I can do is
| | 03:32 | create another Custom Ease specific
to the scale X and scale Y properties.
| | 03:38 | So that is what I am going to do right
here. I am going to scroll down to the
| | 03:41 | bottom and in the Ease's section I am
going to add another Custom Ease, so this
| | 03:45 | is Custom 3, and then I am going to
expand Custom 3, and I am going to apply
| | 03:52 | the same kind of bell curve
that I did for the Custom 2.
| | 03:55 | I am going to drag the keyframe at
the end all the way down bringing the
| | 03:59 | handles on the first and last keyframe
so you have a straight line. I am going
| | 04:04 | to Command-click or Ctrl-click on Frame
9 to create a keyframe. Drag the Slider
| | 04:11 | all the way to 100 to make it 100% there.
| | 04:14 | Now what I am going to do is drag the
handles all the way to the right as far
| | 04:19 | as it'll go on Frame 0, and then to the
left is as far as it'll go on the last frame.
| | 04:27 | Now what I am going to do is going to
create some more keyframes on frames 7
| | 04:32 | and 12. So I am going to Command or
Ctrl-click on Frame 7 and I am going to
| | 04:39 | click-and-drag the keyframe down so
that no squash and stretch will be applied
| | 04:45 | until Frame 8, then I am going to go to
Frame 12 and then I will Command-click
| | 04:51 | to create a Keyframe. Now I'll drag it
all the way down. So now this curve is
| | 04:56 | completely flat and then really
steep between frames 7 and 11.
| | 05:04 | So now what I am going to do is apply
this easing to the squash and stretch. I
| | 05:08 | am going to scroll up and in
transformation I am going to choose my 3-Custom
| | 05:13 | easing and now I'll test the movie
and see that I have a little bit more
| | 05:17 | realistic animation, and that looks
great so I'll close the Preview window.
| | 05:24 | So in the Motion Editor you can create
as many custom eases as you'd like and
| | 05:28 | apply them to different properties to
give your animations a more organic feel.
| | Collapse this transcript |
| Adding shadows| 00:00 | Now we are going to look at adding
shadows to an animation. Here we have our
| | 00:04 | ball monster and it's moving down,
that created a shadow animation. You will
| | 00:10 | notice that the easing is off and the
shadow animation is on a separate layer.
| | 00:15 | Now what to point out is that whenever
you are creating animations using really
| | 00:18 | customized easing, it may be easier
like in this situation to turn off all
| | 00:23 | easing first. So I just have the
monster at the top and at the bottom. So here
| | 00:28 | my shadow is a movie clip that's
pretty simple. I have an Alpha property
| | 00:33 | animating and then I have a Blur filter
that's animating as well and I am also
| | 00:37 | animating its scale.
| | 00:41 | So it scale out a little bit, the
Alpha increases and the Blur lowers. I can
| | 00:49 | easily define how we want the
animation to be at the beginning or when the
| | 00:53 | monsters is up, I can easily define
how I want it to be when the monster is down.
| | 00:57 | So I have my animation created and
now all I have to do is apply my Custom
| | 01:01 | easing. So in this file, I actually
have the Custom easing created, so I'll
| | 01:04 | select the animation frames, to the
Motion Editor and then apply Custom easing
| | 01:09 | for basic motion and that's 2-Custom
and for transformation I am going to apply
| | 01:14 | 3-Custom. Then I'll go back to the
Timeline, select the animation on the shadow
| | 01:19 | layer, go to the Motion Editor and I am
going to apply some Custom easing that
| | 01:24 | I created which is a really sharp bell
curve to the Filters properties that's
| | 01:30 | 2-Custom, Alpha property and
the Transformation properties.
| | 01:36 | Now it has got the playhead and with
the easing applied the monster moves down
| | 01:42 | and jumps back up, and notice that the
shadow looks correct when the monster is
| | 01:45 | down. I'll test the movie to see
everything in action. So now there is the
| | 01:51 | shadow applied as the monster jumps.
| | 01:54 | So if you ever want to add shadows or
other effects to an animation, you might
| | 01:58 | want to turn off any easing that's
applied to the animation and then you can
| | 02:01 | modify the animation based on
the start and end properties.
| | Collapse this transcript |
| Encapsulating animations| 00:00 | One of the things you can do in Flash
is take an animation on the Timeline and
| | 00:04 | encapsulate that animation inside of a
movie clip. The thing that's powerful
| | 00:08 | that encapsulated animations is it
allows you to put animation and layers
| | 00:13 | inside of a container that you can
easily move around or scale or rotate or
| | 00:18 | duplicate.
| | 00:19 | In this movie, we'll take a look at how
to do that. If you are following along
| | 00:22 | go ahead and open up Encapsulating_
Animations.fla in the Chapter 01 folder.
| | 00:27 | What I am going to do here is I am
going to take the animation layer and the
| | 00:33 | shadow layer and combine them into a
movie clip. What I am going to do is make
| | 00:39 | sure all frames are deselected by
clicking in the gray area at the bottom of
| | 00:42 | the Timeline. Now I am going to
select the animation frames and then
| | 00:45 | Shift-click the shadow frames to
select all of the animation frames.
| | 00:53 | With all the frames selected, I'm
going to right-click my selection and I am
| | 00:58 | going to choose Cut Frames. Notice
that there is no animation on these frames
| | 01:04 | anymore and then what I am going to
do is go to the Insert, New Symbol, or
| | 01:09 | Command+F8 or Ctrl+F8 is the keyboard
shortcut. For the symbol name, I am going
| | 01:12 | to type Animation with a capital A,
and then I'll click OK. Now I am going to
| | 01:17 | right-click or Ctrl-click in the first
frame of Layer 1 in the Timeline, when I
| | 01:22 | am inside the animation movie clip and
then I'll choose Paste Frames. Notice
| | 01:28 | the names of the layers are
pasted and all the frames are pasted.
| | 01:32 | So now when I go back to Scene 1, I can
drag that animation from the Library on
| | 01:37 | at the Stage. I am going to delete
the shadow layer and then click and drag
| | 01:42 | outside of all the frames all the way
up to frame 2 so I select arrange of
| | 01:48 | frames. So I make sure that every frame
between frame 2 and the last frame all
| | 01:53 | my animations are selected and I'll
press Shift+F5 on my keyboard and that will
| | 01:57 | remove all of those frames.
| | 01:59 | I just have one frame in my application
now. So now what I am going to do is go
| | 02:03 | to the Library and then click and
drag some instances of my animation movie
| | 02:08 | clip on at the Stage and to make it
look it little bit different, I am going to
| | 02:12 | change the size and positions of them.
So I am going to use the Free Transform
| | 02:16 | tool and scale in some of them just to
give this application a little bit more
| | 02:23 | depth, and then I'll test the
movie to preview the animation.
| | 02:32 | So with an animation encapsulated
inside of a movie clip, you can easily reuse
| | 02:37 | that as many times as you want.
| | Collapse this transcript |
| Randomizing animations with graphic symbols| 00:00 | In this movie we'll look at powerful
way that you can recycle movie clips by
| | 00:03 | converting them to graphics symbols.
If you are following along you can open up
| | 00:08 | Graphic_Symbols.fla from the Chapter_01
folder. You can also just create a few
| | 00:13 | different movie clips on the Stage that
contain animations. If I test the movie
| | 00:18 | you'll see a bunch of monster
jumping down at the exact same time.
| | 00:21 | So let's say I wanted to mix up this
starting frame of the animation of these
| | 00:26 | monsters. One of the easiest ways to
do that is by using graphics symbols
| | 00:31 | instead of movie clips. But I have
already used movie clip so that it can have
| | 00:34 | animations on one frame, but one
thing you can do in Flash is tell Flash to
| | 00:39 | treat a symbol as another symbol type.
| | 00:42 | So what I am going to do is I am going
to select one of the animations, I'll
| | 00:46 | select the one on the right, I'll go
to Properties inspector and there is a
| | 00:50 | drop down that says Movie Clip and
that's what type Flash is treating the
| | 00:54 | symbol as. I am going to click the
drop down and change it to Graphic.
| | 00:58 | Now keep in mind that I am not
changing the symbols type, I am just changing
| | 01:01 | the instance type that Flash would
treat this object as. The great thing about
| | 01:05 | graphics symbols is that you can
control the frame of the graphic symbol starts
| | 01:09 | on. So what I am going to do is open up
the Looping drop down in the Properties
| | 01:13 | inspector and I am going to leave the
option set to Loop. Instead of the first
| | 01:16 | frame being Frame 1, you can have the
first frame be Frame 6, so now the one on
| | 01:23 | the right starts at the 6th frame.
Then what I am going to do is select the
| | 01:27 | monster on left, set it to Graphic
have its first frame be Frame 12. I'll
| | 01:34 | select the monster in the middle,
change it to a graphic have its frame be Frame 1.
| | 01:41 | So now I have randomized to just a
little bit and what you need to do with
| | 01:46 | graphic symbols is extend the main
timeline to accommodate the frames and the
| | 01:50 | symbol. So I am going to do is select
frame 18, because I know that there are
| | 01:54 | 18 frames in my animation. Now I'll
press F5 on my keyboard to extend the
| | 01:58 | timeline to that point. Now I'll test
the movie and preview the animation. Now
| | 02:04 | the monsters are all jumping at different time.
| | 02:08 | So by treating movie clips as
graphics symbols, you can get a sense of
| | 02:12 | randomness to your animations instead
of having all the animations playing unison.
| | Collapse this transcript |
| Stretching animations| 00:00 | Flash CS4 allow you to stretch the
time of an animation. If you are following
| | 00:05 | along you can open up Stretching_Frame.
fla from the Chapter_01 folder or you
| | 00:10 | can create an animation on the Stage.
So here I have an 18 frame animation of a
| | 00:15 | monster jumping up and down. I'll test
the movie to preview it in the Flash Player
| | 00:18 | and now I'll close the Preview window.
| | 00:21 | Let's say this animation looks great
but it's just a little bit too fast and I
| | 00:27 | want to slow it down a little bit. So
let's say I want to play the animation
| | 00:30 | over 24 frames instead of 18 frames.
All you have to do is hover your cursor
| | 00:36 | over the frames that you want to
extend so I am over the very end of the
| | 00:41 | animation frames. Notice my cursor
updates to show arrows that face the left
| | 00:46 | and right. So if I click and drag there,
I am going to extend the animations to
| | 00:50 | 24 frames or however many frames I want,
I'll do the same thing for the shadow layer.
| | 00:56 | Now if I test the movie the animation
is exactly the same but its 24 frames
| | 01:01 | long instead of 18. And this also
works in the other way. Let's say the
| | 01:06 | animations before was a little bit
too slow and I wanted to make it in 12
| | 01:10 | frames instead of 18 frames, so I am
going to click and drag to make the
| | 01:15 | animation 12 frames long in both layers,
I'll test the movie and there it is.
| | 01:22 | So by simply clicking and dragging at
the last frames in the motion tween you
| | 01:26 | can stretch the length of the animations to
as many or as few frames as you would like.
| | Collapse this transcript |
| Saving for previous versions of Flash| 00:00 | Now let's say that you created an
animation using the Motion Editor and you
| | 00:04 | wanted to share that animation with
somebody that is using Flash CS3. In order
| | 00:09 | to do that all you have to do is choose
File > Save As and then for the format
| | 00:16 | you choose Flash CS3.
| | 00:18 | So now let's say I wanted to call this
file, Saving_FLCS3. So I have saved it
| | 00:23 | in the Chapter_01 folder then I'll
click Save As, I'll see a message that says
| | 00:27 | this file contains the following data
that will be lost if saved in the Flash
| | 00:30 | CS3 format: XMP File Info dialog's
and metadata and Motion Objects. Basically
| | 00:37 | what this means is that we can't save
the animation for Flash CS3, because
| | 00:42 | Flash CS3 doesn't support
to this motion tween model.
| | 00:45 | So what I am going to do is first
Cancel and I am going to a cancel saving the
| | 00:49 | file altogether. I am going to show
you how to convert your animation to a
| | 00:53 | format that Flash CS3 and even other
versions of Flash will accept. To do that
| | 00:58 | Right-click or Ctrl-click the motion
tween in the timeline and then choose
| | 01:02 | Convert to Frame by Frame Animation,
so I'll do that for the animation layer
| | 01:07 | and for the shadow layer.
| | 01:09 | Now I use the tweening model to
create the frame by frame animation that is
| | 01:13 | acceptable by other versions of Flash.
So now if I choose File > Save As, and
| | 01:20 | then I choose Flash CS3 Document and
I name the file Saving_FLCS3 and click
| | 01:27 | Save As. Then I only see the XMP File
Info dialog's metadata as the data that
| | 01:34 | won't transfer when it goes to Flash
CS3. So I'll click Save As Flash CS3 and
| | 01:39 | now I have a file that
can be opened in Flash CS3.
| | 01:41 | So by converting motion tweens to
keyframes you can utilize features of Flash
| | 01:46 | CS4 and still be able to open the
files in previous versions of Flash.
| | Collapse this transcript |
| Converting animations to ActionScript code| 00:00 | In Flash CS4 you can copy motion
tween data as ActionScript 3.0 code.
| | 00:07 | The reason why that is useful is
because it allows you to apply animations to
| | 00:12 | multiple objects while the Flash movie
is playing. In this movie we'll take a
| | 00:18 | look at how to do that and before we
start I just want you to be aware that
| | 00:22 | this is really going to be of most use
to people who already know and work with
| | 00:25 | ActionScript code.
| | 00:27 | If you are following along go ahead
and open up ActionScript_Animation.fla in
| | 00:31 | the Chapter 01 folder. If you don't
have the exercise files just create a
| | 00:34 | motion tween on the Stage. So what
I am going to do is right-click or
| | 00:38 | Ctrl-click my motion tween and then
I'll choose Copy Motion As ActionScript
| | 00:44 | 3.0. Now the ActionScript 3.0 code is
in the pasteboard so what I am going to
| | 00:50 | do is create a new layer, I am going to
name the new layer actions, I am going
| | 00:54 | to select the first frame of the
actions layer and open up the Actions panel by
| | 00:59 | choosing Window > Actions.
| | 01:02 | In the Actions panel I am going to
press Command+V on the Mac or Ctrl+V on the
| | 01:05 | PC to paste the code that Flash
copied for me. You'll notice that when you
| | 01:11 | paste the code in Actions panel there
is a lot of code. This code contains all
| | 01:15 | the information about your animation.
| | 01:19 | If you want to apply this animation to
another object you need to uncomment the
| | 01:23 | code, which in my code is on lines 38.
It's the one that has the word addTarget
| | 01:29 | in it. Now before we do that I am going
to create another instance on the Stage
| | 01:33 | so I am going to close the Actions
panel, I'll delete the animation layer and
| | 01:37 | I'll create a new layer and in the new
layer I am going to drag an instance of
| | 01:41 | the monster on to the Stage.
| | 01:44 | Now what I am going to need to do is
giving instance name to the monster so
| | 01:47 | this is going to be a movie clip. So
I'll select the monster, go to Properties
| | 01:51 | inspector and give it in an instance
name by clicking on the Instance Name
| | 01:55 | field and I'll called this, monster,
all lower case. Now I'll go back to the
| | 02:00 | Actions panel. I'll select the first
keyframe of the actions layer and then
| | 02:04 | press Options+F9 on the Mac or F9 on
the PC to open the Actions panel. Now I am
| | 02:09 | going to go to line 38 in my code.
Remember it's the one which says addTarget
| | 02:13 | and then I am going to delete the two
forward slashes at the beginning of the code.
| | 02:17 | Forward slashes in ActionScript
indicate a comment or it disables a line of
| | 02:21 | code from being run in the Flash Player.
So by deleting the forward slashes we
| | 02:26 | are causing this block of code to run.
The area that we're really concerned
| | 02:29 | with is the brackets and instance name
goes here so I am going to select all of
| | 02:34 | that, I am going to delete it and I am
going to replace that with the instance
| | 02:38 | name of the monster on the Stage which
is just monster. Then from there we have
| | 02:43 | a number, which is 0 right now, which
identifies how many times the animations
| | 02:48 | will play. So I'm going to leave that
at 0 for now and I am going to test the
| | 02:51 | animation in the Flash Player.
And there is the bouncing monster.
| | 02:59 | Now the great thing about this feature
is that you can apply this to as many
| | 03:03 | audits as you want when you create them
using ActionScript. So all you have you
| | 03:07 | do to copy an animation and apply
with ActionScript is right-click or
| | 03:11 | Ctrl-click the animation in the
timeline, choose to copy the motion as
| | 03:15 | ActionScript 3.0 and uncomment the addTarget
line and put you instance name in the parenthesis.
| | Collapse this transcript |
|
|
2. Adding Realism and 3D ElementsAdding a perspective shadow| 00:00 | In this chapter we are going to look
at adding realistic and 3D effects to
| | 00:04 | Flash animations. We'll start by adding
a perspective shadow to the scene here.
| | 00:09 | If you are following along go ahead and
open up Perspective_Shadow.fla from the
| | 00:13 | Chapter 02 folder. You can also just
use any movie clip for this exercise.
| | 00:18 | So here I have a monster and then I have
a land in the background and the shadow
| | 00:23 | layer that's empty.
| | 00:24 | The monster is a movie clip, what I am
going to do to create the shadow is copy
| | 00:31 | the monster layer. So I am going to
press Command+C on the Mac or Ctrl+C on the
| | 00:34 | PC and then I'll select the shadow
layer and then paste that art work using the
| | 00:39 | keyboard shortcut, Shift+Command+V
on the Mac, Shift+Ctrl+V on the PC and
| | 00:44 | that's the keyboard shortcut to Paste
in Place, that means paste an object to
| | 00:48 | exactly from where you copied it.
| | 00:51 | So I am going to lock and hide the
monster layer and so now I am just looking
| | 00:57 | at the shadow. Notice that the
artwork on the Stage didn't really change,
| | 01:01 | because the monster layer and the
shadow layer contained the exact same art
| | 01:04 | work. So I am going to use the free
transform tool, I am going to scale the
| | 01:08 | monster down a little bit.
| | 01:10 | Notice when I pull down, both the top
and the bottom scale. What I want is just
| | 01:15 | the top to go down. I want the bottom
to anchor. So I am going to hold Option
| | 01:19 | on my keyboard, which is on the Mac by
the way Alt, and then the bottom will
| | 01:24 | anchor. So scale down the monster a
little bit then I am going to skew the
| | 01:30 | monster by clicking and dragging in any
of the lines between the handles at the
| | 01:35 | top and notice that the bottom skews
as well. So if I hold that Option or Alt
| | 01:39 | key I can anchor the bottom.
| | 01:41 | So I am going to move the monster a
little bit to the left and now I am going
| | 01:47 | to create a shadow. I'll do that by
applying a filter, so I have my movie clip
| | 01:52 | selected in the filters area in the
Properties inspector. I'll click the Add
| | 01:56 | filter button and then choose
to add a Drop Shadow filter.
| | 01:59 | The first thing I am going to do is
hide the actual object so I am going to
| | 02:03 | check the Hide Object box and the
monster will disappear, I'll just be left
| | 02:07 | with that shadow. I am also going to
adjust the distance to 0 pixels. I'll
| | 02:13 | click in the distance field, press 0
and then Enter to accept the change. This
| | 02:18 | is just, because I want to shadow
exactly where I set it up initially. Now if I
| | 02:21 | show the monster you can
begin to see the shadow effect.
| | 02:25 | Now let's refine the shadow, I'll
select the Shadow and I am going to scroll
| | 02:30 | down in the Properties inspector and
adjust the Strength of it a little bit. I
| | 02:34 | am going to bring it down to about 40%
and then what I am going to do is adjust
| | 02:41 | the blur a little bit. I am going
to bring the blur up to 8 pixels.
| | 02:45 | The reason why I wanted to 8 pixels
instead of that maybe 10 is, because blurs
| | 02:50 | and other filters are greatly optimized
at multiples of four. So by doing four,
| | 02:55 | eight, 12 etcetera, the filters will
be process to lot better they will at
| | 02:59 | different values. So that shadow is
looking good and maybe I want to scale it
| | 03:03 | down a little bit more so I am going to
click and drag the middle handle at the
| | 03:06 | top holding Options on my keyboard.
I'll scale it down just a little bit.
| | 03:11 | There's my perspective shadow. I'll test
the movie to Preview in the Flash Player
| | 03:14 | now, Command+Enter on the Mac, Ctrl+
Enter on the PC. Now I have added a more
| | 03:19 | realistic 3D effect to my monster.
| | 03:21 | So if you want to add a 3D effect you
can go for a perspective shadow rather
| | 03:26 | than a regular drop shadow and all
you have to do to create the perspective
| | 03:29 | shadow is copy the movie clip that
you are creating the shadow for and then
| | 03:32 | scale it, skew it, apply the drop
shadow and hide the object. Adding a
| | 03:37 | perspective shadow can
really make your artwork pop.
| | Collapse this transcript |
| Nesting animations| 00:00 | In this movie, we will look at nesting
an animation to make the monster's claw open
| | 00:04 | and then snap shut. If you are
following along, go ahead and open up
| | 00:08 | Nesting_Animations.fla from the Chapter_02
folder. You can also just create any
| | 00:13 | movie clip on the Stage. Double-click
the monster to enter its timeline and
| | 00:17 | then we will take a look at the
monster's timeline. It has three layers:
| | 00:20 | Left Claw, the Monster
layer and the Left Arm layer.
| | 00:24 | The left claw layer is a movie clip.
It's an instance of LeftClaw. Now I will
| | 00:29 | double-click the Left Claw movie clip
to enter its timeline. Inside of the Left
| | 00:34 | Claw movie clip, there are two
movie clips. One of them is called the
| | 00:38 | RightSide, which is the right side of
the claw and the other one is called
| | 00:41 | LeftSide, which is the left side of the claw.
| | 00:43 | What we want to do is animate these
rotating open. But if I rotate them right
| | 00:47 | now, they hinge around the center.
That's because of the circular area called
| | 00:52 | the Transformation Point. When you
select and armed it with the Free Transform
| | 00:56 | tool or multiple objects, you will see
a transform point or a little circle in
| | 01:01 | the center of that object.
| | 01:02 | If you move that transformation point,
then you can redefine what axis you can
| | 01:06 | rotate around when you rotate the
object. So I will move the Transformation
| | 01:10 | Point on the left claw to the bottom
right of the claw. Now when I rotate the
| | 01:15 | left claw it hinges around
that transformation point.
| | 01:19 | So I will open the claw a little bit
and then I will select the right claw and
| | 01:23 | I will do the same thing. So I will
move the transformation point down to the
| | 01:26 | bottom and then open the claw just a
little bit. Noticed that there is a little
| | 01:31 | bit of a gap in between the two claws.
| | 01:33 | I am going to select the right claw and
then use my keyboard, pressing the Left
| | 01:38 | Arrow to close that gap. Now I am
ready to create a motion tween animation. I
| | 01:43 | will do that by selecting the right
claw, right-clicking and choosing Create
| | 01:48 | Motion Tween.
| | 01:49 | Now you may not be familiar with this
method, as you may have only created
| | 01:52 | motion tweens on the timeline. This
method allows you to create motion tweens
| | 01:55 | based on objects. So you can just
Right-click or Ctrl-click any symbol and
| | 01:59 | choose Create Motion Tween like this
and first we will create a motion tween
| | 02:02 | just like you would on the timeline.
| | 02:03 | So I will go back to frame one, Right-
click or Ctrl-click the left claw and
| | 02:09 | then select Create Motion Tween. So now
I have two open claws here. Now what I
| | 02:14 | want to do here is create Property
Keyframes for the rotation properties on the
| | 02:18 | last keyframe of this animation for
both claws. Because I actually want to
| | 02:23 | start out the animation with the claw
closed then have it opened and a kind of
| | 02:27 | snap shot at the beginning.
| | 02:28 | So what I am going to do is Right-click
or Ctrl-click the last frame on Layer 2
| | 02:33 | and then choose Insert Keyframe Rotation.
I will do the same thing for the last
| | 02:39 | keyframe of Layer 1. Right-click or Ctrl
-click, Insert Keyframe > Rotation. Now
| | 02:45 | I will go back to frame one and then I
have to find what the claw looks like
| | 02:50 | when it's closed.
| | 02:51 | So I will select the left side, rotate
it in, select the right side rotate it in.
| | 02:58 | Everything looks good. Scrub the
playhead to preview the animation and
| | 03:04 | that looks nice and fancy. So I will
test the movie using Command+Return or
| | 03:08 | Ctrl+Enter and see the animation works.
It just a little bit robotic.
| | 03:13 | So we'll add some easing to make
it feel little bit more natural.
| | 03:16 | I am going to add ease in so the claw
will shut and then slowly open at first
| | 03:22 | and then quickly open towards the end.
To do that I will select the tween in
| | 03:26 | Layer 2, jump over to the Motion Editor
and for my Basic Motion, I will set the
| | 03:32 | easing to Simple (Slow). With that
easing set, I will scroll down and define my
| | 03:38 | Simple (Slow) ease. I will do that by
dragging the slider all the way to the
| | 03:43 | left. So I want a value of -100
because remember I want the animation to be
| | 03:46 | slow at the beginning and faster at
the end. So that's ease in or a negative value.
| | 03:51 | Let's do the same thing for the other
claw. Jump over the timeline, select the
| | 03:56 | Layer 1 tween. Go to the Motion Editor,
define the easing for Basic Motion as
| | 04:02 | Simple (Slow), then set the Simple (Slow)
easing to Ease In. Now let's test the movie.
| | 04:08 | We will preview the more realistic
animation. Command+Return on the Mac,
| | 04:11 | Ctrl+Enter on the PC and
there is our animation in action.
| | 04:18 | So now I will close the Preview Window.
So by nesting animations and adding
| | 04:22 | easing you can add more realistic
motion effects to your animations.
| | Collapse this transcript |
| Syncing audio| 00:00 | In this file here I have an animation
of a claw closing really sharply. I will
| | 00:05 | test the movie to show you. Command+
Return on the Mac, Ctrl+Enter on the PC.
| | 00:09 | What I am going to do in this demo
is show you how to sync sound with the
| | 00:14 | animation to make the animation a
little more powerful and have a snapping
| | 00:18 | sound when the claw closes.
| | 00:20 | If you are following along, go ahead
and open up Syncing_Audio.fla from the
| | 00:24 | Chapter 2 folder. You can also just
use any movie clip for this exercise.
| | 00:28 | We'll double-click the monster on the Stage
and then double-click the LeftClaw movie
| | 00:32 | click to enter LeftClaw timeline. So
here we have an animation and on frame 1,
| | 00:39 | the claw is closed.
| | 00:41 | So I will create a new layer and I will
call it Sound, then I am going to drag
| | 00:46 | a sound into this layer. To do that, I
will go to the Library and then click
| | 00:51 | and drag Lobster2.mp3 from the Library
on to the Stage in the sound layer.
| | 00:56 | We'll then see the sound in the timeline.
I'm going to select the keyframe where the
| | 01:00 | sound starts, go the Property inspector
and change the Sync property to Stream.
| | 01:06 | Mine is actually already set at Stream
but make sure to change yours to Stream
| | 01:10 | if not at Stream already.
| | 01:11 | Stream is really the best for syncing
any kind of audio. So that's what I am
| | 01:14 | doing here since I am using a streaming
sound. Now I am going to test the movie
| | 01:17 | right now and when I do you may
noticed that you hear the sound overlapping
| | 01:21 | with another similar sound.
I will test the movie now.
| | 01:25 | (Snap, snap, snap, snap, snap, snap.)
| | 01:33 | I'll let the animation run a few times
so that you can hear the sounds kind of
| | 01:37 | overlapping. If you can't hear it on
the movie, you may be able to hear it on
| | 01:41 | your screen in Flash. The reason why the
problem is happening is because we have a
| | 01:45 | movie clip that's duplicated.
| | 01:47 | If I go to the main timeline by
clicking on Scene 1, you will see a shadow on
| | 01:50 | the Stage. This shadow is actually a
duplicate of the drippy monster movie
| | 01:55 | clip. So what I am going to do is
remove the sound from the shadow movie clip
| | 02:00 | and to do that, I am going to need
to follow kind of a procedure here.
| | 02:04 | So I will lock the monster layer and
unlock the shadow layer. The first thing I
| | 02:08 | am going to do is right-click or Ctrl-
click the shadow and then choose Swap
| | 02:12 | Symbol. Here we can swap this symbol
out with another symbol. Now we don't have
| | 02:17 | another symbol and it doesn't have sound.
But what I am going to do is create a
| | 02:20 | duplicate of the Drippy Monster symbol
here. So I will select DrippyMonster in
| | 02:24 | the Swap Symbol dialog and then
click the Duplicate Symbol button.
| | 02:28 | I will name the new symbol
DrippyMonsterNoSound. Click OK and then I will
| | 02:36 | choose that movie clip and click OK. If
you test the movie, you are still going
| | 02:40 | to hear the same problem. That's
because we need to actually remove the sound
| | 02:43 | from the left claw movie clip.
| | 02:45 | So I am going to double click the
shadow to enter its timeline and then there
| | 02:48 | is the left claw there. Remember, again
I am in DrippyMonsterNoSound this time
| | 02:53 | and we will do the same Swap Symbol
technique for this movie clip and then
| | 02:56 | create a copy that doesn't have any sound.
| | 02:59 | So I will right-click the movie clip,
choose Swap Symbol, select LeftClaw,
| | 03:05 | click the Duplicate Symbol button,
name the symbol LeftClawNoSound, click OK.
| | 03:14 | Select LeftClawNoSound in the Swap
Symbol dialog and then click OK to accept
| | 03:20 | and now I am going to double-click the
left claw on Stage. That should bring me
| | 03:24 | inside of the LeftClawNoSound movie clip.
| | 03:27 | So now what I am going to do is
delete the sound layer in this movie clip.
| | 03:30 | Select the Sound layer, click the
Deleter Layer button to delete it and
| | 03:35 | now I have removed the sound from the
shadow but not the original movie clip
| | 03:40 | and I did that by copying the shadow
symbols, then removing the sound in the
| | 03:44 | symbol copy, not the original.
| | 03:47 | If I test the movie, you won't hear
the same problem. Command+Return on the
| | 03:50 | Mac, Ctrl+Enter on the PC.
| | 03:52 | (Snap, snap, snap, snap.)
| | 03:56 | So remember, if you ever
want to take sound out of
| | 03:59 | the instance that you are duplicating,
you can create a duplicate symbol and
| | 04:03 | take the sound out of the duplicate
and leave the original movie clip intact.
| | Collapse this transcript |
| Adding 3D rotation| 00:00 | Now we will look at adding 3D rotation
to our animation. If you are following
| | 00:04 | along open up Adding_3D.fla from the
Chapter 2 folder. You can also just use
| | 00:10 | any movie clip to follow along. I am
going to double click the monster on the
| | 00:13 | Stage to enter its timeline and then we
will apply the 3D to the left claw then
| | 00:19 | left arm layers.
| | 00:21 | The first thing I will do is extend
the timeline a little bit. Going to go to
| | 00:25 | frame 24 and I will click and drag
from frame 24 in the Left Claw all the way
| | 00:30 | down to frame 24 in the Left Arm layer
and I will press F5 on my keyboard to
| | 00:34 | extend the timeline. I will create
a motion tween for the left claw by
| | 00:38 | right-clicking in the timeline, which
is in Create Motion Tween. I will do the
| | 00:42 | same thing for the Left Arm. Right-
click or Ctrl-click, Create Motion Tween.
| | 00:47 | Now I am getting this message here
that says, the selected item cannot be
| | 00:50 | tweened. So I am going to cancel that.
Basically it just saying that I am not
| | 00:52 | working with the symbol but rather I
am working with a group or a shape. So I
| | 00:56 | am going to select the object
and sure enough it's a group.
| | 00:58 | So I will convert it to a movie clip
with F8 on my keyboard and I will call
| | 01:02 | this LeftArm. Now that's a symbol. I
can motion tween it by Right-clicking and
| | 01:08 | choosing Create Motion Tween. Now what
I will do is go to frame one and use the
| | 01:12 | 3D Rotation tool to rotate the claw
little bit forward. That looks good. Then I
| | 01:20 | will move it down a little bit with
the Selection tool and then I will select
| | 01:24 | the arm and then do the same thing.
| | 01:26 | So using the 3D Rotation tool, I will
rotate it a little bit and by the way I
| | 01:30 | am clicking and dragging the orange
circle which is kind of the omni rotation.
| | 01:34 | So I can rotate on all axes at once. So
I will rotate it a little bit and move
| | 01:44 | it down, into the side a
little bit and that looks good.
| | 01:48 | Now I will go to frame 24 and I will
finish the animation by moving the claw in
| | 01:54 | front of the monster's face and I will
rotate it a little bit more with the 3D
| | 01:58 | Rotation tool. I will move it down a
little bit and then I will select the arm
| | 02:07 | and I will do the same thing.
| | 02:08 | So I am going to rotate it and just
make sure that it's at the right angle and
| | 02:18 | then I will move it so that it looks
connected to the claw. Now if I test the
| | 02:23 | movie, I can preview the animation.
Command+Return on the Mac, Ctrl+Enter on the PC.
| | 02:29 | (Snap, snap, snap, snap.)
| | 02:33 | Now it looks a little bit
like the arm is showing behind the claw,
| | 02:36 | which I don't want to happen.
| | 02:37 | So I am going to kind of fine tune that
just a little bit and move the claw up
| | 02:43 | on frame one, to the right a little
bit and then I will test the movie again.
| | 02:52 | (Snap, snap, snap, snap, snap, snap, snap.)
| | 02:59 | And that looks good. So I will close
the Preview Window and now I am going to
| | 03:03 | do is make the animation
loop by using animation curves.
| | 03:06 | I am going to create a bell curve that
will make the animation go forward and
| | 03:10 | then in reverse. To do that I will
select the Left Claw animation. Go to the
| | 03:13 | Motion Editor, then I will create a
custom curve. I will click the plus button in
| | 03:18 | the Eases section to add a Custom Ease.
I will click and drag the viewable
| | 03:22 | frame slider so I can see all the
frames for my animation and expand my custom
| | 03:27 | ease a little bit.
| | 03:27 | I will need to do a little bit more
room in the Motion Editor. So I am going to
| | 03:31 | pull it up just a little bit. I will
select the last control point for my
| | 03:35 | custom ease. So at first I will move
the playhead to the last frame. Then I
| | 03:38 | will click on that last control point
and drag the slider all the way down to
| | 03:42 | zero. Bring the handles in just a
little bit and then I will add a new control
| | 03:50 | point at the 12th frame.
| | 03:52 | So I will hold Command on my keyboard,
that's Ctrl on the PC and then click in
| | 03:56 | the 12th frame to add a control point.
I will drag the slider all the way up to
| | 04:01 | 100 for this one. So the animation
will start at 0%, go to a 100% and then go
| | 04:07 | back to 0%. I will drag the handles
in just a little bit to start out the
| | 04:14 | animation a little bit more slowly and
then I will apply the curve to my basic
| | 04:18 | motion. I will click the Easing drop-
down and then choose my Custom Ease.
| | 04:22 | Now all I have to do the same thing
for the arm animation. So we go to the
| | 04:26 | timeline, select the Arm, click on
the animation, move over to the Motion
| | 04:31 | Editor. In the Motion Editor, I will
follow the same process. So I will create
| | 04:35 | a new Custom Ease and then I will
expand the ease area. Go to the last frame,
| | 04:42 | click on the control point, drag it
down to zero. Adjust the handles. Add a new
| | 04:51 | control point at frame 12.
| | 04:53 | Remember, I am holding Command on my
keyboard and Ctrl on the PC and clicking
| | 04:57 | that frame 12 to add one there. Drag
that up to the top. Click and drag the
| | 05:03 | control points in and then apply the
custom ease to basic motion using the Ease
| | 05:09 | drop-down. Now I will test the movie
and watch the animation play forward and
| | 05:15 | then reverse. Command+Return on
the Mac, Ctrl+Enter on the PC.
| | 05:19 | (Snap, snap, snap, snap, snap.)
| | 05:24 | Now I will close the Preview window
and there is our animation with 3D
| | 05:28 | Rotation. So by animating 3D rotation
you can add more realistic effects to
| | 05:33 | your animation. Now remember that you
can apply curve to a 3D animation just
| | 05:37 | like any other animation.
| | Collapse this transcript |
| Using 3D layers| 00:00 | In this movie we will look at using
3D in layers to create a moving camera
| | 00:05 | effect. If you are following along, go
ahead and open up Moving_Camera.fla from
| | 00:11 | the Chapter_02 folder. If you don't
have the exercise files, just create a few
| | 00:16 | movie clips and put them on different
layers. I am going to test the movie to
| | 00:21 | see what we have so far, Command+Enter
on the Mac, Ctrl+Enter on the PC.
| | 00:26 | So the elements are moving forward
and we have a 3D effect.
| | 00:30 | Notice that the can in the left who
wasn't moving forward. That's all we are
| | 00:33 | going to do here. When you want to
create a 3D effect like this, it's really
| | 00:39 | easy in Flash because you can use the
3D tools. All you needed to do to get
| | 00:43 | that 3D effect is move the elements
that are more forward, further forward or
| | 00:49 | faster than the elements that are behind them.
| | 00:52 | So this can here just needs to move a
little further forward than every other
| | 00:56 | element. So what I am going to do
is create a motion tween here from
| | 01:01 | right-clicking or Ctrl-clicking
and choosing Create Motion Tween in the
| | 01:04 | monster layer and then what I am going
to do is move the animation frame where
| | 01:11 | all the animated elements
stops. So that's about Frame 150.
| | 01:15 | So at frame 150 I am going to select
the can in this Stage and then I am going
| | 01:20 | to adjust its 3D position in the
Property inspector. So I am going to click and
| | 01:24 | drag that Z slider to the left until
the can is really up close. About
| | 01:29 | -400 should do. Let's test the movie
and preview the whole animation
| | 01:37 | And that looks good.
| | 01:39 | So whenever you want to add a 3D
camera effect, organize your content into
| | 01:43 | layers and animate the Z positioning of
all the objects, moving the objects in
| | 01:49 | front more than those in back.
| | Collapse this transcript |
|
|
3. Mastering BonesAnimating a bone system| 00:00 | In this movie we will look at animating
bone systems. On the Stage here I have
| | 00:05 | a spider and, by the way, if you
are following along you can open up
| | 00:07 | Animating_Bones.fla from the Chapter_
03 folder. You can also just create a
| | 00:11 | spider type movie clip on the Stage.
| | 00:14 | So I am going to double click the
movie clip, and here we have three layers:
| | 00:17 | body, and legs, and shadow. So let's
take a look at the legs. The legs are
| | 00:24 | actually instances of the same movie clips
and that movie clip is called "Leg Animation."
| | 00:31 | So now we are going to do is animate
the leg inside of that movie clip and that
| | 00:37 | animation will apply to all the legs
of the spider. So I am going to double
| | 00:41 | click the leg in the front. Now I am
going to use the Zoom tool, zoom-in and I
| | 00:45 | am going to create an Armature
animation. To do that, the first thing I am
| | 00:50 | going to do is use the Bone tool
and then define my bone system.
| | 00:54 | So I am going to start from the inside
of the leg where its connected to the
| | 00:57 | body, click and drag to where the leg
bends and then I am going to click and
| | 01:04 | drag again to basically the foot area.
So now I have two layers. I am going to
| | 01:10 | delete the empty layer and I
have my Armature layer here.
| | 01:13 | Now what I will do is animate the
Armature. So you are going to go to Frame 5
| | 01:19 | and then I am going to use the
Selection tool and then click and drag to move
| | 01:25 | the bone. Notice here that the bone is
kind of misaligned, what I am going to
| | 01:31 | do is move the first bone up a
little bit and then I am going to hold the
| | 01:35 | Command key and then I can move the leg bone.
| | 01:42 | Also what I am going to do is hold the
Command key and move the big leg bone
| | 01:46 | out to the left a little bit. So, of
course, to make up for that I'll need to
| | 01:50 | move this smaller leg bones as well,
okay. So there I have my animation and
| | 01:58 | then I am going to make the
animation of the leg coming back in.
| | 02:03 | So I am going to go to Frame 8. I am
going to bend the leg back up in a little.
| | 02:09 | I am going to hold Command on my
keyboard and that is Ctrl on the PC and then
| | 02:14 | move the leg in. Then I will go to the
last frame of the animation and move the
| | 02:20 | leg up and then I hold Command on my
keyboard to move the leg right where I want.
| | 02:31 | Now I am going to test the movie to
preview the animation, Command+Enter on the Mac,
| | 02:35 | Ctrl+Enter on the PC.
| | 02:39 | So looks like the animation looks pretty good except
| | 02:41 | for those parts where the back of the
leg is sticking now. So I am going to
| | 02:43 | find those parts. It looks like its
sticking out on Frame 8. So I hold the
| | 02:48 | Command on my keyboard and then move
the short leg to cover that up and I will
| | 02:55 | preview the other frames and that looks good.
| | 02:58 | So I will test the movie again.
| | 03:01 | It looks like all the legs are moving okay now.
| | 03:05 | So whenever you create an Armature you
can animate it by just moving the play
| | 03:09 | head to the appropriate keyframe and
then moving the Armature however you would
| | 03:13 | like, if you need to fine-tune your
Armature animation you can hold Command or
| | 03:17 | Ctrl on the keyboard and then click
and drag to move the different parts of
| | 03:21 | your armature.
| | Collapse this transcript |
| Adding easing to an armature animation| 00:00 | Now look at refining an armature
animation by adding easing. If you are
| | 00:04 | following along go ahead and open up
Easing_Bones.fla from the Chapter_03
| | 00:08 | folder. If you don't have the
exercise files just make sure you have an
| | 00:12 | armature animation to work with.
| | 00:13 | So I am going to double click my
monster on the Stage and then I am going to
| | 00:18 | double click one of the legs inside of
the spider movie clip and we will look
| | 00:21 | at easing for armatures. For armature
animation you can't use the Motion Editor
| | 00:27 | for easing. See we have the animation
selected here and I go to the Motion
| | 00:30 | Editor and I am not able to edit the animation.
| | 00:33 | So I will go up to the timeline and
I will use the Property inspector to
| | 00:36 | control easing. I will select the tween,
so now I can see it in the Property
| | 00:40 | inspector here. I can control the
easing for each keyframe. So what I am going
| | 00:45 | to do is go to Frame 1 and I am going
to set the easing on frame one to ease
| | 00:50 | out. So I am going to drag it all the
way to 100 and then if you click the Type
| | 00:55 | drop down you can choose
the basic types of easing.
| | 00:58 | So I am going to use Simple Medium
for this easing. Let's going to make the
| | 01:02 | animation movie little more quickly out
first then slowly towards the end then
| | 01:06 | I am going to select the third
keyframe, I am going to have it do the same
| | 01:10 | thing. So I will drag this Strength
slider all the way to 100 and change the
| | 01:14 | Type to Simple Medium. Now I will test
the movie to see the easing in action.
| | 01:24 | So now the animation is a little bit more
realistic feeling. So if you ever want to
| | 01:27 | apply easing to an armature
animation just put the playhead on their
| | 01:31 | appropriate keyframe, click on the
keyframe that you want to control in the
| | 01:35 | armature and then you can control the
easing through the Property inspector.
| | Collapse this transcript |
| Creating complex armature animations| 00:00 | In order for the animation of the
spider to be believable we will to vary
| | 00:04 | animation of the legs just a little bit.
We are going to do that using graphics
| | 00:08 | symbols. If you are following along,
go ahead open up Varying_Animation.fla
| | 00:13 | from the Chapter_03 folder. You could
also just use an armature animation.
| | 00:17 | So on the Stage here I have my spider.
So I am going to double click it edit
| | 00:20 | timeline and then what we are going do
is lock the other layers so I am locking
| | 00:24 | the body in the shadow and then I am
going to do selection area around all the
| | 00:28 | legs. So I have all the legs selected
and at the same time I am going change
| | 00:32 | all of their symbol types to graphic.
| | 00:34 | Now remember this doesn't change the
actual symbol type this just changes how
| | 00:39 | Flash treats this symbol type on the
Stage. So if you are looking Library, you
| | 00:43 | see that my leg animation is still
a movie clip and not graphic symbol.
| | 00:46 | All right back to the Property inspector.
Now what I am going do is the one of
| | 00:49 | the time I am going to select these
legs and then change the frame that the leg
| | 00:53 | starts on. The first leg on the left,
I have the frame be 6. Then what I am
| | 00:57 | going to do is how the other legs be a
little bit behind each other. So it kind
| | 01:02 | of like the front leg moves first and
then the next leg and then leg behind
| | 01:07 | that one and so on.
| | 01:09 | So I am going to go to the next leg
instead of the first one being at 6, I have
| | 01:13 | the first one being at 3 then I will go
to the third leg back and then for the
| | 01:17 | first frame I will choose 12 and for
the fourth one back for the first frame I
| | 01:27 | will choose 9. So we going to follow
the same idea for the right legs as I did
| | 01:32 | for the left legs.
| | 01:33 | So for I am going the start in a
different spot, with front legs I will start
| | 01:41 | with one and then I will go to 10.
Then for the third leg, choose 7, and for
| | 01:56 | the fourth leg I will have it start
at frame 4. Test the movie, and see the
| | 02:04 | legs in action, Command+Enter
on the Mac, Ctrl+Enter on the PC.
| | 02:11 | I will close the preview window. So
remember that you can vary animations even
| | 02:15 | though you are using a same movie
clip by using a Property inspector and
| | 02:19 | telling Flash to treat the symbol as a
graphic symbol. From there you can vary
| | 02:23 | the starting frames of each instance.
| | Collapse this transcript |
| Creating bounce| 00:00 | In this movie we will use animation
curves to create a bounce animation for
| | 00:03 | this monster's body. If you are
following along, you can open up
| | 00:07 | Creating_Bounce.fla from the Chapter 3
folder or you can just have a movie clip
| | 00:12 | on the Stage. On the Stage I will dive
into the Spider movie clip and then I am
| | 00:16 | going to lock all the
layers except for the Body layer.
| | 00:19 | The Body layer is already a movie clip,
it's an instance of a movie clip called
| | 00:22 | Body. What I am going to do is create a
motion tween. So I will right-click or
| | 00:26 | Ctrl-click the body on the Stage and
choose Create Motion Tween and I am going
| | 00:31 | to move the body up just a little bit
using my keyboard and then what I am
| | 00:35 | going to do is go to the last frame
here and on the last frame, which is frame
| | 00:40 | 12, I am going press Down on my
keyboard to move the body down a little bit.
| | 00:43 | Now I don't want to do a really
drastic animation, I want to do something
| | 00:48 | simple. I just want to look like the
monster's body is being affected by a
| | 00:52 | walking. So it's going to bounce up and
down a little bit. So I will select the
| | 00:57 | body animation then I will
jump over to Motion Editor.
| | 01:00 | Now I am going to create a custom
easing curve that's going to loop a little
| | 01:04 | bit. So it's going to start at 0% and
end at 0% and in between it going to go
| | 01:09 | up and down. So I am going to scroll
all the way to the bottom in the Motion
| | 01:12 | Editor and add a new custom Ease and I
will expand my custom Ease and scroll
| | 01:19 | down so I can see it all the way. I am
just going to expand the Motion Editor a
| | 01:25 | little bit and then I will select the
last box in the custom Ease, click and
| | 01:31 | drag that all the way to the bottom and
then what I will do is add some control
| | 01:38 | points to this animation.
| | 01:41 | So I will put 1 at frame 4, so then
Command-click on frame 4 and drag that all
| | 01:47 | the way to 100. Then I will put 1 at
frame 6, so I will Command-click at frame
| | 01:54 | 6 and drag that 1 down to about 50. It
doesn't matter if it's exactly at 50.
| | 02:01 | Then I will create another one at frame 9.
| | 02:04 | So I am going to Command-click at
frame 9, Ctrl-click on the PC, I will click
| | 02:10 | and drag the control point up to about
85%. Again, we are not looking for an
| | 02:16 | exact amount here. I just want it to
be random when it's applied so that the
| | 02:21 | monster will bounce up and down.
| | 02:23 | So with my custom Ease in place, I am
going to scroll up and apply the custom
| | 02:28 | Ease to my Basic Motion and then I will
test the movie and watch monster bounce
| | 02:33 | up and down as it moves, Command+Return
on the Mac, Ctrl+Enter on the PC.
| | 02:39 | There is our bouncing monster animation.
| | 02:41 | So remember that when you are creating
your custom animation curves, you don't
| | 02:45 | have to be limited to a specific type
of curve but you can get creative to
| | 02:50 | create cool, natural feeling animations.
| | Collapse this transcript |
| Adding bones to shapes| 00:00 | In Flash, you can not only create
bones with movie clips but you can also add
| | 00:05 | bones to shapes. In this movie we will
take a look at how to do that. If you
| | 00:08 | are following along, go ahead and open
up Bone_Shapes.fla from the Chapter 3
| | 00:12 | folder. If you don't have access to
the Exercise files, don't worry. You can
| | 00:17 | just use any shape you would like.
| | 00:19 | On the Stage here I am going to
double-click the spider to enter in its
| | 00:21 | Timeline. Then I am going to double-
click the spider's body. Now that I am in
| | 00:25 | the Body movie clip, there are two
layers, Body and Eyes. I have actually
| | 00:31 | already prepared three of the bone
shape animation. So I will show you now by
| | 00:35 | testing the movie with Command+
Return on the Mac or Ctrl+Enter on the PC.
| | 00:41 | One thing you may notice in this
animation, other than that it's unbelievably
| | 00:45 | lovable, is that the shapes are very
simple. So if I zoom in, I will use the
| | 00:51 | Zoom tool here, you will notice that
there aren't any shadows or anything on
| | 00:55 | these shapes like there were in the
previous movies. I had to remove those in
| | 00:59 | order to pull off the bone shapes.
| | 01:02 | Another thing you want to look out
for when you are creating bone shapes is
| | 01:05 | using a shape that's very complex. See
the body here has many different colors
| | 01:10 | and many different vector shapes as
part of it. If I were to use bone shapes
| | 01:14 | with that object, Flash
would give me a warning message.
| | 01:17 | So I am not going to do that. I am
going to double-click the Eye here on the
| | 01:20 | right to enter its Timeline and add
bone shapes to it. Inside of the far right
| | 01:25 | eye, I will select the Bone tool and
then click and drag to add bones to the
| | 01:30 | shape, just like it added bones to any
movie clip. With my bone system set up,
| | 01:35 | I can move the system around by
clicking and dragging just like any other bone
| | 01:39 | system. I will put it back to its
original place and now we'll create an animation.
| | 01:45 | Before we create the animation, I am
going to delete Layer 1, which is some
| | 01:48 | leftover vector artwork that didn't
make the bone system. So I am going to
| | 01:53 | extend the Timeline to frame 10 by
selecting frame 10 and then pressing F5 on
| | 01:57 | my keyboard. Then I am going to insert
a pose here. Remember that inserting a
| | 02:01 | pose is like inserting a
keyframe with a motion tween.
| | 02:04 | So I am going to right-click or Crtl-
click frame 10 and then choose Insert
| | 02:08 | Pose. Now I'll go to frame 5 and then
I will move my bone system. So I will
| | 02:12 | select it and then click and drag the
top bone up a little bit and have it kind
| | 02:17 | of bend in. I want this effect to be
pretty subtle and that looks good. Now I
| | 02:22 | will test the movie to
preview the bone system in action.
| | 02:30 | It's important to note that when you
create bone shapes, that sometimes Flash
| | 02:34 | doesn't give you the exact results
that you need. That's when the Bind tool
| | 02:38 | comes in handy. The Bind tool is
hidden in a fly-out menu beneath the Bone
| | 02:42 | tool. With the Bind tool, you can see
control points for your shapes and what
| | 02:47 | bones they're connected to. For example,
if I use the Bind tool in the selected
| | 02:51 | bone, the associated control points
highlight in yellow. To change a control
| | 02:57 | point associated with a shape, you can
click and drag from that control point
| | 03:01 | to the bone.
| | 03:04 | Now when I click the middle bone, the
control point I just connected shows up
| | 03:09 | in yellow. That's all there is to
creating bone shapes in Flash. You use the
| | 03:13 | Bone tool just like when you create any
other bone system and you could refine
| | 03:17 | the bone shapes using the Bind tool.
| | Collapse this transcript |
| Adding 3D animation to a spider| 00:00 | Now what we are going to do is add some
simple 3D animation to make the spider
| | 00:04 | walk forward. If you are following
along, go ahead and open up Adding_3D.fla
| | 00:09 | from the Chapter 3 folder. If you
don't have the Exercise Files, you can just
| | 00:13 | use any movie clip.
| | 00:13 | What I am going to do is extend the
Timeline to frame 100. Then I am going to
| | 00:19 | create a motion tween in the layer on
the main Timeline. On frame 1, I am going
| | 00:27 | to move the spider down a little bit
and then I am going to zoom it out using
| | 00:34 | its Z-positioning. So I am going to
click and drag that Z slider in the
| | 00:38 | Property inspector to the right and
zoom out the spider a whole bunch and about
| | 00:49 | 1000 should do.
| | 00:50 | I will move it over to the right just a
little bit and then what I am going to
| | 00:55 | do is go to the end of the animation
and zoom this spider in using its same Z
| | 01:02 | property until the spider is off the
Stage. That looks pretty good! So let's
| | 01:08 | test the movie, Command+Return
on the Mac, Ctrl+Enter on the PC.
| | 01:13 | And there is the spider walking forward.
| | 01:17 | Notice because of the 3D effect, it's
walking forward a little bit faster when
| | 01:22 | it's closer and slower when it's
further away. So what I am going to do is give
| | 01:26 | the spider an even pace by using easing.
So I am going to select the animation,
| | 01:30 | go to the Motion Editor, apply the
Simple (Slow) easing to our Basic Motion.
| | 01:38 | Then I am going to define the Simple
(Slow) easing to ease out. That way the
| | 01:42 | spider will slow down as it gets
closer to us or closer to the screen and the
| | 01:46 | animation will appear more smooth
throughout. So I will test the movie, again
| | 01:50 | with Command+Return or Ctrl+Enter.
| | 01:52 | There is the animation of the spider walking.
| | 01:57 | Now remember if you feel like the
spider is moving too fast, you can always
| | 02:00 | click and drag the last frame to
extend the animation. I will test the movie
| | 02:04 | again; spider is moving a
little bit more slowly now.
| | 02:09 | So with the 3D tools in Flash, you
can combine 3D effects with your bone
| | 02:14 | animation effects to add some more
life and depth to your animations.
| | Collapse this transcript |
| Creating interactive bones| 00:00 | In Flash, you can not only create bone
systems that animate, but you can also
| | 00:05 | create bone systems that are
interactive. If you are following along, open up
| | 00:09 | Interactive_Bones.fla from the Chapter
3 folder. In order to get this file to
| | 00:15 | work, all you will need is a bone
system that you can work with. I am going to
| | 00:19 | double-click the monster to enter its
Timeline and then double-click in one of
| | 00:23 | the legs to enter in the
movie clip Leg Animation.
| | 00:27 | Here I have a pretty simple bone
system that I can click and drag. Now let's
| | 00:32 | say I wanted to make this bone system
interactive. So you can click and drag
| | 00:37 | the bones like I am doing here when the
Flash movie is playing. All you have to
| | 00:43 | do is select the frames in your
Armature layer and then go over to the Property
| | 00:48 | inspector. In the Options section of
the Property inspector, change the Type
| | 00:52 | from Authortime to Runtime. With
Runtime bone set, you can test the movie,
| | 01:00 | click and drag your bone systems
and watch how they are interactive.
| | 01:06 | So with no ActionScript code, we've quickly
and easily created an interactive bone system.
| | Collapse this transcript |
|
|
4. Mastering MasksAnimating masks| 00:00 | In this chapter we'll look at animating
masks in Flash. There are two types of
| | 00:05 | mask animations. You can animate the
mask itself or animate the content that is
| | 00:10 | masked. In this movie, we will look at
animating the mask itself. If you are
| | 00:15 | following along, go ahead and open
Animating_Masks.fla from the Chapter 4
| | 00:20 | folder. If you don't have the Exercise
Files, you can just use a simple vector
| | 00:25 | shape and a mask like the
mask we'll look at in this movie.
| | 00:28 | So I'll double-click the monster
to enter its Timeline. Then I will
| | 00:30 | double-click the monster's body to
enter its Timeline. Inside of the monster's
| | 00:35 | body, there are several different
movie clips. There is one for each eye and
| | 00:42 | actually the three eyes on the right
have completed animations already; if I
| | 00:48 | test the movie we can see that, Command
+Return on the Mac, Ctrl+Enter on the PC.
| | 00:52 | So the three eyes on the right are
blinking using an animated mask. So for
| | 00:58 | this exercise, we will animate
the eye all the way on the right.
| | 01:02 | So I am going to double-click the eye
on the right, and you can see that I have
| | 01:06 | already set up the file for you. We
have a Mask, a Masked layer and the Eye.
| | 01:12 | Let's take a look at each layer. I will
unlock them all and you can see on the
| | 01:17 | Mask layer, there is a purple mask
that's kind of curved up and this mask is
| | 01:22 | going to fit the contours of the
monster's eye, that's why I curved it in a
| | 01:25 | little bit. I will lock and hide that layer.
| | 01:29 | The Masked layer is a green circle.
Now you can see it better if I zoom in a
| | 01:34 | little bit. So I am going to click and
drag to zoom in using the Zoom tool and
| | 01:37 | you can see that the green masked area
that represents the monster's eyelid. I
| | 01:42 | will lock and hide that layer. The
Eye is just the monster's eye. So I will
| | 01:48 | show the Mask and the Masked
layer and I will unlock both of them.
| | 01:53 | Note that I also extend its Timeline to
frame 100 to accommodate an animation.
| | 01:58 | Here I am going to create a simple
shape tween for the mask. When the mask is
| | 02:02 | going to reveal the monster's eyelid,
which will make it appear as if the
| | 02:06 | monster is blinking. So I will create
a keyframe in the frame 10 in the Mask
| | 02:10 | layer by selecting frame 10 and
pressing F6. Then I will select frame 20 and
| | 02:14 | press F6 to create a keyframe there as well.
| | 02:16 | Now I will create the shape tweens
by right-clicking or Ctrl-clicking in
| | 02:21 | between frames 1 and 10 and choosing
Create Shape Tween. I will do the same
| | 02:25 | thing between frames 10 and 20, right-
click or Ctrl-click and choose Create
| | 02:29 | Shape Tween. Now I'll go to
frame 10 and create the middle frame.
| | 02:36 | All I am going to do there is move the
mask downward on the monster's eye, and
| | 02:42 | then I am going to modify the shape to
bend out a little bit, again to fit the
| | 02:48 | contours of the monster's eye. If you
scrub the playhead, you should see the
| | 02:53 | shape tween in action. You can lock
all layers to preview the mask in Flash.
| | 03:01 | Let's test the movie to see
this in the Flash Player.
| | 03:06 | There is the monster blinking.
| | 03:10 | You may notice the animation
doesn't look exactly the same as the other
| | 03:13 | animations and that's because I applied
easing to the other animations. Now we
| | 03:17 | will apply easing here real quick.
Click in between frames 1 and 10 and then in
| | 03:23 | the Tweening area of the Property
inspector set the Easing to Ease out.
| | 03:30 | That way the animation will move
faster at the beginning and slow at the end
| | 03:34 | when the monster's eyes are closed. I
will do the opposite in between frames 10
| | 03:38 | and 20. I will set the easing to Ease
in by dragging the Ease slider all the
| | 03:45 | way to -100. Now I will test the
movie to preview the animation.
| | 03:49 | There is our animated mask
working to make the monster blink.
| | 03:52 | So remember that whenever you use masks,
you don't need to be limited to using a
| | 03:58 | static mask, you can animate masks and
add neat effects to your Flash movies.
| | Collapse this transcript |
| Animating masked content| 00:00 | Now we'll look at animating masked
content. If you are following along, I am
| | 00:04 | working in Masked_Content.fla from the
Chapter 4 folder. If you don't have the
| | 00:10 | Exercise Files, you will just
need some kind of content to mask.
| | 00:15 | Now I will double-click the spider to
enter its Timeline and then double-click
| | 00:18 | the spider's body to enter its
Timeline. Each of the Eye movie clips has an
| | 00:24 | animation inside of it. If you test
the movie you can see the animation.
| | 00:30 | Eyeballs are following the bouncing
monster in the foreground. What we will do
| | 00:35 | in this movie is animate the eyeball on
the far right. I will close the Preview
| | 00:41 | window and double-click the far
right eyeball to enter its Timeline.
| | 00:44 | Notice that there are four layers here:
we have the Highlight layer that has
| | 00:49 | some highlights for the eye. That's
just to give it some 3D depth since those
| | 00:53 | eyes are going to moving back and
forth. The Mask is a circular area that
| | 00:58 | covers up the Pupil, just a white circle.
The Pupil is obviously the pupil and
| | 01:05 | the Eye is the whole monster's eye.
| | 01:07 | Here I will extend the Timeline to
frame 100. I will move there and then click
| | 01:13 | and drag from the Highlight layer down
to the Eye layer in frame 100 and then
| | 01:16 | press F5 on my keyboard to extend the
Timeline to that point. Now I will create
| | 01:20 | a motion tween for the Pupil layer.
I will do that by right-clicking or
| | 01:26 | Ctrl-clicking the Pupil layer and then
I will choose Create Motion Tween. You
| | 01:30 | may need to unlock the Pupil layer if
it's locked. So I'll right-click again
| | 01:34 | and choose Create Motion Tween.
| | 01:36 | In the Pupil layer, I will select the
pupil and using the Selection tool on my
| | 01:43 | keyboard, I will move the pupil down a
little bit. I will lock the Pupil layer
| | 01:48 | real quick to preview it and make sure
that the eyeball is looking directly at
| | 01:53 | the monster in the background. I will
move it down and to the right a little
| | 01:59 | bit more, lock the Pupil
layer and that looks good.
| | 02:06 | So I will unlock the layer and then I
will move to frame 100. In frame 100, I
| | 02:13 | will use my keyboard to move the pupil
to the right. I can preview the mask by
| | 02:20 | locking the Pupil layer. That looks good!
| | 02:24 | So what I am going to do is unlock the
Pupil layer, select the tween and then
| | 02:29 | go to the Motion Editor. Now I am
going to create a curve that goes back and
| | 02:33 | forth. So I am going to create simple
bell curve. In the Motion Editor I will
| | 02:38 | scroll down to the very bottom, create
a new custom Ease. Before I define the
| | 02:43 | custom Ease, I am going to make sure
my viewable frame is set to 100, and it
| | 02:46 | is, so that's good!
| | 02:47 | I will put the playhead at frame 100,
expand the custom Ease section, expand
| | 02:55 | the Motion Editor a little bit and
then select the last control point in my
| | 03:03 | custom Ease. I will click and drag
that all the way to 0%, and adjust the
| | 03:10 | handle a little bit, and then I will
Command-click at frame 50 to create a
| | 03:16 | control point there. With that control
point, I will drag the percentage up to
| | 03:22 | 100 and then I will apply this Ease to
my motion tween. So I'm going to scroll
| | 03:28 | up, I will set the Basic
Motion easing to custom.
| | 03:30 | Now I will test the movie and preview
the animation and I should see the right
| | 03:35 | eye following the monster.
| | 03:44 | Now you may notice that
it's not exactly following
| | 03:48 | like the other eyes are following. The
reason for that is that I changed the
| | 03:52 | easing on the other eyes to be very
straight. So it moves evenly the whole
| | 03:58 | time. Now if you want that effect, you
will have to modify your bell curve a
| | 04:02 | little bit and make sort of a pointing
mountain shape. So I will show you how
| | 04:06 | to do that here.
| | 04:07 | The first thing you will need to do is
modify the handles independently. So I
| | 04:11 | am going to deselect all the handles
by clicking away from them then I will
| | 04:15 | select the top handle in my curve and
then I am going to hold Option on my
| | 04:19 | keyboard on the Mac or Alt on the PC
to click and drag one handle at a time.
| | 04:24 | So I am going to drag this straight
down to create a straight line instead of a
| | 04:29 | curve. I will do the same thing for the
handle on the right at the top and then
| | 04:35 | the handle at the bottom right. Now
with the straight curve, the eye should be
| | 04:40 | following the monster better and more
in unison with the other eyes. I will
| | 04:44 | test the movie to preview that.
| | 04:51 | And it looks good!
| | 04:54 | So with animated masks, you can apply
different effects when you animate the
| | 04:57 | mask and when you animate masked
content. If you ever need to adjust the
| | 05:02 | handles in your animations curves
independently, you can hold Option or Alt key
| | 05:06 | on your keyboard.
| | Collapse this transcript |
| Creating shadows with masks| 00:00 | In this movie we'll use a mask to
apply an animated shadow to our monster.
| | 00:05 | If you are following along open up
Shadows.fla in the Chapter_04 folder.
| | 00:09 | If you don't have the exercise files, you'll
just need some movie clips to follow along.
| | 00:13 | I am going to double-click the monster
to enter its timeline and then our goal
| | 00:17 | here is to cast a shadow of the claw on
the monster's face. So to do that, I am
| | 00:24 | going to need some new layers above
the Monster layer. So I'll create one
| | 00:27 | called Mask, and that layer will be
above the Shadow layer. For the shadow I am
| | 00:36 | going to use a copy of the claw. The
copy of the claw I am going to use is
| | 00:42 | called LeftClawNoSound.
| | 00:44 | In an earlier movie, we made this copy
of a movie clip that doesn't have any
| | 00:47 | sound, so that sounds don't overlap. So
I am going to move this claw on to the
| | 00:52 | Stage. And you'll that it's reversed
from the other one. So what I am going to
| | 00:58 | do is use the free transform tool and
flip it horizontally, and then scale it
| | 01:04 | so it's the same size as the other one
approximately. And then I'll place it
| | 01:08 | over the monster's face. And then I am
going to apply the Drop Shadow in the
| | 01:13 | same way that we created our
Perspective Shadow in another movie.
| | 01:16 | So I'll go to the Properties inspector
and I'll add a Drop Shadow filter and
| | 01:23 | then I'll check Hide Object, change
the Distance to 0 and then reduce the
| | 01:31 | Strength a whole bunch. That looks good.
And now we need to create the mask. So
| | 01:41 | what I am going to do is actually copy
the whole monster and then make it into
| | 01:45 | a vector shape. I'll show you how
to do that and why in just a second.
| | 01:50 | I am going to lock the Shadow layer,
and we are going to click on the Monster
| | 01:53 | layer to select and I'll copy that by
pressing Command+C on the keyboard, and
| | 01:58 | I'll select the Mask layer and press
Shift+Command+V or Shift+Ctrl+V on the PC
| | 02:03 | to Paste in Place. So now I
have a copy of my monster.
| | 02:07 | The data type for this is movie clip,
so when I click on the monster you'll see
| | 02:11 | movie clip in the Properties inspector.
Now if I just tell Flash to set this a
| | 02:14 | mask by right-clicking that layer and
choosing Mask, then Flash will create a
| | 02:18 | mask for me, but if I test the movie
you'll see that it looks a little bit choppy.
| | 02:23 | (Snap, snap, snap.)
| | 02:26 | The reason for the choppiness
is because I am using a really complex
| | 02:30 | movie clip for my mask. What you can
do to make this work a little bit more
| | 02:34 | cleanly is to break the movie clip into shapes.
| | 02:40 | So what I am going to do is unlock
the Mask layer, then with the Mask Layer
| | 02:44 | selected, I am going to select Command+
B on my keyboard, that's the keyboard
| | 02:48 | shortcut for Modify and Break Apart.
What that does is it breaks apart any
| | 02:52 | object to its next editable level. So
for example, I had this movie clip that
| | 02:57 | is a whole bunch of drawing objects.
When I break the movie clip apart, then I
| | 03:02 | get the drawing objects without that
movie clip container. I break apart the
| | 03:06 | movie clip container to
reveal only the drawing objects.
| | 03:09 | So you'll see on my Stage I have a
group selected. You could see some drawing
| | 03:13 | objects in there. So if I keep pressing
Command+B, I am eventually going to get
| | 03:17 | all vector shapes. And when I have
that selection, I can change the color in
| | 03:23 | the Properties inspector to let's say
a purple color, then I have a purple
| | 03:27 | vector shape for my mask. And that
will greatly simplify the mask and reduce
| | 03:34 | the load for Flash in processing it.
| | 03:37 | Additionally, you can select your
vector shape and then choose Modify > Shape >
| | 03:43 | Optimize, and then you can adjust the
Optimize Strength however you want, click
| | 03:49 | OK, you get the information from Flash,
then you're shape is Optimized. That
| | 03:55 | way you are further reducing the load
for the Flash Player. So now I'll lock
| | 03:59 | the Mask and I can Preview the Shadow
on the monster. Now I'll test the movie
| | 04:03 | to see this is in the Flash Player.
| | 04:06 | (Snap, snap, snap, snap, snap, snap.)
| | 04:12 | So using Masks and our Shadow technique,
you can cast shadows on objects and
| | 04:17 | mask out any parts of the shadow that
don't cover the object. Further if you
| | 04:21 | are using a complex movie clip as a
mask. Break apart the movie clip into a
| | 04:25 | shape and optimize that shape to
let the Flash Player perform better.
| | Collapse this transcript |
| Creating an iris effect using masks| 00:00 | Now we will take a look at adding
an Iris effect to our animation using
| | 00:04 | an animated mask. If you are following
along, you can open up Iris.fla from the
| | 00:09 | Chapter 4 folder. If you don't have
the Exercise Files, you are going to need
| | 00:13 | some content to mask and a mask. Let's take
a look at the layers in this application.
| | 00:19 | I have the Mask layer, which is
basically a green dot, which we can see because
| | 00:23 | the Mask layer is unlocked. Now if you
cannot see it, then I will just zoom it
| | 00:26 | a little bit on the monster's eye and
you can see the green dot as I show and
| | 00:30 | hide it. I will zoom out a little
bit by pressing Command+? on the Mac or
| | 00:34 | Ctrl+? on PC. Then we can see the rest
of the layers by showing and hiding the
| | 00:39 | monster layer, see the monsters on that layer.
| | 00:42 | The land layer contains the
background and the Black layer contains a black
| | 00:48 | rectangle. Now for this Iris effect I
want to kind of reveal the whole scene
| | 00:53 | from black. Now your most of the land
layer is not masked, it's just a normal
| | 00:58 | layer. But what I want to do is have it
be subject to the Mask. All you have to
| | 01:03 | do to mask multiple layers under the
same Mask is, double click the layer's
| | 01:07 | icon to open up the Layer Properties window.
| | 01:10 | So I'll double click the Land icon and
in the Layer Properties window, you can
| | 01:14 | choose what type of layer you want it
to be. So I will choose Masked and then I
| | 01:18 | click OK, and the Land layer is now
also masked by the Mask. I can preview that
| | 01:24 | in Flash by locking the Mask layer.
So now I can't see anything because the
| | 01:29 | whole scene is masked by that
very small dot on the Mask layer.
| | 01:33 | I will unlock the Mask layer and now
we will begin animating the Mask. I will
| | 01:38 | start by right-clicking or Ctrl-
clicking in the Mask layer and choosing Create
| | 01:42 | Motion Tween. Then what I will do is,
move to frame 20 in the Timeline and
| | 01:48 | scale up to Mask using the Free Transform tool.
| | 01:52 | Now you will notice that it's a little
bit hard to get to the corner handles at
| | 01:55 | this distance. So what I am going to
do is, zoom in really close by clicking
| | 01:59 | and dragging with the Zoom tool. Then
I will use the Free Transform tool to
| | 02:03 | scale it up a little bit.
| | 02:04 | Here I am not really worried about
the proportions in scaling because it's
| | 02:08 | going to look kind of similar either way.
So I am going to zoom out, Command+?
| | 02:13 | on the Mac, Ctrl+? on the PC, scale
up the Mask a little bit more, zoom out
| | 02:20 | again, so I can see the whole scene
and then scale the Mask so it covers the
| | 02:24 | whole visible area. That looks good!
| | 02:30 | Now we have our motion tween set up.
What I am going to do is create a keyframe
| | 02:37 | on frame 21 so that can control easing
for this little tween independently of
| | 02:43 | other tweens on the Mask layer. To
create a classic keyframe I'm going to put
| | 02:48 | the playhead at frame 21, make sure
all the frames are deselected by clicking
| | 02:53 | in the gray area at the bottom of the Timeline.
Then I will push F7 on my keyboard.
| | 02:58 | That will create a solid keyframe,
which is a circle, which means I can create
| | 03:03 | a motion tween that will be
independent of the original motion tween allowing
| | 03:09 | me to control easing independently. So
now I will go to frame 40 and I will do
| | 03:15 | the same thing. I will press F7 and
then I will create that keyframe there.
| | 03:20 | Then I will go to frame 60 and then
shrink the Mask down a little bit.
| | 03:24 | So I am going to select the Mask with
the Free Transform tool and then scale it
| | 03:29 | down really small and zoom in. Then I
will make it as small as I can inside of
| | 03:41 | the monster's eye. Now so I can
control just of that easing independently, I
| | 03:47 | will deselect all frames, go to frame
61 and then press F7 on my keyboard to
| | 03:53 | create a keyframe there.
| | 03:54 | So now when I select the easing of
the Mask scaling in, I can select that
| | 03:59 | independently, I can select the Mask
scaling out independently. Now if I test
| | 04:04 | the movie you will see the Iris effect.
Command+Return on the Mac, Ctrl+Enter on the PC.
| | 04:14 | So now if I wanted to control easing,
I can just select the first tween, go to
| | 04:18 | the Motion Editor, change the easing
for Basic Motion to Simple (Slow) and do
| | 04:24 | the same thing for Transformation.
Let's say I wanted to ease out when the
| | 04:33 | animation is scaling out, so I'll just
click and drag my Simple (Slow) to ease
| | 04:36 | out. Then I will do the opposite
for when the animation is going in.
| | 04:40 | So I'll select the tween from frame
40 to 60, go to the Motion Editor, set
| | 04:47 | Basic Motion and Transformation to
Simple (Slow), set Simple (Slow) to ease in.
| | 04:55 | That way it will play slower at the
beginning of the animation. Now I will test
| | 04:58 | the movie to preview the easing with my Iris effect.
| | 05:06 | I will close the Preview window.
| | 05:07 | So whenever you want to add an Iris
effect, you can just use an animated mask.
| | 05:11 | If you want to control different
tweens in the same layer independently with
| | 05:16 | curves, you can press F7 on your
keyboard to create solid black circle keyframes.
| | Collapse this transcript |
|
|
5. Mastering Motion PresetsSaving motion presets| 00:00 | In this chapter we are going to be
working with motion presets. Using motion
| | 00:04 | presets, you can reuse animations
and apply them to different objects.
| | 00:08 | If you're following along go ahead and
open up Saving_Presets.fla from the Chapter 5 folder.
| | 00:14 | Here I have an animation of a monster
in a shadow on the left and then a static
| | 00:19 | monster in shadow on the right. What I
am going to do is, save the animation
| | 00:24 | for the monster and the shadow and then
apply them to the monster on the right.
| | 00:28 | I will do that by right-clicking or
Ctrl-clicking in the animation layer.
| | 00:33 | Then I will choose Save As Motion Preset.
| | 00:36 | Now I can give the animation a name.
I will call it Bounce Monster. That looks
| | 00:43 | good, I'll click OK, and then I am
going to do the same thing for the shadow
| | 00:47 | animation. So I'll right-click or Ctrl-
click on the shadow animation, and then
| | 00:51 | I will choose Save as Motion Preset. I
will name the preset Shadow. Click OK,
| | 00:57 | and then I am going to apply the same
animation to the monster on the right.
| | 01:02 | To do that, I will first open the
Motion Presets panel by choosing Window >
| | 01:06 | Motion Presets. Then you can see my
Custom Presets in the Custom Presets folder
| | 01:12 | within the Motion Presets panel. To
apply the animation, I will just select the
| | 01:17 | static monster, select Bounce Monster
in the Motion Presets panel, and then click Apply.
| | 01:22 | I will do the same thing for the Shadow.
I select the shadow, Shadow animation
| | 01:28 | in the Motion Presets panel, then click
Apply, test the movie and the animation
| | 01:34 | is applied to both monsters.
| | 01:37 | So using motion presets you can easily
save and reapply animations to different objects.
| | Collapse this transcript |
| Exporting and importing motion presets| 00:00 | Now we will take a look at exporting
and importing motion presets. Now one
| | 00:04 | advantage to exporting and importing
motion presets is that you can share your
| | 00:08 | animations with others and then others
can share their animations with you. For
| | 00:12 | exporting and importing in this movie,
we are going to export an animation that
| | 00:17 | we have already created, delete it and
then import it again just to show how
| | 00:21 | the process works.
| | 00:23 | If you are following along go ahead
and open up Exporting_Importing.fla from
| | 00:27 | the Chapter 5 folder. On the Stage here
I have a static monster and I am going
| | 00:32 | to export a motion preset, delete it
and then import it and apply it to this monster.
| | 00:39 | So I'm going to open the Motion Presets
panel. That's Window > Motion Presets.
| | 00:43 | I have my Bounce Monster preset and the
Shadow preset. So I am going to export
| | 00:47 | these. I'll select Bounce Monster,
right-click or Ctrl-click, and then choose
| | 00:53 | Export. I'm going to export this to the
Chapter 5 folder as Bounce Monster.xml.
| | 00:59 | I click OK and I'll do the same
thing with the Shadow. Right click or
| | 01:03 | Ctrl-click, Export, and I will
export it to the Chapter 5 folder with its
| | 01:08 | default name Shadow.xml. I will click
Save and I will save that file. Then I am
| | 01:13 | going to delete the motion presets
from the Motion Presets panel. So I'll
| | 01:17 | select Bounce Monster and click the
Delete button to delete the motion preset.
| | 01:21 | I will do the same thing for the Shadow.
| | 01:23 | Notice we're just getting a warning
that make sure that you really want to
| | 01:27 | delete that motion preset. If you are
curious about the XML files that are
| | 01:30 | created by Flash and you are familiar
with XML, you could open up those files
| | 01:35 | in a Text Editor. I will do that now.
| | 01:37 | I am going to go over to Finder, and
then I'll open up Shadow.xml, just right
| | 01:43 | in Flash. Flash can actually open XML
file. So if I double click this file, it
| | 01:47 | is going to open in Flash, and by the
way, if you double clicked a file on your
| | 01:51 | machine, then the file might not open
up in Flash. It's just opening up in
| | 01:54 | Flash on my machine because I
have Flash set to open XML files.
| | 01:58 | So we see the XML data that contains
all the information about the animation,
| | 02:04 | quite a bit. Well, I am glad that I
didn't have to type this code out by hand.
| | 02:09 | So I am going to close Shadow.xml. Now
we will import the XML file into Flash
| | 02:14 | by opening the Motion Presets panel
again. So Window > Motion Presets.
| | 02:18 | I'm going to import some presets by
clicking in the Options area at the top
| | 02:22 | right of the Motion Presets panel. I
will choose Import. I'm going to navigate
| | 02:27 | to the Chapter 5 folder and import
Bounce Monster.xml. Then I am going to
| | 02:35 | Command-click or Ctrl-click on the PC,
Shadow.xml as well and click Open.
| | 02:40 | You will see that both motion presets
are added to the Custom Presets section
| | 02:45 | in the Motion Presets panel. So I can
click on the Monster, select the Bounce
| | 02:50 | Monster preset and apply it and do
the same thing with the Shadow. So I'll
| | 02:53 | select the shadow, choose the
Shadow preset and click Apply.
| | 02:57 | Now when I test the movie, I can
preview the animation with the motion presets
| | 03:02 | that I imported, Command+Return
on Mac, Ctrl+Enter on the PC.
| | 03:06 | There's the motion presets applied to our objects.
| | 03:10 | So by exporting motion presets and
being able to import them, you can share
| | 03:15 | motion presets with others and others
can share their motion presets with you.
| | Collapse this transcript |
| Applying and adjusting motion presets| 00:00 | In this movie we will look at adjusting
motion presets. Whenever you create a
| | 00:04 | motion preset in Flash, all the
information about the motion tween is saved.
| | 00:09 | So when you apply that motion preset to
an object, the animation is editable just
| | 00:15 | like any other motion tween. So in
this movie we will look at an example of
| | 00:19 | that. If you are following along, go
ahead and open up Adjusting.fla from the
| | 00:23 | Chapter 5 folder. You can also just
use any symbols for this exercise.
| | 00:27 | I am going to first apply some motion
presets to my monster and my shadow here
| | 00:31 | on the Stage. So I'll open the Motion
Presets panel and I have some Custom
| | 00:37 | Presets in here that we created in
another movie. So I'll select the monster
| | 00:41 | and then select the Bounce Monster
preset; click Apply to apply it. I will do
| | 00:46 | the same thing for the Shadow. Click
on the shadow, choose the Shadow preset
| | 00:50 | and click Apply.
| | 00:52 | Now if I test the movie, the
animations might not look right because I am
| | 00:55 | animating a different object then I
was when I created the Bounce Monster
| | 01:00 | motion preset. So I'll test the movie,
you see the monster goes down a little
| | 01:04 | bit too far. So it looks kind of weird.
So I am going to close the Preview
| | 01:08 | window and will adjust this animation.
| | 01:10 | I will do that by first selecting the
Monster layer. So I'll select the Monster
| | 01:15 | motion tween and jump over the
Motion Editor. I'm also going to close the
| | 01:19 | Motion Presets panel since I will not
be needing it anymore. Then I am going to
| | 01:22 | adjust the animation by first turning
off the tween. So I have 2-Custom for the
| | 01:28 | tween for Basic Motion. So I am going
to turn that to No Ease. I have 3-Custom
| | 01:32 | for the easing or Transformation. I
will change that to No Ease as well.
| | 01:37 | So what I am going to do is make sure
the viewable frames are maxed out so I
| | 01:41 | can see all the frames of my
animation in the Timeline. It should be at 18,
| | 01:44 | unless you are working with an
animation that has more or less frames. I'll
| | 01:49 | move the playhead to the last frame
and see that the monster is down way too
| | 01:54 | low. So I am going to click and drag
the wide slider to move the monster up.
| | 02:00 | When the monster looks like its right
over the shadow, that's exactly where we
| | 02:03 | want. So I am going to apply the easing
again and for Basic Motion that's going
| | 02:06 | to be 2-Custom and for Transformation
that's going to be 3-Custom just like
| | 02:10 | they were earlier. Now I'll test the
movie to preview that the animation is working.
| | 02:19 | So remember that when you work with
motion presets, you're really just working
| | 02:22 | with a motion tween. So it's always
editable just like any other motion tween.
| | Collapse this transcript |
|
|
6. Animating a Walk CycleUnderstanding walk cycles| 00:00 | In this chapter we are going to be
looking at animating walk cycles. Before we
| | 00:05 | start animating the walk cycles, I am
going to show you how walk cycles work.
| | 00:09 | If you are following along, go ahead
and open up Example_Walk_Cycle.fla from
| | 00:14 | the Chapter 6 folder.
| | 00:16 | If you don't have the Exercise Files,
you can just watch and follow along. This
| | 00:20 | video is mainly for you to learn how
walk cycles work. So I am going to test
| | 00:25 | the movie and show the walk cycle that
I have here, Command+Return on the Mac,
| | 00:29 | Ctrl+Enter on the PC.
| | 00:32 | So here is the character walking across the screen.
| | 00:35 | Notice his legs move and his arms
swing back and forth and his body and head
| | 00:39 | move as well.
| | 00:42 | I will close the Preview window and
we'll take a look at how this is set up.
| | 00:47 | First I'll need to head over to frame 1.
Now I will use the Selection tool and
| | 00:53 | double click the monster to enter its
Timeline. In the Timeline of the monster,
| | 00:58 | there are 40 frames. Now almost all of
these elements are organized as graphic
| | 01:03 | symbols so that I can scrub the
playhead and preview the animation.
| | 01:06 | When you are animating a walk cycle,
you need to know about the four main
| | 01:13 | positions. I am going to show you
those now. The first one is called the
| | 01:18 | Contact position. The Contact position
is where the leg is touching the ground,
| | 01:23 | so this front leg here is what we are
focusing on. So we have a kind of an
| | 01:27 | imaginary floor here where I am moving
my mouse, and the toe is touching that
| | 01:32 | area. So that's the
first one, the Contact phase.
| | 01:35 | The next phase happens at about
frame 7. This is called the Recoil phase.
| | 01:40 | Notice the leg is moving up and getting
ready to move forward again; so Contact
| | 01:47 | and then Recoil. The third phase in the
animation is called Passing. That's at
| | 01:52 | about frame 13 in my animation. This
is where the legs cross over each other.
| | 01:57 | The final phase is called the High Point.
In my animation the High Point is at
| | 02:02 | the frame 18. See there the front leg
is at its highest point. It just about to
| | 02:06 | stump down and then slide back to take
another step. So you can see the front
| | 02:13 | leg does that and the back leg does
the same thing; Contact, Recoil, Passing,
| | 02:20 | and then High Point.
| | 02:22 | These legs are actually instances of
the same movie clip. I just scaled the
| | 02:27 | back leg and then moved it behind
everything else. So throughout this chapter
| | 02:32 | you will learn how to animate the
different elements of a walk cycle.
| | 02:35 | Remember, when you are animating a
walk cycle, you have the four important
| | 02:39 | poses: Contact, Recoil, Passing and High Point.
| | Collapse this transcript |
| Creating a walk cycle| 00:00 | Now we will look at animating the legs
in a walk cycle. If you are following
| | 00:04 | along, go ahead and open up Animating_
Walk_Cycle.fla from the Chapter 6 folder.
| | 00:09 | If you don't have the Exercise Files,
you are going to need several movie clips
| | 00:13 | to be able to accomplish
what we are going to do here.
| | 00:16 | What I am going to do first is test
the movie to show what we are starting with.
| | 00:19 | We basically have a walk cycle
that's all put together except for the
| | 00:23 | legs. So I will close the Preview
window and then we will animate the legs. So
| | 00:28 | first thing I will do is double click
the monster to enter its Timeline and
| | 00:33 | then in the monster's Timeline, I'm
going to start animating the legs by double
| | 00:37 | clicking one of his legs. Well on
inside of the leg graphics symbol, I'm going
| | 00:42 | to create a bone system.
| | 00:43 | Now it's important to know that
this is already broken up into several
| | 00:46 | different movie clips. So we have the
top part of the leg, the bottom part of
| | 00:49 | the leg and the foot. So let's create
that bone system. I will select the Bone
| | 00:54 | tool and click and drag from the top of
the leg down to by the knee area. Then
| | 01:00 | I will click and drag from there to the foot.
| | 01:04 | Now I have my basic bone system. I can
throw away the leg layer because there
| | 01:07 | is nothing on it. So remember the
poses that we are going for are Contact,
| | 01:12 | Recoil, Passing and then High Point. So
this is basically the Contact phase, so
| | 01:17 | we can leave that there. I am going to
go to frame 7. Then I am going to define
| | 01:21 | the Recoil phase. So I am going to
click and drag and move the legs so that I
| | 01:29 | will click there about to recoil to
take another step. That looks good! So I
| | 01:33 | will move to frame 13 and then
I will define the Passing phase.
| | 01:38 | So I am going to start up by moving
the top leg. So I am going to click and
| | 01:42 | drag holding Command on my keyboard or
Ctrl on the PC, that top leg to move it
| | 01:48 | forward a little bit. Then I will do
the same thing for the bottom part of the
| | 01:55 | leg and the foot. Once everything is
in place, then I will define the Passing
| | 02:03 | pose. So I am going to swing the leg
down just a little bit and swing the knee
| | 02:09 | up a little bit and that looks good.
| | 02:12 | Last we will define the High Point. So
I am going to go to frame 20 and then I
| | 02:17 | am going to click and drag the top
leg to move it just a little bit to the
| | 02:21 | right. I am going to move all the
other pieces of the leg accordingly. Then I
| | 02:31 | will click and drag that top leg up to
the High Point. So what I want is kind
| | 02:36 | of a bent knee and the foot
sticking straight out, kind of like that.
| | 02:40 | So there is our animation, swings up
like that. So it starts out, it does the
| | 02:49 | Recoil and then swings forward Passing
and hits the High Point. Now the rest of
| | 02:54 | the animation is stomping back down and
then sliding back. So I am going to go
| | 03:00 | to frame 24 and I am going to
take the leg and then put it down.
| | 03:08 | This is going to be on the ground here.
So I'll need to just modify it like
| | 03:14 | that. Then I will go to frame 29, swing
the leg back a little bit. I will move
| | 03:20 | it using the Command key. I will move
the other legs accordingly, sliding it
| | 03:31 | back. Then I will slide it
back one more time at frame 35.
| | 03:34 | I am just moving the legs a little bit
using the Ctrl key or the Command key on
| | 03:45 | the Mac. I am just going to rotate that
foot a little bit, then the knee just a
| | 03:58 | little bit. That looks good! Then for
the last pose what I want to do is copy
| | 04:07 | the first pose just so we have a good
solid loop. So I am going to go to frame
| | 04:10 | 1. I am going to right-click or
Ctrl-click that keyframe on frame 1.
| | 04:14 | Now you will have to make sure that
all other frames are deselected in order
| | 04:17 | for this to work. So once you do that,
select Copy Pose, go to the last frame,
| | 04:22 | right-click or Ctrl-click and then
choose Paste Pose. Now I will go back to the
| | 04:27 | monster movie clip and you will see
that I have two graphic symbols. So one
| | 04:32 | starting out at frame 1. Now if I select
the back leg, starting out at frame 20.
| | 04:37 | That looks a little bit awkward to
me, so I am going to move it with my
| | 04:40 | keyboard until there is no white space
in between the legs. That looks good! So
| | 04:47 | I will test the movie to preview the animation.
| | 04:52 | There is our walking monster.
| | 04:59 | So you can use bones to create walk
cycles and if you want to use the same
| | 05:03 | movie clip for the front and the back
leg, you can treat it as a graphic symbol
| | 05:06 | and have it started about halfway
through the animation. Also, remember that
| | 05:10 | you can copy and paste Armature poses
by right-clicking or Ctrl-clicking the
| | 05:14 | keyframes in the Timeline.
| | Collapse this transcript |
| Adding body movement| 00:00 | When you are creating a walk cycle,
it's essential that you animate the other
| | 00:04 | parts of the character's body. So you
need to animate the character's arms kind
| | 00:07 | of swinging back and forth, and the
character's body may be bouncing up and
| | 00:11 | down. So we'll look at how
that works in this movie.
| | 00:14 | If you are following along, go ahead
and open up Animating_Body.fla from the
| | 00:18 | Chapter 6 folder. If you don't have
the Exercise Files, you will just need an
| | 00:22 | armature to work with. So I am going
to double click the monster on the Stage
| | 00:25 | to enter its Timeline. Then I am going
to double click the character's arm to
| | 00:32 | enter its Timeline.
| | 00:33 | If you test the movie you will notice
that there is no animation for the arm at
| | 00:36 | this point. So what we will do is
create a bone system to animate the arm and
| | 00:41 | have it swing back and forth. So these
are all separate movie clips. We have
| | 00:45 | the back of the arm, the forearm, and
then the front of the arm with the secret
| | 00:50 | plans there. So I'll use the
Bone tool to create a bone system.
| | 00:54 | I will click and drag from the
shoulder to the elbow and then click and drag
| | 01:00 | from the elbow to the wrist. Notice
that that hand and secret plans come up in
| | 01:06 | front of everything when I do that. So
I'll need to select that hand and then
| | 01:09 | push it back using Command+Down on the
Mac or Ctrl+Down on the PC. So I will
| | 01:14 | just push it a few times to push it
behind everything. Now I am going to create
| | 01:19 | the animation.
| | 01:20 | The easiest way to do this is to have
a pose where the hands are in front and
| | 01:24 | have a pose where the hands are in
back. So since I want this animation to
| | 01:27 | loop, I am going to go to frame 40. I
am going to place a pose here that is the
| | 01:32 | same as the initial pose. So I am going
to right-click at frame 40 then choose
| | 01:36 | Insert Pose. So now I have keyframe
poses at start and end frame so that I can
| | 01:41 | ensure that this is going to loop properly.
| | 01:43 | I will go to frame 20 and I will define
the pose for the arm swinging back. So
| | 01:48 | I am going to select my bone system
and swing it back a little bit. You can
| | 01:58 | choose how you want to swing it here. I
am just going to keep it pretty simple.
| | 02:02 | Now I will test the movie
and preview the animation.
| | 02:12 | The animation looks good, so I will
close the movie. Remember that you can also
| | 02:15 | apply easing if you want to. Let's say
I go to the first frame, the animation,
| | 02:18 | and select that first keyframe. I can
adjust the strength of my easing to -100
| | 02:23 | and then change the Type to Simple (Slow)
and do the same thing at frame 20. So
| | 02:27 | I go to frame 20, adjust the
strength to -100, change the Type to Simple
| | 02:32 | (Slow), and now I have easing in my
animation. So I will test the movie again
| | 02:35 | to preview the easing.
| | 02:39 | There is a little bit
of easing in our animation.
| | 02:41 | So make sure whenever you create a
walk cycle, to look at the different parts
| | 02:45 | of the character's body and make sure
to animate them. I am going to show you
| | 02:49 | one last thing here, and that is the
body animation. I made the character's
| | 02:52 | body bounce up and down as the
character walks to add a little bit more weight
| | 02:57 | and motion to the animation.
| | 02:59 | So if you scrub the playhead, you will
notice that the body moves up and down
| | 03:02 | along with the legs. That's just
actually a simple motion tween. I am just
| | 03:06 | going to double click the body and show
you how that works. The body moves down
| | 03:13 | and then moves up and then
drops down pretty quickly.
| | 03:18 | Just using this simple animation, you
can add more life to your characters.
| | 03:24 | Again, whenever you create a character
animation, go through each of the parts
| | 03:28 | of the character, like its arms and
head, body etc., and make sure those are
| | 03:34 | animating as well to emphasize
the movement in the walk cycle.
| | Collapse this transcript |
|
|
GoodbyeGoodbye| 00:00 | Well, that's it. I hope you had a good
time learning how to animate in Flash
| | 00:04 | CS4 because I should had a blast
teaching it. If you make any neat animations,
| | 00:08 | I would love to check them out. You
can contact me through my website at
| | 00:11 | chadandtoddcast.com to send me your
links that you have to animations that you
| | 00:15 | create. Well, thanks for
watching and I will see you next time.
| | Collapse this transcript |
|
|
