IntroductionWelcome| 00:04 | Hi! I am Dermot O'Connor and
welcome to Flash Tips and Tricks.
| | 00:08 | This course will focus on techniques
that will be useful to the intermediate
| | 00:12 | user, as well as the more experienced animator.
| | 00:15 | You will see how to animate natural
effects like smoke, water, and clouds.
| | 00:22 | I'll show you how to add gradients in a
controlled and subtle manner to remove
| | 00:26 | that flat, flashy look that so many cartoons have.
| | 00:29 | You will be able to use this technique
to light your scenes, enabling you to
| | 00:34 | take your work to a different level.
| | 00:36 | There is also a demonstration of the
use of staggers, which will allow you
| | 00:40 | to create some really effective shakes,
tremor effects, and screams or extreme reactions.
| | 00:47 | Another great trick to have up your
sleeve is the creation of fake 3D space to
| | 00:52 | give the impression of depth.
| | 00:54 | Finally, we'll cover some
simple fades and transition effects.
| | 00:58 | These will be important if you want to
create longer projects with custom cuts
| | 01:01 | between your scenes.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Exercise files are available to
premium subscribers of lynda.com.
| | 00:04 | Simply download the exercise files
to your computer and place them on the
| | 00:08 | Desktop for ease of access.
| | 00:10 | The exercise files are
organized by chapter number.
| | 00:15 | Whenever an exercise file is
available for a video you will see a yellow
| | 00:19 | overlay at the bottom of the screen that
indicates the location and name of the exercise file.
| | 00:24 | I've already rendered out SWF files,
showing you the animations and effects
| | 00:29 | contained in each FLA file, which will
allow you to preview the content of the
| | 00:33 | course very quickly.
| | 00:37 | Working with the exercise files
can add great value to the training.
| | 00:41 | However, if you don't have access to
the exercise files you can still follow
| | 00:45 | along with the videos, often using
your own files, and have a fulfilling
| | 00:49 | learning experience.
| | Collapse this transcript |
| Common keystrokes and shortcuts used in this course| 00:00 | Before we get started, I just want to
give you a very quick run through
| | 00:03 | of some of the tools that I am going
to be using in the program, and the kind
| | 00:06 | of things that I would really like
you to know before you start. And I
| | 00:10 | strongly recommend if you haven't ever
used Flash before, that you watch one
| | 00:14 | of the Essentials Courses on Flash, and that
will get you up to speed on the basic tool set.
| | 00:19 | I do assume an
intermediate level of knowledge on this.
| | 00:22 | But during the course of the course,
what I am going to do is click on this
| | 00:25 | little gray area here and very quickly
show you -- we will go into greater detail in
| | 00:29 | the course, but what you're going to
see; the basic workspace layout that I set
| | 00:33 | up during the course, will look a little
bit like this. And I will be setting up
| | 00:38 | the Tools panel of two vertical columns,
because of course we don't have a lot of
| | 00:42 | room on the screen. And the tools that
I will be using during the course with
| | 00:46 | greatest frequency will be the
Selection tool, the Subselection tool, and there
| | 00:51 | you can see the shortcuts.
| | 00:52 | We will be using Free
Transform and Gradient Transform a lot.
| | 00:56 | The other tools that we will be using
commonly will be the Line tool, and the
| | 01:01 | Rectangle tool, which
also contains the Oval tool.
| | 01:04 | I don't really mess with the Rectangle
Primitive or the Oval Primitives very much at all.
| | 01:09 | The Brush tool of course, very useful,
although I don't use the Spray Brush tool beneath it.
| | 01:13 | We also have the Paint Bucket tool,
which we use a lot, as well as the Ink
| | 01:17 | Bottle tool to color the lines.
| | 01:20 | I don't use Bones in this tutorial, and
I don't use the Deco tool, or any of the
| | 01:25 | newer features or the newer tweening.
| | 01:27 | I like to stick with the classic shape
tweening and the classic motion tweening,
| | 01:31 | and a lot of animators don't like the
newer tools, because they're not quite
| | 01:34 | appropriate for the kind of
things that we do for our workflow.
| | 01:38 | The Eyedropper tool is used a lot as well.
| | 01:41 | It's a very useful tool for selecting
colors of course. And whenever you see me
| | 01:44 | moving the Stage around -- and I am just
going to make a quick temporary shape --
| | 01:48 | if you ever see this happening,
that means I've touched the Hand tool.
| | 01:51 | Obviously, I can't call that out every time
| | 01:53 | I do it. It would just make
the course another hour longer.
| | 01:56 | So don't be bothered if you see this
happen. And of course, if you see me
| | 02:00 | zooming in, that is of course the Zoom tool.
| | 02:02 | By clicking or holding on the Alt or
Option key, we zoom in and out, or we can
| | 02:06 | draw a box around it.
| | 02:07 | So whenever you see these operations
happen, that's exactly what's going on.
| | 02:12 | These functions really become
automatic to you when you use the program.
| | 02:16 | If you see me navigating through the
Timeline, I am just going to make an
| | 02:19 | empty keyframe down here, and again, we will
cover this in a little more detail later on.
| | 02:23 | Whenever you see me moving through the
Timeline, this is because I'm clicking on
| | 02:27 | the Comma key and the
Period key on the keyboard.
| | 02:30 | They are just to the upper right of your
spacebar, and they go back and forth in the Timeline.
| | 02:34 | So if ever you see this operation
happen, that's what's occurring.
| | 02:38 | So it's something that, again, will become
muscle memory to you with a little bit of time.
| | 02:42 | The other thing I would like you to
understand that from the start is the
| | 02:46 | principle of how to create a symbol.
| | 02:49 | So what I'm going to do is very quickly
demonstrate, and again, this will be covered later on.
| | 02:53 | I am going to make a temporary little symbol.
| | 02:56 | When you click on the symbol in the Properties
panel, we have different ways of controlling it.
| | 03:00 | Sometimes it will appear as a movie
clip, and sometimes it will be a graphic.
| | 03:04 | At all times in this course, you
want your symbols to be set to Graphic.
| | 03:09 | You need to understand the Looping section here.
| | 03:12 | If your symbol is set to the Single
Frame, you won't see any of the animation
| | 03:15 | that will be contained in that symbol
when you're playing on the Timeline.
| | 03:18 | So be sure that you
always set this to Play Once.
| | 03:21 | I will mention the many times in the
course, but always somebody forgets.
| | 03:25 | So just a reminder upfront to set it
to Loop or Play Once, and I like to have
| | 03:30 | it set to Play Once.
| | 03:31 | That will save you some frustration.
| | 03:34 | I think we've covered most of it.
| | 03:35 | The other thing that might
happen from time to time;
| | 03:37 | you will see something like this happen.
| | 03:39 | This means I've right-
clicked on the object. That's all.
| | 03:42 | Again, these won't be called out every single
time, because obviously it's a bit of a mouthful.
| | 03:47 | But this is what will be happening.
| | 03:48 | If you see these little pop-up menus,
and I think same for the Timeline here,
| | 03:52 | same for symbol, same for symbols on the Stage.
| | 03:55 | It doesn't happen too often, but it's often
enough that you should be aware of that happening.
| | 03:59 | One other thing, and that is
how the interface operates.
| | 04:03 | We'll begin the course I think
pretty much looking like this, but do
| | 04:07 | understand that the interface can be
torn apart, and you can drag and drop the
| | 04:12 | different components to
different parts of the project.
| | 04:15 | It only happens, I think, at one point
in the course, where I get tired off the
| | 04:19 | color palette constantly popping
on and off and I drag it over here.
| | 04:22 | So do be aware, and again, this kind
of behavior will be covered in greater
| | 04:25 | detail in one of the Essentials Courses.
| | 04:27 | But it's a very useful
attribute to be able to click and drag.
| | 04:31 | By clicking on these little tabs, you
can basically drop the window wherever
| | 04:34 | itt works best for your personal workflow.
| | 04:37 | So with that I think we're
ready to continue with the course.
| | Collapse this transcript |
|
|
1. Lighting and GradientsUnderstanding video versus SWF| 00:00 | Before we begin the course there are
some issues that have to be dealt with.
| | 00:04 | One of the problems that you're going to hit;
| | 00:06 | everyone's going to hit this problem,
is at some point you're going to throw so
| | 00:10 | many effects at Flash that it will slow down.
| | 00:14 | What you're seeing right now is an
animated smoke effect, and we will be doing
| | 00:17 | this later on the course.
| | 00:18 | But I want you to see what's going to
happen when you throw a lot of these
| | 00:23 | different particles at the
Flash program; at the SWF, or the swiff, format.
| | 00:27 | I am going to make it even worse than
it is right now by hitting Full Screen.
| | 00:31 | And this is a fairly fast computer,
and what you're seeing -- it starts pretty
| | 00:34 | fast, and then as the particles begin
to really hit their maximum number, it
| | 00:39 | slows down, and then it speeds up
again as the particles have dissipated. And
| | 00:44 | what's happening is a combination
of stresses on the player. All these
| | 00:47 | gradients, and the number of them, is
simply too much for Flash, even on a fast
| | 00:52 | computer, to keep up with.
| | 00:54 | The solution to this;
| | 00:55 | there are a couple of cheats that we
will definitely cover, but the quickest
| | 00:58 | one, and the one that I use most often is to
simply render out the animation as a movie file.
| | 01:04 | Now here we have a QuickTime movie of the
same animation, and we want this to loop.
| | 01:10 | So I am going to select Loop. and I
also want it to play full screen, so we
| | 01:15 | can really compare it.
| | 01:16 | And we let it loop a couple of times.
| | 01:21 | So as you can see, we're getting a full
30 frame per second playback, and this is
| | 01:26 | something that you're going to
have to decide yourself case by case.
| | 01:30 | You will have a different computer
than me, a different video card, you have
| | 01:35 | different animations. At some
point you are going to hit this wall.
| | 01:40 | You will try to do everything that you
can with different effects, and nested
| | 01:44 | effects, and you'll see it happen. One
minute Flash will be keeping up with your
| | 01:48 | animation, and then you will hit that little hump.
| | 01:52 | This is the most common way that I have
to work around it, so that I can test my
| | 01:56 | animation truly by rendering out a movie file.
| | 02:00 | We will cover this in greater detail later.
| | 02:02 | I really want you to know about this in
advance, because you might hit this
| | 02:05 | wall yourself in the next lesson, the
one after that, or the one after that.
| | 02:09 | So that will prepare you.
| | 02:11 | So don't get disappointed.
| | 02:12 | If at any point in this course you feel
like my computer is too slow, there are
| | 02:17 | all kinds of tricks and
workarounds that we will be deploying.
| | 02:19 | This is one of them.
| | 02:21 | So please keep up and we will guide
you through it, and help you to really
| | 02:24 | squeeze every last ounce of
performance out of Flash and your computer.
| | Collapse this transcript |
| Overview of shortcuts, extensions, and setup| 00:00 | So let's get started setting up Flash
so that it works pretty much the way
| | 00:03 | we want it to work.
| | 00:04 | So let's create a new file on the
template; ActionScript 3.0 should be fine.
| | 00:11 | I like to make sure that the toolbar is
on the left side of the screen. I feel
| | 00:15 | it's a little too cloistered over here.
| | 00:17 | So to move it, simply select this gray
bar, click and drag. And as you move it
| | 00:23 | around the program little blue
columns will appear, and once you see this
| | 00:27 | vertical blue line, you
can release, and there it is.
| | 00:30 | And now you can resize it to whatever
horizontal or vertical structure you prefer.
| | 00:36 | I like -- two vertical columns works nicely;
| | 00:39 | I find this easier to find
what I'm looking for over there.
| | 00:42 | The next thing you want to do
is make some adjustments to the
| | 00:45 | Preferences settings.
| | 00:47 | So let's go Edit>Preferences. And the
big one, the most important one, is to
| | 00:52 | select Object-level Undo from the
Document-level Undo dropdown, and click Yes.
| | 00:58 | This will provide every symbol in
your project with its own completely
| | 01:03 | independent history of Dos and Undos. This
is very important when you're making changes.
| | 01:09 | If you select Document-level Undo, all
the actions that you make, and all your
| | 01:14 | different symbols, will be recorded
in a single history. And it can be very
| | 01:19 | confusing when you start hitting Control
+Z, and you begin going back through your
| | 01:23 | history, you can get lost in that
very quick. And it's very useful to have
| | 01:27 | Object-level Undo selected.
| | 01:29 | And also, make sure the Contact-
sensitive Selection and Lasso tools is off.
| | 01:34 | This means that you can select a symbol
only by drawing a box completely around
| | 01:39 | the symbol, and not by touching it.
| | 01:42 | If this is on, then you can simply
select a symbol by clicking on it; it's
| | 01:46 | simply too sensitive for me.
| | 01:48 | So just make sure that that's set
to the off, and I think that covers that.
| | 01:52 | The other thing that bothers me is the
default color palette. A lot of people
| | 01:57 | work with that, I think because they
just think it's too much effort to
| | 02:00 | change it. So I've made a
better palette than this.
| | 02:03 | To access that palette, go to the
project folder and open 1_02_Color_palette.
| | 02:11 | Nothing has changed, but the palette has.
| | 02:13 | So let's click on the Swatches
tab, and this is the new palette.
| | 02:16 | And the next thing to do is very simple:
left-click on this button, and Save as
| | 02:22 | Default. Yes. And this means that every
time you make a new project from now on,
| | 02:28 | you will see this palette.
| | 02:29 | If for any reason you think, "I want the
old one back", it's very simple. Click on
| | 02:34 | the button again, and select Web 216,
and you will have access to the old palette.
| | 02:39 | And then simply go Load Default Colors,
and you can get the nice and more subtle one.
| | 02:43 | So now you have the option of working
with a slightly more artist-friendly
| | 02:47 | palette than the original.
| | 02:49 | The next thing I would like you to know
about is some options from third-party
| | 02:53 | developers that you have that
would really give you some extra tools;
| | 02:57 | these will come in very useful when
you're really getting to the serious work.
| | 03:01 | There's a fantastic Web site called
toonmonkey.com and this contains many free
| | 03:07 | extensions that you can install.
| | 03:09 | So you may not have installed an
extension before, but first let me walk you
| | 03:13 | through the extensions, and then I'll show
you how to install them; it's very simple.
| | 03:16 | So the first one -- I really don't
use this one myself, I'm happy with the
| | 03:20 | internal timing system in Flash, but
it's a timing chart that allows you to have
| | 03:25 | different spacings for tweens.
| | 03:27 | Toggle Outline, which allows you to
toggle back and forth. I don't think you
| | 03:30 | need that honestly; it's not
a part of this course, anyway.
| | 03:35 | Layer Color is very useful. This allows
you, if you want to, for example, change
| | 03:40 | the color of seven layers at the same
time to green or red, so you can see them
| | 03:45 | all at the same outline color. It saves
you from having to left-click and change
| | 03:49 | the outline color one by one by one.
| | 03:51 | Very useful later on, and we
will definitely be using that.
| | 03:56 | New Anim Clip is useful for converting
a series of layers in the Timeline into
| | 04:00 | a single nested clip.
| | 04:03 | Tween 2 Keys is something that I don't
use much, but it may be useful to you.
| | 04:07 | I would definitely recommend you spend
some time looking through all of these.
| | 04:11 | FrameEDIT was useful in older
versions, but actually seems to have been
| | 04:16 | integrated into the later versions of
Flash, and certainly working with CS5, and
| | 04:21 | 5.5, so I don't think this
is needed for the newer ones.
| | 04:24 | Multi Swap is very useful if you're
going to change a batch of symbols on the
| | 04:29 | Stage from one to the other. And Merge
Layers; this really should be built into
| | 04:33 | Flash. It combines 3, 4, 5
layers into a single flattened layer.
| | 04:38 | It saves you from having
to go through it one by one.
| | 04:41 | So those are the main ones.
| | 04:43 | So let me go and install;
show you how it's done.
| | 04:45 | We will go to Layer Color,
click and download, and that's it.
| | 04:52 | So we should have it on the Desktop,
or wherever you've saved it on your
| | 04:55 | computer; wherever your browser saves it.
| | 04:57 | And the next thing to do is to open --
| | 05:00 | you should have somewhere on your
computer, under your Adobe folder, the
| | 05:05 | Extension Manager. Click on that and
select Install. And wherever you've saved
| | 05:15 | the extension on your computer,
select it, Open>Accept. And now we have
| | 05:22 | installed the extension, so let's close that.
| | 05:25 | And to see that I'm going to have to
restart the program, so let's do that first.
| | 05:31 | So we've restarted Flash, and you'll
find the new extension under your Commands
| | 05:36 | menu. And there it is, LayerColor.
Let's see how that works.
| | 05:38 | I will make some extra layers, I
will select these four layers, go to
| | 05:43 | Command>LayerColor, and let's say I want
them all to be blue. They are all blue now.
| | 05:51 | Very, very useful when we have 25 layers
of different shaped objects, particles,
| | 05:56 | and you want to group them together
visually so that you can see precisely
| | 05:59 | what's happening when you have lots of
different elements swarming together. It
| | 06:02 | saves a lot of time.
| | 06:04 | So that is the process of extensions.
| | 06:06 | I will go through and install more
extensions that I think I will be needing
| | 06:10 | in the course. If you see me in later
classes open this Command menu, and you
| | 06:14 | see other extensions, mysterious
commands that you don't have in your
| | 06:18 | version, that's where they came from.
And I will flag them later on if I use
| | 06:22 | them; I will remind you.
| | 06:23 | With that I think we are ready to
proceed with the rest of the course.
| | Collapse this transcript |
| Understanding linear and radial gradients| 00:00 | Flash has a gradient feature. This
gradient feature has two forms: one is
| | 00:05 | linear, and one is radial, and in your
exercise files folder you'll see the
| | 00:08 | project file for this.
| | 00:10 | Linear, as it suggests, is a simple
left to right. It can go up, down, or
| | 00:13 | diagonally. And the radial feature can be
of circular form or elliptical; it can
| | 00:18 | even be tweaked them to an egg shape.
| | 00:20 | So it's fairly limited; quite
straightforward. It can't do anything organic,
| | 00:25 | so if you want it to curve to an S shape,
you're not going to have a good time with it.
| | 00:29 | Nevertheless, as simple as it is, it can
be used to pretty great effect as long
| | 00:34 | as you work within those constraints.
| | 00:35 | Click the Zoom tool, or Z on the key keyboard.
| | 00:38 | So if we look at the frame 1 of this
file, you'll see what I call the "bowl of
| | 00:43 | light". This is what it was called back
in the golden age of animation where you
| | 00:46 | could combine variations of different
gradients to create an illumined spotlit
| | 00:52 | area and favor that area for
your animation action, or your staging.
| | 00:56 | So that's the basic principle that we
will be applying throughout the course
| | 01:02 | whenever we use gradients.
| | 01:03 | I'm going to show you the big problem
that plague gradients in this program, and
| | 01:08 | that's banding. This can happen in many
programs; you will see it in Photoshop
| | 01:12 | too if you get very, very subtle.
| | 01:14 | I find that this happens much more
often when you use subtle gradients. And
| | 01:20 | these red lines here; they are the transitions.
| | 01:23 | Ideally of course, we would like to see
a completely smooth from dark to light,
| | 01:27 | and we're not seeing it.
| | 01:28 | So this is something that we are going
to have to continually watch out for.
| | 01:32 | I've also noticed that depending on
the monitor that you're using, you might
| | 01:35 | see it or not see it. So depending
on your output -- if you are going to be
| | 01:38 | working for an iPhone this probably isn't going
to be something that you need to be worry about.
| | 01:43 | If you're going to be working for
something that's going to be seen on a
| | 01:45 | television screen or a larger screen,
you really have to watch out for this.
| | 01:49 | I work on a Cintiq at home -- if you don't
know, the Cintiq is the monitor that you
| | 01:53 | can draw directly onto -- and I find
that one of the drawbacks of the Cintiq is
| | 01:57 | that the screen is a little bit darker.
| | 02:00 | It's a tradeoff in the design of
that Cintiq, or any of those screen tools.
| | 02:04 | I would strongly recommend, before you
get too deeply into this, that you test
| | 02:08 | this pipeline for yourself; for your
own workflow. Make sure that you are
| | 02:13 | comfortable with whatever
artifacts might or might not emerge.
| | 02:17 | It comes down to your project; what it
looks like. If it is going to be subtle
| | 02:20 | like this, as you can see
there is very little banding here.
| | 02:23 | I don't see very much evidence of it
at all. You might see some beginning to
| | 02:28 | appear here, but that falls within
that band that I'm comfortable with.
| | 02:33 | You might not be; you might be extra
intolerant of it. It's just something to be
| | 02:37 | aware of as we proceed through the course.
| | Collapse this transcript |
| Overlapping and animating the colors| 00:00 | One of the really fun things about
Flash is how easy it is to play with colors,
| | 00:05 | and gradients of colors, and
find ways to overlap them together.
| | 00:08 | So before we do that and simply start
messing with colors, if you haven't had
| | 00:12 | any experience with color theory, it's
a good idea to have just a very simple
| | 00:16 | introduction to that.
| | 00:17 | So essentially in the visual arts, the
three primary colors are red, yellow, and
| | 00:23 | blue. And we obtain green, orange, and
purple by mixing them in varying degrees.
| | 00:29 | And of course, you can change the hues
of the different colors to get different
| | 00:32 | kinds of yellow, different kinds of
blue, and different kinds of the secondary
| | 00:36 | colors: green, purple, and orange.
| | 00:38 | One of the principles in art is to
combine complementary colors, and these are
| | 00:41 | colors that are completely opposite
to one another on this color wheel.
| | 00:45 | So that would make red and green
complementary colors, yellow and purple are
| | 00:48 | complementary, and orange
and blue are complementary.
| | 00:52 | And if you move to any point on the
circle, its complementary will be, in theory,
| | 00:57 | on the opposite side of the wheel.
| | 00:59 | So this is a very useful technique;
you'll see how I use this and implement it
| | 01:03 | throughout some of the later sections
of the course. But to see how we can then
| | 01:08 | play with different overlapping areas of
color, let's have a look at this simple scene.
| | 01:12 | So I've made a very basic color, and this
is a radial color. Let me unpadlock it.
| | 01:17 | So if you want to alter the gradient
of this color area, you can select the
| | 01:21 | color area. You will see it suddenly
is covered in little white dots; it's
| | 01:25 | very hard to see anything.
| | 01:26 | Under this button here, the Free
Transform tool, it also houses the Gradient
| | 01:31 | Transform tool, which you can also
access by hitting F on the keyboard. Let's do
| | 01:35 | that. And now you can see how
I created this gradient area.
| | 01:40 | This is the Transform tool, and I can size
it, I can make it bigger by moving the
| | 01:45 | white circle around. I
can change the centerpoint.
| | 01:48 | So that essentially is a very quick
introduction to how I created it, and we will
| | 01:53 | cover this in far more detail later on,
so don't worry too much right now.
| | 01:56 | So this shows you how we can go from
one color form and tween to another one.
| | 02:02 | So on the bottom layer I've gone from
this color, and let's open up the Color
| | 02:08 | panel, and you can see the gradient
color is here, and we can change them by
| | 02:13 | altering this. Let's go back to the default.
| | 02:16 | So by having the second keyframe here
with a slightly different color, we then
| | 02:21 | activate classic shape tween, and that
shape tweens from one to the other. And
| | 02:25 | it doesn't just tween the colors; it
can tween the position of the colors.
| | 02:30 | So you can use this for creating all
kinds of effects of light changes. It's
| | 02:35 | more dynamic than it might seem
at first glance. Let me undo that.
| | 02:37 | I like to padlock of the bottom layer,
because it's very easy to select the wrong one.
| | 02:43 | On the top layer, I created a
slightly different gradient going from, again,
| | 02:47 | two different colors.
| | 02:49 | I'm having a green layer on top
and a red layer on the bottom.
| | 02:52 | I find that if you combine a red layer,
for example, with its complementary:
| | 02:56 | in this case that make the other layer a
green layer. I am making it slightly transparent.
| | 03:01 | You get all kinds of very subtle
cooler colors that combine to make a much
| | 03:05 | more natural feeling.
| | 03:07 | So by clicking on this -- if you don't see
this Transform tool, don't forget it's up here.
| | 03:12 | Click on the color selector, and
you'll see the colors are set to opacity:
| | 03:17 | they are transparent. And the Alpha
transparency, it's 30% on the first one, 39 on
| | 03:22 | the other. By clicking and sliding we
can make them even less or more opaque.
| | 03:26 | And in this case I have also tweened
the color at the end of it, just for a
| | 03:30 | little variety. It's a very simple
demonstration just to give you an idea of
| | 03:34 | some of the optical effects that
we'll be playing with later on to create
| | 03:38 | more concrete illusions.
| | 03:40 | So that's a basic introduction to the
kind of color gradients, and the effects of
| | 03:46 | overlapping color gradients, and how we
can shape tween those gradients to create
| | 03:50 | some pretty interesting effects.
| | Collapse this transcript |
| Lighting a scene| 00:00 | So here, from your Exercise Files folder,
an example of the dreaded flashy look.
| | 00:06 | And this is what happens in Flash, it's
just a part of the program; you fill these
| | 00:11 | vector areas with flat colors, and they
look flat. So we do lots of little things
| | 00:16 | to try to break it up, like we put
little shadow lines under them, maybe
| | 00:22 | highlight areas, sometimes the black
line around the edge to give it a bit of
| | 00:25 | dimension, although not in this case.
But you get the idea. And we have the nice
| | 00:29 | little cute animation; they
are walking across the Stage.
| | 00:31 | But it all looks really flat, like
there is one gigantic ball of light
| | 00:37 | illuminating everything.
| | 00:38 | So awhile back I began playing with
a way of getting rid of this, and the
| | 00:42 | solution I found was to use gradients,
similar to the principles we have covered
| | 00:46 | in the earlier sections. And here we
have a much different looking scene from the
| | 00:51 | one I showed you at the
beginning: from here, to here.
| | 00:55 | It's surprisingly simple to achieve this.
| | 00:58 | We simply use three levels, three
extra levels, that's all. One with a radial
| | 01:02 | gradient, and the other two with linear.
| | 01:04 | I am going to show you how to achieve this.
| | 01:06 | So if you don't have the Exercise Files,
use any file of your own as long as you
| | 01:10 | have some kind of physical space,
maybe put a little cube or a box in the
| | 01:13 | middle, just to have
something there to focus your eye.
| | 01:16 | You don't have to have little men
walking across the screen, but I just
| | 01:19 | thought it was cute to look at, and
give you an idea about something maybe
| | 01:23 | a little more dramatic.
| | 01:24 | So let's double-click on the symbol with
the Gradient layer, we want to move the
| | 01:28 | Timeline window up a little to see all
the layers, and let's dolly out a little
| | 01:32 | to have a look at everything.
| | 01:35 | So the three layers in question that
perform most of the work are Gradient layers.
| | 01:39 | Now I did add some extra small touches;
I put a slight gradient on the ground
| | 01:44 | layer, and I did darken the chap
walking in. That was a very simple operation.
| | 01:49 | Let me click on him. That was done in
the Properties panel, under Color Effect,
| | 01:54 | Brightness down to 59%, and then
brightening him up as he walks into the shot.
| | 01:58 | So just bear that in mind;
that was one little extra thing.
| | 02:01 | But almost everything you saw that
separates this from the first one is a radial
| | 02:06 | gradient, and then a linear on
the left, and a linear on the right.
| | 02:11 | And let's look at them close up.
| | 02:13 | Here is the radial gradient, and
again, to select that this button here,
| | 02:17 | sometimes that says Free Transform tool,
other times you might want Gradient
| | 02:20 | Transform tool. So be sure you select
Gradient Transform tool, or F on the keyboard.
| | 02:25 | And now you can see and begin to
engineer the radial on the ground. This would
| | 02:29 | be the result of an
imaginary spotlight above the Stage.
| | 02:33 | So let's click to see the colors of
this. And now as you can see it's a very
| | 02:37 | simple gradient; it's only got 4
colors. And I would like you to be aware, too,
| | 02:41 | that depending on how your program is
set up, Flash now has different ways of
| | 02:45 | selecting colors, and I like to select
this one; it's a little more intuitive for me.
| | 02:51 | So when you see me modifying colors
in Flash, just be aware that you have H
| | 02:56 | selected, and you can then pick your
color from this vertical column, and then
| | 03:01 | you can modify the properties of that
color by moving around the square in here.
| | 03:06 | You have millions of colors at your disposal.
| | 03:08 | So it goes from the center, which is here,
to the outside, which is at the far right.
| | 03:13 | The center point is out 0 opacity, and
we can change it by clicking and dragging.
| | 03:18 | The next one out is also set to 0.
| | 03:20 | We then go to about 30% opacity;
| | 03:23 | you can see the color value changing.
So I was being probably a bit subtle with
| | 03:27 | this. Going from red that's 0, to a
yellow that's 0: that's kind of redundant. We
| | 03:31 | can actually get rid of that one.
| | 03:32 | So we can go from 0% here, to about a
third opacity that's slightly blue, and
| | 03:39 | this very dark color here, that's
about 50%, and that gives us a dropoff.
| | 03:42 | We can change the dramatic value of
the scene simply by changing the outer
| | 03:46 | color's opacity setting.
| | 03:48 | So let's have a look; see what that does.
| | 03:52 | You can see it's a much more ominous sky
that the little men are now walking under.
| | 03:56 | So let me go back to the original one.
I'm going to hit Undo a few times, and give
| | 04:01 | you a quick look at the linear.
| | 04:03 | And probably easier if I switch off the others;
it's a very subtle little linear gradient.
| | 04:09 | So again, same basic controls. Of course,
they are like a vertical, or a series
| | 04:13 | of parallel lines, which you can then
control by clicking and dragging, and then
| | 04:19 | you can rotate the line
by moving this widget here.
| | 04:22 | So that is that; that is how we control it.
| | 04:25 | So what I am going to do is walk you
through the process instead of just
| | 04:29 | demonstrating it, so you can follow
along and have an idea of how it's done.
| | 04:33 | So I'm going to make a new layer, and
I'm going to click and hold down the Alt
| | 04:38 | key to duplicate this layer. And I like
to do this when I'm experimenting with
| | 04:42 | new effects and I maybe want to mess
things up a little bit, so that I can not
| | 04:47 | worry about the existing two scenes.
| | 04:49 | So be sure you select the Selection tool.
Select your new symbol on the Stage,
| | 04:54 | right-click, and duplicate it,
and we will just call it copy.
| | 04:58 | Now if you double-click on that, we
know we are going to need a new layer for
| | 05:01 | that gradient, and two more up here.
And let's label them properly: gradient,
| | 05:07 | circle, we just call it C for circle;
keep the name short. This will be
| | 05:11 | gradient right side, and this will be
gradient left side. L and R; keep it
| | 05:18 | nice and short again.
| | 05:20 | So let's do the circular gradient first,
and what we want is an area of color
| | 05:25 | that we are going to drop down that will
cover the entire scene. Don't try to do
| | 05:28 | one that will just cover a portion
of it; it doesn't really buy you much.
| | 05:32 | So I'm going to select the sky layer,
because the sky layer covers everything.
| | 05:39 | And hold on the Alt key and drag, or
you can simply draw a new rectangle over
| | 05:43 | everything, but this is quicker.
| | 05:44 | Okay, so I am going to select that
color area, and then select our Color tab, and
| | 05:51 | under Solid color we switch to Radial.
| | 05:54 | Now, depending on how Flash is set up
for you, and what you did last with Flash,
| | 05:58 | you're going to see any number of
different radial effects; some of them
| | 06:02 | probably pretty horrible.
| | 06:03 | So I am going to select a few colors
at random so that I'm a little closer
| | 06:06 | to seeing some of the strange combinations
that different people out there might see.
| | 06:12 | So you may see something like
this, it's completely unusable.
| | 06:15 | So let's select that new layer, and
again, hit F on the keyboard or Gradient
| | 06:19 | Transform tool, and let's start shaping it.
| | 06:22 | First thing I like to do is to
shape the geometry; that's the easiest
| | 06:25 | thing to do. And it is nice sometimes to
have really bright colors for this part
| | 06:28 | so that you can absolutely get an idea.
| | 06:31 | So this widget here scales, this one
squashes it and stretches it, and this one
| | 06:35 | rotates it. But for now all we really
need is a little ellipse, so let's do that.
| | 06:40 | And make sure it tries to match the
ground plane. If you notice the horizon
| | 06:43 | there, it's nice if we can make it
match that. You'll get a more realistic effect.
| | 06:48 | So now we can go in and try to
make it look a little more realistic.
| | 06:52 | So as you can see the brown here
matches the brown there. And easy to
| | 06:55 | remember that this being the inside,
it's closer to the inside of the screen. And
| | 07:00 | this is the outside part of the
gradient, being closer to the outside of the
| | 07:03 | screen. That's how I remember. It can
be confusing, like, which of these colors
| | 07:06 | matches what on the Stage.
| | 07:09 | So let me select the outer one. I am
going to darken it and immediately, that's
| | 07:13 | instantaneous, you're starting to
get a feeling of dark thunderclouds or
| | 07:16 | something. So let's get rid of this
green thing in the middle; we don't need
| | 07:20 | anything really powerful or strong in there.
| | 07:22 | So you can select whatever subtle
shade of gray you like, and let's bring the
| | 07:27 | opacity down to zero
| | 07:29 | so that we see the original ground layer
peeking through. And this blue color I
| | 07:33 | am going to push closer. By pulling the
shapes close together, like really close
| | 07:37 | together, you can see where the join
is; where the seam is. And then you can
| | 07:41 | start going back from that and
controlling the dropoff. And we are at 41% for
| | 07:46 | this blue; it's a bit hot, looks far
too bright. And may be we should darken it
| | 07:49 | too; it's a little too bright as well.
| | 07:52 | So now we are getting something that's
starting to feel a lot more like a real
| | 07:55 | natural illumination from above.
| | 07:58 | So again, I am going to check this again.
We are at 0%; I am going to pull it in
| | 08:01 | a little bit. As you can see, this
position has a direct effect on the physical
| | 08:06 | position of the light on the Stage.
| | 08:08 | So I think that's not a million miles away.
So that's pretty good; let's lock that.
| | 08:12 | And now that the radial has been
taken care of, we want two linears.
| | 08:16 | So again, I am going to duplicate that
flat sky layer, and hit F6, and drag to
| | 08:21 | the top, and padlock here. And I am just
going to fill it, and let's select the
| | 08:28 | color swatches, and we'll
fill it with a linear gradient.
| | 08:32 | And F for Gradient Transform tool. And just
by pulling it and moving it and rotating it,
| | 08:42 | you can get this closer to the conical
shape that we want to match the original.
| | 08:49 | Now the colors are obviously not
final yet. They're the same colors that's
| | 08:52 | defaulted; the previous colors that we
used for the ground plane. You may not be
| | 08:56 | able to see it on your screen,
but there's a weird blue beam here.
| | 08:59 | So what I want to do is to simplify
this a little bit; maybe make it a little
| | 09:02 | more neutral. Pull that down and darken
it. Maybe sharpen this by pulling this
| | 09:07 | color in and desaturating that a little bit.
| | 09:10 | And again, the effect is pretty quick.
Let's bring the Alpha in just a little,
| | 09:15 | so you don't notice this big
corner here. And that's not too bad.
| | 09:19 | So let's hit F6 to make a second version,
drag it to the top, padlock the bottom
| | 09:24 | one. And now we have two of them in the
same space, we don't need that; we want
| | 09:28 | this to be flipped to match the other side.
| | 09:31 | So let's go Modify>Transform>Flip
Horizontal, and then hit padlock again.
| | 09:36 | I am going to zoom out just a little bit,
and now you can see the bowl of light.
| | 09:43 | So I can control the opacity of these
shafts to make the falloff darker or more
| | 09:48 | extreme, and I can go in and control
the colors and the strength of the light
| | 09:52 | using only three layers. You can
add more layers and I often have.
| | 09:55 | But this is a very simple way of
showing how much can be done with very few
| | 09:59 | extra additions to a scene.
| | 10:01 | So I strongly recommend if you have
scenes lying around that you are not happy with,
| | 10:05 | you start playing with them, and see
where you might be able to add some of these
| | 10:09 | layers to see if you can make them
feel a little more dramatic, because light
| | 10:13 | is one of the more important tools in
setting the emotional tone of the scene,
| | 10:18 | along with the color.
| | 10:19 | So I think we are ready to move on
to the next step, which we will some
| | 10:22 | lens flares.
| | Collapse this transcript |
| Creating lens flares| 00:00 | This is a technique that you probably
don't want to use too often because it
| | 00:04 | has a bad reputation: that's the lens flare.
| | 00:06 | There are times, though, when it's good
to be able to do a lens flare, and a
| | 00:10 | super bright sun in your
face is as good a reason as any.
| | 00:14 | So here is a simple animation
that I've created of a lens flare.
| | 00:18 | Let's go into the scene and
I'll show you how this was done.
| | 00:21 | So again, I'll switch off the
layers, so we'll see one by one.
| | 00:23 | We have our sky or space field;
| | 00:26 | see a slight radial gradient right
in the middle dropping off to dark.
| | 00:29 | The ground layer or the planet, again,
another radial gradient; about four
| | 00:33 | colors going from dark to light with
opacity at the outer edge. And the light
| | 00:38 | that surrounds the sun, and this is also
creating a slight little ring effect around here.
| | 00:43 | This would be the solar corona or
atmosphere, the sun in the middle, with a
| | 00:47 | yellow color to differentiate it a
little bit from that pure white light.
| | 00:50 | Let's lock these. And then we have the
different rings, the gradient rings, that
| | 00:54 | create the illusion of the lens flare.
| | 00:58 | So by now I take it that you should
know enough to be able to assemble
| | 01:01 | these various gradients.
| | 01:03 | I'll just look at them one by one. So
this one is, again, slightly squished to
| | 01:07 | make the shape a little more interesting.
| | 01:09 | It consists of four colors, so let's
look at these one by one so you can see
| | 01:13 | the settings if you want to recreate this.
| | 01:21 | The ground layer is, again, very simple.
And you can see how I have pulled out the
| | 01:25 | circle of the gradient to really get a
feel of a large planet. And again four
| | 01:30 | colors, and you can see the color
settings here, and the opacity settings. And
| | 01:37 | then we drop off to 0% at the outer
edge of the planet. And of course, you can
| | 01:40 | change the density of the
atmosphere by pulling these back and forth.
| | 01:43 | I am going to zoom in a little bigger so
we can see this better. The light area;
| | 01:51 | super simple, and that's just two colors.
Pure white on the inside, falling off
| | 01:56 | to complete pure black on the outside at 0%.
| | 01:59 | Again, you can add more if you want, and
that will change the shape of this, but
| | 02:04 | I kept it as simple as possible. And
the sun, and that's just a three color,
| | 02:09 | radial gradient, 100% for
the slightly less deep yellow.
| | 02:13 | And again, falling off to 0% with a pure
white. and then we have the eight radial gradients.
| | 02:21 | So what I am going to do is show you
how I created just one or two of these
| | 02:25 | gradients for the rings. And
let's work against the background.
| | 02:29 | So I am just going to make sure everything
is padlocked, so we can't change anything.
| | 02:34 | Pick the Oval tool, or O on the keyboard.
| | 02:36 | Be sure we have Radial gradient selected.
| | 02:38 | Hold down Shift, and drag.
| | 02:42 | If you have the color of the stroke
color set to red or black or whatever,
| | 02:46 | you'll see a circle there. Sometimes I
like to keep that, because it shows me
| | 02:51 | the outer edge while I am working,
so let's keep it there for now.
| | 02:54 | Let's select the radial, and again the
Gradient Transform tool, and what I am
| | 02:59 | going to do is create a much more subtle
gradient at this point with a lot more colors.
| | 03:03 | And I think we are going to need
about seven, so I am just going to start
| | 03:05 | clicking and dragging; let's just start
making, I think, about seven different colors.
| | 03:09 | I am not worrying right now about
if they are visible or not visible, or
| | 03:13 | what color they are.
| | 03:14 | Let's space it a little bit like this.
| | 03:18 | So I'm going to want the inside, which
will be this marker here, to be maybe a deeper
| | 03:23 | yellow, and I think we can keep him at 0%.
| | 03:27 | Now we'll move to this one.
| | 03:29 | Sometimes it's a good idea to click and
drag these little markers to make sure
| | 03:32 | that they are activated.
| | 03:33 | Flash can be a little bit
funny about this sometimes.
| | 03:35 | So this one I am going to make
yellow as well, and let's make it 20%.
| | 03:40 | This is the point when we begin to see
the ring, and you'll see it popping on here.
| | 03:45 | You might find that it's a good idea to grab the
little dragger, and pull it a little closer.
| | 03:50 | Let's reactivate the Gradient Transform
tool. And now the third color over, that's this
| | 03:55 | one; see it's changed here.
| | 03:57 | Let's make that a bit deeper, 50%
opacity. And I want to make this one a
| | 04:03 | little more orange; slightly
different colors. Now the midpoint, and let's
| | 04:08 | make this one a brighter yellow, and I am
going to take him down to 90%; it's pretty bright.
| | 04:13 | Then the next one over, 50%. Starting
to drop off now as we move towards the
| | 04:19 | outer edge. It does not to be exactly 50,
but I like to be precise for some of
| | 04:23 | these. And we'll slightly
change it to an orange color.
| | 04:26 | I am making very subtle changes to the
different colors. I mean you can play with them;
| | 04:30 | they don't have to be
exactly what I'm doing here.
| | 04:32 | As long as you're reasonably
close, I think you'll be safe.
| | 04:34 | So now a yellow color for the
second last one, I am clicking them to be
| | 04:40 | absolutely sure this is the one I am
working in. And let's bring that down to 20%.
| | 04:44 | And then the final one, the
outside, should be zero.
| | 04:49 | It's a little too hot, and I think
there's something funny going on.
| | 04:52 | Essentially we should be going from
invisible, to the most visible, to the least visible.
| | 04:58 | So if I click on this, it should be 0,
20, 50, 90, oh, I am missing one.
| | 05:04 | Something got deleted along the way. I
am going to pop one back in; no big deal.
| | 05:07 | Let's click on that, and bring that up to 50,
and this should be 20, and we are starting
| | 05:12 | to see a more consistent ring shape.
| | 05:16 | Now it's a little bit thick, a little
bit too powerful, so I am going to bring
| | 05:19 | the 90 down to 80 a little bit.
| | 05:21 | Let's pull these in a little tighter.
| | 05:24 | I am going to deplete these a little bit,
they are still too dominant, visually.
| | 05:32 | And I am going to bring the middle one
down to 60. So what we are seeing now --
| | 05:38 | and I am going to pull these apart a
little bit, and I'll show you again what
| | 05:41 | the numbers are. Very careful; when you
get these two close together, they can
| | 05:45 | really begin to overlap and get confusing.
| | 05:47 | You can really only push these so close
before they become a little hard to handle.
| | 05:52 | Feel free to go in and adjust these settings.
| | 05:55 | Now I am making a change here in the
color field; I am keeping one eye on this
| | 05:59 | and one eye on that. Very carefully
select the next color. Maybe pull it
| | 06:04 | over a little bit and see what effect that has
on the lens flare. It might be a little too hot.
| | 06:08 | So we are going to desaturate this
color by simply moving it to the left.
| | 06:12 | Little reminder: if you are seeing a
slightly different color area, be sure
| | 06:15 | you have H selected in the Gradient menu.
They changed this with the later Flash versions.
| | 06:21 | And I am going to pull the
orange down a little bit.
| | 06:27 | I think we are looking at
something reasonably nice.
| | 06:30 | So it's 0, 20, 39% opacity. And you see
the hues are making slight changes; they
| | 06:38 | are moving back and forth a little bit.
| | 06:40 | If you think they are a little too
strong around the edge, let's bring them
| | 06:43 | down a little. And as we are doing this again,
we are seeing new little rings appearing.
| | 06:53 | So let's select this, hit F8,
and we'll call it lens flare 1.
| | 07:03 | And now it's time to get rid of that outer line.
| | 07:05 | We don't need that anymore; Control+
X. And now this can be positioned.
| | 07:12 | If you still feel it's too much,
because it's now a symbol, now you have access
| | 07:16 | to the color effect in the Properties
panel, and you can make an Alpha on that
| | 07:20 | and really bring it down. And now you
begin to see a very nice subtle effect
| | 07:24 | with the lens flare.
| | 07:25 | And so that's the process for making a flare.
| | 07:28 | I'll show you one more flare just to give
you an idea about how I will duplicate it.
| | 07:33 | So let's copy that and I'll make a new
layer, and Control+V to paste it in there.
| | 07:40 | And this time I am just going to right
-click and duplicate the symbol, and
| | 07:43 | call it lens flare 2.
And let's double-click to go inside.
| | 07:49 | This one will be a little simpler.
| | 07:50 | I am going to use five colors for the
gradient, instead of the seven that we had
| | 07:54 | here, and spread them out a little bit.
| | 07:56 | I am going to space them a little
differently, too, to show you that you can modify this.
| | 08:00 | I think as I was making those changes, this
deactivated, and this happens with me a lot too.
| | 08:04 | So let's select the Paint Bucket, and
repaint that, and see where they went.
| | 08:11 | So I am going to select the Paint
Bucket again, and deselect the lock fill,
| | 08:15 | click again, and now you
see the thing reappearing.
| | 08:18 | Again, select the Gradient Transform
tool, and as long as this little widget is
| | 08:24 | active, any changes that we
make here will happen there.
| | 08:27 | So just keep an eye out for that.
| | 08:29 | You can find yourself doing work in the
Color palette that's not happening on the
| | 08:32 | Stage, so it can be a little bit of a bother.
| | 08:34 | Now I am going to pull these apart a
little bit to change the shape of this.
| | 08:38 | This is going to be a thicker bead,
so that it has a different shape and
| | 08:40 | appearance, because they are
not all going to look the same.
| | 08:42 | Let's mak the inside a little more visible,
maybe 20%, and I am going to make that
| | 08:48 | more of an orangey color, so all these
little beads won't be the same color.
| | 08:52 | I'll make the second one 40%, close
enough, and that will be a lighter orange.
| | 08:59 | I am going to make this middle one,
say, 50%, and let's make it a yellow.
| | 09:04 | The next one would be falling off
now to 20%, that's pretty close, and that
| | 09:10 | will be a darker yellow.
| | 09:13 | And the outside, I am going to make
also darker yellow, and that's down to zero.
| | 09:18 | And so now we go back to the outer symbol.
| | 09:21 | Because I duplicated this from the
first symbol, it shares the same opacity
| | 09:25 | setting, 30%. Now you can bring it up;
that's probably going to be too bright.
| | 09:29 | It looks like a sun.
| | 09:30 | So it's nice to have the option of
bringing this down to something really,
| | 09:34 | really subtle, like 23, 20,
30%. Something in that region.
| | 09:38 | Again, snaps come back on, so let's
get rid of any snapping. And now you can
| | 09:43 | simply position the lens flares as you need,
and of course, don't be afraid to scale them.
| | 09:49 | Now you begin to see the process of
creating a simple lens flare effect.
| | 09:53 | I use this very occasionally, when I
really want to sell the fact that we're
| | 09:56 | looking at something incredibly bright,
and trick the eye into thinking that they are looking
| | 10:00 | at something that isn't just
a flat symbol on the Stage.
| | 10:03 | So basically at this point, all
you do is repeat the same process.
| | 10:08 | I would say play with this, go in,
try if you can figure out different
| | 10:12 | variations of these two simple forms, and then
deploy them around the Stage as I've done here.
| | 10:17 | I used a Google Image search to find
some nice sample lens flares online.
| | 10:22 | It's surprisingly difficult to
get a nice composition in the rings.
| | 10:25 | So if you do that, you will find lots
of references that you can use as source
| | 10:29 | material for your own, that
you can then modify and build on.
| | 10:32 | And then once you have got them in place,
a simple motion tween; being sure that
| | 10:35 | you have them all on their own
independent layers. And that's it.
| | Collapse this transcript |
| Animating ripples| 00:00 | So in the section I am going to
show you how to animate a ripple effect
| | 00:04 | using just gradients.
| | 00:05 | We are not going to animate any shapes;
| | 00:06 | we're just going to animate the
colors to create a little splash effect.
| | 00:11 | Obviously, this could be used for many things.
| | 00:13 | Depending on your scene, you can
make an explosion, or magic effect or,
| | 00:17 | the choice is yours.
| | 00:19 | And because we're moving colors here,
not shapes, you can change the colors of
| | 00:22 | this ripple effect quite
dramatically as you move them.
| | 00:25 | Let me show you what this
looks like on the inside.
| | 00:27 | We have three keyframes: that's the
first one, the second, and that's the third.
| | 00:32 | And in Outline mode, nothing moves. The only
thing that changes is the color of the object.
| | 00:40 | On frame 1, we have our three colors
defining the ripple, going from 0 opacity to
| | 00:46 | 100% white, to 0. And that gives us
a nice little white donut effect.
| | 00:52 | Here it is again, the same again thing,
but we've spread it out a little more.
| | 00:55 | We can control the form of
these waves by moving these colors.
| | 00:59 | Then on the final frame, everything goes to 0.
| | 01:03 | Again, I can also change by moving these apart.
| | 01:06 | We can stretch the wave and make
the dissipation a little more gentle.
| | 01:10 | So that's the basic process.
| | 01:13 | So the next step is to replicate this.
| | 01:15 | I am just going to delete these layers
and we will build one of these from scratch.
| | 01:20 | So let's make a new layer, and I am just
going to make a circle, and set this to a
| | 01:26 | radial gradient. And let's make a new gradient.
| | 01:31 | If we use the one that's already there,
it might be what we want, it might not.
| | 01:35 | But I'm just going to create an
artificial color gradient from blue to
| | 01:40 | red, so you can see,
| | 01:42 | I think, more clearly what's going on here.
| | 01:43 | So I'm going to pick a gradient that's blue
on one side, and maybe bright red on the other.
| | 01:49 | Select the Oval tool, hold down
Shift, and drag, and we have our object.
| | 01:55 | I am going to delete the line that
defines it on the outside. Delete the line.
| | 02:01 | The other thing that's a bit weird
about this is that the center of the object,
| | 02:06 | this triangle, is off a little bit. So
I'm going to pull it back in the middle.
| | 02:10 | Snap is on, and it's being a bit of
brute, so let's switch off any snapping.
| | 02:14 | I want a really fine control over this.
| | 02:17 | So under View>Snapping>Snap to Grid goes
off. And center that as close as we can.
| | 02:23 | Okay, so the thing to remember is
that this is going to be its own symbol
| | 02:27 | with its own Timeline.
| | 02:28 | So let's hit F8 to symbolize it, and
call it splash, and just double-click
| | 02:37 | on that to go inside.
| | 02:38 | So now we're inside it's external Timeline.
So here is the water level and the splash level.
| | 02:44 | So keep an eye out here to
see exactly where we are.
| | 02:48 | Let's get this thing a
little closer to what we want.
| | 02:53 | So the first stage will be to rotate this
horizontal axis to make it a little more vertical.
| | 02:59 | The reason being, I want to have access to
the triangle to offset the size of this.
| | 03:05 | I'm going to use the Free Transform
tool, or Q on the keyboard, to get a
| | 03:11 | geometry, that's closer to what I want.
And let's match that reasonably close
| | 03:15 | to the perspective of our background here.
And so now we have this false color splash area.
| | 03:20 | So let's go back to the Gradient
Transform tool and begin to shape with this thing.
| | 03:25 | So I'm going to pull that in;
that's pretty awful looking.
| | 03:29 | Let's pull the blue out a little, and by
clicking here we'll make a second blue,
| | 03:34 | and there we can see it.
| | 03:35 | So now we can pick things that
maybe are a little easier on the eye.
| | 03:39 | This is pretty hot, so I'm going to
change this to white, change this to white,
| | 03:46 | and change the red to white.
| | 03:49 | And then on the outer end, I'm going to
bring the opacity down to 0 of both the
| | 03:55 | inner and the outer colors.
| | 03:57 | Sometimes I click on these and nothing
happens, so if that happens to you, just
| | 04:01 | recheck the little
color here, and drag it again.
| | 04:05 | And again, nothing happened, so do it again.
| | 04:10 | This happens, so you do have
to be patient with this tool.
| | 04:12 | Don't let it get to you; it's not just you.
| | 04:15 | So okay, that's our first keyframe,
and that's pretty much the hard part.
| | 04:19 | Let's hit F6 on 20, and we will
go to the next key. There we go.
| | 04:29 | So there we have our middle
keyframe, and let's make another one.
| | 04:33 | Hit F6 on frame 40, and I'll hit the
Gradient Transform tool of course, and click on
| | 04:40 | frame 40. And move these out to the very end.
| | 04:44 | You can see on the Stage
it's reacting properly now.
| | 04:48 | On this one here, we want the middle white
to go all the way to 0, and there it goes.
| | 04:54 | So, let's select the Timeline and go
Remove Tween, and go Create Shape Tween.
| | 05:00 | So what we're seeing happening here is
the failure to apply the shape tween. And
| | 05:06 | the reason why is that later versions
of Flash are very helpful, and they have
| | 05:10 | drawn a blue line around these objects
| | 05:13 | where none was meant to be.
| | 05:14 | When I applied Classic Shape Tween by
mistake, it transformed them into symbols.
| | 05:21 | I don't want them as symbol,
| | 05:23 | I never wanted them as
symbols, but Flash thought I did.
| | 05:26 | So the solution to this is
to break them apart again.
| | 05:29 | Now actually, I'm glad you saw this,
because this is the kind of thing that
| | 05:33 | can really stymie people if they don't
know some of the peculiarities of the program.
| | 05:37 | So let's select the first frame and
hit Control+B to break it apart again.
| | 05:42 | The second frame, we don't want to see
blue lines anywhere; Control+B again. And
| | 05:47 | the third frame is fine;
| | 05:48 | we're not seeing any blue lines there at all.
| | 05:49 | Now let's go in here and Remove Tween,
and now we apply Create Shape Tween.
| | 05:57 | Be very careful not to select Classic
Tween by mistake; it will not help you.
| | 06:01 | And now we have our shape tweened ripple.
| | 06:04 | Let's add F7 here to create a blank
frame so it goes completely to white.
| | 06:11 | And now when we play the
outer scene we have our ripple.
| | 06:14 | Right now it's set to loop, which you
might want, or you might just want it to
| | 06:18 | play once, so we can set that in
the Properties panel under Looping.
| | 06:22 | In order to create the little rain
shower effect we saw earlier, let's just
| | 06:27 | make some empty layers.
| | 06:29 | Select that, hold down the Alt key, and
drag to different points on the Timeline.
| | 06:35 | And you'll see them all
occupying the same space.
| | 06:37 | You might want that, you might want to
be offset, so you might want to hold down
| | 06:41 | the Shift key and move the Arrow keys,
and that is the process by which we would
| | 06:46 | create a series of overlapping ripples.
| | 06:48 | You can scale the sizes, you
can scale the opacity of these as well,
| | 06:51 | but that's the process.
| | 06:52 | So I hope that's helpful in giving
you some ideas as to how you can use
| | 06:56 | gradients in combination with
shape tweening to create some nice
| | 07:00 | animation effects.
| | Collapse this transcript |
| Creating a gradient globe| 00:00 | Here we're going to apply a
gradient to a very common graphical symbol;
| | 00:04 | a lot of people at some point
need a spinning earth, or a planet.
| | 00:08 | And it's pretty common to see some
really cheesy ones out there in online
| | 00:11 | graphics and whatnot.
| | 00:12 | So here's how we take an existing
gradient, and this is the identical assets, the
| | 00:17 | same shapes, with some gradients applied.
| | 00:20 | So as you can see, it's quite a
transformation from one to the other. And
| | 00:23 | actually we could add even more
gradients, but for the purpose of the lecture,
| | 00:26 | let's keep this simple.
| | 00:27 | So we're looking at adding maybe
about three gradients to the shape of the
| | 00:30 | sphere itself, and maybe about four or
five to the internal shapes of the map.
| | 00:36 | So I'm going to take you
into this quick look-through.
| | 00:39 | So layer by layer; we have our ocean
on top of the map, and then the outer
| | 00:46 | atmosphere, and then the shade layer.
| | 00:48 | And we can push these;
| | 00:49 | these are actually pretty subtle, but we
have them in place; now we can do what we like.
| | 00:53 | The map is basically the entire map of
the Earth with a few bits chopped off out
| | 00:57 | here, and it's masked with a layer
that's the same shape as the ocean.
| | 01:01 | And that basically frames the entire surface.
| | 01:05 | That also allows us to move the map
back and forth if we want to focus
| | 01:10 | on different areas.
| | 01:12 | So what I'm going to do is, like I've
done before, I'm going to delete some
| | 01:16 | of the current layers, and recreate them to
give you an idea about how this is constructed.
| | 01:20 | So let me switch off the map layer first.
| | 01:22 | And we'll just deal
with the sphere of the Earth.
| | 01:23 | Imagine there's no landmass on the
Earth, and I'm going to take the beautiful
| | 01:29 | blue orb and just make it a flat area.
| | 01:32 | I'll pick a flat color, and fill that.
| | 01:36 | This is what I consider the base shape of the globe.
| | 01:40 | And obviously we want
this to be a nice radial color.
| | 01:43 | So we've defaulted back to an
earlier gradient that I've used, so let's
| | 01:47 | just delete all of that.
| | 01:49 | And what we're looking for here
is something reasonably simple.
| | 01:51 | I think three colors will be plenty.
| | 01:54 | And let's pick a dark blue, obviously,
so that will be the major color.
| | 02:00 | Our opacity settings are too low;
| | 02:01 | I'll bring them back up to 100%.
| | 02:02 | And a quicker way of creating new clones;
I'm just going to delete the ones that
| | 02:06 | are there by dragging off, and
I'm clicking here and creating new ones.
| | 02:10 | So click that to drag, and click this to move.
| | 02:13 | And now we have three that
are pretty much the same.
| | 02:15 | So now I'm going to, as you can see,
lighten that a little bit. Click on this
| | 02:19 | and lighten that some more; maybe change the
color slightly, and now let's fill this area.
| | 02:25 | And by clicking at different spots
you can see how you can start to create
| | 02:29 | quite different illusions of illumination.
| | 02:31 | So that's a bit more precise;
we'll use the Gradient Transform tool.
| | 02:36 | And again, snapping is on;
let's switch that off. Let's do this.
| | 02:43 | And I'm going to move this triangle
slightly to one center, just to create a
| | 02:47 | little more interesting shape.
| | 02:48 | Here I am going to move this down just
to darken that out. And we can also, of
| | 02:56 | course, change the position of the
colors by pulling these back and forth.
| | 03:02 | So let's lock that for now.
| | 03:04 | Now I'm going to make the horizon, and
this is the thing that will create the
| | 03:07 | illusion of a dropoff. So let's do that.
| | 03:11 | And we'll again click on the Fill tool.
And we have our earlier gradient already
| | 03:16 | created here, so let's make a different one.
| | 03:18 | Pull these in. And we
want the outer edge to be white.
| | 03:22 | And I think we'll fade it out to white as well.
| | 03:26 | This is going to be the
inside one; let's set that to 0.
| | 03:30 | And this one, very subtle, just a
little blue tint, just to give a hint of some
| | 03:35 | kind of color so it's not pure white;
| | 03:37 | that's kind of boring.
| | 03:38 | So again, very subtle, bring this down
to 10% or 15%, and I'm going to fill that.
| | 03:43 | And now bear in mind, what we're
seeing now is two gradients overlapping.
| | 03:47 | And you really notice this if
I pull this off to one side.
| | 03:50 | Now you're seeing the outer edge of the
white, over here, is now being shown there.
| | 03:56 | But if we pull this in to match the
outline, you get a sense of how pretty
| | 04:02 | this is going to look.
| | 04:03 | So the outer edge is 100%;
| | 04:05 | I'm going to bring that down, let's say, to 60%.
| | 04:07 | This is too strong, and now you're
seeing a great deal more subtlety in it.
| | 04:15 | And this is completely a matter of
your personal taste of course, but this is
| | 04:20 | not looking too bad.
| | 04:22 | And now the shade layer, which is also at
the moment that default blue that I was using.
| | 04:26 | So let us make another gradient here.
| | 04:29 | I want to drop the preceding gradient
onto that, so obviously that's not the one
| | 04:33 | that we want to use.
| | 04:34 | So let's just reposition this anywhere.
| | 04:38 | Don't be afraid, like I said, to
really make a crazy artificial color if it
| | 04:42 | helps to see exactly what you're working on.
| | 04:44 | So this is going to be the shadow layer,
and I think we probably should have
| | 04:50 | four layers for this.
| | 04:51 | And this inside one is going to be
at the darkest, so let's make that one
| | 04:57 | an interesting color;
| | 04:58 | I'm going to make it, like, a darker purple.
| | 05:01 | Not too hot though, so I'm
going to pull the color down a lot.
| | 05:07 | What I'll do, it's easier and quicker, is
to click over here, and drag new colors to
| | 05:12 | this end, and then get rid of the old ones.
| | 05:15 | You get used to this
pretty quick. And let's see.
| | 05:18 | Now, the outside, that's going to be 0,
and now you can really see what we're doing.
| | 05:32 | The second one out
from the right would be about 15.
| | 05:37 | And then the mid one
will be about 40. Okay.
| | 05:42 | And now, it's a little too purple of
course, that's obvious. So let's desaturate
| | 05:48 | that, and we bring it closer down to a dark blue.
| | 05:54 | This is less important on the more
transparent colors, because they're obviously
| | 05:57 | more transparent; you can make
them almost any color sometimes.
| | 06:01 | So let's just keep expanding this,
and we also have access to this little
| | 06:06 | triangle to change the shape. We can
pull it out, and now we're starting to get
| | 06:10 | a really nice feel of a
planet floating in space.
| | 06:14 | And that leaves the last
aspect, which is the Earth.
| | 06:17 | Now, I've got a mask which is
identical to one of these gradient shapes, so
| | 06:20 | that's precisely matching the Earth.
| | 06:22 | Let me go in, and we'll deal with the
Earth by itself, because it looks like a
| | 06:27 | lot of detail here, but it's
very deceptive; it's quite simple.
| | 06:30 | I want to do just one of the continents to
give you an idea about how this was done.
| | 06:34 | Let's pick North America,
and this is the base North American shape,
| | 06:38 | and I put the little southwest
desert in as another gradient.
| | 06:41 | Now, I'm going to duplicate these two
layers, and hold down the Alt, Option key,
| | 06:46 | and just drag them up here.
| | 06:49 | And I'm going to wipe the color, so I'm
just going to give them a boring flat green.
| | 07:00 | Same on this gradient thing here. Okay.
| | 07:05 | So here we have North America.
| | 07:06 | How do we make this more interesting?
| | 07:08 | Well, let's just pick our fill again,
and we want a radial, and I think three
| | 07:13 | colors will be enough.
| | 07:14 | And again, I'm going to
just delete some of these.
| | 07:17 | Pick a nicer green, and let's make it 100%;
| | 07:23 | all these colors should be 100% for the base.
| | 07:25 | Obviously, you don't want to see
through the land to the sea beneath. Okay.
| | 07:31 | So that gives us three colors to play with.
| | 07:33 | And we can select the entire area and
click on -- actually, we would probably
| | 07:38 | just be able to access the primary
landmass, which will be the shape.
| | 07:43 | And again, it's popped off my radial.
| | 07:44 | So let's go to Radial gradient again, and
refill that, and hopefully this time it
| | 07:50 | will take, I'll fill the entire area.
| | 07:52 | So I just clicked on the frame, click
on the Fill tool, and now that's it.
| | 07:57 | So now when I select our tool here,
we can begin to position this.
| | 08:04 | And it depends where you
want the darker areas to go.
| | 08:07 | Bear in mind that the sun is coming
from this way, so maybe you want your
| | 08:10 | brighter stronger colors out here, and
darker ones over there. So let's try that.
| | 08:15 | And this is going to be the center of
the tool, don't forget, so we will be
| | 08:20 | radiating out from here.
| | 08:21 | So what I'm going to do, in this case,
is pull that to there so that the darker
| | 08:27 | will be center, so let's do that.
| | 08:30 | Darken the middle color, and if it pops
off like that and goes live with all the
| | 08:36 | little dots on it, again, just
click the Gradient Transform tool.
| | 08:39 | And as you can see, it's a little too
dark, so I'm going to pull the darker
| | 08:43 | closer to the center.
| | 08:44 | And if it does not fit in the curve,
just expand this; pull this in.
| | 08:51 |
| | 08:54 | And we have two colors here that are
pretty much the same so I'm going to alter one.
| | 08:59 | And it's very good if you can change
from one kind of green to another. You'll
| | 09:03 | find it gives you a much more lively gradient.
| | 09:06 | And I think that our dark is a
little too dark, so sometimes if I want to
| | 09:09 | brighten it up, I'll hit the midpoint,
delete that, and drag this to where the
| | 09:14 | other one used to be.
| | 09:15 | It's a quick and dirty way of making a change.
| | 09:18 | Next thing to do is to drop in
the desert for the Southwest.
| | 09:21 | I don't think I need to worry about
having all these little Baffin Islands up
| | 09:26 | here; let's get rid of them.
| | 09:28 | I'm just going to work on this area here.
And click on the Fill, pick Radial, and
| | 09:35 | this time I want to make a
desert, like the American Southwest.
| | 09:38 | So let's go to something
that's going to be a yellow value.
| | 09:41 | And again, simpler just to drag these
guys off, make a new one, and let's make
| | 09:48 | this one really simple.
| | 09:49 | So I'm just going to have the outside go to 0.
| | 09:51 | And makes no sense right now because
it's filling the entire map, so let's grab
| | 09:56 | our F key, our Gradient
Transform tool, and pull this in.
| | 10:02 | And now we can pop it into roughly
the area of the country that's desert.
| | 10:06 | I'm feeling snap on again,
so I have to switch that off.
| | 10:10 | Let's probably make the desert area not
quite so bright; we want this to be subtle.
| | 10:17 | I'm going to pull that in a bit more.
And this is the kind of point when I
| | 10:20 | usually need to make an intermediate
color, and then drag it so that the
| | 10:24 | dropoff is a little more subtle.
| | 10:26 | Let's go in a bit tighter; have a look at this.
| | 10:28 | I know there's not desert up in San
Francisco, so let's pull this down a little bit.
| | 10:34 | Okay.
| | 10:34 | I'm going to pull the core in, and then
basically move these around until I get
| | 10:39 | something that has a much
more natural feeling of dropoff.
| | 10:43 | And so this is the basic process
that I've used to create these maps.
| | 10:46 | And to look at the finished product, which
has obviously a great deal more subtlety.
| | 10:50 | You see, I've got some little blue
tints in Alaska, and there's a layer for like
| | 10:55 | the entire Sahara, and Arabia.
| | 10:58 | There's the one that I've just done
now; you can see how it's a little,
| | 11:00 | maybe, too aggressive.
| | 11:01 | Now that you see the process, though, you
should easily be able to see how this was done.
| | 11:05 | We're dealing with, like, a base
gradient, and whatever additional layers you
| | 11:10 | want on top of that.
| | 11:12 | You could add another layer for the rainforest
with a darker green, and with any of these maps,
| | 11:18 | it's entirely a matter of your personal
preference as to how many layers you want to add.
| | 11:23 | Bear in mind that the more layers you add,
the slower a SWF file is going to work;
| | 11:26 | that's my only warning on that.
| | 11:28 | So when we pull out to the main
Stage, here's our globe, and here is the
| | 11:33 | before and the after.
| | 11:35 | So keep this in mind as something that
you might be able to use to add a little
| | 11:38 | bit of extra heft to your graphics.
| | Collapse this transcript |
| Creating a gradient bottle| 00:00 | Up until now I've shown you how to
apply gradients to objects that were fairly
| | 00:04 | simple in shape, and it's true that we
are limited to the linear, and the radial
| | 00:08 | gradients which can be
squished into elliptical, or egg shapes.
| | 00:12 | It is possible, though, to apply them to
objects with a slightly more varied form.
| | 00:16 | So here is a bottle. We still,
off course, are constrained with how
| | 00:20 | aggressively we can apply the gradient,
| | 00:22 | but let me show you how this thing was achieved.
| | 00:24 | I am going to zoom in.
| | 00:27 | Let's frame this little bit better, and we're
just going to look at the bottle by itself.
| | 00:33 | Now sometimes when I work with
gradients like this I like to put in a
| | 00:37 | background color, which I got it out
as a Guide layer, but I use it to put in
| | 00:41 | like a slab of color, and you can make
that color whatever you like. It can be
| | 00:45 | very dark if you want to check the
object against the different illumination,
| | 00:50 | and so that's pretty handy for me.
| | 00:52 | So I am going to switch off these layers,
and we will go through them one at a time.
| | 00:55 | We have the inner base, and that's a
shadow just for the footprint of the bottle,
| | 01:00 | on top of that, a simple line outline
so you might want to leave this out even,
| | 01:03 | but I have put it in just so that
it pops the silhouette out strongly.
| | 01:06 | There is a top light; this is a linear gradient.
| | 01:09 | We could make out a radial I guess,
but I just thought let's put a linear in
| | 01:13 | just to have something a little bit different
in form, and it's hitting -- the brightest
| | 01:16 | point of the gradient is at the
shoulders of the bottle. And then we have a
| | 01:22 | very simple layer; that's just a regular --
no gradients, just different shapes and
| | 01:26 | at different opacities.
| | 01:28 | So this one here is a little more
transparent than this one, and as you can see
| | 01:32 | there is a very bright highlight
right at the top of the bottle.
| | 01:36 | And then we have another gradient
layer; that's just the basic highlight. And a
| | 01:41 | shadow one. And if we look at these one
by one by themselves, there's the edges,
| | 01:46 | there is the highlight, the simple shapes, the
linear gradient, the outline, and the
| | 01:55 | shadow for the bottom. And they
all work together to create this.
| | 01:58 | Now it took me quite a while
playing around with different settings.
| | 02:01 | I'd say it took about an hour and a half
of playing with the different layers to
| | 02:06 | get something that I was really happy with.
| | 02:08 | But the beauty of it is that once
you get it there, then you're able to
| | 02:11 | switch these on and off. So you
might think later on, I don't need the
| | 02:14 | outline, or you might want to move
the outline to an upper level to make it a
| | 02:18 | little more graphical.
| | 02:19 | You can move it all the way to the
bottom if you want to push it back. You
| | 02:22 | can even switch it off.
| | 02:23 | So it's nice to have a file in this
form because you have complete control
| | 02:28 | now over the object.
| | 02:30 | A word of warning: use as few gradient
layers as you think you need. If you
| | 02:33 | use too many of them you will start
slowing down the program. There is no reason
| | 02:36 | to go crazy with them, so just use
what's appropriate, and that's about it.
| | 02:40 | Very quickly, I am going to just show
you how this was put together, and the
| | 02:43 | easiest way to do that is simply to
delete these layers and reconstruct them, so
| | 02:49 | that's what I will do now.
| | 02:50 | So I am going to leave the outline
layer, there is no reason to redo that. If
| | 02:56 | you don't have access to the Exercise
files, then it should be easy enough to do
| | 02:59 | a screenshot, or copy this
basic shape for yourself.
| | 03:03 | It's a very simple form.
| | 03:04 | So there is the Outline layer,
and here is the Hilites layer.
| | 03:08 | I am going to darken that outline so
you can see a little better; there we go.
| | 03:15 | So those are the two layers you might
have to reconstruct yourself if you don't
| | 03:17 | have access to the Exercise files.
| | 03:20 | So what I am going to do now is take
all the gradient layers, and just simply
| | 03:24 | paint them with the Ink Bottle tool.
And I'm going to delete the interior.
| | 03:41 | And so now we should have the same
bottle, but with all of the gradients purged.
| | 03:45 | I'm going to leave the footprint, the little
shadow at the bottom, it's extremely simple.
| | 03:51 | It's just a two color gradient;
if I click on it you will see.
| | 03:54 | The top light is still there; I
want to get rid it of that too.
| | 04:02 | So there is our footprint.
| | 04:03 | It's just a gradient going from black at
this point, at 10% Alpha or transparency,
| | 04:11 | and it's a grayish color, medium gray
at the outside, at 0%. That's it. Very
| | 04:16 | simple to make that.
| | 04:17 | The ones that are little
more trickier are the outlines.
| | 04:21 | So the top light was the next layer
and that was a linear gradient. So I want
| | 04:26 | to use our Fill tool, and select
Linear gradient. And I think we want this to
| | 04:33 | have a few more colors.
| | 04:34 | Two isn't enough; I think we had
originally four in there. So just move these to
| | 04:38 | where we want them to be.
| | 04:45 | Very easy to make these disappear by
accident if you click them and just drag
| | 04:48 | off to this field here.
| | 04:50 | So it is a little touchy.
| | 04:52 | So this one, I am going to make about a
medium gray. Let's paint it in first so
| | 04:57 | we can actually see what we are doing on the Stage.
| | 04:59 | For those who've used an older
version of Flash, they've now nested the Ink
| | 05:03 | Bottle tool and the Paint Bucket tool
under the same icon, and you have to select
| | 05:07 | from one to the other. It's very easy
to confuse them; they look very similar,
| | 05:11 | and I keep getting them mixed up. There we go.
| | 05:13 | And now we use the Gradient Transform
tool to click here, and I'm going to
| | 05:18 | pull this in, and rotate it, and stretch
it so that these two blue lines hit the
| | 05:24 | top and the bottom of the bottle. And
now our gradient is going to be applied
| | 05:28 | exactly the way we want it,
and that will be pretty sharp.
| | 05:31 | The problem now is you will get confused;
is this gray this one? Is this gray this one?
| | 05:36 | And I think I want this to be top.
| | 05:38 | So let's rotate it. There we go, and if you
get confused, simply pick a strange color.
| | 05:45 | Now you can orient yourself toward the gradient.
| | 05:48 | So we want this to be the top color.
| | 05:50 | I want to make it a medium gray; make
that about 10%. Then the next one; this is
| | 05:57 | going to be approximately here.
| | 05:58 | That was the highlight of the middle
of the bottle; want that to be white, and
| | 06:03 | actually I am going to bring it down
to 0% so that we fade out to that white.
| | 06:08 | And the next one, I think we also want
to be white, and I am going to brighten
| | 06:15 | that to 30%. And the bottom one, and I am
going to make that one darker because we
| | 06:21 | are going to more of a dark shadow
towards the bottom, and let's make that 10%.
| | 06:27 | And it's very hard to see what we are
doing of course because we are against
| | 06:30 | this white gray background.
| | 06:31 | This is where the reference color
background comes in very handy. And now you can
| | 06:34 | see with this white area,
it's a little lower than I want.
| | 06:36 | I want it here, so let's move it up a bit.
And by pushing and pulling these tabs
| | 06:44 | I can correct it, so that's exactly what I want.
| | 06:47 | So now I am going to remove that little
red outline, lock that. And we have our
| | 06:54 | Outline layer; that's fine. We have our
Hilites layer; that's easy. The next gradient
| | 07:00 | layer to worry about is the radial.
| | 07:02 | So let's switch off these for now.
The radial is the bright spot that was
| | 07:06 | right here, so that will be a radial gradient.
And I think that's only going to be three colors,
| | 07:13 | so let's get rid of one these. And I
am going to make this one 10%. It's not
| | 07:18 | going to be very, very
strong; just enough to hint it.
| | 07:25 | And now 70; this is in the middle.
This will be the really hot part, and
| | 07:31 | that will be white too.
| | 07:32 | And all I want to do is put
a little color on the dropoff.
| | 07:37 | This part here will be a little, slight
color, and we are going to fade all the
| | 07:43 | way out to a light gray at, say, 5%.
| | 07:46 | When we apply it, we see it pops down
arbitrarily, so let's position them. And
| | 07:58 | we use these familiar tools now to
rotate the gradient until it makes a spot
| | 08:04 | that's reasonably close to hitting
that curved upper part of the bottle.
| | 08:09 | I am going to make it much bigger, so
now it completely encircles the bottle.
| | 08:18 | If you think this is too big, you can also
adjust the size in here by pulling this in.
| | 08:22 | That looks good, so let's padlock that.
And then I think we need to get rid of
| | 08:26 | the red line; double-click on that
line, Control+X to get rid of that. And now we
| | 08:34 | have the final one, the edges.
| | 08:35 | And that was the one that had
the dark outer area of the bottle.
| | 08:39 | So again, let's go to the Fill tool.
| | 08:41 | That's also going to be a radial gradient,
and let's also keep it reasonably simple.
| | 08:46 | I think three colors would be fine for
this. The darker will be on the outside,
| | 08:50 | and remember that the outside -- if you
have your color palette docked here then I
| | 08:54 | always remember it as the outside
being at the edge of my screen here.
| | 08:57 | So the outer edge I am going to make
black, and I will set that to 20%. And you
| | 09:03 | will notice I am keeping these
opacities fairly subtle. You can beef them up
| | 09:09 | if you think you need something a
little stronger, but I find subtlety works
| | 09:13 | really well with this.
| | 09:14 | This one I am going to make gray, and
let's make that 10%. And the middle value,
| | 09:22 | we will keep a lightish gray,
and I am going to set that to 0.
| | 09:28 | See Paint Bucket tool; there it is. Okay.
| | 09:31 | And now we go to the Gradient
Transform tool, and now let's pull it in, and now
| | 09:37 | you can see our gradient.
| | 09:38 | Now it's simply a question of pulling the
gradient until we can best match this bottle.
| | 09:44 | So I find at this point, let's
just activate everything else.
| | 09:48 | And we will switch off the outline, and
I think there is another layer we are
| | 09:53 | seeing there in red. Yeah, that red is
kind of distracting now, and that's the
| | 09:56 | red on the final layer, so I want to
double-click that to get rid of it. We
| | 10:00 | don't need it anymore.
| | 10:01 | And now we can really see, if we click
on the top gradient on the Transform tool
| | 10:05 | as we move it around, you can see the
effect that we are having on the bottle.
| | 10:13 | So I think that's getting us very,
very close, and then of course we have our
| | 10:17 | Outline layer. And that is the basic
process that I use when I want to create the
| | 10:22 | illusion of glass. And I think we
are ready to go on to the next step.
| | Collapse this transcript |
| Applying gradients to a character's eye| 00:00 | In the previous section I showed you
how you could remove the dreaded flashy
| | 00:05 | effect from a background.
| | 00:07 | In this section I am going to show you
how you can remove it from a character,
| | 00:10 | as long as your character is
reasonably simple and not too angular.
| | 00:14 | You notice this guy has an egg head and his
eyes are nice and round. He is not square.
| | 00:17 | And this plays to the
strength of the gradient tool.
| | 00:21 | With that in mind let's take a quick look.
| | 00:24 | So I am going to enter the head of
the character and go in a bit tighter.
| | 00:29 | And as you can see we have
gradients all over him, and not too many.
| | 00:33 | He really is deceptively simple.
| | 00:36 | So let's go back onto the main Stage.
| | 00:38 | I am going to hide the other guy.
| | 00:42 | I'm going to going to go into Mr.
| | 00:43 | Flat and show you some
tricks that you can apply.
| | 00:46 | So the one thing, if you only do one
thing, and I think this could probably be
| | 00:50 | applied to any character, is you can
do something about these dead eyes.
| | 00:54 | So let's go into the pupil.
| | 00:59 | We have three layers.
| | 01:00 | The outer layer is the blue, the middle one
is the black, and the top one is the highlight.
| | 01:06 | So let's padlock these.
| | 01:08 | I am going to make new layers, and we are going
to make a new version of each of these objects.
| | 01:14 | So I am going to select the Circle tool,
select Radial gradients, and we are going
| | 01:20 | to go from white to white.
| | 01:21 | So let's do that right now in here:
white on the inside, white on the outside.
| | 01:26 | The inner color will be 100%, the
outer edge will go to 0 opacity.
| | 01:31 | The Circle tool is selected. Hold down
Shift, and drag. And hard to see it right now,
| | 01:37 | so let's hide the old one, and we
will drag the new one into place.
| | 01:40 | It's a little bit tight,
| | 01:42 | so let's give him a bit more room.
| | 01:44 | I am going to select the Gradient
Transform tool, or F on the keyboard.
| | 01:47 | Pull this in a little bit.
| | 01:48 | And I am going to get a bit more room
for that little dropoff, and there you
| | 01:53 | see the difference.
| | 01:54 | Now we will do the same
thing for the black of the eye.
| | 01:57 | Select the layer beneath, select the
Circle tool, we're in Radial gradients.
| | 02:03 | Select one of the whites, and let's
go to black this time; black on the
| | 02:07 | inside, black on the outside.
| | 02:10 | I am moving these here just to make
sure that the color took. And on Layer 5, or
| | 02:15 | the second layer from the top, hold down
Shift, and drag. And to see this properly,
| | 02:20 | let's hide the other black layer.
| | 02:22 | It's not as blurry as I'd like.
| | 02:24 | So let's select that, and we see what the
problem is: we just didn't have that in tight enough.
| | 02:29 | So there we go.
| | 02:30 | And now we have the black and the white.
| | 02:33 | You notice also if you select these
that there's little line appearing
| | 02:37 | around them out here.
| | 02:38 | That's because if you make any of
these shapes they tend to have some kind of
| | 02:43 | line edge built in by default, which
you can see if I use the Ink Bottle
| | 02:48 | tool, and repaint it.
| | 02:50 | So I like to get rid of them.
| | 02:51 | Just click on the outside, or double-
click to get rid of the entire thing.
| | 02:54 | Hit Delete there and there. It
just makes it a little bit cleaner.
| | 02:59 | And then the final thing will be
to make the blue of the eye.
| | 03:02 | So I want to pull down the bottom
layer, which was the original blue.
| | 03:05 | Hold down the Alt, Option key, drag
to the empty layer, select, and let's go
| | 03:12 | to Radial gradient.
| | 03:14 | We want to have a nice
blue color on the outside.
| | 03:19 | Blue on the inside. And we are seeing it already.
| | 03:22 | Let's go to Gradient Transform tool so
we can really see what we are doing here.
| | 03:26 | I am going to the pull is 0 in a little bit.
| | 03:29 | The reason why you're not
seeing the dropoff properly;
| | 03:32 | I've still got the bottom layer visible.
| | 03:34 | We can hide that now. Good!
| | 03:35 | So let's pull that out, and let's add
a little bit of extra interest here.
| | 03:41 | We will click to add an extra color, go to
the middle one, and let's make this darker.
| | 03:46 | You can see how easy it is to add a
little bit of dimension to that eye.
| | 03:51 | If you want to harden the outer line,
you just close to gap between it and the
| | 03:55 | outer alpha, this 0 color here. But I like to
give it a little bit of dropoff. So that's it.
| | 04:02 | Don't forget: delete the old reference layers;
| | 04:04 | you won't need them again.
| | 04:09 | An incredibly simple thing to do, and
looking at it now you probably would want
| | 04:13 | to blur the white to highlight it a little bit.
| | 04:16 | I am going to hit Q, Free Transform tool.
| | 04:19 | Bring that down a little bit, pull in the
white just to extend the blur around that.
| | 04:26 | It is, after all, a little bead of light.
| | 04:28 | You could add more of them if you wanted.
| | 04:29 | There is no end to where you could go with this.
| | 04:31 | So then the other thing I really would
want to do would be to add a gradient to
| | 04:36 | the white of the eye, and
that's the eye left layer.
| | 04:37 | I am going to select that, hit the Fill
tool again, and select Radial gradient.
| | 04:46 | And let's drop the last
gradient we were working on;
| | 04:50 | you may have a different gradient.
You're going to have to change it anyway.
| | 04:53 | So let's go to the gradient and bring
the edge back up to 100% so we can see it.
| | 04:59 | Give it a weird color so you
can really get a high contrast.
| | 05:02 | This won't be the color you're going to
use, but you really probably will want
| | 05:05 | to see, you know, what the effect that your
changes are having on the object.
| | 05:10 | I like this outer ellipse to match as
closely as I can, but you just want to
| | 05:15 | make sure that if you have any
transparencies on this that they don't affect the
| | 05:20 | cut into the outside edge of the eye.
| | 05:22 | This triangle here; by moving that
triangle you can offset the shape of the
| | 05:28 | gradient, and it can help you to fit
the gradient to the shape of the eye.
| | 05:32 | I am going to pull this in a little more,
and that is as close as you're going to get.
| | 05:38 | So now that we've done that we
can go to a more natural color.
| | 05:42 | When I have something like this, if I get
this color to be more or less what I want --
| | 05:47 | I think a little tint will be nicer
than that, just a little; not much.
| | 05:51 | Then that's a pretty harsh dropoff,
| | 05:55 | so let's make it a little more subtle.
| | 05:57 | I want to make a new color there,
and just drag it. There we go.
| | 06:02 | And that's created a
pretty nice feeling of volume.
| | 06:07 | If you think that's a little too heavy;
| | 06:10 | his eyes are a little too buggy, just go into
that outside color and pull it up a little bit.
| | 06:15 | You have great control over this.
| | 06:17 | So now we are out, and the next step
will be to add a new layer that describes
| | 06:23 | the shadow that's going
to surround the eye here.
| | 06:26 | So let's add that new layer, and
we will call it eye left shadow.
| | 06:33 | So the quickest way to do it; we'll
just duplicate the eye layer itself. And
| | 06:39 | let's get the padlock off.
| | 06:41 | And let's just give it a really fake color;
it's black, so we can see exactly where it is.
| | 06:45 | Select it again. Hit Q; Free
Transform tool on the keyboard. Maybe select
| | 06:51 | it again, and then drag. And right now
we're not worrying about the color.
| | 06:58 | We are just trying to get the shape to match.
| | 07:04 | Now let's apply that color again.
| | 07:06 | So Color Bottle>Radial gradient. And
again strip this down; make it as simple as
| | 07:14 | we can. Maybe red on one end; I am going
to pick a phony color on the other. Oops!
| | 07:20 | I hit the wrong one. Control+Z; Paint Bottle tool.
| | 07:24 | Paint that in there.
| | 07:27 | Now I am going to use the Gradient Transform
tool to try to match this again to the eye.
| | 07:32 | I could've copied eye gradient onto this.
It might have been a bit quicker,
| | 07:36 | but I like to show you, too, exactly
how I can build these from scratch.
| | 07:40 | I don't have to copy and paste
something that's pre-existing to match this,
| | 07:44 | and neither do you.
| | 07:45 | So don't be afraid of making one of
these from scratch and fitting it in.
| | 07:48 | If you don't like it, you
can just make another one.
| | 07:51 | Don't be afraid of working,
as I am here, in false color.
| | 07:54 | The beauty of working in false color
is that you can really see where your
| | 07:57 | colors are going inside the
restrictions of the shapes that you're building.
| | 08:01 | This is looking pretty good.
| | 08:03 | So now that I've got that,
let's put some real colors on here.
| | 08:05 | Let's say I like this color here, this dark
coffee color, and I want to match it there.
| | 08:10 | It's very simple, just click there,
make a new one, drag the blue away, copy
| | 08:15 | this over, and drag the opacity down to 0.
And you will have something reasonably close.
| | 08:20 | Now if you think that dropoff isn't working,
maybe you can pull the triangle up to
| | 08:24 | fit that to the curve.
| | 08:26 | That might mess something
else up. You can expand it.
| | 08:29 | You see what I'm doing here?
| | 08:30 | I am hitting the outside end of my
geometrical shape, and I don't want that to
| | 08:36 | be much bigger than it already is.
| | 08:38 | So I am going to just pull it up, try
to fit it inside, and pull it back in.
| | 08:43 | Sometimes, if you want to fit it again,
go to Outline mode, and that way you can
| | 08:46 | see, oh, I've spread out outside the blue.
| | 08:49 | You want to keep this shape inside the
line of your shape, your actual color, so
| | 08:56 | that way any modifications
are contained. So there we go.
| | 09:00 | There is still a little bit of hard edge there.
| | 09:02 | So it's possible to extend
that outline a little bit.
| | 09:07 | If it buys you a little more room,
that's not going to mess anything up.
| | 09:11 | Go back into this, maybe pull the triangle down.
| | 09:14 | You can also rein in these colors a little bit.
| | 09:16 | Maybe add another one.
| | 09:19 | Change the falloff.
| | 09:20 | And this is at 100%;
| | 09:22 | maybe you want to make a bit more subtle.
| | 09:24 | Go from 75%, to 30%, to 20%.
| | 09:28 | I am going to make the dark a
little lower even; maybe 55. That's nicer.
| | 09:33 | So now we have a much more natural little shadow
effect that defines the hollow of the eye socket.
| | 09:39 | There's more layers you can add of course.
| | 09:41 | You can add as many as you think you
can handle, but it's best not to go too
| | 09:45 | crazy if you're doing this for the first time.
| | 09:48 | The other thing that I would do next would
be simply to take the eye layer, and to
| | 09:52 | copy it onto the other side. And then
we can proceed, and move on to adding a
| | 09:57 | few gradients to the skull, the nose,
and the ears, and round off the
| | 10:00 | character.
| | Collapse this transcript |
| Applying gradients to a character's skull| 00:00 | Moving on from the previous section,
we had the eyes, and the eyeball, and the
| | 00:05 | shadow area around the eye all
converted to these nice gradients.
| | 00:08 | And what I've done in the meantime is
I have taken the eyeball, and the shadow,
| | 00:15 | and simply flipped it to
cover his physical right side.
| | 00:18 | But the next step would be to do the
same process that we've just done, but to
| | 00:21 | apply it to the skull. And the highlight
and the shadow area; that we'll need two
| | 00:26 | layers. And we'll do the area
around the mouth for the stubble.
| | 00:30 | And if time permitting, we'll do some
of the business on the ears and the nose.
| | 00:34 | So let's double-click on the flat head; I'm going
to move this up a little bit to make some room.
| | 00:40 | And let's look at the skull.
| | 00:43 | So what I want to do is to fill
this with another radial gradient.
| | 00:47 | Let's use a simple one; two colors.
And I want them both to be the same color
| | 00:52 | as the skin color here.
| | 00:53 | So I'm going to double-click,
and we have the Ink dropper tool;
| | 00:58 | We'll click on that.
| | 00:59 | Now it still looks different because the
opacity is down, so let's pull that up.
| | 01:02 | And actually, let's make the
outer one a little brighter.
| | 01:06 | So I'm going to make a duplicate of
that, and get rid of the other color
| | 01:10 | that used to be there.
| | 01:11 | Move this to here, and we
will increase the brightness.
| | 01:15 | And now with the Fill tool, nothing happened.
| | 01:19 | And I might think that might be because we
have this Lock Fill, or not. Let's try again.
| | 01:24 | This happens sometimes with
Flash, even with those settings.
| | 01:27 | So let's just click on that with the
Transform tool, and that will allow us to go in
| | 01:31 | and position this.
| | 01:33 | Now I'm going to rotate it until we get
something that begins to approximate an
| | 01:38 | actual highlight layer.
| | 01:42 | And it might help if we switch the hair off,
| | 01:44 | because it's kind of hiding things a little bit.
| | 01:46 | So I'm going to hide that top hair layer,
| | 01:53 | and again, just using these tools, I'm
| | 01:55 | going to match the head as best I can.
| | 01:56 | I'm going to use this Triangle tool to
push the geometry a little more into an
| | 02:01 | oval shape, like his head. And now we have that.
| | 02:03 | So I think we need one more layer.
| | 02:05 | If you look here, we have like a shadow
area that works along with the highlight
| | 02:09 | area, and that creates a slightly
more complicated lighting effect.
| | 02:13 | So I'm going to make a new layer.
| | 02:15 | Hold down the Alt or Option
key, and drag the skull layer.
| | 02:18 | I'm going to padlock the original skull.
| | 02:20 | We have a duplicate on top. And this
time I'm going to make the outer layer the
| | 02:25 | dark one, and the inner
layer will be transparent.
| | 02:28 | So let's go to the outer layer and
make it dark. And I'm going to change
| | 02:33 | the color a little bit.
| | 02:35 | I'm going to make it like a dark green,
but desaturated; not a very hot green. And
| | 02:39 | let's bring the opacity
down. And on the inner color;
| | 02:44 | I'm bringing that down all the way to zero.
| | 02:46 | And we can change some of
these inner settings here.
| | 02:51 | It helps a lot if this isn't in the
same position, and isn't the same geometry
| | 02:56 | as the other one, because
that's not how light works.
| | 02:59 | You might have different light sources.
| | 03:01 | The shadow will be different
from the highlight, for example.
| | 03:04 | Basically, experiment with the position
of these colors, and the strength of the
| | 03:09 | colors, by playing with
the Transparency settings.
| | 03:13 | In this case, I'm using a slightly green
shadow, because applying a green shadow
| | 03:17 | to a reddish skin is using a
complementary color, which helps to tone down the
| | 03:21 | hotness of that color.
| | 03:23 | I find that helps to give
you a really nice effect.
| | 03:26 | But again, don't go too crazy
with the colors; don't make it too warm.
| | 03:30 | As you can see, now we're having a
pretty interesting effect with the dark on one
| | 03:35 | side, breaking away, a
little highlight spot there.
| | 03:38 | Dark up here under the hair, and then we're
moving right back down into the bright spot.
| | 03:42 | And with the hair attached,
it's looking pretty good now.
| | 03:45 | Beneath the mouth layer we're going
to make a stubble, and so that will be
| | 03:50 | a spherical gradient.
| | 03:52 | So we already have a gradient of sorts here.
| | 03:54 | We probably will want it to fade away
on the outside, so the outside will be a
| | 03:59 | zero, and the inside will be about like that.
| | 04:02 | Let's see what that looks like. Not very good.
| | 04:06 | Hit Control+Z. I want to
make it a perfect circle.
| | 04:11 | That's better, and let's get rid of
that line, if you see a line there.
| | 04:16 | And I'm going to use the Regular
Transform tool now, the Free Transform tool Q,
| | 04:22 | and see if we can pull this into a
close approximation of that mouth shape.
| | 04:28 | Okay, now we can shape this a
bit better, and this is its shape,
| | 04:42 | if we can increase the area of the
blur. And let's look at this with the
| | 04:47 | Gradient Transform tool. Ah!
| | 04:49 | See, it's off center.
| | 04:51 | This little triangle guy
should be in the middle.
| | 04:54 | Our previous gradient was off center,
so the new gradient maps on to that.
| | 04:58 | So let's go back to the Free Transform tool,
and now we're actually changing the shape itself.
| | 05:05 | And that's getting us fairly close.
| | 05:09 | It's a little bit too much green in this,
because I used green in the last one.
| | 05:12 | Let's take it just down to regular old gray,
and I am going to pull that a bit further down.
| | 05:18 | Not too bad.
| | 05:19 | And I'm going to lighten it a bit more;
| | 05:20 | it's still a little too dark. Okay.
| | 05:28 | It's pretty easy.
| | 05:28 | Now we'll do the same process with the nose.
| | 05:36 | The nose isn'ta symbol;
| | 05:37 | I want to symbolize that. F8, call it nose.
| | 05:40 | I want to do all this
business inside its own symbol, nested;
| | 05:45 | it it will save some
space on the outer Timeline.
| | 05:48 | So again, let's just copy, Alt+Drag.
And this time let's steal some of
| | 05:53 | our earlier gradients.
| | 05:54 | We have two nice gradients
that we made for the skull.
| | 05:58 | The first one was this light one, so
I'm going to use the Ink Dropper, grab
| | 06:02 | that. And then go back into the nose,
and we have the second layer copied using
| | 06:10 | the Alt or Option key.
| | 06:11 | Let's use the Dropper again, and using
the Gradient Transform tool -- it's very
| | 06:17 | easy with these very subtle gradients to
lose them, so you end up having to grab
| | 06:21 | the Gradient Transform tool to
find out exactly where they went.
| | 06:25 | I'm simply dragging that until you get
a nice little highlight across the nose.
| | 06:33 | Even if we left it at that, it's
starting to look pretty good, but let's put the
| | 06:37 | shadow in as well; finish it.
| | 06:40 | Let's hide these, so you can see what we did.
| | 06:42 | This was the shadow layer for the skull.
| | 06:44 | That's a nice color too.
| | 06:45 | So let's grab that with the Ink
Dropper, and go back into the nose.
| | 06:51 | Let's make a new layer; Alt or
Option+Drag the original one.
| | 06:57 | And using the, again, same process;
I'm going to drop it in there.
| | 07:00 | I'm not sure if it took that time.
| | 07:02 | So let's click on Gradient
Transform again. I'm not seeing it.
| | 07:07 | Something went wrong there.
| | 07:08 | Yeah, see, I'm still in Solid Color mode.
| | 07:11 | So let's go back out.
| | 07:12 | This happens sometimes; whether it's
me clicking wrong, or Flash getting
| | 07:18 | cranky, I never know.
| | 07:20 | The Eyedropper again, and there is our
gradient, back into the nose, and into
| | 07:29 | that top layer we paint the gradient.
| | 07:32 | It's kind of hard to see, so let's
make sure we have it in the right place.
| | 07:36 | It's so big, we can't see it.
| | 07:38 | We have to scale that thing down,
| | 07:39 | because it was sized to the size of the head,
| | 07:43 | so we have to really
reduce it to match the nose now.
| | 07:46 | Let's go in a little closer.
| | 07:49 | And as long as it doesn't drown out
the highlight, then you'll have the
| | 08:01 | highlight layer and the shadow
layer both working in tandem.
| | 08:10 | And that's now giving you a
real feeling of dimensionality.
| | 08:13 | That's because there is an actual layer
in there that I added. But again, as I
| | 08:17 | said before, there is no limit to
the number of layers you can add.
| | 08:19 | If you're seeing a little more subtlety
in this area here. You could add a third
| | 08:22 | gradient along the eye, and the same
process can be repeated for the ears as was
| | 08:28 | applied to the nose. It's that simple.
| | 08:31 | It was simply the addition of two,
sometimes a third, gradient to get this
| | 08:35 | rounding effect, which gives
the character his dimensionality.
| | 08:38 | If you did get lost, simply delete the
gradient layer, do it over. With that
| | 08:42 | I think you have a good basis to build
on to hopefully give the Flash figures a
| | 08:47 | little more dimension.
| | Collapse this transcript |
|
|
2. Shape TweeningTweening a circle to a square| 00:00 | One of my favorite techniques in Flash
is shape tweening, and I think a lot of
| | 00:05 | people don't use it enough, because it
has a little bit of a bad reputation; it
| | 00:08 | can be a little bit of flaky sometimes.
| | 00:10 | So let me show you a simple
animation that I have created of the sphere
| | 00:14 | changing into the square. And I will
show you how I did it, and how I worked
| | 00:18 | around some of the problems.
| | 00:19 | So the trick with really coaxing Flash to
be stable in shape tweening is to use
| | 00:24 | shape hints. And in this case if I
hit Modify>Shape>Add Shape Hint, or
| | 00:30 | Control+Shift+H, you will see my existing hints.
| | 00:32 | It's added new one by doing that,
which I didn't need, so I right-click on
| | 00:36 | this C, and go Remove Hint.
| | 00:38 | They're labeled A through Z, and you
can apply them to a given point. And I've
| | 00:42 | put the A's kind of at the top of the
sphere, and at the two corners of the square,
| | 00:47 | and that encourages the correct tweening.
| | 00:49 | Now, if I remove them, you will see why
I applied them. Right-click, Remove All
| | 00:52 | Hints, and it's spinning. This point here,
instead of tweening to this corner, is
| | 00:58 | now spinning around clockwise, and we
don't obviously want that. So again
| | 01:03 | Control+Shift+H adds the first letter, and I
apply them one at a time. I will do the
| | 01:08 | A first, and then the B.
| | 01:10 | You can see it's locked in the corner. and I
just keep applying them until I get what I want.
| | 01:15 | You will find you'll get different
results depending on where you put them, or
| | 01:20 | what sequence you put them in.
| | 01:22 | A quick note on this: you will find
with shape hints, if you use them for
| | 01:26 | long enough, at some point, Flash is
going to crash. Because you will create a
| | 01:30 | hint combination that it simply doesn't know
what to do with. It freaks out, and it crashes.
| | 01:35 | So before you start applying hints,
anytime no matter how simple, even if
| | 01:39 | it's only one shape hint, back up your file
first. Then you can crash, and then reload.
| | 01:44 | The other thing; sometimes I hit the
shortcut Control+Shift+H. The hint came up;
| | 01:48 | sometimes it doesn't.
| | 01:49 | I haven't had this problem too often,
but when it does, just go back to the menu, and
| | 01:54 | go Modify>Shape>Add Shape Hint, and
that will reactivate the shortcut key.
| | 01:59 | I haven't had that happened yet in CS5.5,
the latest version, so maybe it's fixed.
| | 02:04 | So that's that; that's the basic
demonstratio. Not very exciting.
| | 02:07 | So let me show you a more interesting
application of the system, and this is
| | 02:12 | animating the very same transition with
giving it a little bit of life, and now
| | 02:16 | you can see how neat that is.
| | 02:18 | You can do these effects only in shape
tweening, very hard to do them in motion
| | 02:22 | tweening, even with the new
features like bones and things.
| | 02:25 | This really is the most powerful,
flexible way to mutate one form into another.
| | 02:31 | Right now, we're using very primitive
forms, but you can use different shapes and
| | 02:35 | different layers. This could be a mouth,
for example, talking. You could have
| | 02:39 | teeth inside it massed out, and we will
do some of that later on in the course.
| | 02:44 | So important that you
follow along with this I think.
| | 02:47 | So let's just delete these.
| | 02:49 | I am going to recreate this from
scratch so you can follow along.
| | 02:52 | I am going to clear the keyframes, and
now we have -- on Frame 1 just make a sphere,
| | 02:57 | and on Frame 50 a square, and
I am going to make a new layer.
| | 03:01 | Now my layer says Layer 4; earlier
it's a Layer 3 when I did this before.
| | 03:06 | Don't worry; it's a default setting.
| | 03:08 | If you've been playing around with
Flash, it might remember your layer
| | 03:10 | history differently.
| | 03:12 | It doesn't matter, you can
call it whatever you like.
| | 03:13 | I am going to call it as Layer 2, and I
am going to put some notes in here ,and
| | 03:17 | hit F7 to make some empty keyframes.
| | 03:19 | So what I like to do is use
this as a note system for myself.
| | 03:23 | If you use traditional animation you
will be used to using thumbnails, or making
| | 03:26 | little notes about where you
want your main actions to go.
| | 03:29 | So I want this to be held as a
sphere maybe for the first 10 frames, and I
| | 03:33 | think I will squish him on Frame
20. And I sometimes put notes here.
| | 03:39 | So, for example, I will use the Label
panel, call it Squash, and on Frame 26 that
| | 03:48 | will be the jump, and on Frame 28,
that will be the high point.
| | 03:52 | So I will just drop hp in there for high point.
| | 03:56 | On Frame 34, hit F7 again, and that
will be when it begins to come down.
| | 04:01 | On Frame 36, that will be the impact
frame, so I will just drop a little impact
| | 04:05 | on it in there. And this is just a
temporary little note system to help you keep
| | 04:10 | track of where all your frames are.
| | 04:11 | It's very handy, when you have a complex
scene, to be able to have a visible cue
| | 04:16 | as to what goes where. I like this a lot.
| | 04:18 | It's one of the benefits
of a horizontal Timeline.
| | 04:20 | So at 42 will be kind of like a little bounce
up from the squash, and Frame 50 will be that.
| | 04:27 | So you don't have to do this if you
don't want to, but I find it very useful. And
| | 04:31 | now I am just going to hit F6 to
duplicate the sphere onto a second key, and
| | 04:36 | we'll start animating soon.
| | 04:38 | So he turns into a square
I think around Frame 28.
| | 04:42 | So I am going to just grab this, hold
down the Alt or Option key to copy and
| | 04:46 | drag back to there, and I
will just start working on it.
| | 04:49 | So this is going to be the squash frame.
| | 04:51 | Let's select the Free Transform tool, or hit
Q on your keyboard, and let's just squash it.
| | 04:56 | I am going to be pretty fast,
quick, and dirty about this.
| | 05:00 | Sometimes it's good to be careful, and
sometimes it's good to be a little lposer.
| | 05:04 | So let's just have a bit of fun.
| | 05:07 | If you feel like you're getting off-center,
you might want to use the guides to guide you.
| | 05:11 | It's Control+Shift+Alt+R will select the
guides. So if you think you are getting
| | 05:16 | off-center you might want to pop
one of them down there. And then
| | 05:19 | Control+Shift+Alt+R gets rid of that,
because if you free up your screen, it helps to keep
| | 05:24 | the center of mass right.
| | 05:26 | Don't activate shape tweening yet.
| | 05:28 | You want to be able to see the
snaps from one key into the other.
| | 05:32 | So make sure that you are not making
the volumes lose their mass. And this will
| | 05:37 | be the high; he is going to be
jumping high into the air on this one.
| | 05:39 | So I am holding down Shift, and
moving the Arrow keys. It helps to move him
| | 05:42 | in bigger increments.
| | 05:45 | On this frame, Frame 34, I would still
have him high. So I am going to hit F6,
| | 05:50 | and just move him down a little bit,
and he is starting to drag. And we'll
| | 05:56 | impact him on Frame 36.
| | 05:58 | Let's put-in another ruler; Control+Shift+
Alt+R for the ground plane. So that's
| | 06:06 | when he starts there.
| | 06:09 | Let me get rid of them again;
| | 06:09 | Control+Shift+Alt+R, get rid of the ruler
so now I can match the ground plane when
| | 06:16 | he hits it. And squish him a little bit.
| | 06:25 | As you can see, when I click and drag,
I am just moving one area, if you hold
| | 06:28 | down the Alt key, it will drag both
together; it might save a little bit of time.
| | 06:32 | So he bumps into the ground here, and
then, we'll have him bounce up a little
| | 06:39 | bit before he settles. So I am going
to hold down the Alt or Option key. Drag
| | 06:42 | Frame 50, and this is very
subtle; holding the Alt key in.
| | 06:48 | So now, I've got to play it with just the keyframes,
what we used to call a pose test; that's it.
| | 06:52 | So I might want to push
that impact a little bit.
| | 07:02 | Now we can apply shape
tweens and see what happens.
| | 07:06 | At this point, there is a feature in
Flash I want to warn you about. I have
| | 07:09 | hit this before. It's a new
helpful feature that isn't very helpful.
| | 07:14 | If I was to right-click on this and
say Create Classic Tween, it will convert
| | 07:20 | everything into, like, a symbol or
a group, and it causes problems.
| | 07:25 | So be very careful when you do this
that you create shape tween, and not classic
| | 07:29 | tween. And if you do create classic
tween, and you see a little blue line around
| | 07:34 | everything, you have to select each symbol
and hit Control+B to break them back apart.
| | 07:39 | You want, when you click on
these frames, to see the little dots.
| | 07:42 | If you see a blue line around
them, it's not going to work.
| | 07:45 | What you want to see is nice
green color with that solid arrow.
| | 07:49 | If you see dots in there, it means
you've got a symbol, or a group, or something
| | 07:53 | that's going to mess you up,
and that's not going to be good.
| | 07:56 | But this is working nicely. You will
see he is spinning there; right here.
| | 08:01 | That's not good, we don't
want that. That's a real problem.
| | 08:04 | So we want to add shape hints to control that.
| | 08:07 | So before you start adding shape hints,
save the project. So that warning done,
| | 08:13 | I am going to apply a shape hint. And I
find when you find a spot on the forms,
| | 08:19 | it tends to like them more than others.
| | 08:21 | So I know this A and B worked before,
so I am going to put them in the same
| | 08:25 | place, and there we go.
| | 08:30 | Now the beauty of shape tweening, too, is
if I think I want another frame, I don't
| | 08:34 | have to handdraw anything; I can just
let the engine take care of it. And I
| | 08:38 | want to get rid of these guidelines now;
| | 08:39 | I don't think we need them.
| | 08:40 | So go View>Guides and click
off Show Guides. Much better.
| | 08:47 | So let's start using some of the nice
features that we can only do in shape tweening.
| | 08:54 | And you might find you hit a point
where you go too far, and it starts to spin,
| | 09:00 | or your shape goes flaky; Control+Z is
your best friend when that happens.
| | 09:04 | You're better off going back to your
original state, and back up your file.
| | 09:07 | Now here he is coming down; kind of boring.
| | 09:10 | Let's make him look more natural. And I
am going to bend some of these a
| | 09:19 | little bit. And on the squish,
| | 09:26 | another good excuse here to have some fun.
| | 09:29 | I love doing this; it's really nice.
| | 09:33 | There used to be a classic test you would
do in animation that involved taking a
| | 09:37 | sack of flour, and trying to give it
emotion. And this is like our version of a
| | 09:41 | sack of flour. And if you are not into
character animation, I strongly suggest
| | 09:48 | you spend some time playing
around with this sort of guy.
| | 09:50 | It's a fun way, and we'll be doing a
little bit more with him, this simple square, to
| | 09:56 | give you a feel for some of the potential.
| | 09:57 | So let's play that. And there we go!
| | 10:00 | It's a sphere squishing,
and popping into a square.
| | 10:04 | That will have some pretty
cool applications later on.
| | 10:07 | So on to the next!
| | Collapse this transcript |
| Using thumbnails | 00:00 | So this is a thumbnail sketch of what
we are going to be doing in the next
| | 00:03 | section. And it's very importan,t before
you animate, that you know what exactly
| | 00:09 | you're going to animate. And it's a very
bad habit a lot of people have, in 2D
| | 00:13 | or 3D, or hand drawn animation; they just
start drawing. And sometimes that can be
| | 00:17 | fun and useful, but for most of the
time it's not really a good idea unless you
| | 00:22 | want to spend four times
as long doing something.
| | 00:24 | So it's a good idea to sit back, and
think, and figure out exactly what you
| | 00:28 | want to do, and how few keyframes you
can do it in. Don't make more keyframes if
| | 00:32 | you don't have to make them. It will
look better; you will enjoy it more.
| | 00:36 | So here is a scene of the square
character that we used in the last section,
| | 00:40 | and it's just doing a simple
action; in this case it's a jump.
| | 00:43 | Now we can animate this jump any number
of ways, but this is a pretty standard
| | 00:47 | one where he begins in his zero pose,
anticipates into the squash, pushes off
| | 00:52 | the ground, gathers at the high point
of the jump where he becomes weightless
| | 00:56 | for a moment, begins to become pulled back
to the ground by gravity, impacts, and settles.
| | 01:01 | We could add, like, a little high point
here before he settles back into that, but
| | 01:05 | for now let's just keep it to these seven keys.
| | 01:08 | So when we did this originally, I was
planning on getting a Wacom tablet set up
| | 01:12 | so I could actually draw this with a little
more dignity, but I think a lot of people
| | 01:16 | don't have tablets and drawing tools.
| | 01:18 | So I want to do it with a mouse
just to show you that even with the
| | 01:21 | handicap of having a mouse and not
being able to draw to well, you can still
| | 01:26 | do a thumbnail plan.
| | 01:27 | So I am going to hide that, and let's
just pick the Brush tool. Make sure we have
| | 01:32 | a smallish brush selected, and
brush shape, circular is fine.
| | 01:37 | So again, going from memory anyway, so I
already know what I am going to do,
| | 01:41 | but let's make our main keys, and we have
seven of them. And we were starting from,
| | 01:49 | like, a standing pose. Ending in the
identical pose, maybe further to the right.
| | 01:59 | And we are just going to
draw what we know we need.
| | 02:03 | So I am going to squash. And, you know,
you can put little notes on it for
| | 02:09 | arcs; maybe it's going to move down,
you might not go straight down, you might
| | 02:13 | go a little bit to the right.
| | 02:15 | Frame 3, it begins to push off the
ground, so you want a nice contrasting shape
| | 02:20 | from 2 to 3 to really sell that force.
And again you might want to make little
| | 02:27 | arrow notes and directions to yourself.
| | 02:29 | On Frame 4 he gathers at the very
high point of the jump, and he recovers his
| | 02:33 | original shape. And you know make
little notes to make sure that his volume is
| | 02:38 | consistent between all of these
frames. And on Frame 5, gravity again takes
| | 02:45 | over. And you see on this one his -- I
guess the screen left foot is in the same
| | 02:51 | place here and here.
| | 02:53 | So it's nice if the opposite foot begins
to lead the action on the way down. That
| | 02:57 | will create a nice little overlapping
effect there, and he'll be arching down like
| | 03:03 | that. And then Frame 6 will be
like Frame 2. And just watch your ground
| | 03:07 | plane and make sure that the ground
plane is consistent through all of these. And
| | 03:12 | let's squish him down this way, so it's
a slightly different pose from Frame 2,
| | 03:14 | but it's still squish; something like that.
| | 03:18 | And then in terms of spacing, don't forget
we can put little spacing notes in here.
| | 03:23 | So this would be like a slow
in, from 3 to 4, and a slow out. Or ease in,
| | 03:30 | and ease out from 4 as he
begins to pause at the top of the jump.
| | 03:36 | And that's basically it.
| | 03:37 | So now we have our scene planned. And
in the original, what I did was I just
| | 03:41 | spent a little bit of time, and I cut
the different frames out, and put them in
| | 03:46 | place on the Stage, so it gives me an
idea of the timing of the scene. And you
| | 03:52 | can do the same as you need. Maybe put
down, like, a guide layer so that you can
| | 03:56 | keep the foot placement consistent.
| | 03:58 | But as you can see in the top, it's
allowed me to plan the amount of horizontal
| | 04:02 | travel, because it's kind of hard to see
on the thumbnails. We are looking at
| | 04:06 | them just moving up and down. You can
kind of infer that it clearly is going to be
| | 04:11 | moving some distance between 3, 4 and
5; between 1, 2 and 3 he will be in the
| | 04:15 | same place, and then 5, 6 and 7 he
is going to be in the same place.
| | 04:20 | I strongly recommend, can't recommend
enough in fact, that you take a little bit
| | 04:23 | of time before any of your scenes --
on paper and pencil if you want; doesn't
| | 04:28 | matter, and doesn't matter
how bad your drawings are.
| | 04:30 | Any planning that you do will help
you animate the scene, and retain a
| | 04:34 | little more control over it.
| | 04:35 | So with that we can proceed
to actually animate the scene.
| | Collapse this transcript |
| Animating a magic carpet jump | 00:00 | Now we are going to animate the jump
using the thumbnails from the previous section.
| | 00:04 | Let's have a look.
| | 00:06 | That's a nice simple little action.
| | 00:08 | So let's double-click on this, go
inside, and see that most of the work has been
| | 00:12 | done through shape tweening.
| | 00:14 | Okay, so let's move out again, and
then you will notice also that the major
| | 00:18 | action of physically moving from
left to right is happening on the outer
| | 00:21 | Timeline with a motion tween, and
that helps us to nest a lot of the tweening
| | 00:26 | action that happens here in place.
| | 00:28 | It makes the tweening a lot simpler in Flash.
| | 00:31 | So I will show you how this is
done in a little more detail.
| | 00:34 | I am going to delete everything
here, and reinvent the wheel.
| | 00:38 | So let me get rid of all of these.
| | 00:39 | I am going to remove the tweens.
| | 00:43 | So we're basically back to square one,
and let me show you how this is done.
| | 00:47 | So I like to have the thumbnails
inside the symbol of the Jump frame.
| | 00:52 | So I am going to just click on this,
go Copy Frames, hide it, and then go Edit.
| | 01:00 | Now we can work entirely inside the
carpet jump symbol. All you need for this
| | 01:03 | really is a green rectangle.
And we've copied the thumbnail,
| | 01:07 | so let's make a new layer, and paste
them in. And I think let's move the artwork
| | 01:14 | to just off to one side
where it won't get in our way.
| | 01:17 | I will move it down to a lower level.
| | 01:21 | And if it's guided out, it won't export, so
you can go to your outer layer, and it's hidden.
| | 01:25 | Its a little work around that I use for
hiding things away if I just want them
| | 01:29 | for reference purposes, or to back up layers.
| | 01:34 | Okay, so we're going to have basically 7
keyframes, and the guy is going to be in
| | 01:40 | the same physical place, left to
right, in the first three.
| | 01:42 | So let's slap down F6; F6 on those points.
| | 01:47 | By 5, 6, and 7 he will be a
little further over to this side.
| | 01:51 | So let's make a keyframe here, and use
Shift and the Arrow key, nudge it over
| | 01:55 | maybe two or three clicks, and then hit
F6 here and here. So we have two states,
| | 02:00 | left and right, with 3 keyframes in each.
| | 02:04 | And on Frame 4, that will
be kind of between the two.
| | 02:07 | So I will hit F6, and Shift+Arrow to the
right maybe a couple of small moves, and
| | 02:12 | then Shift and up to get the high point.
And so now we have our beginnings of a
| | 02:19 | very simple animation.
| | 02:20 | So now we can go in and
push the secondary frames.
| | 02:23 | So let's hit the Free Transform tool,
or Q; on the second key, I am going to
| | 02:29 | just drag down for the squash pose.
| | 02:32 | Hold down the Alt key so that we
symmetrically pull them to one side.
| | 02:38 | Now, we have a nice transition. And
the beauty of not having shape tweening
| | 02:41 | activated right now is that you
can see this transitions more cleanly
| | 02:45 | between one and the other.
| | 02:46 | I will make it a bit bolder, and
this one will be the push off before it
| | 02:51 | goes into the up pose.
| | 02:52 | So what I am going to do first is take
the up pose -- because it's kind of the most
| | 02:56 | important one, after the start and the
end. And let's get that into whatever
| | 03:02 | final position we want there; beautiful! Okay.
| | 03:09 | Now, we need to go from the anticipation,
and I am going to just push this down a
| | 03:13 | little more so I can have a
better idea of the final look of this.
| | 03:17 | He is going from here to there, and he
is going to work from anticipation, into
| | 03:22 | the push, into this pose.
| | 03:24 | The problem is, when you work inside Flash,
it's very hard to see where you're going
| | 03:28 | from, and going to, and I like to have
an idea about what my destination is.
| | 03:32 | So what I am going to do is copy the
up pose directly over the push off
| | 03:38 | pose, so I can see where I am heading.
Hold down the Alt+Option key, and drag
| | 03:42 | onto this new layer. And now I am
going to outline that, and padlock it.
| | 03:47 | So now I know I am going from the squash,
into the push off, and it's going here.
| | 03:53 | So now I can begin on the Animation
layer. And I feel snap on; we don't need
| | 04:00 | snap. Make sure you have snap off.
| | 04:02 | Now, I can try to form my little dollar
bill, or jumping green rectangle, magic
| | 04:08 | carpet; whatever this guy is.
| | 04:09 | We can pull him closer into that position.
| | 04:13 | Now, you can see, he is
heading in the right direction.
| | 04:24 | So at this point he's heading into that
one, the shoulder is heading into this one.
| | 04:28 | It's moving fairly well.
| | 04:30 | So now we can delete
that little reference layer.
| | 04:34 | Looking at this now, actually, I can
see I bent his back the wrong way here.
| | 04:37 | In Frame 2, in my thumbnails, I had bent
him that way, and that really works a
| | 04:40 | lot better with this.
| | 04:41 | So let's make sure that's consistent.
And then we have the opposite thing
| | 04:46 | happening on the way down here.
| | 04:48 | This is Frame 5, where he is
starting to approach the ground.
| | 04:51 | So let's move into that,
and we'll try to shape this.
| | 04:55 | I can make another guide layer for this one
too if I wanted it, but I think I can eyeball it.
| | 05:01 | If you use the Bracket key, the Comma,
and the Period near your spacebar, you
| | 05:06 | can go back and forth a lot more easily.
| | 05:07 | That's feeling pretty good.
| | 05:08 | Let me bring the shoulder down a bit.
| | 05:16 | We don't want anything to stick, so you
want a certain amount to movement between
| | 05:19 | any two of these frames. And then Frame
6 will be the squash frame, alot like
| | 05:24 | Frame 2. If you wanted to be quick and
dirty about it, go to Frame 2, hold down
| | 05:27 | Alt+Option and Drag. You can modify it
too, of course, but it's a quicker way of
| | 05:33 | getting you into the ballpark.
| | 05:36 | Well, of course we have to
reposition them, because this is in a different
| | 05:40 | pose from over here.
| | 05:41 | So again, we can eyeball it,
because he is squashing.
| | 05:47 | That's not too bad.
| | 05:51 | Okay, now we have our basic action posed out.
| | 05:54 | Let's hide those thumbnails;
we don't need them anymore.
| | 05:56 | I am going to activate shape tweening.
| | 05:59 | Be very careful you don't
accidentally activate classic tween, or it will
| | 06:02 | turn all of your frames into groups, and
fake little symbols, and they won't shape tween.
| | 06:08 | If that ever happens, or you do it by
mistake, simply go to each symbol, and go
| | 06:13 | Control+B to break it apart, and it goes
back into being a shape again. And then you
| | 06:17 | can change your tweening mode by right-
clicking, remove the motion tweens, and
| | 06:21 | go back to shape tweens.
| | 06:22 | It's very tedious, so please be careful; try
it to avoid having to do it in the first place.
| | 06:27 | This is a new behavior in CS4 and CS5.
| | 06:29 | It didn't do that in earlier versions.
| | 06:32 | So the next thing to do is, as you can
see, some of the shape tweenings are
| | 06:35 | misbehaving, so let's put some hints in.
| | 06:37 | So Control+Shift+H, or Modify>Shape>Add Shape Hint.
| | 06:41 | And as you can see, there are hints
already there. That's because I deleted the
| | 06:46 | original animation that we did for this course.
| | 06:48 | So let's just remove all hints first and
see what the new ones do. So that's fine.
| | 06:54 | As you can see, from 2 to 3
it's getting very strange.
| | 06:58 | So I am going to apply some new hints.
| | 07:00 | So Control+Shift+H. And I will remind
you now before you do this, you really
| | 07:05 | should back up your file.
| | 07:06 | I don't think we will have any
problems here, but shape hints will crash your
| | 07:09 | computer from time to time -- or
not your computer, but your Flash.
| | 07:13 | Occasionally, you will create an
animation the program really doesn't like.
| | 07:18 | If that happens, Flash will
simply choke, usually with no recovery.
| | 07:22 | So you will have to restart the
program and you will lose your work.
| | 07:24 | So I don't want that to happen to you.
| | 07:26 | So as you can see here, I've put
down 4 keyframes: A, B, C, D. And that
| | 07:31 | works really nicely.
| | 07:32 | Sometimes it won't work; if I had put A, B, C,
D in that direction, it may not have worked.
| | 07:37 | But for a simple shape like this,
usually I will put down one, and if it makes
| | 07:41 | the tweening better, then I know I am
good, and I can move to the second one,
| | 07:44 | and third, and the fourth, and so forth.
| | 07:47 | Sometimes I get to the point where I'll just
delete them all, and maybe start up here.
| | 07:51 | I could go A, B, C, D. There is really
no rhyme or reason; I can't give you one.
| | 07:55 | It's just something that you
have to be a little patient with.
| | 07:58 | But I have found very rarely can I not make
something work, or at least get it close
| | 08:03 | enough to be usable.
| | 08:04 | So now I am just going to keep going,
and apply the rest of these little things.
| | 08:08 | It can be confusing, because you are
applying the shape hints of one key over the
| | 08:13 | shape hints of a previous one,
but you will get used to it.
| | 08:16 | I think the end results are well worth it.
| | 08:18 | So as you can see from 5 to 6; same
problem. So I could put down one key, one
| | 08:24 | hint rather. And as you can see that's
the effect of a single shape hint, and if
| | 08:31 | I put down one more, you will see
it will tighten it up a little bit more.
| | 08:34 | Sometimes one hint is enough, which is
really nice when it happens. But in this
| | 08:38 | case, this little guy, he needs all four.
| | 08:40 | Now, whatever version of Flash you
are using might be a little bit different,
| | 08:44 | but they should work.
| | 08:45 | I've used hints for years.
| | 08:47 | And then into the final; great! That's it!
| | 09:01 | Let's look at it again; super!
| | 09:03 | So let's go to the outer Timeline,
and big problem right now is he is kind of
| | 09:07 | jumping in place, and we want
him to jump across the screen.
| | 09:10 | So I am going to hit F6 here, F6 there,
and I am going to hold down Shift, move
| | 09:15 | the Arrow key four or five clicks that
way, and I am going to activate classic
| | 09:20 | tween, and now we have the horizontal jump.
| | 09:25 | If you wanted to increase the vertical
of the jump, hit F6 there, and push it up
| | 09:29 | a couple, and you can then modify that.
| | 09:31 | So this is also a good example of
nesting your shape tweens inside a motion
| | 09:35 | tween, which is one of the
major processes that I use.
| | 09:39 | One other thing to watch out for when
you apply shape hints: be sure you are
| | 09:43 | working on the right layer.
| | 09:44 | It's very easy to have this layer
active, and you're applying hints, and you
| | 09:48 | think you are applying them to this layer, and
you're really applying them to a hidden layer.
| | 09:53 | That can happen, and it's a waste of your time.
| | 09:56 | So do always make sure that when you
apply hints that you're working on the
| | 09:58 | right layer that you're intending. And
then you can create pretty nice little
| | 10:02 | animations like this, with a lot of
personality, with not that much work on your part.
| | 10:06 | So I think we're ready to move on to
some more interesting shape tween animation
| | 10:10 | with the magic carpet.
| | Collapse this transcript |
| Setting up a magic carpet walk cycle| 00:00 | So now we're going to take our carpet
and make it walk; our dollar bill, or whatever you
| | 00:05 | want to call this green rectangle.
| | 00:06 | So let me zoom out a little
bit and let's have a look.
| | 00:15 | So that's a nice little walk cycle. And
if we double-click on that symbol you
| | 00:20 | can see how it's constructed.
| | 00:22 | Essentially, he's walking in place. It's
all shape tweened. And we have, beneath
| | 00:27 | here, our little guide layers. Notice
how his feet, when they hit the ground they
| | 00:31 | stay; they follow one of those
guide layers. And so the thing to do is
| | 00:37 | basically animate him in place, so
he's walking over an imaginary center of
| | 00:42 | gravity. And then to make him walk
across the screen, we take this symbol, and
| | 00:45 | we motion tween it to create this kind
of walk. And that's how I tend to do a
| | 00:51 | lot of these walk cycles.
| | 00:52 | It gives you the flexibility; you
can keep making them walk as long as you
| | 00:55 | like from left to right.
| | 00:57 | So let's do a very quick overview of
the classic walk cycle poses, and this is
| | 01:02 | from my animation blog.
| | 01:04 | So we have the contact pose, that's
the first one that we'll do. And that's
| | 01:09 | where the heel of the leading foot
contacts the ground, and he walks through
| | 01:13 | the recoil, the passing, the high
point, back into the contact, that's the
| | 01:17 | opposite of the first one.
| | 01:19 | And the second most important pose in
the sequence is the passing pose, and
| | 01:23 | that will help us to determine a lot of the
flexibility and the personality in the walk.
| | 01:28 | So the recoils and the high points
fill it in. And they basically just allow
| | 01:32 | us to give that feeling of gravity by pushing
the head and the mass of the body down a little bit.
| | 01:37 | Okay, so let's go into the Flash file,
and I'm going to just right-click on this,
| | 01:41 | and click Edit. And because we don't
want to take too long to do this, I'm going
| | 01:45 | to work within the existing scene, and
show you how I did this by redoing it.
| | 01:51 | So I'm going to take the walk layer,
right-click, and clear those keyframes. And
| | 01:57 | we have the standing pose, this is
actually the pose I used as a reference, it's
| | 02:01 | the same as the pose from the previous
scene that we did with this character.
| | 02:06 | And we have our guidelines on the ground.
| | 02:08 | So what you want is a guided out layer
with these two parallel lines; maybe
| | 02:13 | a slight angle. We have our little
reference image, which we will just use
| | 02:16 | for a moment. And we have, obviously, our
blank layer for walking positions, and a
| | 02:22 | position that informs as of the keyframes.
| | 02:25 | So what I do is I hit F7 to create a
series of blank keyframes, and I use
| | 02:31 | the label feature; it's a very
useful tool for putting notes on your
| | 02:35 | animation Timeline.
| | 02:36 | Sometimes I'll have 2 or 3 notes
full of these little labels.
| | 02:39 | So we have on Frame 5 the recoil,
and you can see as I click here, you can
| | 02:44 | type in any descriptor you want; C, R, P, H
might be fine too, if that's the enough for you.
| | 02:49 | High point is on Frame 13, the
passing was on Frame 9, the next contact
| | 02:56 | is Frame 17, then 21 for the next recoil,
then 25 for the next passing, then 29
| | 03:02 | for the final highpoint, and we cycle
back on Frame 33 to another frame that's
| | 03:07 | just the same as the start.
| | 03:10 | So the next thing to do will be to
copy of the standing position into the
| | 03:16 | walking layer, so I'm going to make F6
to make a new key, and drop it in there.
| | 03:22 | Now it's turned my layer into a guide
layer; I don't want that to be a guide
| | 03:25 | layer, because I want to see this, so
switch that off. And I'm now going to hide
| | 03:30 | that standing pose layer; that's only
there for checking references for volumes,
| | 03:34 | and the size of the object.
| | 03:36 | So let's padlock our little orange
guidelines; we don't want them to move. And I
| | 03:41 | am going to make the first keyframe. So
let's move, I'm thinking of this as his left
| | 03:47 | foot, his physical left foot forward, and
his physical right foot back. And don't
| | 03:53 | forget the opposing action:
| | 03:55 | if the right foot is back, the right arm
is forward, so we'll do the same thing here.
| | 04:00 | So something like that, and you might
want to see how far you can get away with
| | 04:19 | this, that's not too bad.
| | 04:21 | So we want to cycle back into this frame,
so let's go to the final frame and hit
| | 04:25 | F6. So we are going to start here, and we're
going to stop here. And we need another
| | 04:30 | contact position here that will be the
same as this, but with the feet and the
| | 04:34 | shoulders in opposite positions.
| | 04:36 | So one thing that makes this much easier;
let's make a new layer, and I'm going
| | 04:40 | to copy Alt+Option+Drag this above. Go
into an outline mode, so this will be a
| | 04:46 | reference layer, and let's switch our
outline to something that we can see a
| | 04:51 | little more easily, like
black. So let's padlock that.
| | 04:55 | And let's put our guidelines back on.
And this is pretty simple; all we have to
| | 04:59 | do is pull the feet into the opposite positions.
| | 05:03 | And don't forget, we're looking at
this at a slight angle, so that's why we
| | 05:07 | don't go completely past these points.
And we simply move the shoulders as well.
| | 05:12 | The right foot is forward, the right
shoulder is back; the left foot is back,
| | 05:16 | the left shoulder is forward. So if you
are confused, don't worry; walk cycles
| | 05:20 | are confusing, but if in
doubt, refer back to this image.
| | 05:24 | So we have a nice opposing action
now, and I think we can get rid of the
| | 05:27 | temporary frame, and this is usually a good sign.
| | 05:32 | So I want to pull the lines forward just
a little bit, so that we match the nice
| | 05:36 | line of action. This a pretty confident walk.
| | 05:39 | So let's activate shape tweening. I'm
going to right-click; Create Shape Tween.
| | 05:45 | If by accident you're unlucky enough
to create motion tweens here or here,
| | 05:51 | don't worry; just hit Control+Z until
you go back to the grayed Timeline, and
| | 05:56 | select shape tween again.
| | 05:57 | What you want to see is this nice green
color with a solid arrow between them.
| | 06:01 | If you see dots between these, that
means you have a symbol or a group
| | 06:04 | contaminating your Timeline. You
have to find them and get rid of them.
| | 06:08 | You can only have shapes on the
Timelines for shape tweening to work.
| | 06:12 | So as you see, here it's not quite
working yet, so we need to add some hints. So
| | 06:17 | you can Modify>Shape>Add Shape Hint, or
Control+Shift+H. And I'm going to pop a hint
| | 06:26 | down there. And as I will say before and
again, always save your file before you
| | 06:31 | apply hints, because there are very
rare conditions when you can overload Flash
| | 06:36 | and crash the program. And it's a
terrible thing to lose all the work.
| | 06:40 | So I'm just going to keep hitting Control+
Shift+H and apply a few more hints. And
| | 06:45 | you can see with each hint that I
add, I've got better transition.
| | 06:49 | Sometimes you have to put them in
different positions. There is no fixed method
| | 06:53 | for this; it's just trial and error. But you
will get a feeling, with experience, as to
| | 06:58 | what kind of shapes seem to
favor a stable shape tween.
| | 07:05 | So, the first leg is solid; he is
obviously not really walking. It's more of
| | 07:09 | a moon walk; his feet are stuck on the ground.
But that's the first step in the process.
| | 07:13 | So I am going to make four more hints and
drop them directly over the previous ones,
| | 07:20 | so that we can complete
the second step; beautiful!
| | 07:29 | So that's the first phase of the walk
cycle, and we have laid down the contact
| | 07:34 | positions, and now we can move on and
apply the recoils, passing, and high points,
| | 07:39 | and bring this little guy to life.
| | Collapse this transcript |
| Animating a magic carpet walk cycle| 00:01 | Okay, so we are back again and we
are going to finish the walk cycle.
| | 00:03 | So I'm just going to double-click, go
back into the walk, and now we start adding
| | 00:09 | the passing position.
| | 00:11 | So the reason why we got the tweens to
make everything work was to allow Flash
| | 00:16 | to calculate the positions
of the feet on the guidelines.
| | 00:21 | We will make some changes, but obviously
we need to make this a little different.
| | 00:24 | So let's hit F6 on this passing position;
| | 00:27 | insert a new keyframe, and the hints are
basically calling on the wrong positions.
| | 00:32 | So the first thing we need to do is just
reposition the animation first, before I apply the hints.
| | 00:38 | So what's going to happen here is that
back foot, that's this one here, that's
| | 00:42 | going to be lifting off the ground as
it moves forward, so let's do that first.
| | 00:46 | Okay, so now let's activate our hints again.
| | 00:54 | Modify>Shape>Add Shape Hint, and it
adds a fifth hint that we don't need, so
| | 01:01 | let's remove that. And we will
scrub through to the next key, and just
| | 01:06 | reapply these fellows.
| | 01:11 | Now we can see it's
starting to look a little better.
| | 01:14 | We need to add hints to the second step,
because when we made F6 here it called
| | 01:19 | the hints to this keyframe, whereas
they used to be on the contact position.
| | 01:23 | So let's go back to here, and I am going to
add four more hints on the passing position.
| | 01:36 | Scrub through to the second
contact and put them down there.
| | 01:41 | And what you are going to see is the
hints from the previous keyframe, from
| | 01:45 | passing to contact being overlaid
over contact to the next contact. So it can
| | 01:50 | be confusing, but that is just a part of the
process that we have to endure I am afraid.
| | 01:56 | So now we have at least the foot working.
| | 01:58 | So I'm going to actually leave that for
now, and make the same process happen on
| | 02:02 | the second passing position. Hit F6 on
the second passing position, same thing
| | 02:07 | has happened here. That will
temporarily break our nice tweening, but what we
| | 02:11 | need to do is figure out where we need
the foot that's lifting off the ground,
| | 02:15 | and I believe it's this one here.
| | 02:17 | So let's lift that first.
| | 02:20 | And yet another reminder: if you get
something working the way you like, save
| | 02:24 | these files very often.
| | 02:26 | So obviously the hints are completely in
the wrong positions, so let's pull them in now.
| | 02:29 | There we go; actually there are now no
hints between these two frames, which is
| | 02:39 | kind of nice. Occasionally you
will get lucky with some of this.
| | 02:42 | So we need to obviously push
these passing positions a little bit.
| | 02:45 | The passing pose tends to be a little
higher than the contacts, so we need to
| | 02:49 | lift this part of the body higher.
| | 02:51 | So let's hide the hints for now. And
not by a lot, but just enough to give it a
| | 02:58 | little bit more attitude here. And
I am going to push his chest out,
| | 03:04 | watching the volume so we don't make
them too big, and that hasn't broken
| | 03:08 | any of the tweening.
| | 03:09 | Same thing here; you can usually make
big changes on the passing position, but
| | 03:15 | for a first scene, if this is your
first scene, I wouldn't go too crazy.
| | 03:20 | Keep it reasonably functional for
now, but you can later on, if you get
| | 03:23 | braver, make some pretty huge
alterations. Any alterations you make to the
| | 03:27 | passing position that are really substantial,
if you do something like this, for example;
| | 03:31 | you know, you can get away with them.
| | 03:35 | I like that, so you know what, I am going to do
that here too. Make him a little cocky; nice.
| | 03:45 | Okay, so the next thing that we do; we
will go into the recoil, and we will have
| | 03:50 | to squash him on this.
| | 03:52 | You can see immediately some of our tweens are
beginning to break down here; I am not going
| | 03:57 | to worry about that immediately, but
I want to first build the squash.
| | 04:01 | So I am just going to select
everything and pull it down. Watch to make sure
| | 04:08 | that that foot, this one here, is still on
that little orange line. And this is
| | 04:14 | like more of a squashing of the leg
underneath the body, and to look at the
| | 04:20 | original, that's what we are kind of
trying to emulate or give the impression
| | 04:24 | of. And I am going to pull the
shoulders down just a little bit more; see if
| | 04:29 | this works. Seems to.
| | 04:32 | So now let's fix those hints again. I
hit Control+Shift+H; creates a fifth hint
| | 04:39 | that's not needed. Remove that, and I'm
going to scrub through, and you can see
| | 04:43 | obviously these little guys keep
moving around, so you keep pulling them in.
| | 04:48 | That might seem like, why on earth
are we doing this moving hints around?
| | 04:51 | It is a nuisance, but look how
cool this is when you get it to work.
| | 04:55 | So they're basically little
temporary placeholders that constantly change
| | 04:59 | position. I would love it if they
would lock themselves onto these points and
| | 05:03 | never move, but sadly Flash doesn't do
that, so we have to work around that.
| | 05:08 | Anyway, let's go to the second recoil,
hit F6, and same thing here. I am going to
| | 05:13 | just select the whole thing; Q, Free
Transform, pull this down, and maybe squash
| | 05:19 | the -- as best as we can with four
vertices and four lines. It's nice working
| | 05:24 | within these constraints sometimes,
because it really focuses your mind on just
| | 05:27 | personality of this object.
| | 05:29 | So now that that's done let's see if
it matches the other one. So I am just
| | 05:32 | going to go back to the other recoil.
See, this one is a little higher than that; you
| | 05:36 | want them to match reasonably well.
| | 05:37 | So I am going to pull him down a bit more.
| | 05:42 | See if it's a little closer. That's
much better; that's a nicer transition.
| | 05:47 | So now I'll go in, and Control+Shift+H to
make a fifth unnecessary hint; remove that.
| | 05:53 | And go to this next one, and once
again, let's pull everything back in.
| | 06:00 | So it's broken this transition here.
| | 06:02 | So I am going to make some
new hints to protect that.
| | 06:08 | I will remind you again, be
sure you save your project.
| | 06:10 | If you fix the passings the way
you like; save, save, save again.
| | 06:21 | Now, we are starting to really see a
walk. And one last little touch, the
| | 06:26 | highpoint. F6 that, and this is the highpoint.
| | 06:32 | So pull them up. Maybe we can
stretch them a little bit. I am going to fix
| | 06:38 | those hints, and I am also going to
pull that foot up. See if we can get away
| | 06:49 | with that. And maybe
bring it forward a little bit.
| | 06:54 | That's nice. And the other one, F6 this,
pull them up, lift that up. Don't change this one.
| | 07:15 | The whole of point of doing this is,
do not mess with the feet that are
| | 07:18 | contacting the ground; Flash has
calculated the positions of those better
| | 07:21 | than a human can.
| | 07:24 | So now let's play that through.
| | 07:27 | That's looking really nice. And what's
giving it that ping effect that you're feeling:
| | 07:31 | that's the little chest pump that I put
into the passing positions. If you want
| | 07:35 | to get that to work then do it on the
passing. If you do that once the recoil
| | 07:40 | and the high points are set, you probably will
see movements aren't as smooth as you would like.
| | 07:46 | The reason why this is feeling so smooth
is that a lot of tweening has been done
| | 07:50 | by the computer, and that's a very
difficult thing to get right by hand.
| | 07:55 | I find sometimes, I will do these
walks, and it's easier, if I want to make a
| | 07:58 | drastic change, just delete the
recoil, delete the highpoint, and redo the
| | 08:03 | passing if you want to make those big
changes. Then redo the recoil and the
| | 08:07 | highpoint after Flash has calculated all of the
little bits and pieces that have to be filled in.
| | 08:11 | So that's it. And on the outer, as
you can see, this is simple enough.
| | 08:15 | All I did here was create the -- well I'll do
it again. I'll just copy this; paste it.
| | 08:22 | Control+Shift+V to paste in place. And the
only thing you really need to watch out
| | 08:27 | for if you're making -- let's say now we
will make a classic tween. And the only
| | 08:32 | thing to watch out for when you start
positioning this across the screen is the
| | 08:36 | foot placement. If you place it too far,
he seems to be skating on ice. The feet
| | 08:41 | are sliding too far forward. If I
put them too close, he seems to be
| | 08:45 | moonwalking. He is barely moving forward at all.
| | 08:48 | So there is kind of a magic distance
for every walk, depending on the spacing of
| | 08:52 | the feet. That's not too far away.
| | 08:54 | So as you can see, that's what I have
already worked out here on the bottom
| | 08:56 | layer. It could be improved; there is
some stuff that's still happening there.
| | 09:00 | It's really only a matter of going
in, and finding the ideal distance
| | 09:04 | so that that doesn't happen.
| | 09:05 | And I would say this one it's
probably a little bit further down to her. And
| | 09:10 | sometimes when I position these, what
I will do is unguide the Guide layer so
| | 09:15 | that I can see the guides, and then I
can make sure that my actual angle is
| | 09:20 | being consistent across the screen as well.
| | 09:22 | And when I am happy with it, I
can go in, and guide them back out again.
| | 09:25 | So never delete your guide layers.
| | 09:26 | They are always handy to have
| | 09:28 | in case you ever have to
go back and make changes.
| | 09:30 | So that's it. We have made a
magic carpet walk across the screen.
| | Collapse this transcript |
| Shape tweening hair| 00:00 | So this is a demonstration of a
technique that I kind of stumbled across by
| | 00:05 | accident, a few years ago.
| | 00:07 | You tend to assume that some shapes are
just too complicated to shape tween. And
| | 00:13 | out of pure boredom or desperation, I
tried shape tweening a really complicated
| | 00:17 | shape, like this hair, for example, and
to give an idea about the context of it.
| | 00:21 | It's just a very simple, very rough hair
outline; there is a quick sketch of the
| | 00:25 | character beneath, and there's the hair.
| | 00:27 | So let's -- actually we probably see it better
if we look at it in outline mode. Let's
| | 00:31 | play it. And there are no shape hints
here; it's all happening without any hinting,
| | 00:37 | which is really amazing.
| | 00:38 | And the thing that made it work
was the use of the Envelope tool.
| | 00:43 | So let me quickly demonstrate this.
| | 00:46 | I will make a new layer.
| | 00:46 | I am just going to copy the existing
start position up here, and we will just get
| | 00:50 | rid of the tweens for now.
| | 00:53 | So here we have the outline.
| | 00:55 | Now, if you want to follow along and
you don't have the Exercise files, what I
| | 00:59 | would do would be to just pick the
Rectangle tool, pick any colors you like,
| | 01:03 | doesn't really matter.
| | 01:04 | Hold down the Alt key, and just make some
complex shape that's got a lot of points,
| | 01:10 | and lines, and geometry. And then once
you're happy with the fact that it's
| | 01:13 | probably pretty detailed then you can
start playing along with this. And you know,
| | 01:17 | obviously put some curves on it to
make it feel a little more natural.
| | 01:22 | So anyway, that's what I would do if
you have to generate the assets yourself.
| | 01:26 | So once you have got your regular shape,
let's make some keyframes, and I will
| | 01:30 | show you exactly how I did the original.
| | 01:33 | So let's click on Frame 10, and I am
going to activate Free Transform, and down
| | 01:38 | here we have the Envelope. So click on
that, and you see immediately that the
| | 01:43 | hair has suddenly got a nice little
bounding box around it. And as you pull these
| | 01:47 | points, you have access to these little spline
handles, and you can just click and drag them.
| | 01:51 | So I am just pulling them into various
positions, and now we've made a nice transition.
| | 02:02 | If I hit Create Shape Tween, that's a
smooth motion between that, and we simply
| | 02:12 | repeat the process on the next key.
Just do a different one this time.
| | 02:17 | Now this isn't a magic bullet.
| | 02:20 | At some point it's going to break, and
it may break on you with a different shape,
| | 02:24 | or a different direction if you pull
this too far. If you're careful with it
| | 02:28 | you can always go back to your original
position, and work it back until you can
| | 02:32 | get it working again.
| | 02:33 | So that's basically it; that's the process
I have been using. This is very handy, as you
| | 02:37 | can imagine, for things like
clouds or natural effects and things.
| | 02:41 | The big problem that you're seeing right
here is that it is one continuous mass.
| | 02:46 | So obviously, we would like these hair
filaments to move at different speeds, and
| | 02:51 | different directions, and
overlapping timings, and so on.
| | 02:54 | But still in all, this is a little
more power than you would have if you were
| | 02:59 | simply using motion tweening to
stretch and squash the object.
| | 03:04 | So let me just play that again.
| | 03:07 | And we have the original layer too.
| | 03:13 | So that's a very useful tool.
| | 03:15 | I would warn you of one thing that they
seem to have changed in the new version. In
| | 03:19 | the older versions you could select more
than one layer, like this, and you could
| | 03:25 | then use the Envelope tool.
| | 03:27 | In the new version they've disabled that.
| | 03:29 | So unfortunately, we can only apply
this to one layer now. And that is a bit of
| | 03:32 | problem. I don't know why, but people
who have an old version lying around, or are
| | 03:37 | wondering whether they should upgrade,
might want to bear that in mind if this is
| | 03:39 | important to them. But we can work
around all these problems of course.
| | 03:43 | And in the next section, I'll show you
how we can break apart the hair, and the
| | 03:46 | different layers, and extract even
more performance from this technique.
| | Collapse this transcript |
| Intro to overlapping hair| 00:00 | In the previous section I showed you
how to take a single image, like the hair
| | 00:04 | level, and to use the Envelope tool
to shape tween the different shapes.
| | 00:08 | The only problem with that was that it
felts like, obviously, we were working with
| | 00:12 | a single shape that being tweened at
the different forms; it does feel a little
| | 00:16 | static, even though it is kind of nice
just to be able to push it that much.
| | 00:20 | So there is a way, fortunately, that
we can still use this system, but have a
| | 00:24 | little more flexibility. And what you're seeing
here is the same original shape of that hair,
| | 00:30 | but what we've done instead of having
the whole thing on one layer is split it
| | 00:35 | up onto several different layers, as
well as adding a new little forelock here
| | 00:41 | to vary the head and the
whole structure little bit better.
| | 00:46 | So what you can see down here in this
folder -- I've guided out the original
| | 00:50 | animation layers. Let me show you them first.
| | 00:55 | As you can see this looks pretty much
like the preceding section that we did,
| | 00:58 | and what I've done is then copied these
layers, hairs 1 through 4, to this section,
| | 01:04 | and offset them by one frame.
| | 01:07 | So this stair step that you see here:
that is what's creating the illusion of
| | 01:12 | the more natural motion.
So let's hide these again.
| | 01:15 | And just go through this.
| | 01:17 | I have also added this little underlay
that helps to give the hair a little
| | 01:21 | more body. And then as I activate each
layer one by one, and insert the head, and
| | 01:30 | then we have the forelock on top, which
is also slightly offset. If you look at
| | 01:33 | these keys, they are not hitting all
in the vertical columns like these.
| | 01:37 | If all of these keyframes were in
the vertical stack, then it would feel
| | 01:41 | artificial; it's simply that
offset that allows the magic to happen.
| | 01:45 | So this is the basic principle that
we'll be applying in this section.
| | 01:49 | I am going to show you how to split a
hair layer onto different sections, and
| | 01:52 | then to apply the Envelope tool
individually to each one, and then offset them.
| | Collapse this transcript |
| Animating overlapping hair| 00:00 | So now I'm going to recreate the
animation of the hair so that you can see
| | 00:06 | exactly how it was done.
| | 00:06 | So first thing we have to do
is simply clear these layers.
| | 00:11 | So I'm going to right-click; clear those
keyframes. And we have the hair forelock;
| | 00:19 | I am going to keep the first frame with that.
| | 00:21 | And there is this lower level for the hair.
| | 00:28 | So am going to keep the first frame for that.
| | 00:29 | Just get rid of all of the subsequence.
| | 00:36 | And I'll work within this section here, the
guided out hair, and I'm going to get rid of these.
| | 00:45 | So basically all we have now are four
layers of hair; pretty much
| | 00:50 | identical to the one we saw in the first
of the hair shape tweening lectures, and
| | 00:55 | all I've done is broken it apart at
certain points. I could've made three cuts,
| | 00:59 | I could have made two.
| | 01:00 | In this case, I thought four
was kind of a happy medium.
| | 01:03 | So that's why we have four layers here.
| | 01:04 | Now when we begin to animate this --
I've already preanimated at the top here
| | 01:08 | this S curve level, and this is the
kind of thing I'm trying to match.
| | 01:12 | This is the classic animation waveform
that goes from the C shape to an S shape,
| | 01:17 | and reverses to the opposite, and back again.
| | 01:19 | It's very pleasing, and it's extremely good
at creating the illusion of flexible motion.
| | 01:25 | So let's see how best this can be
achieved using the Envelope tool.
| | 01:28 | So let's just make three more columns.
| | 01:31 | I am going to go in a little closer.
| | 01:37 | In earlier versions of Flash I
would've been able to select all of these, and
| | 01:45 | then apply the Envelope tool,
but it's locked out now.
| | 01:47 | So this unfortunately means a slightly
slower work process, but it's still worth doing.
| | 01:55 | There is our first layer.
| | 01:57 | Now if you look carefully at
that point there; let me zoom in.
| | 02:01 | There is a bit of weirdness going on there.
| | 02:03 | It might be at the
threshold that you can live with.
| | 02:06 | So let's go to the next one.
| | 02:09 | It's extremely small.
| | 02:11 | We can definitely add hints, of course, if we
think that's too much, or it starts acting weird.
| | 02:15 | It's always good to keep an eye out for that.
| | 02:17 | Now there are other things that we can
do in terms of trying to make these feel
| | 02:24 | a little more flexible.
| | 02:25 | We can individually bend the hairs.
And we are seeing another little bump
| | 02:35 | there on the corner.
| | 02:40 | The thing that will really sell the
idea that this is a very flexible object,
| | 02:45 | like hair, is squeezing these
into reversing their shape.
| | 02:51 | This is curved into a C shape here.
| | 02:53 | If we can coax it into the opposite
angle, then we can tell it's not just stiff
| | 03:01 | object. And on the way back up, if we can pull
these down -- and now it's a question of just
| | 03:14 | how much can we get away with
before the shape tweening simply breaks.
| | 03:19 | And, of course, it will. It has its limits.
It's not perfect.
| | 03:22 | There is another tool that's very
handy when you work like this, and that's
| | 03:31 | the Subselection tool.
| | 03:32 | If you click on that, and click on the
shape, you'll see all the points. One of
| | 03:38 | the things that can happen when you use
the Envelope tool is that new points get
| | 03:41 | generated as a natural byproduct in that process.
| | 03:44 | So if that happens that can
contribute to bad tweening.
| | 03:48 | These new points can be deleted, and
sometimes you can use the different line
| | 03:52 | tools to draw around them, and cut
them out to try to maintain the points.
| | 03:56 | So in other words, if you have 15 of
those points on Frame 1, you want 15 on all
| | 04:00 | of your frames if you can keep them that way.
| | 04:04 | So that is the basic process that
was used to create the various layers.
| | 04:08 | So as you can see, it's holding
up pretty well layer by layer.
| | 04:27 | The simpler your shape, in theory, the
more reliable this process should be.
| | 04:34 | I would suggest you try to break it;
see how far you can take this before it
| | 04:38 | snaps. And that's pretty good.
| | 04:40 | I'm going to just very quickly -- and I'm
not going to use much finesse with this,
| | 04:44 | so please forgive, but the primary purpose
now is to just show the general principle of this.
| | 04:58 | These lines here, you see that
they're kind of stuck in a straight line,
| | 05:04 | you may want to be little more
adventurous with them. If you hold down the
| | 05:07 | Alt key you can then break them apart so
that they work independently of one another.
| | 05:15 | It's handy if you really
want to add little breaks.
| | 05:17 | As you can see, it's creating a
point there, but it hasn't damaged
| | 05:20 | the image tweening.
| | 05:21 | So I'm just going to do the last one.
| | 05:23 | I am going to squash this one.
| | 05:32 | Now I'm seeing a little weirdness around
some of the joints there, but the hair is
| | 05:40 | going to be moving so fast, I don't
think we need to add any shape hints. And if
| | 05:44 | you were to add shape hints,
| | 05:45 | I will say it again: be sure you
save your project before you apply them, as
| | 05:50 | it can lead to the occasional crash.
| | 05:54 | So now we have our four layers, and
obviously the animation isn't as nice as the
| | 05:59 | finished one that I was showing you
earlier, but we do have a one more step that
| | 06:03 | we can add that will help polish this.
| | 06:04 | So I am going to select all these layers,
and hold down the Alt key, and drag them here.
| | 06:10 | I'm going to continue holding down
the Alt key, and just copy and paste.
| | 06:15 | We could also right-click, and go
Copy Frames, and paste them, but I think
| | 06:19 | this will be all right.
| | 06:21 | So the next thing we do is offset
the timing. And I select three layers
| | 06:25 | here; hit F5, then select the bottom two,
and F5 again, and the bottom one, and F5 again.
| | 06:34 | I can continue going a little further, but I
think for now I'll just chop it off about here.
| | 06:39 | I am going to drag these just to there.
| | 06:43 | I am going to just get rid of them, and
now let's see what that looks like.
| | 06:48 | Now let's hide that lower
layer, and let me guide out that.
| | 06:55 | They became guides, because I
copied the original Guide layer,
| | 06:57 | so that property was propagated.
| | 06:59 | They don't have to be guides.
| | 07:01 | So let's play this. And as you
can see, we've got overlapped timing. The
| | 07:08 | shape tweening, of course,
is much more conservative.
| | 07:10 | I didn't take any major risks with this.
| | 07:12 | I have not animated the forelock, but I would
use the same technique in using the same
| | 07:16 | systems for animating that.
Envelope tool. Same here.
| | 07:24 | Of course, you see I'm
using only two or three keys.
| | 07:30 | You could have 20 different keys.
| | 07:32 | It depends on your time.
| | 07:33 | Now you see, I've finally managed to
break it. And in that event what I will do is
| | 07:35 | just hold down the Alt, Option
key, drag Frame 1, and try again.
| | 07:42 | Maybe don't be quite so
aggressive this time, and see if that works.
| | 07:48 | Work in increments. And that's broken again.
| | 07:56 | So, that will be a shape that I would
definitely have to add the shape hints to
| | 08:00 | that to make it work. Try one more time.
| | 08:08 | Because it is simple shape, we could
probably move that individually.
| | 08:11 | Let's see if we can do this.
| | 08:12 | There we go, and that works.
| | 08:17 | So I would just obviously repeat the
process, select those frames, hold down the
| | 08:20 | Alt key, and duplicate them. And
nowhere in this have we had to resort to shape
| | 08:25 | hints, which is great.
| | 08:31 | So great for mermaids, under water,
characters standing in wind.
| | 08:35 | You can make the timing faster simply by
removing some of these empty frames here.
| | 08:38 | And that gives you a great deal of flexibility.
| | 08:45 | You really don't want to be
animating hair by hand. It's not fun.
| | 08:48 | So with that I think we're
done with shape tweening.
| | Collapse this transcript |
|
|
3. Natural EffectsAnimating waves| 00:00 | In this section we're going to cover
natural phenomena, like water effects, or
| | 00:04 | flames, smoke, that kind of thing. Kind
of different from what you might be used
| | 00:09 | to doing with characters.
| | 00:10 | And one of the issues that you deal
with when you do natural effects like
| | 00:14 | these is you tend to need a lot of in between
frames to make these look nice; to make them sell.
| | 00:19 | I'm going to zoom in on this a little bit,
so you can have a better idea of what
| | 00:24 | we're looking at. And if you follow
any one of the points on this wave cycle,
| | 00:30 | you'll see that they are shifting and
blending or morphing one into the other.
| | 00:34 | And that's really what
gives the feeling for liquid.
| | 00:36 | So let's have a look at how this was done.
| | 00:38 | Let's zoom out for a second, and
I'm going to double-click on this.
| | 00:44 | If you want to see the entire Stage
right now, this is all grayed out, and we've
| | 00:48 | just framed in on the main area.
| | 00:51 | So what I'm going to do is enable that.
| | 00:54 | So let's go View>Pasteboard.
| | 00:56 | If you're using an older version of Flash, it
used to be called View>Work Area, or Workspace.
| | 01:01 | They changed the naming convention with
some of the later versions, so just keep
| | 01:04 | that in mind, because that might throw you.
| | 01:06 | So now we can access the entire
area that Flash has available for us.
| | 01:10 | So you can see that I've got the wave
going a little bit beyond the Stage there.
| | 01:14 | I'm going to double-click on this.
| | 01:16 | Let's have a look at how this was done. And
amazingly, it's just done with two keyframes.
| | 01:20 | I didn't have to worry about doing
several hundred intermediate frames down
| | 01:25 | here; just two. And even better, the first
frame and the last frame are the same frame.
| | 01:30 | What I'll do is I'm going to
reconstruct this internal symbol entirely from
| | 01:35 | scratch so you can see how it was done.
| | 01:37 | So I'm going to go into the symbol.
And essentially to follow along, all you will
| | 01:40 | you need to do is to create a long rectangle.
| | 01:42 | I'm going to hide the lower layer, actually
I'll just make a new one to match the size.
| | 01:46 | So let's select a color.
| | 01:48 | I'll pick this bright blue here.
| | 01:50 | I don't want an outline around this.
| | 01:53 | If you click this little red triangle here
that will mean there's no color on the inside.
| | 01:57 | Oops!
| | 01:57 | There we go. That's what you want to see.
| | 02:00 | And let's select the Rectangle tool on here.
| | 02:03 | I'm going to make a rectangle.
| | 02:05 | Let's put it into outline mode, and
then just hide the lower layer; we don't
| | 02:08 | really need that right now.
| | 02:09 | And guide it out if you
don't want to see it anymore.
| | 02:13 | So essentially all you need
right now is a little blue rectangle.
| | 02:16 | So let's frame in on with the Zoom
tool, and selecting the Selection tool,
| | 02:21 | and select off of here.
| | 02:23 | So let me just make sure all my snaps are off.
| | 02:29 | Snap to Grid is not needed for this.
| | 02:31 | So okay, now we can start pulling these points.
| | 02:33 | Hold down your Alt or Option key,
and let's just make an interesting
| | 02:38 | little graphical shape.
| | 02:43 | Now pull these points to whatever
kind of wave shape you think you want.
| | 02:47 | I was actually pretty subtle and
understated with the one I did for the Exercise file.
| | 02:53 | I think you can probably get away
with pushing these a little more.
| | 02:56 | A nice selection of curves: S curves,
and C curves, and so on. So there we go.
| | 03:01 | At the end, say 60 frames later, you
can make this as long as you like or as
| | 03:05 | short as you like, and now we
activate Create Shape Tween.
| | 03:08 | So I hit F6 at Frame 60.
| | 03:11 | If by accident you who select Create
Classic Tween, meaning motion tween, or the
| | 03:16 | other different kinds of tweens,
hit Control+Z and reapply the shape tween.
| | 03:21 | Now that we have this done, the
animation will be created using shape hints.
| | 03:27 | So let's go Modify>Shape>Add Shape Hint.
And I'm just going to make four of them
| | 03:33 | for now. And I'm going to use these, Control+
Shift+H, to pin down four corners.
| | 03:41 | And as I've said many times in this
course, when you start applying shape
| | 03:47 | hints, I always like to back up my file,
because maybe one time in a thousand
| | 03:53 | they will cause a crash.
| | 03:55 | It's a really great tool to have,
but it does have its issues.
| | 03:58 | Now those of the four: A, B, C, D; they are
the same on each. And now we're going to
| | 04:02 | make some of the animation happen.
| | 04:04 | So I'm going to make one more first, E, and I'm
going to pop E down, let's say on this point.
| | 04:09 | Now we scrub ahead to the end of the Timeline,
and I'm going to push E all the way to there.
| | 04:15 | Pick any point.
| | 04:16 | I'm just picking arbitrarily here.
Different points will have different results.
| | 04:20 | And now we have -- wow!
| | 04:22 | That's fairly hectic
looking. Let's just play it.
| | 04:24 | One thing that's happening here that I
don't want to happen is we're seeing, if you
| | 04:29 | follow this lump here, he seems
to be kind of a little too concrete.
| | 04:34 | It's not giving me the kind of nice,
curvy animation that I want, but that's okay.
| | 04:37 | Let's just pull the E point
back a little bit, and now let's play it.
| | 04:41 | That's a lot nicer.
| | 04:42 | So as you can see, we just
overdid it a little bit.
| | 04:44 | I'm going to move my
mouse so you can follow along;
| | 04:48 | this point here. That's eye
catching; a little too much I think.
| | 04:53 | So I'm going to pull the E point.
| | 04:55 | Let's see what this looks like.
| | 04:56 | That's a little better.
| | 05:00 | This point now here, I'm going to
track along with it, this feels a
| | 05:03 | little static to me.
| | 05:06 | This is fun part; obviously it's not
quite as predictable as you might like, but
| | 05:11 | you get the results simply by playing around.
| | 05:14 | That's nice, and the difference between
one and the other is just a few pixels
| | 05:19 | on the position of the shape hint.
| | 05:20 | The one thing you will notice here is
that the corners of the A, and the corner
| | 05:27 | of the B, they do start showing
themselves as being pretty stiff. And that's why
| | 05:34 | I've made the waves so that
they are well off the Stage.
| | 05:37 | You may not be able to see, but here is
the Stage at the left side, and here is
| | 05:42 | the end of the Stage at the right side.
| | 05:43 | So anything to the left and the right of
those points will not be seen by the audience.
| | 05:48 | And let's move out, and as you
can see that's the same symbol.
| | 05:52 | I've got it nested inside a symbol
because that allows me to apply motion tweens
| | 05:57 | to the external symbol.
| | 05:58 | So I can hit F6 now, and if I wanted to,
I could move this up and down and motion
| | 06:03 | tween that, or left and right.
| | 06:04 | I could put it on a guide, and add yet another
layer of motion to try to sell more realism.
| | 06:10 | But in this case it wasn't necessary.
| | 06:13 | So I always do that, as well,
with the animation that I do.
| | 06:16 | When I do the shape tweening, I
never do the shape tweening on the outer
| | 06:20 | Timeline, which would be this one here,
because it's nice to have it tucked away
| | 06:25 | safely inside a symbol, or even two
symbols, so that I can have it contained
| | 06:30 | and have access to the motion tweening tools.
| | 06:32 | And so now if we look at the
outside you'll see I've put another layer.
| | 06:36 | It's the same scene, so basically we
have in the Properties panel, you will see
| | 06:40 | it's called Waves cycle.
| | 06:43 | The one beneath it; it's the same scene.
| | 06:46 | This is set to loop on Frame 1.
| | 06:48 | Second one is set to loop on
Frame 30, and that gives us a nice
| | 06:52 | little overlapping action.
| | 06:53 | So they are not both doing
the same thing at the same time.
| | 06:56 | I could add as many of these layers as I like;
| | 06:58 | if I wanted to, I could animate
different layers for that matter. But this is
| | 07:04 | just to give you an idea
about what we can do here.
| | 07:07 | I Alt+Clicked and dragged to copy that
layer, and I'm going to go into the Color
| | 07:12 | Effect>Brightness and make it a
little darker so we can see that.
| | 07:18 | And I'm going to click on that layer,
and make it Loop from Frame 50 in
| | 07:20 | the Properties panel.
| | 07:22 | And now when we hit Play
we have three layers of waves.
| | 07:26 | So again, like I said, you can right-
click on these layers, you could duplicate
| | 07:30 | that symbol, make a new layer.
| | 07:32 | You would have to duplicate all the
inner layers as well. And you could change
| | 07:38 | the timing by moving the keyframes.
| | 07:40 | You could change the animation now that
you're working in a copy inside a copy.
| | 07:44 | You could make this one completely
different from the other one simply by moving
| | 07:48 | the shape hints around, and
create some pretty nice effects.
| | 07:54 | It's popping there, because I've kind of
broke it, but you get the general idea.
| | 07:57 | I'm going to delete that now.
| | 07:59 | So this technique, we'll be applying
throughout the course, and to do other
| | 08:03 | effects which will be equally
as usable to you as this is.
| | Collapse this transcript |
| Animating clouds| 00:00 | Now we're going to apply the basic
techniques that we saw in the previous
| | 00:03 | section of using shape hints to create a
very nice little gentle animation of a cloud.
| | 00:09 | Let's just hit Play, and as you can
see, nothing is happening in the main
| | 00:15 | Timeline. That's because it's set to
play as a movie clip; that's how we access
| | 00:18 | this nice filter effect that
softens the edge of the cloud.
| | 00:21 | So to see the animation, we have to
go Control+Test Movie, and in later versions
| | 00:25 | you've got to also select this Test
thing. Control+Alt+Enter might work as well
| | 00:29 | for you, depending on which
version of Flash you're using.
| | 00:32 | So as you can see, this is really nice.
It's a very gentle, soft, natural
| | 00:37 | feeling undulation.
| | 00:39 | One of the big problems that you might
have, depending on how you're going to
| | 00:43 | output your animation.
| | 00:44 | If you're ever going to render a movie,
you might hit the awful problem that it
| | 00:51 | does not render out.
| | 00:53 | So be aware of this depending on your
final output. If you are going to make an
| | 00:59 | MOV file, or an AVI file, or a PNG
sequence, I don't think you're going to have
| | 01:03 | much fun accessing the Photoshop
filters. And these are only accessible by
| | 01:08 | clicking on your symbol, making sure
in the Properties panel it's a movie
| | 01:11 | clip, and then under the Filter
section we have access to the different blur
| | 01:16 | settings, and that's what I used
to create that little blur effect.
| | 01:20 | So I have to warn you about that
before we go any further; before you could
| | 01:22 | waste an awful lot of time and work
targeting an output format that doesn't
| | 01:26 | support some of the internal features
of Flash. Be aware of this, and if you're
| | 01:30 | going to take on a project of any size,
take one scene, and test it through the
| | 01:34 | entire work process to the end to make
sure it outputs correctly, because you
| | 01:39 | can really get hurt with that.
| | 01:41 | If you're going to output an SWS file,
this will be great. If you are going to
| | 01:44 | output an AVI file, it's not.
| | 01:45 | I'm going to assume for now that you
want to see this in a movie file, or a PNG
| | 01:50 | sequence, and maybe do some more work with it.
| | 01:51 | So let's click on this, and we'll get
rid of the blur. I'm just going to change
| | 01:56 | the symbol from a movie clip to a graphic.
| | 01:58 | And you'll see immediately we've lost the
blur filter. I think it still looks pretty cool.
| | 02:02 | Now I could render it out as a movie.
| | 02:05 | Now we can see the animation working in
realtime inside the symbol, and this has
| | 02:10 | been a complaint of artist for years,
so don't worry; you're not the only one.
| | 02:14 | So here we go. And this
should look familiar now.
| | 02:18 | We have two keyframes;
| | 02:20 | the Start Frame and the Stop Frame are the same.
| | 02:23 | I could have made them differently, but I
wanted this to cycle. And I could've put
| | 02:27 | other frames in here to break it up,
but for the purposes of the course I want
| | 02:31 | to keep this simple to teach the
basic principles of what we're doing here.
| | 02:34 | So I want show you again how this is
constructed. So I made one layer; it should be
| | 02:39 | familiar if you've done the section on
gradients, using the Gradient Transform
| | 02:43 | tool, and that's bleeding off to a
slightly opaque edge. Let's see here. I'll look in
| | 02:48 | the gradient, and see what is; that's set to 0.
| | 02:51 | And again, by sliding these colors
around I can alter the falloff of the
| | 02:56 | opacity of the cloud. And then on top
of that I have a solid color area, and
| | 03:01 | that's where all the shape
tweening business is going on.
| | 03:04 | So let's make a new one.
| | 03:06 | To follow along, essentially all that you need
is a symbol. Call it cloud, and make a rectangle.
| | 03:14 | And let's make the rectangle solid
white, and make sure that you've got the line
| | 03:19 | set to this red diagonal stripe so
that you don't have a line around it; you
| | 03:23 | don't need that. And this
doesn't have to be 100% precise.
| | 03:26 | We're working with something that's
pretty translucent. You can be a bit squishy with
| | 03:30 | it. And let's zoom in a little more.
| | 03:35 | And now with the Selection tool simply
drag these corners. Actually let's just
| | 03:41 | do it freeform. I won't even use reference.
| | 03:43 | Now I'm going to hold down the Alt key and
just pull this around; let's make a cloud shape.
| | 03:51 | If you accidentally click outside the
area and you tunnel outside, happens a
| | 03:55 | lot, just click back in.
| | 03:59 | I think I made one point too many, Control+
Z, and now I'm just going to pull these
| | 04:04 | curves to make something cloud-like.
| | 04:09 | The more gentle you make the
curves, the easier it will be to make a
| | 04:14 | pleasing undulation.
| | 04:16 | Doesn't mean you can't go a little
more aggressive with your shapes; it's
| | 04:20 | something you're just going to have to
toy with. It will depend on your project
| | 04:23 | and your style. So there we
have a fairly decent cloud shape.
| | 04:29 | So the next step is to hit F6 here;
make another keyframe anywhere in the
| | 04:36 | Timeline, right-click, and create
shape tween. It'll look green, and you
| | 04:41 | should see a solid line.
| | 04:42 | If you don't see a solid line, if you
see dots, it means you've got something
| | 04:45 | else; a symbol, or a group
polluting the Stage, so you might want to
| | 04:48 | reconstruct your cloud shape. Okay.
| | 04:49 | So now that that's done, let's
apply some shape hints, Modify>Shape>Add
| | 04:55 | Shape Hint, or Control+Shift+H, and pop them
down at that points that you want to be fixed.
| | 05:01 | I'll make another one.
| | 05:02 | Control+Shift+H. Pop it there, and you
want them at the beginning and the end. The
| | 05:08 | same point and the same place on each.
| | 05:13 | Even with them, some shapes; strange
things can happen. Always test it to make
| | 05:16 | sure that you're solid.
| | 05:17 | Now I'll make a third, and that will be C,
and just put out the first point here.
| | 05:22 | We'll make another C point, and just
push it a little bit further on, like that.
| | 05:30 | This would great for like a chimney
fire, a horse rider you know riding from
| | 05:35 | right to left and he is kicking up a cloud
of dust; that would be just perfect for it.
| | 05:39 | But I think what we want here is a nice
Spring day. So something extremely slow
| | 05:46 | that can be cycled over and over again,
hopefully without catching the eye. And
| | 05:50 | it's really nice to not have to
worry about all of this by hand.
| | 05:54 | So actually now we can just hide the
original reference layer that I was using.
| | 05:58 | And notice too, as I selected the
lower layer, I'm seeing the shape hints for
| | 06:03 | the lower layer transposed on the top layer.
| | 06:05 | It can be really confusing. You can
actually end up accidentally pulling points
| | 06:09 | around from a lower layer when
you're actually working on a top layer. So
| | 06:12 | always be careful when you work that
your active layer is the one that you're
| | 06:16 | modifying. And it's just something that
you've got to watch out for, I'm afraid.
| | 06:19 | As you can see, when we add the lower
layer, now we have -- and I hit Play.
| | 06:24 | That's a really cute little cloud effect.
| | 06:27 | Notice there's, like, a little lip
happening there, where it doesn't
| | 06:31 | quite overlap properly.
| | 06:33 | My solution, the quickest for that would be,
move the lower layer up. I'm using the
| | 06:36 | arrow keys just to push that up a little bit.
| | 06:38 | I could also have pushed the entire
upper cloud layer down, but always be sure
| | 06:42 | when you do that, when you move these
elements around, that you keep an eye on
| | 06:46 | the hints. If you do have to push that,
| | 06:48 | make sure that the hints have followed
by hitting Control+Shift+H, or modify shape hints.
| | 06:53 | Because -- I find they are getting much
better with this. In the earlier versions
| | 06:56 | the hints would have stayed behind;
in later versions they move with.
| | 06:59 | Again, it's something that may change;
it's slightly different with different
| | 07:02 | versions of the program, so I'm just
going to hit Control+Z to restore it back to
| | 07:06 | normal; there we go!
| | 07:08 | So, I think I broke something. I'm
going to go back in here; hit Control+Z a couple
| | 07:14 | of times. See how easy it is to break
things. I think it's a C thing; how bizarre.
| | 07:25 | So let's see, I'll move that hint, move A
back there, move C in here, and there we go.
| | 07:30 | So it was a nice demonstration of what
can go wrong if you're not careful. Watch
| | 07:33 | your hints very carefully.
| | 07:34 | So now on the outer Timeline, we have
our cloud. That's the basic principle on
| | 07:39 | how we can use the same technique to
create liquid, to create a gas, or a cloud,
| | 07:44 | or something that's a blob. So with
that, we move on to the next thing.
| | Collapse this transcript |
| Animating a flame| 00:00 | This next section is a little trickier.
We're taking the principles covered in
| | 00:04 | the last two, where we did waves and the
cloud, and we're now applying them to a
| | 00:09 | flame, like you might see in
a candle flame or a fireplace.
| | 00:13 | So let's take a look at this;
double-click on the flame image.
| | 00:18 | This is the outer Timeline, where I
have motion tweened the internal animation.
| | 00:23 | That's shape tweening, so this allows
me to undulate the shape up and down.
| | 00:27 | Let's go inside and see exactly how it
was done. I will resize the Timeline.
| | 00:31 | So I am going to hide the upper tear
animations for now, and just show you the main layer.
| | 00:36 | If we look at in outline, get rid
of that gradient, you'll get a better
| | 00:39 | idea of what's going on.
| | 00:40 | So what I have done is animated a fairly
simple shape, just a little oval with a
| | 00:46 | couple of points in the top, and
then made some variations of that shape.
| | 00:50 | So this one, obviously it's a little
more extreme, and bobs back down again to a
| | 00:55 | shape that's kind of a variant of the first.
| | 00:58 | And then we have simple modifications
of that. And I've used shape hints on
| | 01:03 | these, and I will activate shape hints so
that you can see the process. Let's see if
| | 01:07 | I can zoom in without losing them; no.
| | 01:09 | So, activate again,
and then remove the new one.
| | 01:12 | The new hint is in red, so let's
get rid of that. So let's see here.
| | 01:16 | As you can see, the transition from
keyframe 1 to keyframe 2; I have locked
| | 01:20 | these left and right points with an A and a B
hint, and I have got a C and a D hint moving up.
| | 01:25 | Now, if I show you the next one, the
confusion element is going to kick in,
| | 01:29 | because you're seeing the hints from the
second key to the third key overlaid on
| | 01:33 | top of the previous. So I am
going to delete them temporarily.
| | 01:35 | I will hit Remove All Hints, and
now you can just see the first two.
| | 01:40 | This is basically the process; A and B
move to A and B a little higher. That
| | 01:46 | keeps the overall form the same.
C and D move just a little bit up.
| | 01:52 | And as you can see, this curve here
consists of two little lines, and by
| | 01:59 | using shape hints I can coax it to looking like
it's tweened into one single, smooth line there.
| | 02:04 | Let me hide the hints, and you can watch that.
| | 02:09 | So that's what gives us the
illusion of a flame; it's a plasma.
| | 02:14 | It really has a very liquid feel to it.
It's dynamic, and it can drastically
| | 02:17 | change from one shape to another, and
that's what we're trying to capture with this.
| | 02:21 | The other thing that I did in here --
let me go back in for a second -- to really
| | 02:26 | finish off the illusion of the
dynamic flame, is I added all these extra
| | 02:31 | layers, which you can see: tear 1, 3,
in two different sections, and they're
| | 02:36 | breaking off all these little
triangular shapes up at the top. And that's also
| | 02:41 | helping your eye -- it sells this illusion
that there is an upward momentum from the flame.
| | 02:46 | So a lot to cover here. I cannot,
obviously, walk through this entire process.
| | 02:51 | There is simply too much going on. But I
will show you the general principles of
| | 02:54 | how this was created, and I think you
will be able to figure out, based on that,
| | 02:58 | exactly how you can use this
system to make fire effects of your own.
| | 03:02 | So I am going to frame in a little bit,
make a rectangle, select the little
| | 03:08 | white thing with the red line through it,
so that you don't have a line around it.
| | 03:11 | Let's make a vertical rectangle,
hit F8, and we'll call it flamenew.
| | 03:19 | Now we double-click on that,
and we will work in here.
| | 03:21 | What I am going to do is shape the
first frame, so let's just click on the
| | 03:24 | point. If you have snapping on, just
make sure you switch that off so you can
| | 03:28 | have a finer control.
| | 03:29 | I am going to keep this much simpler
than the one that you just saw. I am going
| | 03:32 | to keep a flat ground, and we are
going to work with just the top part.
| | 03:41 | And maybe let's put in one more little bump.
| | 03:43 | So if you haven't done this before,
keep your shapes fairly simple.
| | 03:48 | You want to get comfortable with the
basic principles of the procedure, and don't
| | 03:53 | feel like you have to go in with your
very first shape tween fire and have 400
| | 03:58 | points. You can certainly do
that, but for now keep it simple.
| | 04:02 | So that's our first frame. Let's
make two more. We want to get, like, a
| | 04:07 | really nice balance.
| | 04:08 | If you remember from the first two
sections when we did the water and the cloud,
| | 04:12 | I only used a single keyframe, and
then I duplicated that to the final point,
| | 04:17 | and then we did all of the
intermediate animation by varying the shape hints.
| | 04:23 | It might be possible to do that here,
but we will get a much, much nicer
| | 04:27 | illusion if we can use more than one
state, and then shape tween between them.
| | 04:33 | So let's move on the second keyframe. I
am going to move it up, and maybe change
| | 04:39 | some of these curves.
| | 04:41 | Changing the curve, or trying to blend
two curves into one; that's really going
| | 04:45 | to go a long way to creating
the effect of liquid action.
| | 04:51 | So now you see, if we go from one
to the other, clearly we are not looking
| | 04:54 | at a static block of wood.
| | 04:57 | And the other thing to be trying
to sell is this vertical movement.
| | 05:01 | The flame is moving up all the time.
| | 05:03 | No part of that flame should look like
it's moving in the down position, unless
| | 05:06 | it's tearing off and reacting. Like
from here to here, yes; it's going to snap
| | 05:11 | back into a lower state. But again,
there's always that permanent upward drive
| | 05:14 | from the flame, and we are trying to sell that.
| | 05:17 | So I am going to bring this part down,
and this part up, so now when we go from
| | 05:20 | that to that, it will feel like a
recoil. And I'll try to do a different shape here.
| | 05:28 | Let's see what that looks like.
| | 05:30 | So now we have three fairly different
graphical shapes as I scrub through the Timeline.
| | 05:35 | I am not quite 100% happy with this one,
in the third one, so let's pull that down a little.
| | 05:39 | Okay, let's see how that looks when we
activate shape tweening. Just select the
| | 05:44 | Timeline, right-click, and Create
Shape Tween. Okay, not too bad.
| | 05:47 | I am going to hit Play.
| | 05:52 | So we get a nice little undulation dancing.
| | 05:54 | Now, that vertical upward thrust that I
was telling you about, we're obviously
| | 05:57 | losing some of that hereabouts, but
that's why we need to add a few things.
| | 06:01 | We need to add these little triangular
shapes that are tearing off somewhere up
| | 06:04 | here, so that as one part recoils
downwards, which is happening let's say here,
| | 06:10 | from this point to that point. Perfect!
| | 06:13 | Add another little triangular
wedge ripping off, so I'll do that.
| | 06:18 | First, make a new layer, empty keyframe,
use the Eyedropper, make sure you have
| | 06:24 | the same color selected so it matches.
| | 06:26 | I am going to use the Rectangle tool
and just drop in a little shape there.
| | 06:30 | Now, that's a square by default, but
you can select and pull the point, and
| | 06:33 | now we have a triangle.
| | 06:35 | So when we go from here to, let's see,
from this high point -- I would actually
| | 06:39 | have this triangle break off the one
after that, so we reach the high point of
| | 06:43 | that point here, and then when it snaps back,
that's where the tear is going to happen.
| | 06:47 | So let's push that tear down a little bit.
| | 06:50 | And it doesn't have to be
too big; something like that.
| | 06:54 | And I'm going to have that move up.
| | 06:59 | And I think we can just F6 to make a
new keyframe. Hold down the Shift key and
| | 07:04 | the Arrow key to push it up in some big
chunks. And you could maybe even change
| | 07:09 | the shape of it, and
lengthen it out a little bit.
| | 07:12 | And when that's done, right-click and
Create Shape Tween. And if you get really
| | 07:19 | weird behavior, you can add hints to that.
| | 07:21 | So that will give you something of
an idea as to how we can create these
| | 07:25 | little triangular tears.
| | 07:27 | Each tear, I think ideally, should have
its own layer, and I would also add a
| | 07:33 | blank frame following it.
| | 07:34 | And once you are happy with this, you
can take these, and hold down the Alt,
| | 07:38 | Option key, and drag them.
| | 07:39 | You can lengthen it and add more tears that
overlap along here, which is how I did
| | 07:46 | the original in the Exercise file.
| | 07:48 | Let's have a look at this. And so, as
you can see, the tear looks really nice.
| | 07:52 | And it's just a question of adding more tears.
| | 07:54 | Be careful that the timing of all the
tears can be a little bit different.
| | 07:57 | They don't all have to be 2, 3, 4, 5
frames in duration. Some could be 4, some
| | 08:02 | could be 6, roughly the same, but
slight differences in spacing. Slight
| | 08:06 | differences in timing are always
good to give this a more natural feel.
| | 08:10 | If you want to get a little braver with
the shape tweening, because I think we
| | 08:13 | got a little bit lucky with this one,
it was really nice the way these shapes
| | 08:17 | tweened into one another.
| | 08:18 | What I would also do would be maybe
add some shape hints if you think
| | 08:24 | you want to Control+Shift+H to add more
hints from this one. Let's put this down
| | 08:28 | here. Oops, I think it
was A, B, left, and right.
| | 08:35 | What happens, for example, if I add a hint
here, and then if I move it to there? Oops!
| | 08:40 | See, this one completely wrecked the
animation, so maybe I will move it here.
| | 08:45 | And now we get a very different feel.
| | 08:47 | And I will remind you again, back up your
file before you start throwing hints
| | 08:51 | around the place, because they do have
the ability to crash Flash. And it's nice
| | 08:56 | to set up your scene, save it,
and then start applying the hints.
| | 09:00 | So I could apply, and make sure that
you always activate the level that you are
| | 09:04 | actually applying the hints to, Control
+Shift+H. Let's put a D Hint here.
| | 09:10 | What happens, for example, if I put it to there?
| | 09:13 | So it's breaking up that almost too
smooth tween that we were getting by
| | 09:17 | default, from here to here is the
same keyframes as from this block here.
| | 09:23 | So let's see the difference.
| | 09:24 | This is the animation between the two
states with the hints making it a little
| | 09:29 | more erratic, and this is
the animation without hints.
| | 09:32 | As you can see, this is almost too clean.
Well, it is too clean. By breaking up
| | 09:38 | the animation, by adding some hints,
and putting a little bit of chaos into the
| | 09:42 | animation, we have made it look a lot better.
| | 09:44 | And so once I do something like that,
then I would obviously like to copy it.
| | 09:48 | So one way of doing it would be to repeat
my original process, and copy and paste,
| | 09:54 | so we have the same action happen twice.
| | 09:57 | I could even break up the second
section if I want to have, like, different
| | 10:01 | variations, and see if that works.
| | 10:02 | So each one of these transitions
would be unique, which also helps to make
| | 10:08 | your cycle less obvious.
| | 10:10 | You might find that you're going to
have a multitude of hints overlapping. As I
| | 10:15 | said earlier, that can be confusing. So
you might want to make new layers, and
| | 10:20 | have each of these steps in your cycle --
| | 10:22 | I am just Alt clicking and dragging now, and
removing the lower ones; clear keyframe.
| | 10:28 | You might want to do something like
this so that each one of the blocks of
| | 10:33 | the action have their own Timeline. And
that would actually enable you to clearly see --
| | 10:39 | and let me just delete these.
| | 10:43 | This is really going to enable you
to have more visual control over the
| | 10:47 | different hinting steps.
| | 10:50 | It does create more layers on your
Timeline, but it dose clean up the process of
| | 10:55 | doing these processes.
| | 10:58 | So that I think covers how I
would treat a fire animation.
| | 11:05 | And I think what we can do is this;
if we wanted to cycle this, it would be
| | 11:07 | pretty easy. Let's do that.
| | 11:09 | And so what you will be doing will be
generating discrete blocks that keep
| | 11:13 | your Timeline clean. It helps your
brain to keep track of all the different
| | 11:16 | things that are going on.
| | 11:18 | So let's just play this one more time;
I am going to zoom out. There we go.
| | 11:23 | And we can probably get rid of that little
block at the end. There is no reason for that.
| | 11:28 | So play around with this.
Have fun with it, I hope.
| | 11:30 | Anything that saves you from having
to draw these erratic plasma and liquid
| | 11:34 | effects by hand is a very good thing in my book.
| | Collapse this transcript |
| Animating an explosion| 00:00 | Now we are going to do a different kind
of effect. Previous effects that we've
| | 00:04 | been doing have been entirely dependent
on shape tweening, and using the internal
| | 00:09 | processes of Flash for the most part.
Now we are going to try something that's a
| | 00:15 | little more traditional.
| | 00:17 | Flash has its built-in brush tools that you
can draw with, and this part of the course
| | 00:21 | will be particularly useful for
people who have a drawing tablet: a Wacom
| | 00:25 | tablet, a Cintiq, or one of those devices.
| | 00:27 | You could, I guess, draw this on paper,
clean it up with a marker pen or something,
| | 00:31 | and scan it into your computer. But it's
also possible to tough it out and do it
| | 00:36 | with the mouse, so there's
different methods that we can proceed with.
| | 00:38 | What I want to do right now is show you
the basic procedure for roughing in your
| | 00:43 | own effect stuff. You could also
probably use a series of nested symbols instead
| | 00:47 | of drawing this thing curve by curve.
| | 00:49 | Anyhow, I am going to hide the lower sky.
I don't need it, and I will show you
| | 00:53 | how this was initially assembled.
| | 00:55 | The first thing to do is not to get
lost in these little details, and there's a
| | 00:59 | lot of stuff happening here.
| | 01:01 | The main thing to do is to realize
you're dealing with an expanding form;
| | 01:05 | it's got a structure to it,
even though it looks chaotic.
| | 01:08 | So in this case, we have the initial
ball of smoke which expands, poofs, and
| | 01:13 | dissipates. And I have set this circle to
shape tween, and this gives us basically
| | 01:18 | our parameters in which to work.
| | 01:19 | So then as you draw each frame you can
essentially match the outer line of this
| | 01:25 | red ring for your work.
| | 01:27 | Now obviously this is far too detailed
for me to be able to go into every single
| | 01:31 | frame; it would take hours.
| | 01:33 | So what I will do instead is just
show you the general principles of how I
| | 01:35 | would approach this.
| | 01:36 | I am not working right now with a
tablet; I just have a clunky old mouse.
| | 01:40 | So let's make a new symbol.
| | 01:41 | I am just going to hide
this one. Make a new layer.
| | 01:44 | I'll start with the Oval tool, just make
a little circle, and I am going to make
| | 01:50 | that a symbol right away so I
work internally within that.
| | 01:53 | We'll call the smoke ring, and let's make
it centered, because it's going to have
| | 01:58 | its center of mass right in
the middle, so click OK.
| | 02:01 | Now if I right-click on that and click
on Edit, now we're comfortably inside the
| | 02:06 | smoke ring symbol, and we
have lots of room to play with.
| | 02:09 | So first thing I want to do is to make a
red line that's more like the original.
| | 02:13 | So let's grab this, drag it down and
pick red; whatever hot color you happen to
| | 02:19 | have on your palette.
| | 02:20 | If you're not seeing my palette, we
cover that in an earlier course; how you can
| | 02:23 | basically setup your palette to look a
lot more like this. Although the default
| | 02:27 | palette that comes with Flash also has
plenty of colors that you will be able
| | 02:30 | to use if you prefer.
| | 02:32 | Okay, so I am going to reselect that
red, and we will select the Ink Bottle tool
| | 02:37 | and paint that. You'll see, if we go in
closer, there's now a red outline there.
| | 02:40 | I want to get rid of the
inside color; Control+X, or Delete.
| | 02:44 | Let's make our really quick little
expanding circle. F6, and have the outer
| | 02:48 | ring happen around 12, and F7 so that we have
an empty space after that where it dissipates.
| | 02:55 | So use the Magnifying tool to zoom out
a bit, and let's see, let's select the
| | 03:00 | second frame and hit the Free Transform tool;
| | 03:03 | if I hold down Shift and
Alt, so that's what we want.
| | 03:07 | So this will be the ring that we will
use to expand, and I want a shape tween
| | 03:11 | here, so Create Shape Tween.
| | 03:14 | If you motion tween by mistake, then
just hit Control+Z and go back. And I want this
| | 03:18 | to ease out all the way.
| | 03:20 | So it starts fast, and slows out. Now 100
might be too much, so let's try 90 instead.
| | 03:27 | Nice. Okay so once we have that,
padlock it. That's just our guide, and being a
| | 03:32 | guide layer for reference, let's guide it out.
| | 03:33 | When I say guide, I don't mean make your
layer beneath it a child of that; I just
| | 03:37 | mean keep that as a guide layer so that
when you look at this on the outer layer
| | 03:41 | you won't see that ring. It's
only there for drawing reference.
| | 03:44 | So the next thing that I would do
would be to select all these frames, and hit
| | 03:47 | F7, and that gives you a series of
blank keyframes to work with. Now let's
| | 03:51 | go in a little bit tighter.
| | 03:52 | Now we have access to the Brush
tool here, so let's click that.
| | 03:56 | If you don't see it, it might also be the
Spray Bottle tool, but we want the Brush tool.
| | 03:59 | And let's make our line nice and black;
this will be the outline. And our brush
| | 04:05 | selector, so we'll take the small one.
| | 04:07 | If you have a drawing tablet you can
select this to have access to pressure
| | 04:11 | sensitivity, which is really nice.
| | 04:12 | Now that circle there is a little too
big for me, so I'm going to change the
| | 04:18 | outline color. We can make a
red as well, just like the line.
| | 04:21 | That way when we look at it
it's a little bit thinner.
| | 04:23 | Okay, back to Layer 2.
| | 04:25 | Essentially use this outer line as
your guide for the various shapes that you
| | 04:30 | are going to be drawing.
| | 04:31 | And I stress again, I'm drawing with a
mouse, so it's probably the worst possible
| | 04:36 | drawing experience a human being
could have. It's pretty hard on the elbow.
| | 04:41 | You get the general idea, and if you
have tablet, you can really fly at this;
| | 04:44 | actually a lot of fun with one of those tablets.
| | 04:47 | I only began using the tablets recently, and
I really wish I had done it a long time ago.
| | 04:51 | So anyway, with the red line as your
help -- you can go outside of it, or inside of
| | 04:55 | it. You don't have to slavishly adhere
to the contour of that red line; better
| | 05:00 | if you actually do push these lines
into a slightly more varied position.
| | 05:06 | I have been warning people throughout
this course that when you apply shape
| | 05:09 | hints that's Flash is prone to crashing.
| | 05:12 | I used to work in a TV animation studio
where the Brush tool was used a lot by
| | 05:16 | the artists there, and that also, I
hate to say, will crash the program.
| | 05:20 | So if you get to a point when you
think, that's nice, I like these; save your
| | 05:25 | file. And I would advise
you to use sequential frames.
| | 05:27 | So if you are going to call this one
explosion_1, I would put an _001, and the
| | 05:33 | next say would be 002, and so on.
| | 05:36 | So I have loads to fall back on
if something goes horribly mangled.
| | 05:40 | If you remember from the earlier sample;
right now the first few frames are pretty simple.
| | 05:44 | When you get to the outer edge, here
of course, we begin to break up the
| | 05:47 | smoke into smaller particles. And
the thing to keep in mind when you hand
| | 05:52 | animate effects like this:
irregularity really helps to sell the idea that
| | 05:57 | this is a natural effect.
| | 05:58 | So somewhere around the middle this
thing is going to start breaking up into
| | 06:01 | clumps. We'll move this down a little.
| | 06:06 | If you find that this is a little
cumbersome to work with, the other way that
| | 06:10 | you could create this object would be
to select the Oval tool -- and I am going to
| | 06:14 | deselect that outline, we don't need
that line -- and you could draw the entire
| | 06:19 | thing as a series of circles or ellipses.
| | 06:22 | They might look somewhat crude right
now, but you can always go back in later
| | 06:25 | and soften these edges off a little bit.
| | 06:28 | So, for example, you could select the
Brush tool, pick a larger brush, or maybe
| | 06:32 | a medium one here. And then go over
it and make these shapes a little more
| | 06:38 | pleasing; a little less geometrical, like that.
| | 06:40 | I've been doing a lot of scenes like
this recently, and you just have to get into
| | 06:45 | very relaxed state of mind. Not the kind
of thing you want to do if you're super
| | 06:49 | stressed out or anything.
| | 06:50 | Just take it easy, and sit back, put
on an audio book, or some music, or something, and
| | 06:54 | start drawing all these cool little shapes.
| | 06:56 | So that's basically the
process. We'll go ahead and fill these.
| | 07:00 | We have, obviously, these empty frames,
so you do have to toggle back and forth
| | 07:03 | quite a bit as you begin filling in
these transitions. For example, where does
| | 07:07 | the black cloud begin to break up.
| | 07:09 | So the other thing that you can do, if
you want a quick cheat, I would copy that,
| | 07:13 | and I would Control+Shift+V to paste it in
place. And then use the Transform tool,
| | 07:19 | maybe twist it, and cheat by pushing this
out to a different position. Then you
| | 07:25 | could go back in, make any modifications
or changes, use the Erase tool, and then
| | 07:31 | start to break out the inside as this
big cloud of smoke and dust begins to
| | 07:35 | break into smaller pieces. And
then you have these in-between frames.
| | 07:39 | So same process; I might go Control+C, Control+
Shift+V, maybe move this again; we could even
| | 07:46 | twist it horizontally. Anything to break it up
| | 07:48 | so you don't see the same two shapes
occupying the same physical space. I can
| | 07:52 | just stretch it to match
that little red outline.
| | 07:55 | And I think at this point I probably would like
to start to pop a hole into the center of it.
| | 08:01 | So this is the basic process that I
would use to create little smoke and cloud
| | 08:06 | rings. And if you look at the original,
on this one of course I have a black
| | 08:10 | outline, and a gray inside.
| | 08:12 | If I wanted to achieve that kind
of effect, it would be pretty simple.
| | 08:15 | I will just show you one sample frame.
Go into this image, select a gray color,
| | 08:20 | and select a black one. Back to the
Brush tool, small, and then just go in and
| | 08:31 | again -- and it comes down to again your
comfort level working within whatever
| | 08:35 | constraints you happen to be working in.
| | 08:37 | I wouldn't recommend drawing these
with the mouse for any extended period;
| | 08:41 | you will probably end up
with a pain in your elbow.
| | 08:43 | But as you can see, it's quite doable.
| | 08:45 | If you follow these procedures I
don't think you'll go too far wrong.
| | 08:48 | So with that we will move on, and I'll
show you how we can take these basic
| | 08:51 | techniques, and then apply them to take
our original smoke ring, that is this
| | 08:58 | creature here, expand on it, and
make it a little more interesting.
| | Collapse this transcript |
| Adding in-betweens to the explosion| 00:00 | Now we are taking the original little
smoke cloud that we did from the previous
| | 00:03 | section and adding some extra frames
to slow down the animation a little bit.
| | 00:08 | This gives the cloud a little more mass.
| | 00:11 | I find when I do these that number one
alteration I have to make is I need to
| | 00:16 | add some in-betweens. So it was easy enough
to make the change on this level, of course.
| | 00:21 | All I had to do is go in here
and hit F5 to make that longer.
| | 00:25 | I am going to copy this layer by Alt+
dragging, and I'll show you what the
| | 00:31 | first pass of this process looked like.
So, I want to remove the in-between
| | 00:36 | frames that I've created for this to
take us back pretty much to where we
| | 00:41 | were in the previous section.
| | 00:46 | So the first thing that I would have
done was simply to take each of the frames,
| | 00:50 | and hit F5 to add an empty placeholder.
| | 00:53 | This is now moving at half the speed that it was.
| | 00:56 | Now bear in mind that the frame rate of
this project is 30 frames a second, so
| | 01:02 | when we take these frames and expand
them, what we are doing is making it
| | 01:07 | effectively play at 15 frames a second,
because each image is being held for two
| | 01:11 | frames rather than one.
| | 01:13 | So it's slows down the speed, and gives us
some more mass, but it also makes it chuck.
| | 01:17 | And the solution is to
draw these in-between frames.
| | 01:21 | So this is one of the in-betweens,
this is another, this is another, and
| | 01:25 | another, so on. And that's the action
smoothed out by doing these in-between frames.
| | 01:30 | So what I am going to do is show you the
process of creating an in-between frame.
| | 01:35 | If you have your access to these files,
you can follow along. If not, any shape
| | 01:38 | will do, actually. You can quickly
rough in any two cloud shapes, and then see
| | 01:42 | what the process is.
| | 01:43 | At least this is the process that I use;
there is different ways of doing it.
| | 01:47 | I find that if I want to get from this
frame to here, I need to add an in-between
| | 01:53 | frame that's going to go in this slot.
I need to place these things on layers,
| | 01:58 | so that I can see where I'm
going from, and where I am going to.
| | 02:02 | So I am going to click on the second
frame, hold on the Alt or Option key, and
| | 02:06 | drag it up, and then over. And I am
going to hit F7, here and here, here and
| | 02:13 | here. And so the only layers that I have
active are the lower frame in outline
| | 02:20 | red, the upper frame in outline
green, and the in-between frame which I am
| | 02:26 | going to draw here.
| | 02:31 | So let's select the black color, and
effectively it amounts to this: drawing lines
| | 02:40 | between lines. And this is how animators
did effects in the good old days, or the
| | 02:51 | bad old days if you prefer, when
everything was done by hand. And you might say,
| | 02:55 | "Well, why am I doing this by hand?"
| | 02:57 | Well, there are times when it's handy to
be able to do particular effects on a
| | 03:01 | frame by frame case, and you simply can't
get results that are very hard to achieve
| | 03:07 | if you are working entirely digitally.
And of course I will stress again, I am
| | 03:11 | doing these somewhat clunky little
drawings with a cramped little mouse, but
| | 03:16 | again just to show the fact that it
can be done without any fancy equipment.
| | 03:20 | So the next thing to do is just
to fill this with the right color.
| | 03:23 | So I am going to select the
Eyedropper, and that's the inner gray there.
| | 03:26 | Let's hide everything except the layer
we want to paint, and let's paint those.
| | 03:31 | That's our in-between frame.
| | 03:38 | Next step is take the in-between and
drop it into place. And then just do
| | 03:44 | some housekeeping and drag
all these empty frames away.
| | 03:47 | You might want to keep these two
layers here as placeholders. So let's have a
| | 03:52 | look at how that plays.
| | 03:53 | So that is the process.
| | 03:59 | I didn't say it was going to be quick
or fun, but you repeat this process for
| | 04:03 | all of these transitions. And I find,
with a really nice effect smoke cloud, the
| | 04:10 | reason why this is worth
doing is I use them a lot.
| | 04:13 | If I have a little library of four or five
smoke explosions, I can get enormous
| | 04:18 | mileage out of this.
| | 04:19 | I'll polish it, I'll clean it up, I'll
add more details to it. You'll see this
| | 04:23 | in the next section: how we can take
this existing smoke ring, which we have now
| | 04:27 | doubled in duration, and how we're
going to improve it, and really make it look
| | 04:32 | like a lot more than you're seeing right now.
| | Collapse this transcript |
| Adding explosion clusters| 00:00 | In the previous section I showed you
how to take an animated smoke ring, and how
| | 00:04 | to add some in-betweens if you wanted to
choose slow it down; give it a little more mass.
| | 00:09 | Now I'm going to show you how to take
that and replicate it in a series of
| | 00:14 | nested symbols, so that it looks a
little more interesting, and this will be the
| | 00:19 | final effect that we're going to achieve.
| | 00:21 | Now you'll notice it's looking a little
pixely, and that's because when I have this
| | 00:25 | many symbols working nested,
| | 00:27 | oftentimes I like to change my Preview mode.
| | 00:30 | You can go to Outlines, which really
isn't much use for what we're doing
| | 00:34 | here, or you can go Full. And normally we work
in Full mode, and that let's us see everything.
| | 00:39 | Let's see if a Flash can keep up with this.
| | 00:41 | You'll find if you play
with this many nested symbols --
| | 00:45 | I am on a really nice computer, it's keeping up.
Your machine at home may have a different speed,
| | 00:51 | and if you were to do something like
this you might find that when you get to
| | 00:55 | this point you'll start seeing
something like this, and then as it gets to the
| | 01:00 | end it will speed up again.
| | 01:01 | The speed will ramp; it won't be consistent.
| | 01:03 | So there is a couple of ways around
this, and of course one is to go to
| | 01:06 | View>Preview mode>Fast, and that
takes off some of the anti-aliasing,
| | 01:11 | So it makes things play a little bit quicker.
| | 01:13 | So even on a fast computer it will go
even faster or more consistently at the
| | 01:18 | speed that you want.
| | 01:19 | The other thing that you can do is
simply render this out as a movie.
| | 01:23 | So you'll go File>Export>Export Movie, and
export it as whatever movie format you prefer.
| | 01:29 | Everyone is going to have a
different movie format on their computer
| | 01:31 | depending on if they're on a Mac, or
a PC, or if they have different video
| | 01:36 | compression formats downloaded.
| | 01:38 | So I'm not going to go too deeply into
that. But the other way of doing it, too, is
| | 01:41 | to go out, say Control>Test Movie.
| | 01:44 | And you'll find this plays faster than
internally inside Flash, for some reason.
| | 01:51 | I think this program has a smaller little
footprint; it's certainly more frame efficient.
| | 01:55 | So you will come closer to seeing your
desired end product in this. But bear
| | 02:00 | in mind, it's just not as reliable as
rendering up an actual movie, but it's much quicker.
| | 02:04 | So you may move between all these three systems.
| | 02:08 | So that said, let's go into -- I'm going
to just hide some of these, and I'm going
| | 02:12 | to go into one of these little clouds.
| | 02:14 | And it looks like a pretty intricate
thing, so let's see how this is built.
| | 02:20 | So the symbol itself
contains the familiar smoke ring.
| | 02:25 | Let me just look at one of them; so here it is.
| | 02:29 | And that should look familiar. That's
pretty much the same one that we had from
| | 02:32 | the previous section. That's all it is.
| | 02:35 | So the effect of a more varied cloud is
achieved by offsetting the same symbol
| | 02:43 | at different points in the
Timeline, and also by scaling them.
| | 02:46 | If you click on some of these you'll
see that the little blue line is rotated.
| | 02:49 | If you look at others, they
are flipped horizontally.
| | 02:52 | So by scaling, rotating, and flipping
on the horizontal axis, you can trick
| | 02:57 | the eye. And the other trick that we use is
to play with the brightness of some of these.
| | 03:02 | So the ones in the lower levels I've given
a lower Brightness of say -30% or 33%.
| | 03:07 | Some of the higher ones, this one
is -6 in the Color Effect setting in
| | 03:13 | the Properties panel.
| | 03:14 | And that also creates the effect of
depth: that we're looking at an object
| | 03:18 | that's a little more complex.
| | 03:20 | So let's go to View>Preview mode>Full,
and again we can have a look at this.
| | 03:28 | The quality of the line isn't fantastic,
but everything is moving so fast it's
| | 03:32 | really kind of hard to notice that.
| | 03:33 | So I'm going back to the outer layer.
And then each of these clouds I've also
| | 03:39 | compiled on the main Timeline, in these
little mega clouds which are yet more
| | 03:44 | examples of these nested.
| | 03:45 | So in each one of these symbols we have
12 layers, and then we have four of these.
| | 03:52 | I can add as many of these as I feel
like. So I'll just make a few new layers,
| | 03:58 | and click this keyframe, hold down the
Alt+Option key, and drag, and let's copy
| | 04:04 | the new one, which I can
then drag around to a new point.
| | 04:09 | If I feel like I wanted to start in a
different frame, I can select that symbol,
| | 04:12 | and say start on
Frame 3. If I want to rotate it,
| | 04:15 | hit the Free Transform tool, and you
see as I rotate it, it's showing me the
| | 04:19 | entire area of motion of all
the entire animation inside.
| | 04:23 | This is absolutely fantastic if you want
to create a really huge explosion effect.
| | 04:29 | So if I hit to hold down the Shift key
and the arrows I can move this around,
| | 04:32 | and rotate. Maybe make it a little bit
smaller; kind of tricky, but it can be done.
| | 04:40 | So if I wanted to add more detailed
explosions and pops on this, there you go.
| | 04:44 | Just like the old Warner Bros.
cartoons when Wile E. Coyote would blow up TNT.
| | 04:51 | So that's the methodology that is good to use.
| | 04:54 | To set -- the same principle that I just showed
you on the outer clip applies to the inner clip.
| | 05:01 | So any change that I make now to this
internal clip will be of course mapped
| | 05:07 | onto the four or five on the outside.
| | 05:10 | I will warn you that the more of these
that you add, as I keep duplicating these,
| | 05:15 | the slower the computer will run.
| | 05:17 | So you must remain conscious at all
times that your computer has only so
| | 05:22 | much processing power.
| | 05:24 | So keep an eye out for it;
| | 05:26 | you'll feel your machine start to
slow down a little bit, and if when that does
| | 05:31 | you might throttle back a little bit on
the number of these nested articles. But I love them;
| | 05:35 | I love the effect of seeing a bunch of
these things coming together to create this
| | 05:40 | really astonishing level of visual detail.
| | 05:42 | Now you're seeing there, something is
happening where these things are locking,
| | 05:47 | and let's go in and correct that.
| | 05:54 | And that's probably because there aren't
enough frames on this internal Timeline.
| | 05:58 | So I'm going to make a little column
there, and do some more. And each one of
| | 06:03 | these symbols is set to play once. This is the
other thing that's important to watch out for.
| | 06:07 | If this is set to loop, then
they'll just keep looping, and
| | 06:10 | you'll get all kinds of crazy
effects that you don't want.
| | 06:14 | So when I do these kind of things I
like to make sure that everything is just
| | 06:18 | set to play once, unless I
have a specific need to loop.
| | 06:21 | Flash likes the default to loop.
| | 06:23 | So again, something that you need to
keep your eyes open for. And if you see any
| | 06:27 | strange little things happening at the
corner of your eye, also just go into
| | 06:31 | Outline mode, and you can usually
target whatever layer is being a culprit.
| | 06:36 | So the next step will be to find
ways to finesse this and make it even
| | 06:41 | more capable.
| | Collapse this transcript |
| Optimizing the explosion| 00:00 | So now what I'm going to do is take
the previous animation of the smoke cloud
| | 00:05 | clusters, and find a way to make it a
little easier for Flash to handle this.
| | 00:10 | There is an awful lot of layers going on here.
| | 00:13 | Let me switch off the sky, and
just look at these in Outline.
| | 00:17 | So let's take two of them, and as you
can see, where they cross the material on
| | 00:22 | the yellow layer is actually mostly
invisible. There is no need to have that
| | 00:26 | being thrown around by the engine, so
there are various ways we can flatten this
| | 00:30 | out, so let's take a look at how.
| | 00:32 | So I'm just going to go into one of
these symbols, let's right-click on the top
| | 00:35 | one, and we go Edit. And again,
we have yet more nested symbols.
| | 00:40 | I want to find a way to flatten these
into one completely self-contained image.
| | 00:46 | The first step to do that is to go
as deep as we can, and remove anything
| | 00:50 | that's not needed. That will be
for one, this reference layer. And I'm
| | 00:54 | assuming at this point that you don't
delete any of your previous work. I would
| | 00:58 | do all of this work on a new FLA file,
just in case something goes wrong.
| | 01:02 | So let's delete the reference ring, and
now we'll go back into here. And I think
| | 01:07 | probably the quickest way to do this
is just select everything, and hit F6;
| | 01:12 | that's a lot of black dots.
| | 01:14 | So the next step will be to Edit
Multiple Frames, and then to the right of the
| | 01:21 | multiple frames icon -- they've changed
the naming of this in the latest versions
| | 01:24 | of Flash, but you will have something
like Edit Multiple Frames, or some other
| | 01:28 | word there, and I would select that.
| | 01:31 | Once that's done, you should see this
grayed out area with these little black
| | 01:35 | brackets at the top of the screen,
so that means everything is now
| | 01:38 | potentially selectable.
| | 01:40 | So we'll hit Control+A, and you'll see a lot of
lines surrounding all your symbols. And
| | 01:45 | then hit Cintril+B and wait a moment.
Depending on the speed of your computer, this
| | 01:50 | could be a fast or a slow process.
| | 01:51 | If it's really a slow process;
sometimes I do it layer by layer, and it does
| | 01:55 | require a little bit of patience.
| | 01:57 | So there we have our explosion. Let's
switch off Multiple Frames now, where you'll
| | 02:02 | see everything at the same time.
And we're still on layers; the only
| | 02:07 | difference is they're not symbols anymore.
| | 02:08 | So this is actually maybe a little less
efficient if anything. So the next thing
| | 02:12 | to do is to flatten all of these
columns of symbols into a single layer.
| | 02:17 | So at this point, I think it's good to
know about this great Web site called
| | 02:21 | toonmonkey.com, and these
are free extensions for Flash.
| | 02:25 | And the one that's super
useful would be Merge layers.
| | 02:29 | Very simple to download from
here, and you install them using the
| | 02:33 | Extension Manager in Flash.
| | 02:35 | Once that's done and installed in Flash,
you'll find that under your Commands menu.
| | 02:40 | We covered in an earlier section how to
install extensions, so no need to do that now.
| | 02:45 | I'm actually not going to do that,
because once in awhile, merged layers
| | 02:50 | doesn't like something, and it won't work.
| | 02:52 | So I would say it works maybe 95% of
the time, but that's why it's good to know
| | 02:56 | how to work around it when it doesn't.
| | 02:57 | So first of all, let's make a new layer.
Fill it full of empty keyframes by just
| | 03:03 | hitting F7. And what I'm about to do
is change the outline color, right-click
| | 03:09 | on that layer, and this new layer,
let's give it something strong like black
| | 03:13 | that we can't miss.
| | 03:14 | I'm going to change all these lower
layers to Outline, and then in the first
| | 03:19 | column select all of them, copy them,
and in the top layer Control+Shift+V, and you
| | 03:25 | should see the new artwork pop down,
and it should match exactly the one
| | 03:29 | beneath. Same thing, very carefully to
the next one, Control+C, and then on the top
| | 03:35 | layer, Control+Shift+V. As we move from
one to the other, these might be a little
| | 03:41 | bit confusing, because some of
these outlines are different colors.
| | 03:45 | So you might find it easier to make
them all consistent. So make them all red,
| | 03:50 | or green, or whatever.
| | 03:54 | So again, when I copy here,
you'll see that's beautiful; perfect!
| | 03:57 | So where before we had, in this case,
seven layers, Control+Z, Control+Shift+V: we have
| | 04:03 | one layer, and it is helping us
to remove all of the intersections.
| | 04:11 | Okay, that was great fun!
| | 04:13 | I want to scrub back now and check
everything; make sure all my cutting
| | 04:17 | and pasting went okay.
| | 04:19 | So basically if I switch off my upper
layer, this black outline should pretty
| | 04:24 | much match the one beneath it.
| | 04:26 | So I'm just going to pick a few
of these. Make sure everything went
| | 04:29 | normally; looking good.
| | 04:31 | So as you can see I've got many of
these, and where before there were 12 layers,
| | 04:35 | now I can delete them, and I've only got
one. And Flash will thank us for
| | 04:40 | that when it's starting to create larger clouds.
| | 04:42 | So now each one of these symbols, which
used to be 12 nested symbols, is only
| | 04:47 | one symbol. So now we have four nested
symbols, where before there were 48, or 50,
| | 04:52 | or whatever it was.
| | 04:54 | So we can now, guess what? Do the
same thing here, and we're almost there.
| | 04:59 | So let's hit F6, for all of these,
same with these, and here, and there.
| | 05:18 | Look at these one by one; I think just test
that they pop out at the right point. So
| | 05:23 | if you want, you can make a
blank -- F7 for an empty frame
| | 05:27 | there, so we see exactly
how much stuff we have got.
| | 05:29 | Identical Procedure: Edit Multiple
Frames, Marker Range All, Control+A to select
| | 05:36 | them all, Control+B to break them apart.
And then switch off Edit Multiple Frames,
| | 05:43 | make an empty layer, a lot of F7s up
there to make our new flat layer. And the
| | 05:56 | same process as before: Control+C, Control+Shift+V.
| | 05:59 | I'm going to put the top layer into
Outline mode, so that as I go I can just
| | 06:06 | very quickly double-check to make sure
-- and actually let's make it black like
| | 06:10 | the other one; right-click
Properties, black outline, there we go.
| | 06:19 | So I'm not seeing it
until I actually paste it in.
| | 06:21 | I'll make it solid instead
then, that way I see it immediately.
| | 06:32 | So now we have our top layer done, and
it should be identical to the four nested
| | 06:38 | layers beneath, so I can delete them
now. And now we have one layer, and this
| | 06:44 | one layer will definitely be played
faster than the ones beneath.
| | 06:48 | There's things that we can do on top of
this now. We can optimize the shape,
| | 06:52 | Modify>Shape>Optimize. And depending
on how you want this optimizing to work,
| | 07:00 | sometimes you can be more
aggressive with it than might be needed, so be
| | 07:03 | very careful with that.
| | 07:04 | Let's go into the Full mode now so
we can see where we at, and that's
| | 07:09 | probably pretty clean.
| | 07:11 | And if let me go into Outline mode; you
can see, it looks like a single drawing.
| | 07:16 | So at this point I would save this as
a final project file, and I think that
| | 07:20 | gives you a very good idea of how you
can do some traditional animation, but use
| | 07:25 | some of the Flash tools to help you
construct extremely complex forms.
| | Collapse this transcript |
| Animating smoke with particles| 00:00 | This is an example of a hand-rigged
particle system in Flash. And sometimes, even
| | 00:05 | though you can do this obviously
in After Effects, and other programs.
| | 00:08 | And if you can do them, by all means
be my guest. It can be done, and
| | 00:12 | here I'll show you how.
| | 00:14 | So the way I build this system: I'm
going to tunnel all the way inside, and work
| | 00:20 | my way out. I think it'll
make a lot more sense that way.
| | 00:22 | So at the very root of this
structure of symbols, we have the particle.
| | 00:28 | Now you'll see the path; the smoke 1 is
inside smoke 2, smoke 2 is inside smoke
| | 00:33 | 3, smoke 3 is inside smoke 4; don't panic.
| | 00:37 | So here we have the particle, and it's
a flat solid color area. Although the
| | 00:42 | final particle that we'll render out is
currently guided out as a gradient layer.
| | 00:46 | And the reason why is because if I
guide this in and guide out the solid, and
| | 00:53 | then we begin animating, it'll be very slow;
| | 00:56 | you just won't have the same kind of
response that you would like to have.
| | 01:00 | So when I'm working on this, I
like to work with just a placeholder.
| | 01:03 | So again let me reverse that,
right-clicking, and guiding in and out.
| | 01:08 | So we can see exactly where we are. I mean, these are
both exactly the same shape,
| | 01:12 | and they occupy the same size.
| | 01:14 | So it's a true representation of
where the animation is going to go.
| | 01:19 | On the second symbol in which the
particle resides, I'll you show one of these
| | 01:23 | layers; it'll make more sense.
| | 01:24 | I just made a little undulation cycle
and I duplicated this four times so that
| | 01:30 | we have this nice little
throbbing, and then they just dissipate.
| | 01:36 | And then we have -- the particle is
emitted from this point, and we've motion
| | 01:41 | tweened it up and away.
| | 01:44 | And then by copying this onto 20
different layers, changing the sizes, changing
| | 01:50 | the rotation, flipping some of them
horizontally, then you get this nice
| | 01:55 | natural-looking cloud, dissipating.
| | 01:58 | And then the last touch, if you really
want to add another layer to this, is to
| | 02:02 | duplicate the cloud, and create a smoke effect.
| | 02:06 | So that when we get to Frame 30,
I fade in another one of these,
| | 02:10 | and I can do as many of these as I like.
| | 02:12 | I could do another 20 levels of these
things, and just have a constant cloud
| | 02:16 | of smoke coming up.
| | 02:17 | So having shown you that, let's
build one of these systems from scratch.
| | 02:21 | Now I'm not going to build anything
like as complex as that; I really just want
| | 02:25 | to show you the basic principles of how
this system works, and how you can really
| | 02:29 | push your computer to the best of its limits.
| | 02:33 | Let's make the first particle;
| | 02:35 | it's already appeared as a gradient.
| | 02:38 | Okay, delete that frame.
| | 02:41 | So here's our particle. I'm going to go with
that, hit F8, and we'll call this 1 particle.
| | 02:49 | Let's click in there.
| | 02:52 | Now we want to have our guide
layer, so let's make a new layer.
| | 02:56 | Hold down the Alt key and drag, and so
our finished layer will be particle.
| | 03:02 | It's very important with this that you name
your layers really, really well so that you
| | 03:05 | don't get too badly lost in them.
| | 03:07 | And we'll call the lower layer reference.
And obviously, we don't want the lower
| | 03:11 | layer to be a gradient, so let's just
click on the color and make that just a
| | 03:16 | regular old black or
maybe gray is better. Okay.
| | 03:21 | So that's what we'll be
seeing for the time that we are actually
| | 03:23 | animating this in Flash.
| | 03:26 | So now we have our particle.
| | 03:27 | I might be a little big. I'll go
in and make it a bit smaller.
| | 03:32 | Make sure we make both of them
smaller. I'll hold down the Q key for Free
| | 03:37 | Transform, and I'm going to pull that in,
and use the arrow keys to center it.
| | 03:44 | Now the next step is to make our cluster.
| | 03:46 | So I'm going to select the
particle, hit F8, number 2 cluster, and
| | 03:55 | double-click again.
| | 03:56 | So now we're inside the cluster symbol.
| | 03:58 | It's very easy to lose your place in
this because everything looks visually the
| | 04:02 | same, but that'll change soon as you
begin to add little animations here.
| | 04:06 | So what I want to do here is keep it
reasonably simple, so just two more
| | 04:10 | layers are fine. And I'm going to copy the
particle holding down the Alt, Option key to there.
| | 04:15 | And I'm going to make a 30 frame long
action, where these particles move and dissipate.
| | 04:21 | So I hit the F5 key to put in some blank
frames there, and actually let's just hit F6.
| | 04:27 | I'm going to just grab one at a time.
I'm going to just move them out, so what we're seeing
| | 04:34 | is these particles are now moving
out into little triangular pattern.
| | 04:38 | So let's select the Timeline, right-
click, and go Create Classic Tween.
| | 04:43 | And so that's pretty much what's happening.
| | 04:45 | And we can beef this up a little bit;
Free Transform tool and scale some of
| | 04:50 | these into different shapes or sizes
| | 04:55 | So it doesn't look all the same size.
I'm going to zoom in a little bit, and
| | 05:00 | we'll offset these very slightly, and
use Free Transform, Q on the keyboard.
| | 05:08 | And if you feel like,"They're all on
top of one another, I can't!" I would just
| | 05:11 | pull them all apart.
| | 05:15 | And you can drag them back in until
they're more or less over one another.
| | 05:21 | And there's a little funky
little rotation movement there;
| | 05:23 | if we go into Outline mode, we can see,
okay, the orange guy, maybe that's a bit
| | 05:27 | eye-catching, so let's pull
that in. Purple, it's okay;
| | 05:33 | maybe the green could be a
little bit further out that way.
| | 05:37 | Okay, and I would also like them to
dissipate into pretty much nothing at the end.
| | 05:43 | So I'm going to hold down the Shift key,
click on them to select them all, color
| | 05:47 | effect in the Properties panel,
select Alpha, and they're now at 0.
| | 05:51 | So now we have a little three-particle
cluster that's going to dissipate for us.
| | 05:58 | So back to the main Stage
and we will, guess what:
| | 06:02 | start another symbol. Hit F8, 3,
and we'll call this one cloud, and
| | 06:12 | double-click on that again.
| | 06:13 | And what I want to do first is just
animate one of these little particles
| | 06:16 | floating up into the air. And it will be a
short little action; this is pretty quick.
| | 06:21 | I've made it 30 frames. You can make it 100
if you want something a little more elegant,
| | 06:24 | but let's make it little simpler to do.
| | 06:27 | So all I want to do is to move this
particle on little S curve up to the top. So
| | 06:33 | I'm going to select the Line tool, and
make sure that Snap to Object is on.
| | 06:38 | It's very important that
they really connect properly.
| | 06:42 | Let's name these, so we'll call
this one 1 path, and 1 particle.
| | 06:52 | So I'm going to hit F6 down here,
make a new keyframe, I'm holding down the
| | 06:59 | Shift, I'm moving the arrow keys, just
to get it out of the way, and then I can
| | 07:03 | drag it until it snaps to the end of that line.
| | 07:08 | And now if I curve that line -- it's not
a guide yet, so don't worry about that.
| | 07:11 | And now we can switch the Snap to Objects
off, because I want to do some finer work.
| | 07:17 | If I hold down the Alt key and click
on the line, I can curve it into a nice
| | 07:20 | little S shape by adding a new point.
| | 07:23 | That's not too bad. So now right-
click on the path and say it's a guide.
| | 07:29 | It won't work until I drag the particle
layer directly into the guide. And now
| | 07:35 | if we follow this animation, it's not quite
working yet; we have to activate tweening.
| | 07:40 | So we right-click on the particle,
Create Classic Tween, and you'll see that's
| | 07:45 | really nice, it's following the guide.
| | 07:48 | So now we can make a few more of these,
I'm just going to make, say, four more.
| | 07:54 | And the quickest way to do it is
simply to select the path in the particle
| | 07:59 | layers, hold down the Alt key and
drag, or right-click and go Copy Frames,
| | 08:06 | select your target layers,
right-click, and go Paste Frames.
| | 08:09 | But I think Alt is quicker, so I hold
down the Alt or Option key and drag these.
| | 08:13 | Now we have a bunch of these layers but
they're all the same, so let's padlock
| | 08:18 | the bottom two layers.
| | 08:19 | And they were called the same, so with
enough time I'd actually go through all
| | 08:23 | these and number them, 2.
| | 08:24 | I can't stress this enough actually, and
you really need to keep on top of your
| | 08:29 | names for all of these layers.
| | 08:32 | They can become very confusing, so
it's the question of having a good
| | 08:36 | disciplined work process.
| | 08:39 | There's the first layer here.
| | 08:41 | If I, for example, just select these
two, and hold down the Shift key, and move
| | 08:46 | the arrow up by one-click. Do the same
at the end of the Timeline for the second
| | 08:51 | key. I've already shifted them off a little bit.
| | 08:54 | Now I can go in and fine-tune them,
maybe stick with the guide, so I'll just move
| | 08:58 | the guide around, there we go.
| | 09:00 | So by moving the guide, actually, in
this version of Flash -- all the versions of
| | 09:04 | Flash seem to be slightly
different in the way they handle this,
| | 09:07 | but this one seems to be
glued to the symbol, which is okay.
| | 09:11 | So now I can go in to this little fellow,
and just hit the Free Transform tool or
| | 09:16 | Q on the keyboard, maybe rotate that
symbol. Scale it a little bit to vary the
| | 09:20 | position. Definitely vary the flight path.
| | 09:23 | So let's just do something that's
slightly different from the first one; maybe
| | 09:29 | change the end state too.
| | 09:30 | I'm going to hide these; aah!
| | 09:40 | There it is!
| | 09:41 | So don't be afraid to hide layers; switch
them on and off if something goes missing.
| | 09:44 | I going to switch Snap to Objects on,
because the final frame of the symbol is
| | 09:49 | actually an empty blank square, so it's
kind of getting a little difficult to
| | 09:52 | find it to select it.
| | 09:54 | So what I'm going to do, another little
trick with the guides, double-click on
| | 09:57 | that, and I'm going to put in an empty image.
It will be ultimately guided out later on.
| | 10:04 | Let's give a default color so we can't get
confused; make it an orange. Drop it there.
| | 10:11 | And now when I work with these, we'll see this
little orange layer that will help us to select it.
| | 10:16 | So let's make the guides reactive
again; they were following that path.
| | 10:20 | I think we can make that path more
interesting. Let me padlock that off. Okay, better.
| | 10:24 | Let's now zoom out, and if I look at
both of them together, and switch off the
| | 10:34 | guides, you see that
they're looking kind of the same.
| | 10:38 | So I think we should rotate one of
these. Still it's kind of similar, so
| | 10:51 | probably the start state too.
| | 10:52 | So I'm using the Free Transform tool.
| | 10:57 | Okay, that's a little better.
| | 11:03 | So what I'm going to do is go
through all of these layers, and repeat this
| | 11:07 | process, and when I come back to you,
because this is obviously that's a bit
| | 11:10 | time consuming, when I come back to you,
you'll see all five of these that have
| | 11:14 | being nudged and pushed into varying
different guide paths just by making little
| | 11:19 | modifications to all these layers.
| | 11:21 | Okay, so what I've done is just made
some small little additions to the other
| | 11:25 | layers, just to vary the paths.
| | 11:27 | If we look at the entire path system,
it looks like a little strand of
| | 11:31 | tangled hair or something.
| | 11:33 | As you follow the particles, it
gives them a much more natural flow.
| | 11:36 | Couple of last pieces of housekeeping
are required; the little guide layer that I
| | 11:40 | created so that we could select
this thing: we can guide that out.
| | 11:43 | So I just click on the Cluster
symbol and guide out that top layer.
| | 11:47 | And now when we play the
animation, that's looking really sweet.
| | 11:51 | And then the last thing to do is we
tunnel all the way into the particle, and we
| | 11:58 | reverse the guides, so we're
now in the particle symbol.
| | 12:02 | I've guided out the reference layer, and
I'm going to guide in the particle layer.
| | 12:05 | I'll click all the way
out to the top of the scene.
| | 12:09 | And last step in this process, you can
duplicate the cloud, and make several of these;
| | 12:16 | I'm just going to make some
new layers and drop them in.
| | 12:20 | So there's one there; maybe change
its position, and now when you play the
| | 12:26 | scene, you can have waves of these things.
| | 12:29 | And again, you can vary
these. You can rotate them.
| | 12:33 | It'll show you a general outline suggestion
of where your flight path might be heading.
| | 12:37 | So it's a pretty cool little
toy to have at your disposal.
| | 12:40 | So, one of the more
intensive sections of this course.
| | 12:43 | So I hope you enjoyed it.
| | Collapse this transcript |
|
|
4. StaggersIntroduction to staggers| 00:00 | This section should be fun;
| | 00:02 | it's about staggers and doing
really quick vibration effects.
| | 00:05 | When you work in animation I guess there
is this question: should you work in 2D or 3D?
| | 00:09 | The thing I like about Flash, sometimes,
is it does make certain things easier than
| | 00:13 | they might be, I think, in 3D, and one
of them is working with staggers, and
| | 00:16 | controlling staggers.
| | 00:18 | The one on the left, the red ball, is
the simplest of all staggers. This
| | 00:21 | kind of staggers often done for
screams, like you can imagine that being a
| | 00:25 | person's face going aah!
| | 00:27 | The one in the middle is the diving
board, and that's a little more intricate.
| | 00:31 | That's going between two states, up
and down, and finally settling in to one.
| | 00:35 | It's great for springs, and some mechanical effects.
| | 00:38 | And the little green character walking
that we previously animated; that is a
| | 00:42 | bit of palsy. It's like a person with
a tremor, or a shake, or it could even be a
| | 00:46 | character leaning into the wind, and you can
almost feel the gale force blowing at them.
| | 00:52 | All these staggers use the same basic
technique, at least in Flash the way we are
| | 00:56 | able to use it. And we are going to
begin with the first of these: the classic
| | 01:01 | 1, 2, 3; 2, 3, 4 stagger. And we will
do that in the next section.
| | Collapse this transcript |
| Animating a simple stagger| 00:00 | So the first of the staggers that we
will cover is the really simple one. This
| | 00:04 | is the one that might be used for a
scream or a yell. Here's what it looks like.
| | 00:09 | I've made this very simple face so that you
can see how basic a design can be used for it.
| | 00:14 | So I have clicked all the way into
the internal scene of this ball, and it
| | 00:18 | consists off 10 frames. They are easing
out, or slowing into, this end frame. So
| | 00:27 | there's less of a motion as the
action ends. So big movement between here and
| | 00:31 | here, less so between here and here.
| | 00:33 | Because we're using motion tweening
and shape tweening, we are kind of sadly
| | 00:37 | restricted to the tweening options of
the shape tweening world, which is ease
| | 00:42 | in and ease out, from 1 to 100. So we
have to follow along, or things will
| | 00:46 | slide out of position.
| | 00:48 | I've put down a numbers layer here.
It'll make it easier for us to follow along.
| | 00:52 | I use this as a temporary device.
| | 00:54 | So actually what I'm going to do,
I'll use this later, I am going to copy
| | 00:57 | those frames, save us some time.
| | 01:00 | So this is like a single simple action.
And then on the outer layer what I've
| | 01:04 | done is made a series of keyframes
that are calling on the internal Timeline.
| | 01:09 | So the first one is looking for, and you
can see down here in the looping options, Frame 1.
| | 01:14 | If I click on the second one, Frame 2.
I'm using the Comma key and the Period
| | 01:18 | key to go through frame by frame.
| | 01:20 | The third is Frame 3, and next is Frame 2 --
actually what I'll do, this will be quicker.
| | 01:25 | I'm going to guide out the number
layer. So we're going 1, 2, 3; 2, 3, 4;
| | 01:28 | 3, 4, 5; 4, 5, 6;
| | 01:29 | 5, 6, 7; 6, 7, 8;
| | 01:30 | 7, 8, 9; 8, 9, 10;
| | 01:30 | 9, 10, and that creates the stagger.
We have basically staggered the timing.
| | 01:42 | So now that that's done, we can
go back into our figure. I'm just
| | 01:46 | housekeeping, guide out that number
again, and now you can see it without
| | 01:49 | the number distracting you.
| | 01:51 | So what I'm going to do is a simple
demonstration of how easy this is from
| | 01:54 | scratch. So let's create our symbol,
and I'm going to select the Oval tool, and
| | 02:00 | just create a simple shape.
| | 02:02 | It's got a red outline, I'm going to
give it a black one. And let's see some of
| | 02:06 | them can color for the face, so let's
push that here, and I'm going to select F8,
| | 02:11 | and I'll call it stagger. And inside this
make a second keyframe on Frame 10, and
| | 02:16 | that will be the stretch position.
| | 02:19 | So bring that up; I'm going to use
Shift+Arrow key to stretch it up, and you
| | 02:24 | can make any transformation we think we
can justify on this. And we are shape
| | 02:29 | tweening, so we don't have to just
squash and stretch. We can mutate the shape
| | 02:33 | a little bit, so I'm going to click between
these two keys, and go Create Shape Tween.
| | 02:38 | And if you have, like, an unpleasant
tweening, just maybe put some shape hints on, or
| | 02:43 | just start from scratch until you get
some pleasing shape transition that you
| | 02:46 | want. And I'll make sure that this is
easing out 100, so that were slowing in
| | 02:52 | to this end state here.
| | 02:55 | Okay, that's that. So on the outer
Timeline let's make another symbol. I'll
| | 03:00 | click on this. This is the stagger
symbol, and I want to keep it nested
| | 03:03 | inside yet another symbol.
| | 03:06 | So I'll call this one stagger action.
| | 03:09 | I want to do a quick cheat; earlier I
copied the number frames on the previous
| | 03:19 | one, so you might want to just make
your own by using the Text tool, and just
| | 03:26 | laying down whatever numbers you think
you'll need to see. You don't need to
| | 03:29 | watch me typing in numbers, so here we go.
| | 03:33 | Switch off the guide, so that we can
actually see it, and now I'm going to make
| | 03:37 | a series of keyframes and this stagger
was going to go, let's see how many we
| | 03:41 | need, probably a few. It's
going to go, 1, 2, 3; 2, 3, 4;
| | 03:43 | 3, 4, 5; 4, 5, 6;
| | 03:43 | 5, 6, 7; 6, 7, 8;
| | 03:44 | 7, 8, 9; 8, 9, 10;
| | 03:44 | 9, 10. It's the kind of thing you need to
do undisturbed. If someone is talking
| | 03:53 | to you, you'll probably get it wrong. So
let me remove these surplus frames, set to
| | 03:57 | loop. Well, we can make it play once.
| | 03:59 | And I'm just going to hit F6 for all of
these, and then the fun part, make sure
| | 04:07 | that we have the numbers. So it's 1, 2,
3; this should be 2. Here is the beauty
| | 04:12 | of having our number -- this is very
hard to do if you don't have a little
| | 04:15 | temporary number guide
to help you along the way.
| | 04:18 | So I'll stop talking now; 1, 2, 3; 2, 3, 4;
| | 04:20 | 3, okay, nice.
| | 04:31 | So let's go into the screaming head, and
guide out the numbers, and have a look.
| | 04:40 | That's it, and let's say Control>Test
Movie; if I test the movie, I'll be
| | 04:44 | seeing more than that, so let
me guide out the ball there.
| | 04:52 | I think you'd find that handy, like
I said for screams. I'm sure
| | 04:54 | there's other applications.
| | 04:56 | I think people have used some stuff
like this for laugh effects, mechanical
| | 04:59 | recoiling effects, so keep it
in mind. Don't overuse these
| | 05:02 | staggers. Overuse can get old really
quick, so I tend to keep them for things
| | 05:06 | that really demand them.
| | Collapse this transcript |
| Animating a diving board| 00:00 | So next is the diving board stagger,
and this is somebody jumps off a
| | 00:05 | diving board: boing!
| | 00:06 | This has a lot of different applications.
Imagine this is somebody's head, and
| | 00:10 | got clobbered on the side. Like in the
old cartoons from the 50's, Tom & Jerry or
| | 00:15 | whatever. It's like, zoing! Like that.
So it's not just something that you need
| | 00:19 | to apply to a diving board.
| | 00:21 | So let's have a look
inside and see how it's done.
| | 00:24 | So basically what I did was, I created
two separate scenes:in one, the diving
| | 00:28 | board is in an up position, and moves
into a down position, and in the other the
| | 00:32 | diving board is in a down position,
and moves into an up position.
| | 00:36 | And I used an ease out of 100,
so that it gets slower and slower and
| | 00:40 | slower as we approach the loss of
energy in the stagger. Then the next step was
| | 00:45 | to create two layers: one layer
for the upstate, and one layer for the
| | 00:49 | downstate, and they play once right through,
and then I simply deleted the alternate frames.
| | 00:55 | So we go from Frame 1 of the upstate,
to Frame 2 of the down, to Frame
| | 00:59 | 3 of the up, to Frame 4 of
the down; it plays right through.
| | 01:02 | Now I've been noticing something
about the CS5.55 playback, and there is
| | 01:07 | definitely a slight glitch
creeping in. I don't know if it's particular
| | 01:12 | to this computer, or this
latest version of Flash.
| | 01:15 | But when I play this, especially with
these really fast staggers, I am seeing it,
| | 01:18 | and it's kind of weird. Sometimes I am
playing through here, and it's great. Other
| | 01:22 | times it seems to stick. So if you
ever see that, and you are a bit bothered
| | 01:26 | by it, just go Control>Test Movie>Test.
| | 01:30 | And it'll probably give you a much
more reliable playback, and of course the
| | 01:34 | most reliable playback would be to
render your animation as an MOV file or an
| | 01:38 | AVI file. So keep an eye out.
| | 01:39 | It kind of threw me a bit earlier.
| | 01:42 | So the way I have built these planks;
I built them kind of to be a little more
| | 01:46 | three-dimensional. So I had three
different layers for the front, the side, and
| | 01:49 | the top. So we don't have enough time,
honestly, to go through and be that fine tuned with it.
| | 01:54 | So what I am going to do is rebuild this
just using a single plain. It will show
| | 01:58 | you the exact principles
of what we are doing here.
| | 02:00 | I just wanted to make it look three-
dimensional so that you have a good idea
| | 02:03 | that we're not limited here. You can
have multiple layers work together to
| | 02:06 | create these really cool effects.
| | 02:08 | So let's go back to the outer layer.
| | 02:09 | I want to just make the plank go away
for a second, and let's just guide him
| | 02:13 | up. And let's make a new layer, so use
the Rectangle tool, I am going to make a
| | 02:18 | little plank, and let's give it
a little bit of a perspective.
| | 02:26 | So here is our plank, and it's in the
standard, what we would call a zero pose, or
| | 02:30 | a flat pose. Nothing has happened
that's interesting, so that's good. Let's hit
| | 02:35 | F8, and we'll call this plank,
and let's make this the up state.
| | 02:39 | So I'm going to put the pivot point
to the far left, so the natural pivot
| | 02:43 | will be somewhere over here, that
makes sens. Even though Flash defaults to
| | 02:47 | there, I wouldn't worry about that
right now. Click on that; it's a plank up
| | 02:51 | and let's make our label up.
| | 02:53 | And let's see, before we do anything else
let's just make this as clean as we can.
| | 02:57 | So I'm going to hit F5 just to extend our
Timeline 30 frames. And now we will do the down pose.
| | 03:03 | So I will make a new layer, click the
keyframe, hold down Alt+Option, and Drag;
| | 03:07 | little plus sign appears over your
cursor, and I am going to call the lower
| | 03:11 | layer the down layer.
| | 03:13 | Click on that symbol, right-click, and go
Duplicate Symbol, and this will be plank down.
| | 03:19 | Now if I double-click on that, I can
hit the final frame. Hit F6, down position
| | 03:25 | will be the first frame.
| | 03:27 | If we imagine that the diver is going
to be standing here, and the board is
| | 03:31 | attached to the wall here. So let's
have the down position -- just clicking and
| | 03:37 | dragging the points, let me put a
slight little curve on it. And now we
| | 03:42 | right-click on the Timeline, and go Create
Shape Tween, and I am going to ease out 100.
| | 03:48 | So back to the main Stage, hide that,
and now we are going to the up position.
| | 03:54 | So I am going to hit Frame 30, and keyframe that.
| | 03:57 | Frame 1 would be the maximum up position,
with the end framing the settle, of course.
| | 04:08 | Okay, right-click, and go Create Shape
Tween, and no tweens were needed on this one.
| | 04:13 | So if you see weird shapes spinning
around or the thing doesn't work, then you
| | 04:19 | would apply a shape hint: Control+Shift
+H, or Modify>Shape>Add Shape Hint.
| | 04:26 | A quick word of warning to back up
your file, and that's about the 50th time
| | 04:30 | today I've said that.
| | 04:31 | When you apply shape hints, the Flash
engine can go strange, and crash on you.
| | 04:35 | Really it's frustrating when you lose
a lot of work, especially when you know
| | 04:38 | that you should have backed up your file first.
| | 04:40 | So please back up your file
before anyone applies a hint.
| | 04:43 | But that should fix any
glitches in the shape tweening.
| | 04:46 | So let's look at these two layers
working together. That's kind of interesting.
| | 04:50 | So let's make sure these only play once;
right now they're set to loop, so let's
| | 04:53 | click on each one in the Properties
panel. Tell him to play once. Bottom one as
| | 04:58 | well, and now when we play back, that's nice.
| | 05:02 | So now we select all the frames that we
are going to animate, or that are closing
| | 05:06 | in on that static pose, and hit F6, and
now we simply delete alternate ones.
| | 05:11 | So if somebody was diving off the board,
for example, so the diver jumps up, and
| | 05:17 | hits down, then I would expect this to
be the first frame that we would see.
| | 05:20 | So let's get rid of the top one first.
And I am just going to make this little
| | 05:25 | checkerboard deletion all the way
through the Timeline. Click on the ones you
| | 05:29 | don't want, Control+X, and there is the result.
| | 05:33 | Now I mentioned earlier that little
glitch; I am seeing it again, so I'm going to
| | 05:37 | Control>Test Movie>Test. That's nice.
| | 05:41 | Okay, so as you see, that's a really nice
simple way to deploy a stagger. And the
| | 05:47 | other thing to bear in mind, and this is
where I really love the way these
| | 05:50 | stagger effects in Flash can be set up;
| | 05:53 | if you want to make it longer, you'd
simply extend the end state of each of
| | 05:57 | these. And you would simply make more
keyframes, and then repeat this little
| | 06:03 | checkerboard pattern. It could have very
long slow staggers. In the good old days,
| | 06:07 | drawing by hand, that would
have taken a very long time.
| | 06:09 | So it's super easy to play
with these, and have fun with them.
| | 06:12 | I hope you find ways to
utilize this particular effect.
| | Collapse this transcript |
| Animating a tremor| 00:00 | There is another really cool effect
that I use to wonder, how the heck do people
| | 00:04 | do it? And that's a little shake or a
stagger; the very tiny little tremors that
| | 00:09 | people do sometimes, like very old
people, or if you are leaning into the wind.
| | 00:13 | So let's have a look at what this is.
| | 00:15 | You may remember this little walking
magic carpet, dollar bill fellow from a
| | 00:19 | previous section of the course.
| | 00:21 | This could either be he's very old and he
is shaking, or there is a gale force wind
| | 00:25 | blowing right at him.
| | 00:27 | So let's see how this was done again.
And as you can imagine if you have done
| | 00:30 | the previous section, we animated a very
simple walk; normally I have many more
| | 00:35 | poses in this walk, but to keep things
really easy for us I removed the squish
| | 00:39 | and the highpoint poses.
| | 00:41 | So what we have is just the contact
positions where his feet are touching the
| | 00:45 | ground, and then the passing position, and then
the contact, and that's it. It's a passable walk.
| | 00:51 | I made a second one, so there is two of
these, and this is the second one. And all
| | 00:56 | I did was I went into the shoulders; I
just pulled slightly out of position from
| | 01:00 | the first one. And then on the outer
Timeline, if you have seen the animation of
| | 01:06 | the plank, we just go back and
forth between one and the other.
| | 01:12 | So what I am going to do is just
simply hide and guide out the original
| | 01:15 | Exercise file, and let's see if you can put one
of these things together in not too much time.
| | 01:20 | So what I am going to do is throw
down, first, a couple of guides just for the
| | 01:25 | feet. It's going to be walking along
a line, like that. Parallel lines, let's
| | 01:29 | say, and let's just padlock that, and
make that a guide layer, because I don't
| | 01:33 | want to be exporting it.
| | 01:34 | And with a green color for the fill, and
the black for the outline, I am going to
| | 01:37 | use the Rectangle tool, and
let's make a little pose.
| | 01:43 | So the first things first; let's hit
F8, and we will call this walk 1, and I am
| | 01:48 | going to put the pivot down closer to there.
| | 01:51 | So we'll do a full walk first in this one.
| | 01:55 | So I'm going to hit F5 to stretch this
Timeline out, select these frames, hold
| | 01:59 | down Alt key, and just copy over. And
I will get rid of the surplus frames.
| | 02:03 | So this makes it clear that exactly the
right number of frames to make that cycle.
| | 02:08 | So I am going to hit F6 here, so that
we have our contact position at the Frame
| | 02:13 | 1, and our contact position at Frame 29
are exactly the same. And on this frame
| | 02:18 | in the middle, Frame 15, I am going to
hit F6 to make new keyframe, and let's just
| | 02:23 | push this into the other contact position.
| | 02:27 | So now he goes from here to here, and we
probably want to put a bit of a twist on
| | 02:31 | the shoulders as well.
| | 02:32 | Okay, so I now I am going to activate
shape tweening. The big problem we have
| | 02:46 | here right now is that the
feet are stuck on the ground.
| | 02:49 | So we need to put in a passing position,
and making F7 here as a little note for
| | 02:53 | the correct position, and I often do
this so that I can line up my frames
| | 02:57 | properly on each side of the walk.
| | 02:58 | I am selecting these frames, holding
down the Alt or Option key, and dragging.
| | 03:04 | So I am going to the first passing
position, hitting F6 on this one; the leg that's
| | 03:08 | moving forward, well that
should be off the ground.
| | 03:10 | There we go, and same with this one; hit
F6, and the leg moving forward would be
| | 03:19 | this one. Lift it off the ground, and I
have been lucky here; I am not having to
| | 03:23 | use any shape hints.
| | 03:25 | If you find you do, I'll say it again,
don't forget to back up your scene before
| | 03:28 | you start applying shape hints.
| | 03:30 | Now we have our first walk, and,
simple process now, we duplicate it. And I
| | 03:35 | probably don't need to see
this guide layer anymore.
| | 03:37 | So we will call this walk 1; it's always
nice to label everything when you start
| | 03:40 | doing the stuff, because
you can get lost very easily.
| | 03:43 | So I am going to hold down the Alt,
Option key, and drag to here, and I will put
| | 03:48 | the walk 2 on the bottom.
| | 03:50 | So let's name that, hide the top one,
click this walk, which is walk 1,
| | 03:54 | right-click, and duplicate, and we'll call it walk 2.
| | 03:58 | So we have Layer 1, walk 1 containing
symbol walk 1; we have Layer 2, walk 2
| | 04:04 | containing symbol walk 2.
| | 04:06 | So let's go into walk 2, and what I am
going to do is just pull these points a little
| | 04:10 | bit. And like I said before, we
don't want to change the feet too much.
| | 04:14 | We can actually change the foot of the
passing position, becaus it pushes
| | 04:17 | off the ground, so that could give us a
little bit of extra shimmying. And I think
| | 04:21 | we can pull these shoulders a little bit.
| | 04:24 | And you don't want to go crazy with this.
Just keep it pretty subtle, because
| | 04:27 | we are trying to have a little tiny,
very minor effect here. It could be wild
| | 04:33 | if you want it to be, of course, but the
kind of effect that we are looking for is
| | 04:37 | a little lighter than that. And
don't forget, our end should be the same.
| | 04:41 | So rather than making changes to
this, I am going to go Control+X, Control+C,
| | 04:43 | Control+Shift+V to paste that in place.
| | 04:49 | So now we have two walks, and
they should be slightly different.
| | 04:51 | Let's test that by looking at them in outline.
| | 04:56 | And that green is hard to see, so
let's make that red. And let's make that
| | 05:00 | purple a dark green. I like to have these play
once, but this is a walk cycle, so looping is good.
| | 05:07 | So they both loop, and they're both
set to loop from Frame 1 onwards.
| | 05:12 | So let's just hit all these layers,
and hit F6, and we will make a little
| | 05:19 | checkerboard pattern by hitting Control+X, and
deleting every alternate frame. That's it.
| | 05:24 | That's how you do it.
| | 05:26 | You could also make walk 3, and pull
that into a slightly different position,
| | 05:30 | and you can go 1, 2, 3;
| | 05:30 | 1, 2, 3, instead of as I have done here: 1, 2; 1, 2; 1, 2.
| | 05:34 | You could have four of them if you
are afraid that this looks a little
| | 05:37 | mechanical, and you have seen how easy it
is to make more of these states if your
| | 05:41 | character is reasonably simple.
| | 05:43 | Even with a slightly more
complex character I could do this.
| | 05:46 | I don't think it would that difficult
to duplicate a walk cycle, and just pull
| | 05:49 | every alternate position slightly out
of place, and then toggle between them.
| | 05:53 | Just don't start doing
it to all your characters.
| | Collapse this transcript |
| Animating a scream| 00:00 | In the previous section we did a
very simple stagger scream; the 1, 2, 3; 2, 3, 4
| | 00:05 | stagger. This is a slightly more
capable stagger, let me show you,
| | 00:10 | where the character goes into a little
anticipation, and he staggers up between two
| | 00:15 | different states, and zips back and forth.
| | 00:17 | It's a lot like the stagger
that we used on the plank scene.
| | 00:20 | So let's have a look a little deeper
into this. I'm going to just hide the
| | 00:24 | background, and just go into
one of these little scenes.
| | 00:25 | And so what we have is a simple action,
quite simple, only four keyframes, where he
| | 00:33 | moves down into this little scrunched
position, and then he arcs around and up,
| | 00:38 | and then settles back into his
standing position; that's it.
| | 00:42 | So we have one moving on the left side,
and we have its alternate moving on the
| | 00:47 | right side, it's the same action,
just moving the other way. And so you might
| | 00:51 | be asking, why don't you just
flip the first action horizontally?
| | 00:55 | The reason being, not all characters
are symmetrical. In this case, this little
| | 00:58 | corner of hair, if I were to flip this
horizontally, it would then pop to the
| | 01:03 | other side of the head. And if we had
an eye patch, or some other detail, then it
| | 01:06 | would look very strange.
| | 01:08 | So it's good to know how to do two of
these things that are completely separate,
| | 01:12 | so that's what we're going to do in this course.
| | 01:14 | Because I there's so little time really
available to do this, I want to cheat very slightly.
| | 01:18 | I want to copy this timing, so
that we match as closely as possible.
| | 01:21 | So I'm going to make the new temporary
layer, and just hit F7 here, here, and
| | 01:25 | here to make keys on Frame
7, Frame 20, and Frame 27.
| | 01:30 | Now I'm going to select this Timeline,
right-click and copy frames, and now we
| | 01:36 | can delete that layer. That was
just a little temporary placeholder.
| | 01:39 | And let's go back out to the main Stage,
and now we can hide the original material.
| | 01:43 | I want to take the Work folder,
and this would be our Work file.
| | 01:47 | So, I've simplified this greatly, I'll
drag him to the top. I've scraped off all
| | 01:51 | the gradients, and I made it a
much easier file to work with.
| | 01:55 | So you'll be able to go back and forth
between the two. I want to show you the
| | 01:58 | general principles involved here, rather
than mess around with too many gradient layers.
| | 02:02 | So let's click on him, and what I want
to do first is make a new layer, paste
| | 02:08 | frames, and drop in those references.
Hit F5 to extend that Timeline. And I'll
| | 02:13 | do the same with any layers that I
think are going to have little nested
| | 02:17 | animations inside.
| | 02:18 | So that will be the head, let's make a
new layer at the top, and I'm going to
| | 02:23 | paste those frames in.
| | 02:24 | I always do this when I work with nested
animation, because it helps to keep all
| | 02:28 | my Timelines lined up, and
everything works so much better.
| | 02:32 | Do the same with the mouth, because we
are going to do a little animation on
| | 02:34 | the mouth symbol later on. Right-click there,
paste those frames, hit F5; no keys right now.
| | 02:40 | We'll worry about that later.
| | 02:42 | One last little thing to watch out
for; I make sure all these symbols in
| | 02:45 | your Properties panel in looping are
set to play once on Frame 1, and they're
| | 02:50 | set to Frame 1 here.
| | 02:51 | That's kind of important; when you
start setting keyframes here, here, and here
| | 02:55 | later on, it'll really help to set the
right numbers on all of these frames.
| | 02:59 | So again, this head is set to 1 on
Frame 1, and I think we're ready to begin.
| | 03:05 | So first things first; I need not one but
two man layers, so let's make a second one.
| | 03:10 | I'm going to select that frame, hold
down Alt+Option+Drag, and now I have two
| | 03:15 | layers. And let's duplicate that symbol.
And let's call this one man Right, now
| | 03:21 | just put down 'R' uppercase to signify that.
| | 03:24 | Double-click on the name in the
Timeline, and call it man right. And the one on
| | 03:29 | the bottom, let's rename him in the library.
| | 03:31 | This simple man is in the man
simple folder, and let'scall him
| | 03:35 | man Left, and we'll name this folder
man left. That'll just make it easier to
| | 03:40 | keep track when we start
zipping these things around the place.
| | 03:43 | Okay, so let me go into the man left
folder, and now we have everything all neat
| | 03:47 | and tidy, all set up, and ready to begin.
| | 03:49 | Hit F6 to make some extra keyframes,
and what I'm going to do to keep things
| | 03:54 | simple; I'm going to move his head
down, and I am going to do it in a fixed
| | 03:57 | amount of distance by holding the Shift
key and the down arrow key. And that'll
| | 04:02 | be his little anticipation move.
| | 04:03 | And on this one, I'm going to hold
down the Shift, and click twice up, and I'm
| | 04:08 | going to rotate a little bit
this way, and I'm going to
| | 04:11 | rotate this one a little to the other direction.
| | 04:13 | And I'm going to use just the regular
arrow keys to push these into a nicer
| | 04:16 | little pose. And then when I select
the body, make sure that you have free
| | 04:21 | transform selected, or Q on the keyboard.
| | 04:22 | And let's just stretch the body to match
those positions. And if you drag here you
| | 04:28 | can skew, and you can squash it a
little bit. And now I'm going to select the
| | 04:34 | Timeline, right-click, and Create Classic Tween. I
don't use the new motion tween; I don't like it.
| | 04:40 | It's got some really nice features,
but classic tween is a lot easier to use.
| | 04:43 | It's faster, it's more responsive, and
there's a nicer way of tweening with it.
| | 04:48 | And without zooming in
and out, I mean, I'm working on 50%;
| | 04:50 | I like to do these kinds of
operations at the same level of magnification,
| | 04:54 | because it's easier to match the distances.
| | 04:56 | So what I'm going to do now is hit F6,
F6, and F6 again to make new keys.
| | 05:03 | Remember we used Shift and Arrow key
down once for the down position, and Shift
| | 05:07 | and Arrow key up twice for the up
position. And this time he'll be facing this
| | 05:11 | way, so I'm going to pull the head over
like this, drag the body up, and we'll
| | 05:20 | squash the body on this to match. And
now I will assign our motion tween. Okay.
| | 05:25 | So now we should have two layers, and
what's happening is not quite what
| | 05:33 | I wanted exactly just yet. Because, if
we look at this in outline, what I want
| | 05:37 | is -- the beginning looks good, but
they're kind of crossing over at the top.
| | 05:41 | That's not a problem.
| | 05:42 | So what I'm going to do is go into
the first one, and on the top position I
| | 05:47 | am just going to move the head out
that way, by Shift+Clicking, and moving
| | 05:49 | the arrow left once, and drag the body over
a bit. And in the other one, the opposite.
| | 05:55 | So I go to that frame, Frame 20, Shift
+Click to that direction, body over.
| | 06:01 | So now when I look at both of these
layers together, they should be starting
| | 06:05 | to group at the top.
| | 06:06 | Very hard to see exactly what's going
to be happening here, but what I'll do
| | 06:10 | is very quickly just select the area
that we want to stagger to occur in, hit
| | 06:15 | F6., and now I'm going to delete the frames to
match the kind of pattern you are seeing down here.
| | 06:19 | You only need to see one
man level at the beginning,
| | 06:21 | because they are really both the same,
and here they began to differentiate. We
| | 06:26 | can actually hide that now.
| | 06:28 | So I'm deleting the alternates by
hitting Control+X to delete those frames. Let's
| | 06:35 |
| | 06:36 | look at that; that's really nice.
| | 06:39 | And of course, we can change the
nature of the stagger simply by changing the
| | 06:42 | end pose of the up position,
and see how easy it is.
| | 06:46 | I could move the head over here, and
as long as I match that on the other
| | 06:50 | side of the stagger, you can have a
very quick learning curve. Back in the old
| | 06:54 | days, drawing by hand, what I've shown
you right now would have taken an awful
| | 06:58 | lot of drawings; probably several
hours of in-betweening these by hand.
| | 07:01 | So this is a great way to
familiarize yourself with staggers.
| | 07:04 | Now we've laid the skeleton of the stagger.
| | 07:07 | In the next section, I'm going to
show you how to really refine this, and
| | 07:11 | truly bring it to life.
| | Collapse this transcript |
| Refining the scream| 00:00 | So we have a fully functioning stagger.
| | 00:04 | We have a couple of little things to do,
that we can add to soften this up, but
| | 00:08 | the big one really is the mouth.
| | 00:09 | The mouth is just frozen in this smile.
| | 00:11 | So let's double-click on the head to
enter that symbol, and I'm going to keep
| | 00:14 | tunneling in until I get inside of the mouth.
| | 00:17 | And let's click off padlock.
| | 00:18 | I'm going to set a couple of keys by
hitting F6, and then let's add these
| | 00:23 | little mouth shapes.
| | 00:24 | So on this frame, Frame 7, we want
to have the mouth beginning to close.
| | 00:28 | So let's scrunch him a little bit; I'm
just going to pull the corners of the
| | 00:31 | mouth down a little bit.
| | 00:33 | And we want the opposite on the
open mouth; this is where he's shocked.
| | 00:36 | So let's use the Free Transform tool, or
Q, to pull this into something resembling
| | 00:41 | "I am not happy" mouth.
| | 00:42 | I use this to get the shape roughly
into where I want, and then I can start
| | 00:46 | fine-tuning it by pulling the lines.
| | 00:48 | I don't want to end in a happy mouth.
| | 00:50 | So let's take this, hold Alt Option,
and drag into the plus sign next to the
| | 00:54 | cursor. And then use Free Transform to
again push up as close as we can get with
| | 01:00 | this particular tool.
| | 01:02 | And don't forget, we can still
make little changes like this.
| | 01:05 | So now let's select these frames,
right-click, and Create Shape Tween.
| | 01:09 | And now we have nice little action on the mouth.
| | 01:13 | So you might want to add some
ease in and ease out on this.
| | 01:16 | The shape tweening easing is kind
of limited, but it's there, so it's
| | 01:19 | worth playing with.
| | 01:20 | Okay, let's see what that looks on the
other symbol; all the way out to man on
| | 01:24 | the left. That's better.
| | 01:26 | Now I want to add some easing here too.
| | 01:28 | So I'm going to keep it simple. I'm
just going to ease to, say, 80. And I also
| | 01:33 | want to add a guide
| | 01:34 | so that when we go from this frame to
this frame, I want to arc in this form here.
| | 01:40 | So let's go down and make a new
layer, and hit F7 for the layer.
| | 01:45 | Don't make it a guide layer just yet.
| | 01:47 | So with the N key select the Line tool,
making sure that snap is on. And it's
| | 01:53 | easy as to find the point.
| | 01:54 | I want the snap to this point here;
that's the pivot point of the head.
| | 01:57 | So let's select a corner of the line and
drag until you feel it snap to that.
| | 02:04 | And let's go to the next key, and
repeat that process. Click on the head so you
| | 02:07 | see the outline, and then the other end
of the line until you feel that connect,
| | 02:12 | and let's get that arc working.
| | 02:14 | I'm going to zoom out, and next step, or
last step really; right-click on that
| | 02:19 | line layer, make it a guide,
| | 02:21 | click on the head layer, and drag
it to the guide, and you'll see the little
| | 02:24 | arc symbol appear.
| | 02:26 | And now when we press play
you'll see it's a much smoother path.
| | 02:30 | And the next thing that we'll actually
do, just to really fine-tune this;
| | 02:33 | right now, he is coming from this pose,
right down into that one, in a straight line.
| | 02:37 | Let's put a little F6 in here, and
now I am going to go from this position
| | 02:41 | down into this position.
| | 02:43 | So this arc is actually the previous
one. I'm going to just get rid of that.
| | 02:46 | The arc will now work fine from here to
here, and I'll always test to make sure,
| | 02:50 | but nothing should break with that,
and now I can put a new line in. Oh!
| | 02:54 | See what happens? It breaks it.
| | 02:55 | This is a new behavior in later
versions of Flash, and it's not one that I like.
| | 02:59 | So let's make a new layer
again. This is a workaround.
| | 03:04 | So I'm going to make a new line, and
repeat the process that we did for the first
| | 03:08 | part. Snaps in there, and let's select
the head layer and just pull that line in,
| | 03:13 | and now we have our line.
| | 03:15 | Hit Control+C and in the guide layer
Control+Shift+V, and just delete that
| | 03:20 | little workaround layer.
| | 03:24 | Now we have a complete
arc all the way around that.
| | 03:26 | We could add another one
here, but time is short.
| | 03:29 | So this is how a lot of us have
been working around the problem of the
| | 03:33 | arc issue in Flash.
| | 03:35 | Now we have done this side, and the
other thing to do is to make sure that we
| | 03:38 | have our ease outs here; so
80, and 80. Excellent!
| | 03:42 | And I'm going to repeat
the process for this side.
| | 03:43 | It's the identical process, so make sure
that your easements are the same, so 80 here.
| | 03:51 | And I'm going to add the guide layer;
new layer, hit F7, use the N key for the
| | 03:57 | Line tool, and just pop that in.
| | 04:02 | Go to the next key and shape it.
| | 04:06 | And since we know now what happened with
that guide issue we can just workaround
| | 04:09 | that problem a little smarter this
time, and just do all of our arcs ahead
| | 04:13 | of time. Drag that line to here.
| | 04:17 | Sometimes when I do this I'll
accidentally draw the line on the wrong layer;
| | 04:19 | seems to be something that just
happens naturally when you work like this.
| | 04:22 | So keep an eye out.
| | 04:23 | You can always copy and paste it onto
the right layer after the fact that. I
| | 04:27 | think that's looking fine.
| | 04:28 | So now we right-click on our guide line,
and make it a guide, and drag head into
| | 04:32 | there; carefully scrub through.
| | 04:35 | I think that's going to be fine.
| | 04:36 | So now when we go to the main layer, let's
just look at each one, one more time. Nice!
| | 04:43 | And look at the other one; it's in the
opposite, exactly right, like a mirror image.
| | 04:50 | So when I go Control>Test Movie
>Test, that looks good to me.
| | 04:55 | Now there are a lot of little things
that we could add, for example, when he
| | 04:59 | tilts down -- and you'll see them
actually on the sample animation.
| | 05:02 | I originally animated his facial
features moving to the left when he was doing
| | 05:07 | the action on the left side. And you'll
see his face slide to the right, and it
| | 05:11 | creates a really nice
feeling of three-dimensionality.
| | 05:15 | And now with his ears, for example;
you'll see that they're moving in perspective.
| | 05:19 | We just don't have time to get into that,
but I'm sure you get the idea. And this set up,
| | 05:23 | so simple and clean, I think
there is a lot you can do with that.
| | 05:26 | One last thing that I would show you
that's kind of cool, and really simple
| | 05:30 | actually; this little strand of
hair, let's make some keys for that.
| | 05:34 | Hitting F6, and to get an idea about
what I want to do with it, let's just
| | 05:38 | see where he is going.
| | 05:39 | So when he tilts down like this, the
same frame matching the outer number,
| | 05:44 | so if we're on Frame 7, be sure
you're on Frame 7 on the inside.
| | 05:47 | Try pulling that little angle down a little,
and then he is going to move up like this.
| | 05:53 | And I think it will be nice if we
could, on that frame -- again making sure if I
| | 05:57 | enter this symbol on Frame 20 that
you're working on the internal Frame 20.
| | 06:00 | Let's drag that down.
| | 06:04 | See if we can get away with that.
| | 06:05 | And now I'm going to
select these hit Shape tween.
| | 06:10 | Okay, let's see what that looks like.
| | 06:15 | So, it's giving a little extra animation.
| | 06:18 | Again, there is a lot more I could do
with that, and you'll see in the sample
| | 06:22 | animation I've done a lot more than that.
| | 06:24 | It's still a little more subtle, though, but
there is a little drag on the hair.
| | 06:30 | So it's nice, even within something as
cartoony as this mouth stagger, you
| | 06:34 | can still add little subtle touches like
that to give your stagger a little more life.
| | 06:38 | So that's the crazy side to side
stagger animation taken care of.
| | Collapse this transcript |
|
|
5. Fake 3D SpaceIntroduction to Virtual Camera| 00:00 | If you use some other programs, you
will know that there are different ways of
| | 00:03 | handling animation space. And Flash, there's no
way of being nice about it; it's fairly crude.
| | 00:10 | It doesn't have any kind of visual
camera, or a system for moving through the
| | 00:15 | space. It's all flat, it all happens
in one layer, there is no real 3D or
| | 00:19 | even 2.5D space in it.
| | 00:21 | There are some options starting to
creep in, where you can spin symbols around,
| | 00:24 | but nothing that you could do
with the actual Stage itself.
| | 00:27 | There are some third-party developers
who have worked on this, and this is a
| | 00:31 | really great Web site by Bryan Heisey. I
hope I am pronouncing his name right.
| | 00:35 | Basically it's a virtual camera all
done in ActionScript and Flash. And this
| | 00:40 | does allow you to move this object
which you can see here on your Stage, and
| | 00:45 | what gets rendered out is what
you see inside the rectangle.
| | 00:48 | So if you rotate the rectangle,
you rotate the rendered image.
| | 00:51 | And here is another example
that he has created for us.
| | 00:54 | So you can do big rotations and camera
zooms; you can blur the object and it
| | 01:00 | will blur the rendered image.
| | 01:02 | There are some things to
bear in mind about this.
| | 01:05 | I've set up this file, and
this is just a demonstration.
| | 01:08 | So if you want to play with this I
would say go to Brian's Web site, and you can
| | 01:14 | download it from this link here: VCAM AS3.
there is an older version here for
| | 01:18 | ActionScript 2 if that one
isn't compatible with you.
| | 01:22 | So what I have done is set up, from a
previous animation that we have done,
| | 01:27 | here's a sample of the Stage,
so let me just switch that off.
| | 01:31 | So here's what's happening on the
Flash Stage, and I've built a little vCam, a
| | 01:36 | virtual camera, using his tool.
| | 01:40 | So to see the result let's go Control>
Test Movie>Test, and as you see, this
| | 01:45 | is what's exported.
| | 01:47 | Now it's not matching the frame rate because
of all the gradients; that's to be expected.
| | 01:51 | The next step in this solution would be
to export say an AVI, or a PNG sequence,
| | 01:56 | and what will happen when you do
that is this; pretty much nothing.
| | 02:08 | The exports doesn't recognize the
virtual camera, so Bryan recommends the
| | 02:13 | solution is to export an MOV file,
and then you get this. The first frame on
| | 02:18 | this test render that I did was
definitely weird, but the rest of the shot
| | 02:22 | seems to work fine.
| | 02:23 | Now he recommends you then convert
this into a different format, so this is up
| | 02:30 | to you. I haven't taken this any further,
but this is definitely something that
| | 02:35 | you might want to look into.
| | 02:37 | Whether or not it works for you is
completely dependent on your skill set in
| | 02:42 | terms of taking these MOV files, and doing a
conversion into either an AVI or a video format.
| | 02:48 | So the other thing to bear in mind, of
course, if you're exporting to a SWF file,
| | 02:52 | and you're not using a lot of
gradients, and it's a fairly simple project, then
| | 02:56 | this might be ideal for you as it is.
| | 02:58 | I did notice, however, that -- I did a
couple of little quick passes with this.
| | 03:03 | I want to guide in at that different layer
that I created, so again here's the scene.
| | 03:07 | Now notice the little man walking in,
and his mouth is smiling, and everything
| | 03:11 | there is fine, and then he goes, ooh.
| | 03:13 | So when I did this particular shot I just
framed in using the little blur on the camera.
| | 03:21 | So I am going to Control>Test Movie>Test.
| | 03:25 | Now watch his mouth; it's flickering.
And so there is definitely the potential
| | 03:30 | for some odd behaviors, again,
depending on your individual scene, and
| | 03:34 | the complexity of your scene. So
something in there is reacting poorly to
| | 03:39 | the virtual camera.
| | 03:40 | So how would I do a shot like this
in Flash? And we'll be covering this in
| | 03:44 | the rest of the course.
| | 03:45 | I don't use the virtual camera because
of those limitations, unfortunately. I'd
| | 03:49 | love to able to use it.
| | 03:51 | So when I do these kind of shots, what I
do is I just -- actually no camera layers
| | 03:57 | at all. And I go View>Pasteboard. All
I am seeing on the Stage is -- there is no
| | 04:03 | spillage around the edge of the screen.
And if I wanted to do those kind of
| | 04:07 | shots, I do them backwards.
| | 04:09 | So essentially I would move the object
on the Stage, and then scale it, position
| | 04:15 | it, rotate it. And now I've got to switch
pasteboard off, of course, because I need
| | 04:21 | to have access to the corners to
rotate it; to do these kind of things.
| | 04:27 | Essentially it's doing it backwards,
and you can get all the same effects, but
| | 04:32 | it can be confusing.
| | 04:33 | So it's something that I've gotten used
to doing, and we will be covering some of
| | 04:39 | these tricks in this course.
| | 04:41 | So let me just quickly apply a classic
tween here, and there we have the basics of
| | 04:47 | a camera zooming out and rotating.
| | 04:50 | Not as easy to do, or as intuitive to
do, as using a virtual camera would have
| | 04:53 | made it, but nevertheless we can work around it.
| | 04:56 | So understand about the virtual camera,
know about its limitations, but we're
| | 05:00 | going to move on and pretty much ignore
it. But I want you to know about it so
| | 05:03 | that it actually works for you.
| | Collapse this transcript |
| Animating parallax| 00:00 | So this is a section where I'll talk
about parallaxing a scene, or basically
| | 00:05 | it means -- fancy word for moving different
parts of your background at different speeds.
| | 00:10 | In other words, objects far away will
seem to move slower to you than objects
| | 00:14 | that are close up to you.
| | 00:15 | So let's look at an example of this,
and this is a cityscape, and we're moving
| | 00:19 | the camera, panning the
camera across the screen.
| | 00:21 | Actually, this gives us the impression
that we are in a car driving alongside a
| | 00:26 | roadway, maybe. And as we move, the
objects that are in the foreground, like
| | 00:30 | say, follow this point, for example;
appear to move faster than objects that
| | 00:35 | are further away. So the levels in this
scene that are moving the slowest are the
| | 00:39 | stars, of course; they are the furthest
away. And then we have this part of the
| | 00:43 | cityscape on its own layer, and that's
on the separate layer from this darker
| | 00:48 | skyline, and if you watch carefully
you'll see of course that they all move at
| | 00:51 | slightly different speeds. I think we have
about five layers in this particular shot.
| | 00:57 | Let's see what the scene
looks like if we don't do that.
| | 01:00 | And as you can see, it feels flatter.
Everything is on one layer. It's not
| | 01:07 | horrible; it just removes some of the
depth that we experienced in the previous
| | 01:11 | one. Let's look at that again.
| | 01:15 | So the parallax free shot gives the
impression that we're standing in place;
| | 01:20 | that our physical position isn't
moving very much, and we're just turning
| | 01:24 | around moving our feet.
| | 01:25 | So you might want that for some shots, and
you might want the other option for others.
| | 01:29 | This is actually taken from one of
the public domain movies from the 1940s
| | 01:34 | called 'Destination Earth'. I think
Maurice Noble is one of the background
| | 01:38 | designers on this, and this was the scene that
I used as reference to create that background.
| | 01:43 | And as you can see, it's pretty scratchy
and dirty, so I rebuilt the whole thing
| | 01:47 | in Flash as best I could using the
Vector tools and the gradients, and I used
| | 01:51 | this in a short film that I was working on.
| | 01:54 | So what I'm going to do is show you the
process, it's pretty simple, of creating
| | 01:58 | this little parallax effect.
| | 02:00 | So first thing I'd like to do is go to
do View>Pasteboard; in older versions of
| | 02:05 | Flash, this won't say pasteboard. It
will say workspace or work area; something
| | 02:09 | like that. They changed the naming
convention of this in some of the recent
| | 02:12 | versions, so if you don't
see that, don't get lost.
| | 02:15 | So this opens up the Stage, so we can
see beyond this workspace. Yours may look
| | 02:21 | slightly different, but there will be an
area that you can work within, and this
| | 02:25 | is mine. So let's double-click on this
symbol, have a look inside, and see how
| | 02:31 | it's structured. Again, I guess that
was right: five layers. One at a time, we
| | 02:35 | have the sky scape, we have the
distant city, the foreground city, the
| | 02:39 | rural-far, the and rural-near. And
then simply by moving these on different
| | 02:44 | speeds, we get the parallax effect.
| | 02:46 | So what I'm going to do to keep this
fast is just delete this, clear
| | 02:50 | keyframe by right-clicking, and let's
look at the start frame, and then now we're back
| | 02:55 | to just the regular flat background.
| | 02:57 | If you don't have the Exercise files,
then I would just make a series of very
| | 03:02 | simple shapes; you don't have to be
too elaborate with them. And as long as
| | 03:05 | they're long -- if your Stage is going
to be about, you know whatever length you
| | 03:09 | choose, just make these backgrounds
about twice as wide as that, and that should
| | 03:14 | be enough for you to be able to
move these around at a decent speed.
| | 03:17 | So make a skyscape, a city in
the distance, and I would turn this into
| | 03:22 | graphical symbols. And the one on the
foreground, slightly darker. And then the old medium
| | 03:27 | foreground, and then the near foreground.
| | 03:29 | Once you have those set up and turned
into symbols -- and if I click on any of
| | 03:33 | these, they all have their familiar
blue line around them, then you are ready
| | 03:36 | to get that started.
| | 03:37 | Okay, so let's go to, let's say Frame
100, or 101, good enough. And just set some
| | 03:44 | keys. And the first thing I do - oh,
there is really no need to move the sky.
| | 03:49 | The sky is not going anywhere. So what
I want to do is take the far end of the
| | 03:54 | city, and hold down the Shift key and
the left arrow key. And move that once, and
| | 03:59 | then the next one move twice, and then
the next one, Shift and 1, 2, 3, maybe 4,
| | 04:06 | and then the top one 1, 2, 3, 4, 5, 6, 7.
Let's try that and see how it feels.
| | 04:13 | And just by sliding the Timeline back
and forth, I'm just clicking and -- click and
| | 04:18 | drag, and it feels pretty good.
| | 04:22 | So on the outer Stage, we obviously see
the same thing, but to see if it really
| | 04:29 | works, we go View>Pasteboard, and then
it hides everything that's off the edge
| | 04:34 | of the screen, and there we go.
| | 04:38 | So obviously it's not moving very far,
so if you wanted to, you could do
| | 04:41 | some work out here too.
| | 04:42 | Being sure that you're a symbol is set
to loop and play once, otherwise you'll
| | 04:48 | see a static frame no matter what
you do. Hit F6 and we could move that.
| | 04:55 | I'm holding down Shift and moving
the arrow key, and then we can a create a
| | 04:59 | classic tween, and let's see if
that works. And of course, it does.
| | 05:04 | And we're dealing with subtlety here.
It's just something that registers at a
| | 05:09 | very low level, but it's definitely
there. And very handy just to give a little
| | 05:14 | bit of extra depth and illusion to your work.
| | 05:17 | Last thing I would do will be to slow
in to the end, and I do that by clicking on
| | 05:22 | this little pencil guy
here in the Properties panel.
| | 05:24 | So essentially what I will do is select
somewhere on the blue area where we see
| | 05:28 | the motion tween. And you can use the old-
fashioned tween system here by clicking
| | 05:33 | and dragging, or by typing in numbers,
but I much prefer this method. So I click
| | 05:39 | on the little square, and what pulling
this spline will do is create a slow in to
| | 05:44 | the final frame. And by clicking on this
one, we'll slow out a little bit too. Or
| | 05:50 | ease in, and ease out.
| | 05:51 | You can make these more extreme by
pulling the splines back and forth.
| | 05:55 | So let's do that. Now you see it's
slowing in. And now I'm going to play again, and
| | 06:06 | that's how simple it is.
| | Collapse this transcript |
| Animating a crane shot| 00:00 | Another kind of shot that's really
not used too often, simply because it's
| | 00:03 | expensive to do in live action, but we
can do a little more easily in animation,
| | 00:07 | is a crane shot. And they usually save
these for special shots, so it's not the
| | 00:12 | kind of thing you probably want to
overdo, but nice to be able to do it.
| | 00:15 | And that's to create the illusion that
the camera's in a crane, and it's being
| | 00:19 | lifted up to either move the camera up
or down in space to close in or out on
| | 00:24 | the character. Kind of puts
them in a larger context.
| | 00:27 | So let's hit Enter to play this.
| | 00:29 | It's an extremely simple effect, really, if
you set your shot up cleanly enough.
| | 00:35 | So let's just click inside here.
| | 00:37 | Now before I go any further, I am going to
show you a little reference image that I drew.
| | 00:42 | This is in case you aren't familiar
with perspective, and are wondering about the
| | 00:45 | basic principles of it; this
little graphic will explain.
| | 00:49 | Essentially, the thing to remember is,
if your horizon line is very low on the
| | 00:55 | ground, that's a worm's eye view, that
means you're down on the ground looking up,
| | 01:00 | and you are either very small or very
low. And the higher the horizon line goes in
| | 01:04 | the shot, the greater the impression of height.
| | 01:08 | So if you are going to stage a scene
where you've got a character being
| | 01:11 | watched at a great distance from
above, these little two black dots here,
| | 01:15 | that's a bird's eye view obviously.
aAnd these little white blobs here are
| | 01:19 | clouds, to make it obvious.
| | 01:21 | So that's the thing to bear in mind; it
really is that simple for our purposes here.
| | 01:26 | So let's hide that.
| | 01:27 | Now I've made a little frame outline so
that we can see our Stage as we move around.
| | 01:32 | This little red box, it's just guided out,
it's just here for a visual reference
| | 01:35 | so I can see the edge of the screen.
| | 01:37 | And we have a sky layer, we have our
buildings layer, a foreground grass layer,
| | 01:42 | and the little familiar man
with his little barrel of oil.
| | 01:46 | This first shot will be done to
create the illusion that the camera is
| | 01:51 | just moving vertically.
| | 01:52 | It's not moving away from him.
| | 01:53 | The secret to doing these shots -- we're
going to be combining these later on to
| | 01:58 | create one master shot.
| | 02:00 | And you could, if you wanted to, rotate
your elements within the same symbol, but
| | 02:05 | I really think that's a bad idea.
I keep each camera move separate.
| | 02:09 | So if I have a zoom or a
dolly I do that in one scene.
| | 02:13 | If I have a rotation, that action
happens externally to that in another symbol.
| | 02:18 | We'll go in for this deeper later on,
but there is a reason why right now
| | 02:22 | we're only seeing the
vertical motion of the camera.
| | 02:25 | By the way, if you don't have the
Exercise files, it's very simple. You basically
| | 02:29 | just match your screen with some kind of
sky. It could be flat it doesn't have to
| | 02:32 | be a fancy gradient.
| | 02:34 | Some simple little graphical skyline with
objects like this, another very simple
| | 02:38 | shape for your grass foreground, and even
a stick man will do as long as you give
| | 02:42 | him two little dots for eyes so you can
focus in on them a bit tighter later on.
| | 02:46 | So that we will be our
start; this will be our stop.
| | 02:48 | So I am just going to reverse
engineer and clear those keyframes.
| | 02:54 | So depending on whether your layers are
shapes like this, or symbols, apply the
| | 03:00 | relevant tweens, of course.
| | 03:03 | So now we have basically a man in place.
| | 03:05 | So let's F6 the final frame, and in
this case we have an 80 frame shot.
| | 03:10 | So the first thing to remember is,
remember our reference image, in case we get lost.
| | 03:15 | We are going from a worm's eye view,
with a low horizon, and that is pretty low,
| | 03:19 | to a bird's eye view, where the
horizon it will be really tall.
| | 03:22 | So let's switch that off
so it's not distracting us.
| | 03:25 | So sometimes with these kind of shots
I like to keep it really simple, and
| | 03:28 | strip it down to what's the most
important thing, and I think that animating the
| | 03:32 | grass layer will probably
be the best thing right now.
| | 03:36 | So let's go to the final frame of the
grass, and hit Free Transform tool or Q on
| | 03:41 | the keyboard, and let's just stretch it.
| | 03:43 | Now the way this is pivoted right now,
and if you've made your own symbol it may
| | 03:47 | be different from this; it's
going off the bottom of the screen.
| | 03:51 | So a handy thing to do is hold down the
Alt key and drag, and that will just drag
| | 03:57 | from one point; that's pretty useful.
| | 03:59 | So I am just going to keep holding down
the Alt key and drag this up. And now if
| | 04:03 | we play that, you can already get an
impression that we are moving vertically.
| | 04:12 | And at this point I'm going to start
playing with the gradient layer a little
| | 04:17 | bit. And I am going to use the Gradient
Transform tool, F on the keyboard is the
| | 04:22 | shortcut. And I can animate that by
just dragging the gradient color.
| | 04:28 | So that we still keep that light
color on the top of the horizon.
| | 04:32 | So that's now tweening with this.
| | 04:34 | Switch off the grass layer, or
padlock it rather. And I am just going to
| | 04:40 | tweak again with the Gradient tool,
using F on the keyboard, and just position
| | 04:45 | that a little better; maybe stretch
out the gradient just a little bit.
| | 04:47 | Okay, that's feeling smoother. Select lock that.
| | 04:52 | And then the next thing
I'll do will be the buildings.
| | 04:56 | Those are the little skyline behind there.
| | 04:58 | Now as we are moving up, they will just
move straight up with them. So ,hard to
| | 05:02 | see them now, because they are hidden.
| | 05:03 | So I am going to switch the grass into
Outline mode by clicking on the little square.
| | 05:07 | So now I am going to use the Shift
and the Arrow key while selecting the
| | 05:10 | buildings, and just move them up
until they are roughly in the right area.
| | 05:15 | Now I am going to select the grass back
again, and I think we should push them up
| | 05:19 | just a little bit more.
| | 05:20 | And the other thing you want to make
sure is that if you have any ease ins or
| | 05:25 | ease outs on these layers, they all
match. Otherwise they'll move at different
| | 05:31 | speeds. And the last thing to
do is just position the man.
| | 05:35 | So he begins at the bottom, and
he'll end somewhere near the middle.
| | 05:44 | The thing to watch out for, too, is
that everything should move. If anything
| | 05:47 | doesn't move, it might feel like it's
just sticking. At some point, if you have
| | 05:51 | enough objects in the screen, sure,
there may be something that's not moving. But
| | 05:55 | if you can, have everything move just a
little bit. iI's just a few pixels. It'll help
| | 06:00 | things from seeming to jam.
| | 06:01 | So that's feeling pretty smooth to me. And
that is the essence of doing a vertical shot.
| | 06:07 | If you don't have the Exercise files
then save this current state; don't delete
| | 06:12 | it, because we are going to be building
on this directly in the next section. If
| | 06:15 | you have the Exercise files, don't worry.
I think you'll probably be better off if
| | 06:18 | you work with my existing Exercise
files, because then you will completely be
| | 06:22 | matched with what I'm doing.
| | 06:24 | So, on to the next part.
| | Collapse this transcript |
| Animating a zoom and rotate shot| 00:00 | In the previous section we did a really
nice simple crane shot where we moved
| | 00:04 | the camera up to look down at the
character from a bird's eye view, and we are
| | 00:08 | going to combine that this time with
two more moves. And let's take a look at
| | 00:12 | what this is going to look like.
| | 00:13 | So I'll go Control>Test
Movie>Test; that's really nice.
| | 00:21 | So we're starting in close at a
slight angle, the camera is zooming out and
| | 00:25 | rotating out at the same time, and there
is no end to how extreme you could make
| | 00:29 | these moves, of course.
| | 00:31 | So what I'm going to do is demonstrate
how to create this nested sequence of
| | 00:35 | symbols, to give us this illusion.
| | 00:37 | So let's have a look; on the outer
Timeline is the rotation action. Hard to
| | 00:43 | see it separately, of course, because it's
got the other movements nested inside of it.
| | 00:47 | If we double-click on that to go
inside, this is a symbol that contains the
| | 00:50 | zooming action, and actually, if we double-
click on that, this is the symbol that
| | 00:55 | contains the crane shot, which
we did in the previous section.
| | 00:58 | So what I am going to do is -- it will be
easier if I just make a new layer, and
| | 01:03 | just get rid of the old one.
| | 01:05 | Before I do that, I want
to flag something for you.
| | 01:07 | The rotation action happens on this
layer, and I have called it rotate, and I
| | 01:12 | put a label on the Timeline called, the
camera rotates, which you can access to
| | 01:16 | the Properties panel. And let me just wreck
that, let me rewrite it: the camera rotates.
| | 01:23 | In the inside clip that contains the
zooming action, I have called the layer
| | 01:27 | zoom, called it the camera zooms out,
this symbol is called 2 zoom. This
| | 01:31 | should give you a clue that I like to
know where I am. It's awfully easy, when
| | 01:35 | you do these nested camera moves, to
get lost, because there are so many, and
| | 01:39 | they all look the same.
| | 01:40 | When you're looking at the rotation
symbol, it looks exactly like the zoom in
| | 01:44 | symbol, and it can really boggle your brain.
| | 01:47 | That's why I put these labels everywhere.
| | 01:48 | I like to know where I
am; they are maps really.
| | 01:51 | So okay, that said, let me just delete
that, and we'll go into the library. I
| | 01:56 | am going to take the crane symbol, and
if you haven't got access to the Exercise
| | 02:00 | files, your start state from here will
be pretty much the same as your end state
| | 02:05 | from wherever you did following
along from the previous section.
| | 02:08 | So let's go to the library, drag the
crane into the Stage; even if you have the
| | 02:13 | Exercise files just follow along, and delete
everything. Just do exactly what I'm doing here.
| | 02:18 | Make sure that you're off the edge of
the Stage. There might be a little mismatch
| | 02:21 | there, so let's try to make sure we are
completely lined up, and I think we are
| | 02:26 | pretty good; padlock that.
| | 02:28 | I am not seeing any white space. Little
bit at the top there; I like to
| | 02:33 | keep things pretty covered. Great.
| | 02:35 | So now we have our symbol, and this
contains the vertical move. We'll click on the
| | 02:40 | symbol, and in your Properties panel be
sure that you're set to graphic, and be
| | 02:45 | sure you are set to either loop
or play once. I prefer play once.
| | 02:50 | So then you've got your crane shot
animation taken care off in here, and what
| | 02:55 | I'm going to do is add a
move on this external layer.
| | 02:59 | So we have the crane shot nested safe
inside a symbol called 1 crane, and on the
| | 03:05 | main Timeline now I am going to add a zoom.
| | 03:08 | So on Frame 80, I like where we end,
and we are going to keep that consistent.
| | 03:12 | So hit F6 to put down a keyframe there,
and on Frame 1 we are going to zoom in.
| | 03:18 | And I think the best way -- sometimes
when I do these, because these things can
| | 03:22 | get pretty big, and the edge, even if
you have like a big Stage, sometimes the
| | 03:26 | edge can be hard to find.
| | 03:27 | The way I like to increase these is hit
Control+Alt+S. You will have the scale and
| | 03:31 | rotate pop up. So be sure rotation
for this is set to 0. And pick an increment
| | 03:37 | for scaling that's big, but not
too big; let's say 120%, and hit Enter.
| | 03:42 | And there are occasions when I've had
this little window disappear on me, or not
| | 03:47 | pop up through the keyboard shortcuts, and
let's see if we can find where it was.
| | 03:51 | Transform>Scale and Rotate, there it
is. Modify>Transform>Scale and Rotate.
| | 03:56 | So if your keyboard shortcut doesn't
work, or you're not able to do that; it's
| | 04:00 | a little shortcut
combination; that's how you access it.
| | 04:04 | So I am going to repeat, Control+Alt+S,
and just keep doing that. And keep
| | 04:08 | dragging your symbol until you keep
it centered, Control+Alt+S; it becomes a
| | 04:15 | pretty familiar shortcut.
| | 04:16 | So there we go. I am not going to go in
too big; that's about good enough I think.
| | 04:21 | And this is going to be your zoom, of
course, so let's call the layer zoom. And
| | 04:26 | let's put a label in here
camera zoom; uppercase, don't forget.
| | 04:32 | Okay, so now we right-click on the
Stage, and go Create Classic Tween, and there
| | 04:40 | we have a zoom now combining with the
vertical camera move. You'll notice the
| | 04:46 | horizon line behind the
character is moving up over his head.
| | 04:52 | As we are moving out, we are
also moving up, and looking down.
| | 04:55 | So it's a combination of two
interesting actions to create a more dynamic shot.
| | 05:01 | So now that we have this done, the
time has come to nest this Timeline
| | 05:06 | inside another symbol.
| | 05:07 | So select the entire Timeline, right-
click, Copy Frames, Insert>New Symbol, and
| | 05:14 | we'll call this one 2 zoom new; click OK.
| | 05:21 | And then the empty frame that appears,
right-click, Paste Frames, and we should
| | 05:27 | have our Timeline name correct, our
label is telling us where we are, and our
| | 05:32 | title is telling us where we are.
| | 05:33 | So now we go back to the main Stage
and nothing happened. That's because the
| | 05:38 | symbol has been created in the Library.
So I am going to hide this layer, make
| | 05:42 | a new layer, go into the Library and
there is 2 zoom new. So let's drag this
| | 05:47 | guy onto the Stage into the empty layer. It
should be the same size as the one beneath.
| | 05:53 | If you want you can use the one beneath
as a position reference, so I am going to
| | 05:55 | padlock the lower layer, put the upper
one onto an outline, and just -- there we
| | 06:00 | go. That's pretty close.
| | 06:02 | So we can now delete the layer beneath.
And don't worry about naming it, because this
| | 06:07 | will be different. And so now we
have everything safely nested, and if we
| | 06:14 | double-click on this into the zoom new
symbol, there we are; zoom, zoom, zoom.
| | 06:19 | So, I know it looks ridiculous,
but trust me, it really does help.
| | 06:23 | So now we are on the outside, and we are
ready to apply the rotate. This will be
| | 06:27 | the rotate section, so we call that rotate.
| | 06:31 | In the Properties panel over here, we
will just click on anywhere on here, and
| | 06:35 | then label, we'll call this camera
rotate. And don't forget the end state; I
| | 06:41 | like the end state, that's
the perfect place to end it.
| | 06:45 | And now what I want to do is to
rotate this image, so I will hit Control+Alt+S
| | 06:49 | to scale and rotate.
| | 06:50 | I don't want to scale anymore,
so I'm going to keep that at 100%.
| | 06:54 | I do want to rotate this image to get
kind of a corkscrew effect on the camera
| | 06:58 | as we come out from the shot.
| | 06:59 | So let's rotate this 25 degrees;
something that we can really notice. And once
| | 07:08 | we have that, we can now add a tween.
Create Classic Tween, and there we go.
| | 07:19 | So let's test this, Control>Test Movie>Test.
| | 07:22 | And the beauty of this method is that
this will export as an AVI or a true MOV
| | 07:32 | file. You won't have to do too many
workarounds, or you need a PNG sequence.
| | 07:35 | So this is a kind of technique that
you could apply if you're working on
| | 07:38 | something high-end for, say, a
TV animated series or something.
| | 07:42 | Obviously, you can do these kind of
moves in After Effects and other programs,
| | 07:46 | but there are times when you may want
to do them in Flash. It really is handy
| | 07:50 | to have the option of doing it inside
a program with which you are familiar
| | 07:53 | with; save you the trouble of having to
composite them. And it does mean you can
| | 07:56 | do things such as synchronize various
movements and animations that you might have
| | 08:00 | on the lower layers.
| | 08:01 | The only other thing I would warn you to
watch out for is if you apply easing in
| | 08:05 | or eating out, try to keep them
as close as you can to one another.
| | 08:08 | In other words, if you apply an ease
out on the outer layer, let's say 80, so
| | 08:15 | that we have a faster movement at the beginning.
| | 08:18 | So let's say we have 100 ease out on the
outer layer, and we'll do the same thing
| | 08:23 | on the inner layer; they should all be the same.
| | 08:27 | If you have a mismatch that can
actually cause some pretty shaky camera moves,
| | 08:32 | so I am trying to keep all these the same.
| | 08:35 | It's hardest to do if you use the custom
ease in and ease out. You can, of course,
| | 08:40 | keep them the same, but you do have to
be a little more precise with that.
| | 08:44 | So okay, that done, let us
go Control>Test Movie>Test.
| | 08:48 | Yeah, that's right, so now
we are slowing in at the end.
| | 08:51 | Not too bad. So that's the process, and
I have to say, don't get frustrated. You
| | 09:01 | will have to spend a little bit of
time just playing with this. Start simple;
| | 09:05 | don't go too crazy with like massive
Stages or anything. This is about the right
| | 09:10 | size to begin playing with
before you go deeper in it.
| | 09:13 | But I've done some fairly complex
shots with using these techniques; you can
| | 09:17 | push them way further. And like I said,
follow along, it's worth having a go
| | 09:23 | at these from time to time, but do
keep control over the names of your files,
| | 09:28 | and you won't go too far wrong.
| | Collapse this transcript |
| Animating a track shot| 00:00 | In this section, I am going to show you
how to create a fake 3D camera tracking
| | 00:05 | shot, so it's as if we are dollying through the
scene, and we are seeing the object move
| | 00:09 | towards us at a greater speed.
| | 00:12 | So to give you an idea about what we are
not trying to do here, is the simplest kind
| | 00:16 | of the camera move that you'll see,
where we have a static background image, and
| | 00:20 | we simply make it bigger. We
tween between that and the large one.
| | 00:25 | The effect that we are going to be doing
is a little more sophisticated, and that
| | 00:28 | will be something like this.
| | 00:30 | If you look carefully, you'll see
that the distances between the boxes are
| | 00:33 | increasing as we move physically into the shot.
| | 00:36 | That's what it feels like.
| | 00:37 | So this is still technically a zoom shot.
| | 00:39 | It's doing the same thing as the first
shot; the big difference is we are also
| | 00:45 | adding motion tweening to the objects
in the scene, and they're pulling apart
| | 00:50 | like this, relative to one another.
| | 00:52 | And that's creating this effect of space, and
that can be used for all kinds of purposes.
| | 00:57 | It's not just cool to look at it;
| | 00:58 | it's visually dramatic as well.
| | 01:00 | So, what I am going to do is we are going
to recreate this almost from scratch so
| | 01:05 | that you can see the process, and just
really how simple the physical process is.
| | 01:07 | The hard part is just getting the
positions right, and that's going to come down
| | 01:11 | to your comfort level with perspective.
| | 01:13 | So first step was just to rough in a
perspective background, and that's here.
| | 01:19 | I am going to switch that to outline so
that we can see the other layers on top
| | 01:22 | of it a little more easily.
| | 01:23 | After that I made a very rough and
crude perspective guide layer using the Line
| | 01:27 | tool; this chap. And I drew in the
horizon line, and some simple lines to block
| | 01:33 | out the room, and some guidelines on the ground.
| | 01:36 | That's basically the first step, and
then create the simple background, and the
| | 01:42 | extremely simple shapes,
and as you can see, that's it.
| | 01:46 | So that said, let's make some new layers.
| | 01:48 | Of course, by the way,
I do have a frame just to show me the
| | 01:51 | edge of the screen.
| | 01:53 | So let's View>Pasteboard, or View>
Workarea in the older versions of Flash.
| | 01:58 | So there's our frame; that shows
us what's on the edge of the Stage,
| | 02:01 | so as we work we can see
you know where the falloff is.
| | 02:06 | So I am going to make some new
layers; six of them in total.
| | 02:11 | Let's call the bottom one bg,
background, new. And these will be duplicates,
| | 02:18 | really, of the box layers.
| | 02:23 | So let's go back to our rough drawing.
| | 02:27 | And again, I will go to outline mode, and
we'll start drawing our new background.
| | 02:30 | I am going to zoom out a little bit, and
using the Line tool I am going to just
| | 02:33 | draw in some very quick lines.
| | 02:41 | The beauty of overlapping the
lines is, as you can see, they already
| | 02:44 | join perfectly here.
| | 02:46 | So then all I have to do is Shift+
Click to select the ones I don't want.
| | 02:50 | Hit Delete or Control+X to get rid of
them, and I will close off the rest of
| | 02:55 | the background image.
| | 02:57 | I am giving myself a lot of extra
room to play with here; probably more
| | 03:01 | than we really need, but it's
always best to have a little bit of padding
| | 03:04 | on the side of your image.
| | 03:05 | Now I am going to click on the fill
color, and pick some colors to fill this
| | 03:10 | thing with. And use the Paint Bucket tool,
or K. I like to pick my colors from the
| | 03:15 | color palette using this setting;
| | 03:18 | there's different
settings for picking colors here.
| | 03:20 | I like to use this fellow.
| | 03:22 | It seems to be, for me I find, user-friendly.
| | 03:25 | So I am going to just pick some variations.
| | 03:27 | A nice dark one for the back of the
scene, and a lighter one for this side, and
| | 03:33 | some kind of reddish,
brownish color for the ground.
| | 03:36 | Now we need to get rid of the lines,
| | 03:37 | so just pick one of the lines
over here, double-click, and it will
| | 03:41 | magically select everything.
| | 03:42 | Hit Delete or Control+X, and they are gone.
| | 03:43 | I am going to repeat this process to draw in
the crates; and I think I probably put this
| | 03:55 | fellow on the wrong level.
| | 03:56 | We should draw from front to
back, and 1 would be the top layer.
| | 04:00 | So I just clicked and
dragged him to the right one.
| | 04:02 | Once you finish your crate, put
it in outline and padlock it.
| | 04:05 | And then you can't go wrong, and
then we move down a layer.
| | 04:09 | I think it's logical to draw all the
boxes on the left side, because they will
| | 04:13 | be more directly connected with one another.
| | 04:16 | So let's outline that, padlock,
and now we'll switch to the right side.
| | 04:22 | Don't worry about where these lines overlap.
| | 04:24 | We will be getting rid of
all of the lines pretty soon.
| | 04:26 | So outline, padlock.
| | 04:31 | Once you develop a method like this,
and you apply it consistently, it will
| | 04:34 | reduce the number of mistakes you make.
| | 04:36 | It's very easy to forget what level
you are working on and do a bunch of
| | 04:40 | drawings in the wrong layer.
| | 04:41 | So this saves us a
little bit of effort that way.
| | 04:47 | Now that they're all done, and they are all
on different layers, which you can see by
| | 04:50 | switching to outline mode, we can fill them in.
| | 04:53 | So I am going to pick the Fill tool,
and let's change our color selection here;
| | 04:58 | I'll pick one of the browns. And I am
going to pick some light colored browns to
| | 05:02 | paint in the front of the crates, and I
am going to slightly change it for the
| | 05:07 | ones behind so that we can tell them apart.
| | 05:12 | Then I will go really dark
for these sides, here. Great!
| | 05:16 | So, now to get rid of the lines, you can
double-click, and hit Delete or Control+X. Oops!
| | 05:24 | I accidentally clicked,
| | 05:25 | so double-click again to go back in if
you accidentally leave the scene that
| | 05:28 | you are working in. There we go!
| | 05:30 | Let's see that with the
background. Not too bad;
| | 05:33 | it looks good.
| | 05:34 | So I'm going to turn these into symbols now.
| | 05:36 | So select the keyframe on the Timeline
rather, and hit F8, and we will call this
| | 05:40 | box 1, and the next one would be
box 2, box 3, box 4, and box 5.
| | 05:55 | So they correspond with the layer numbers here.
| | 05:58 | So what we are going to do next will be
basically move these along these little tracks.
| | 06:03 | The vanishing point is here, and any
number of lines can expand from the
| | 06:07 | vanishing point. And not just on the
floor, of course, but they can also radiate
| | 06:12 | along the upper level as well.
| | 06:14 | So you can use these lines to position
the corners of the boxes, and not just
| | 06:18 | where they contact the ground,
but at their upper levels as well.
| | 06:22 | So let me just lock that for a moment.
| | 06:23 | I can hide the reference layer now.
| | 06:26 | So let's switch on our background
again, and we can see our boxes. Ah!
| | 06:32 | One more thing: currently the pivots of
the boxes really won't help us very much.
| | 06:37 | So select the Free Transform tool, and
drag this little center circle to the
| | 06:41 | corner where they contact the ground, and
that way it will be much easier when we
| | 06:47 | begin resizing these things. That's it!
| | 06:51 | So now we are now ready to scale them up.
| | 06:52 | So let's hit the backend of the 1,
2, 3, 4, 5 layers; keyframe them.
| | 06:59 | They're all selected, so
holding down the Shift key and drag.
| | 07:03 | I am going to uniformly scale them all,
although we are going to size them
| | 07:07 | individually soon enough.
| | 07:08 | So let's go back and forth.
| | 07:10 | I am going to use the Comma key on the
Period key on the keyboard to toggle.
| | 07:16 | The thing is to watch these lines.
| | 07:18 | This line here is very close to the
crate, so that should not change really.
| | 07:23 | So we can just use the arrow keys to
nudge these, to hold their position.
| | 07:27 | This fellow here should be on this line here.
| | 07:29 | So I am going to pull him
in a bit, and this crate.
| | 07:33 | As the object closest to us, it
should be really moving past our ears as we
| | 07:36 | enter the scene, and ultimately
we will be completely behind this.
| | 07:39 | So the spaces between these two
boxes should be opening up by now, and
| | 07:43 | the other thing that should be
happing is this should be getting much
| | 07:46 | bigger relative to this.
| | 07:48 | So it's a question of
matching the relative scales.
| | 07:51 | If you get confused, very simple;
| | 07:53 | just go into your perspective layer, and
I am going to just make a new line, make
| | 07:58 | a black. And let's go into outline mode
anymore, and draw the line from there to
| | 08:04 | there, and just keep going.
| | 08:06 | If we switch off all the layers except
this one and this one, we can use that
| | 08:12 | line as a guide to see, have we gone too far.
| | 08:16 | And I think we might have a little bit here.
| | 08:18 | So I am going to bring that
back in a bit using Free Transform.
| | 08:22 | And we are faking things;
| | 08:23 | I'll be quite honest with you.
| | 08:24 | This is a big cheat.
| | 08:26 | So you are never going to
get it completely perfect.
| | 08:29 | The trick is to get it close
enough where you go, okay, I buy it.
| | 08:33 | So I am going to put the
perspective layer back on, and outline that, and
| | 08:37 | then check this guy. And again we
have an imaginary line going from the
| | 08:41 | vanishing points to here.
| | 08:42 | So I think he should be
getting a little bit bigger.
| | 08:44 | I can tell just by eyeballing that.
| | 08:49 | I think this box is getting a little too big too;
| | 08:51 | I am going to pull him back in a bit.
| | 08:54 | If you're into 3D, you can probably
set up a reference shot, and just block out
| | 08:58 | the basic geometries, and do
Google SketchUp or something.
| | 09:02 | I have done that before where I've had
real trouble scenes, but often I find I
| | 09:06 | can just put something
together pretty well here.
| | 09:08 | I am going to move this over just a little bit.
| | 09:11 | Okay, the other thing to watch is the
relative positions of these boxes.
| | 09:15 | On the first frame, this corner of
this box, if you follow this line, moves
| | 09:19 | to about this point on the adjacent cube.
| | 09:22 | So if we follow this, clearly, he has
moved to the wrong speed. That's not good.
| | 09:26 | So I am just going to click and drag so
that he tries to maintain the same position.
| | 09:32 | And I think we can make him a little larger.
| | 09:35 | He's following his little line
here back and forth. That's fine.
| | 09:38 | This background cube is slipping. He is there;
| | 09:41 | he is slipping forward a little.
| | 09:42 | So let's move him over, and we are
seeing more of the gap, notice too; this little
| | 09:47 | area here is expanding.
| | 09:49 | So I think now if we activate classic
tweening you begin to see the effect.
| | 10:03 | It's not perfect, but it's getting fairly close.
| | 10:07 | So let's go outside again and see what
that looks like with the zoom attached.
| | 10:11 | Because, don't forget, this outer symbol
is also zooming in. You remember from the
| | 10:14 | previous section how we
were nesting the different camera moves.
| | 10:17 | So we have our 3D move nested inside one
symbol, and our zoom move in another, and
| | 10:24 | that's physically moving us into the
space. And the internal animation on that
| | 10:28 | Timeline is what's selling us the
distances changing between the boxes.
| | 10:33 | So let me go to View>Pasteboard, or View>
Workarea in the older versions of Flash,
| | 10:38 | and I am going to look at this
without the space around it. Getting there.
| | 10:42 | Certainly much more
interesting to the eye than the dead zoom.
| | 10:48 | That's quite boring by
comparison. So that's it.
| | 10:52 | That's the initial part of this process.
| | 10:54 | Next, I am going to show you how to
fine-tune this, and add some details that
| | 10:58 | will really make it feel
a little more interesting.
| | Collapse this transcript |
| Lighting a 3D shot| 00:00 | So now we have our scene with our
little phony 3D camera move into the shot,
| | 00:06 | and then the next step would be to just add a
few details and things to bring it to life.
| | 00:10 | To completely finish this scene
obviously will take a bit of time.
| | 00:14 | So what I'm going to do is, instead of
showing you the entire procedure, I'll
| | 00:18 | show you the general process of
how I would go about finishing this.
| | 00:20 | So let's click into the scene.
| | 00:23 | I am going to actually delete the old
layers just to make some room in here.
| | 00:28 | So we are moving through.
| | 00:30 | First things first: let's look at the
background, and I want to see the entire area.
| | 00:34 | So View>Pasteboard, or Workarea if
you're in an older version of Flash, and here
| | 00:40 | is our background; very minimal.
| | 00:42 | I mean there are lots of things we
can do to add lines and details to the
| | 00:45 | background. Maybe some doors at the
end, and windows and so forth, maybe some
| | 00:49 | roof tiles, and whatnot.
| | 00:51 | But for now I am going to do
something a little more basic.
| | 00:54 | I am going to make a new layer, hold
down the Alt key, and drag the background,
| | 00:59 | and just make it a full color.
| | 01:01 | Anything will do for now.
| | 01:03 | And in our Color panel I'm going to go to
radial gradient. And this is what we
| | 01:08 | covered in chapter 1, if
you're unfamiliar with this.
| | 01:11 | The Gradient Transform tool over
here, F; we click on that, and you'll see
| | 01:16 | probably a different gradient depending on
whatever last gradient you were playing with.
| | 01:21 | But don't worry, over here we can
control the number of colors we have, and where
| | 01:24 | we put the different colors.
| | 01:26 | So I am going to click on the center
widget and just drag it roughly around to
| | 01:30 | about here and you can then rotate this out.
| | 01:34 | Now I want the middle of
the scene to be brighter.
| | 01:38 | So I am going to pick a nice bright
color, and let's make it a warmer color,
| | 01:41 | something reddish maybe.
| | 01:42 | I know you can't see much right
now, because it's so transparent.
| | 01:46 | So this second color here,
let's drag that to somewhere.
| | 01:50 | And again, make sure you have selected
this H on your color, and let's make that a
| | 01:55 | warm, maybe darker though.
| | 01:57 | So we will bring it down.
| | 01:58 | It's looking nice. And we will fade out
to blue, a cooler color, on the outer side.
| | 02:05 | Let's make these a little more transparent.
| | 02:06 | So I am clicking on the leftmost one, which
corresponds to the center of the gradient.
| | 02:12 | Let's bring it down to about 8% and
we will bring down the middle one to
| | 02:16 | about, let's try 40%. And look at the difference
just with the addition of one simple gradient.
| | 02:24 | It's, you know, with not much time or effort put into it;
| | 02:27 | it's already getting us away
from that flat, flashy look.
| | 02:30 | So the next thing I'll show you is how
to take one of these cubes, and approach
| | 02:34 | the treatment of lining it.
| | 02:36 | So I'm going to double-click on that symbol
to go into it, and let's make a layer on top.
| | 02:41 | Actually, what I will do is
I will duplicate the artwork.
| | 02:43 | So hold down the Alt key and drag, and
you will see little plus sign, and let's
| | 02:48 | just padlock and guide out the layer beneath.
| | 02:51 | So it's safely tucked away just in case
anything goes wrong. Just go in closer.
| | 02:56 | And I am going to use the Line tool, or N,
to simply put some lines on the object.
| | 03:01 | I am just taking care to watch the perspective.
| | 03:10 | So what I'm going to do here is refine
the shape of the object, and it's nice if
| | 03:13 | you can put some little
tiny breaks in the silhouette.
| | 03:16 | It will stop it from looking like that
little empty cube. And there's going to
| | 03:20 | be some vertical boards here
breaking up the shape a little bit.
| | 03:24 | We are not going to spend too long on
this, but I will just do enough to give
| | 03:31 | you the idea of the general process.
| | 03:33 | It's pretty basic stuff really.
| | 03:35 | This is the kind of the skill level
that you learn in any of the introductory
| | 03:39 | essentials courses at lynda.com.
| | 03:42 | We are just making lines, filling
spaces, and we are going to paint them in.
| | 03:46 | That should be most of them.
| | 03:47 | Now what I want to do is find some
different colors to paint inside these areas.
| | 03:51 | So I am going to select, using
the Dropper tool; that's this guy.
| | 03:56 | Click that color. It appears here.
| | 03:58 | I am going to pick a darker variant of
that, and then just drop that in here. Oops!
| | 04:03 | There is an open gap there
somewhere. Let me close that.
| | 04:08 | So what I am going to do instead is
select the Fill tool, and tell it to close
| | 04:13 | small gaps, and that took care of that.
| | 04:17 | Normally, I'd go in and zoom in and
really fix that, but we are okay to do this.
| | 04:21 | At the bottom, this, I
would like it be a highlight.
| | 04:23 | So again, Eye Dropper tool, select that color,
pick a brighter version, and there we go.
| | 04:29 | The same process here; Eye Dropper,
select that color, pick a darker one, and
| | 04:34 | drop the darker one in here.
| | 04:35 | And we will put a slightly lighter version
of that brown at the bottom. It might be
| | 04:45 | too bright; bring it in.
| | 04:46 | So that's it, and last step: get rid of this.
| | 04:49 | Delete or Control+X. We don't need that.
| | 04:52 | Double-click on the line to select it
all, and this one to get rid of it. And
| | 04:56 | now we have something that looks,
like, a little more interesting than our
| | 04:59 | primitive geometry. The next thing,
| | 05:01 | well last thing, really, is
to put some gradients on here.
| | 05:04 | So I am going to make two layers.
| | 05:06 | One layer will basically correspond
to the front of the box, and I am just
| | 05:11 | Shift+Clicking to select everything here.
Control+C, Control+Shift+D in the top layer,
| | 05:16 | and the same process for the
shadow part. Control+C, and then in the empty layer
| | 05:23 | Control+Shift+V. So let me padlock our art
layer. And on this layer here, which you
| | 05:30 | are seeing now in pink, I am
going to make it just a solid color.
| | 05:33 | I will swap the colors just to do
that, or you could just pick any color
| | 05:37 | from the picker here.
| | 05:38 | And now we will go to this area in the
color palette and select radial gradient.
| | 05:43 | And it will probably apply some other gradient;
the last gradient that we were working on.
| | 05:47 | Now it's just a question of positioning
the radial gradient for maximum effect,
| | 05:54 | and I am just going to use the
various widgets And again, we covered this in
| | 05:57 | greater detail in Chapter 1.
| | 05:59 | So if you are having trouble following
along with this, you might want to have a
| | 06:02 | look in there and see how we did all this.
| | 06:04 | Now remember basic color theory.
| | 06:06 | It's nice if you have a reddish, brownish
color with a gradient that's maybe in a
| | 06:11 | different color family.
| | 06:12 | So I'm going to try to pick a darker
blue to really contrast with the orange
| | 06:18 | color, or the brown color, of the box.
| | 06:20 | And maybe we will go with a warmer color for
the top there, and this can be pretty subtle.
| | 06:26 | I am going to bring the light of
these three, this one now down to 5%;
| | 06:29 | we will make this one a little lower, maybe about 20.
| | 06:35 | The back one can be pretty
dark, falling off into shadow.
| | 06:37 | I am going to actually
make it a little darker too.
| | 06:40 | So that's that, and now padlock that, and now
go to the background layer. The same thing.
| | 06:45 | I would like to paint this in a radial
gradient as well, and the thing is painted
| | 06:52 | with its controls off the edge of the Stage.
| | 06:55 | So Gradient Transform tool, and let's just
pull it in. And you might want to have this
| | 07:05 | side illuminated as if it's been hit by a
spotlight off the edge of the Stage or something.
| | 07:10 | So we can play with these positions as
well to soften that. And you can, of course,
| | 07:17 | play with the opacity.
| | 07:18 | I am moving pretty fast now.
| | 07:19 | I am just going in, and really no point in
calling out colors and opacities anymore.
| | 07:23 | It's really just to give you an idea
about how you proceed through creating
| | 07:28 | the colors for this. So there we go!
| | 07:31 | Already somewhat more
interesting than the for default.
| | 07:35 | So that's the process
| | 07:37 | of how I would go in and apply the gradient
skills previously covered, and some of the
| | 07:42 | lighting issues to creating a
scene that's a little more dynamic.
| | 07:45 | And as you can see, they still move fine.
And the only other thing I would probably
| | 07:50 | suggest would be maybe a slightly bolder
gradient, maybe with some other lights,
| | 07:55 | maybe behind these boxes.
| | 07:57 | But once you apply more and more of the line
work, let me show you the finished result.
| | 08:03 | And here we have the scene completely polished.
| | 08:06 | It's doing exactly the same thing that we
have just being seeing in the previous one.
| | 08:09 | All I have done is I have added a
lot more line work to the crates.
| | 08:12 | I have repeated the process that you just
witnessed with the crate on all five of them.
| | 08:17 | If you look inside the scene,
it's actually surprisingly simple.
| | 08:21 | So I will just very quickly take you through it.
| | 08:23 | There is our lined background. And we
have our boxes; I just added a slightly
| | 08:27 | transparent shadow beneath them, but
they all have the same gradient trick.
| | 08:30 | There is a, I call it, air.
| | 08:31 | It's really the light level that gives
us the dropoff, and creates the illusion
| | 08:36 | of a shadow towards the end of the
screen. And then the various crates are
| | 08:40 | deployed on top of that so that
they pop out against that layer.
| | 08:44 | If I wanted to, for example, darken them, I
would just move that layer up, and then
| | 08:48 | we could darken the layer, or even add a
second layer if we think we can get away
| | 08:52 | with it, for different effects.
| | 08:54 | So, for example, if I wanted to make it
stronger, select that layer, and I would
| | 08:58 | simply change the opacity settings of
the different parts of the gradient, and
| | 09:03 | do some really drastic alterations to the scene.
| | 09:06 | So it's great fun to have the ability to
light scenes, and I think too many of us,
| | 09:11 | when we use Flash, we resign to this
very flat, everything is evenly colored,
| | 09:17 | which is after a while
that does get a bit boring.
| | 09:19 | So I have been having a lot of fun
just messing around with these gradient
| | 09:23 | effects, trying to bring
another level to the scenes.
| | 09:26 | So even though this technically isn't
a part of teaching you how to do a
| | 09:29 | tracking shot, I think it's a very
important component of making the
| | 09:32 | tracking shots look cool.
| | 09:34 | So I think, with that, we are done
with moving the camera around our little
| | 09:38 | fake 3D Flash space.
| | Collapse this transcript |
|
|
6. Fades and TransitionsAnimating a cross dissolve| 00:00 | If you're going to do any kind of short film, or
any complex sequence of scenes in Flash,
| | 00:06 | it's best to do the work in Flash on
an individual scene-by-scene basis, and
| | 00:12 | then bring the scenes into After Effects,
or another video editing program, and
| | 00:18 | render them out as a PNG sequence,
or an MOV or an AVI file, or whatever.
| | 00:23 | But sometimes you might want to have a
quick and dirty transition between two
| | 00:27 | scenes in Flash, and quick
cuts of course, are no problem at all.
| | 00:31 | You might have some issues, however
when you do cross dissolves. And let me
| | 00:36 | show you the big one, I guess. So in
this case we have a background of the
| | 00:40 | ship floating at sea.
| | 00:41 | I want it to cross dissolve into the
captain's cabin, and he's got his book, and
| | 00:45 | his lamp, and clock on the table.
| | 00:47 | So here's what happens normally when
you have your scene, and you do the alpha
| | 00:52 | transparency; the fade in.
| | 00:54 | Flash shows you these intersections
where the different symbols overlap, and
| | 00:59 | you can see the table through the book, and the
clock through the book; it's a real nuisance.
| | 01:03 | Now there is a workaround for this.
It only applies to certain scens, and
| | 01:07 | really it only applies to scenes that
have very limited animation, but I will
| | 01:12 | show you the solution.
| | 01:14 | So we would take our symbol,
and we have to mask everything.
| | 01:18 | So essentially, we'd have our background,
the table, which would be masked, so that
| | 01:24 | the book that sits on the table
exactly is aligned with that. And if we look
| | 01:28 | at that in outline you can see that there
is no overlap. And if we do the same thing with
| | 01:33 | the lamp, and the clock; they are also
masked, so that the areas that overlap
| | 01:38 | the book are removed from the scene.
And it's not fun doing this, but the end
| | 01:44 | result is, when you have it done you
can then dissolve it cleanly, and now you can
| | 01:48 | see there is no overlapping areas where
the clock, and the table, and the book
| | 01:52 | overlap one another.
| | 01:53 | So very quickly, let me walk
you through the process for doing that.
| | 01:56 | And there might be times when you
actually want to do this without
| | 02:00 | overlapping scenes; you might want to
dissolve without complex symbol or a shape,
| | 02:04 | and when you go to -- the last thing you
want to have happen is see this kind of
| | 02:10 | mode, so let's see how that was cleaned up.
| | 02:13 | So what I am going to do is just
simply delete the mask layers, and so if you
| | 02:18 | have the Exercise files, then just follow
along and delete the masks. If you don't,
| | 02:22 | then just make three or four symbols:
a square, a triangle, a circle, and
| | 02:27 | overlap them on different layers, and you will
you get the idea. It'll be an identical process to this.
| | 02:32 | So okay, what's the problem here? Well
we have the background, and we have our
| | 02:36 | table, and now let's look
at the book issue first.
| | 02:39 | So what we need to do is to mask out the
area that has the book shape on the table layer.
| | 02:45 | So what I like to do here is just
copy the book, Control+C, and that will be our
| | 02:51 | mask now for the table. And we break
this apart, Control+B, until we just -- and I
| | 02:58 | am going to pick, like, a flat color for that.
And the problem is if I make this a
| | 03:03 | mask for the table, it masks out the
wrong part, and I'd like it if there was an
| | 03:10 | option that allowed us to invert the mask.
| | 03:12 | If there is one hidden somewhere, I don't
know about it. I apologize if I'm unaware of it.
| | 03:18 | So here's how I've been solving the problem.
| | 03:21 | Use the -- let's pick a nice black
color for your Line tool, and we'll pick the
| | 03:27 | Ink Bottle, and paint that in. And
then we will activate the background, and I
| | 03:33 | want to see the book layer, so I want to
select, now, the Line tool, and I'm going
| | 03:39 | to paint in the area that I want to mask.
And basically what we're doing
| | 03:45 | is masking it in, And I am going to
color it red; so a different color from the
| | 03:49 | one that we have up here for the book.
And we want to select the Paint Bucket
| | 03:53 | tool for this, paint that.
| | 03:55 | We are getting a kind of an opacity on
this, it doesn't really matter, but we're
| | 03:59 | seeing through it, so don't
be bothered if you see that.
| | 04:02 | Delete that line, delete the green,
and now when we activate the mask we have
| | 04:07 | our table masked, and we can now see the
book on top of it. There will now be no
| | 04:12 | overlap between those.
| | 04:14 | So as you can imagine, this can be
pretty complex when you have a lot of
| | 04:18 | different objects overlapping.
| | 04:20 | I have done it with little piles of
rocks, and it's not fun. So it depends on
| | 04:25 | how badly you need to do this effect; how
badly do you need to have one of your objects?
| | 04:31 | I'll go to alpha and fade out.
| | 04:33 | Now you can also do it with runtime
caching, but I found that that can create
| | 04:38 | problems when you're rendering out
symbols that have animation inside them.
| | 04:42 | The last time I tried it, it did not
render out the animation, so it's kind of
| | 04:46 | like a pair of handcuffs.
| | 04:48 | Sometimes you just have to
know how to apply this technique.
| | 04:51 | So I'll just do it one more time so
you see it with the clock and the lamp.
| | 04:55 | And the same process here, they need to be
masked to the -- I believe to the book layer.
| | 05:00 | Let's just get the book again; Alt+
Drag to copy that layer, and I am going to use
| | 05:06 | this as the mask, so I'll drag that
down there. And break it apart again,
| | 05:10 | Control+B, and I am going to give it
another phony color, so just that blue will do
| | 05:14 | fine. And same process with the Line tool.
| | 05:18 | And what I want to do is to create the
area, now, that we will be allowing to be
| | 05:23 | displayed. And let's get a different
color again; maybe orange, pop it in,
| | 05:30 | and select and delete the blue. Double-
click the lines just to clean them up.
| | 05:34 | And, you know, maybe rename this
layer mask so we don't get totally lost in
| | 05:39 | here. Right-click, make it a mask,
and then drag the lamp as well, because we
| | 05:44 | have two layers under this one, so
you have to drag them all in there. And
| | 05:47 | you'll see that they've disappeared there.
| | 05:49 | If you go to Outline mode you will
still see the overlaps. That's okay. But when
| | 05:53 | you go to the outer layer, and
you dissolve through, we're clean.
| | 05:57 | You may need this, you may not, but
it's been handy for me quite a few times
| | 06:00 | over the last few months.
| | 06:01 | So I am sure there is a lot of
people out there who might find it of some use.
| | 06:06 | So we'll move on to the next
tool in creating transitions.
| | Collapse this transcript |
| Animating a wipe| 00:00 | There is another simple way to
transition between two scenes and that's to use a
| | 00:03 | wipe, and use the mask, in this case, to
create the effect. And this is where we
| | 00:08 | simply wipe the screen from one state,
one scene, to the other. And this is pretty
| | 00:14 | simple; can't really go wrong with it.
And it's used a lot in some films; the
| | 00:19 | Star Wars movies use this quite a bit.
| | 00:21 | So let's have a look with the
pasteboard activated, so I can see the entire
| | 00:25 | Stage beyond the visible area. And
let's just take a look at the mask, and
| | 00:30 | that's all that's happening.
| | 00:31 | Now I've actually done a slight shape
tween on that mask so that you can see
| | 00:37 | it's not just moving in a completely
straight line, which looks a little bit
| | 00:41 | flat. And now when we see this with the
area that's been unmasked, it feels a
| | 00:45 | bit like a page turn.
| | 00:47 | And the cool thing about this is you
can make your own shapes; you are not
| | 00:50 | limited to just boring left-right mask.
You can go up-down, and granted there
| | 00:55 | are a plenty of these in After
Effects and other programs as well.
| | 00:58 | But again there may be times when you
want to do it in Flash, and the beauty of
| | 01:01 | doing it in Flash, of course, is that
you can integrate it with other effects.
| | 01:05 | So if you wanted to add, like, a little
man down here running across the screen,
| | 01:09 | pulling the mask, you could do that. I
think it might be easier to do that kind
| | 01:13 | of thing if it's all inside the one program.
| | 01:15 | So just a very quick
demonstration of how this was done; I am going to
| | 01:18 | delete that layer, and
let's just make a new layer.
| | 01:21 | And I will hit F7 here to just put down
the blank spot, and create the Rectangle
| | 01:28 | tool. And the mask can be any color.
It's not going to be visible; it's only
| | 01:32 | there as a guide. You could
even leave this line on it.
| | 01:35 | So that's our first frame, and I am
going to hit F6 on Frame 40 as our end
| | 01:40 | frame. Click that to select the entire
area of the mask, and then select the
| | 01:47 | Free Transform tool, or Q, and then
select this again and -- as long as you see the
| | 01:52 | little handles up here, and pull it
across. And the next step will be, in this
| | 01:58 | case, to activate shape tweening.
| | 02:03 | Actually, the nice thing about having
it as a transparent color, which you can
| | 02:06 | set here in the Color panel, is that you
can actually see through it. You can see
| | 02:10 | exactly where your thing is going.
| | 02:13 | So then I can simply bend the line and
make that pretty much any shape I like
| | 02:24 | depending on how much time
I've got to expand on this.
| | 02:27 | And the step, of course, is right-click
on that new layer, make it a mask, and
| | 02:32 | it'll automatically pop the layer
beneath into it. And there you see that the
| | 02:36 | mask has been generated.
| | 02:38 | If that doesn't happen, or it falls
away, it's like adding a guide layer, you
| | 02:42 | simply drag the layer you want to be
masked into that. You can put as many
| | 02:45 | layers inside of mask as you like.
| | 02:47 | That's it. It's very simple, but
keep it in mind for doing, maybe, little
| | 02:51 | scene transitions, or you could have effects like,
for example, a completely different effect.
| | 02:56 | Let's clear this keyframe, you can do
like various iris effects. And I am going
| | 03:03 | to move, drag this keyframe forward to
here, and again let's set another one
| | 03:08 | on Frame 40, and Free Transform tool. Let's drag
this out; make sure we cover the entire Stage.
| | 03:19 | We have to activate shape tweening, of
course. And you can do these kind of things.
| | 03:25 | So keep it in mind; occasionally it's
very useful to have the ability to
| | 03:29 | transition in ways that are more
interesting than just a standard scene cut.
| | Collapse this transcript |
| Animating a fadeout| 00:00 | So we come to our final section of
this course, and it's the fade out,
| | 00:05 | appropriately enough.
| | 00:06 | Most times when you do a fade out it's
pretty straightforward, and it will be
| | 00:10 | like this clip on the right side.
| | 00:12 | You would simply take your starting
pose, make a keyframe at the end, go into
| | 00:17 | the Properties panel, go to brightness
and go down to 0, set a motion tween and
| | 00:22 | then everything turns to black.
| | 00:24 | And you know what, for most of the time
this is what I do, but once in a while you
| | 00:28 | might want something a little more special.
| | 00:30 | So that's why there's a different way
of doing things, and I am going to go
| | 00:33 | through this fairly slowly,
because it's quite subtle.
| | 00:35 | As I scrub through the Timeline you
notice that the different elements on the
| | 00:39 | left side are now tapering off at
a slightly different rate, each one
| | 00:44 | individually controlled.
| | 00:46 | So let's play it in real time, and
again and you notice that the one on the
| | 00:53 | left, it just feels a little more alive, a
little more interesting, a little less uniform.
| | 00:58 | So let's have look inside that
symbol and see how this is done.
| | 01:01 | So I am going to hide the other one.
| | 01:02 | We don't need to see that at the moment.
And let's double-click in here, and I'll
| | 01:07 | walk you through the layers first.
| | 01:08 | So we have the sky layer, the
buildings -- this will look familiar from
| | 01:12 | the previous chapters --
| | 01:14 | the foreground grass layer, the
gradient spotlight, and then there's a left
| | 01:17 | gradient linear, and there is a
right linear gradient as well.
| | 01:21 | You can almost make a cone shape which
covers and describes this area here. And
| | 01:27 | then the little oilman, and he is in middle.
| | 01:29 | As we transition to the scene you
will see that the different layers have
| | 01:34 | their own separate dropoffs. And the
beauty of this system is that if you want
| | 01:39 | to change it, so, for example, let's say I
want the man to be lit up for a little bit longer.
| | 01:44 | It would be a simple matter of just
dragging him to here, and then he only begins
| | 01:50 | to fade out very late in the day.
| | 01:52 | It feels like the universe is closing in on him.
| | 01:54 | So now if we go out to the other Stage
and compare this to the other scene, and
| | 01:59 | let's go through it frame by frame.
| | 02:01 | I am using the Comma key and Period key
| | 02:04 | on the keyboard to go through frame by frame.
| | 02:06 | We can really target whatever part
of the scene we want to fade out last.
| | 02:11 | You file this kind of effect under subtle.
| | 02:13 | It's not a really broad animation
technique, but there's definitely going to be
| | 02:17 | times when it's a good trick to have.
| | 02:19 | So it's a very simple thing to achieve.
| | 02:21 | Let's simply delete these.
| | 02:24 | Now before we go any further, for the
people who don't have access to the
| | 02:28 | Exercise files, to get the
gradients done -- this is very quick to demonstrate.
| | 02:32 | So I am going to go to Gradient Transform tool.
| | 02:34 | That's the kind of shape you want to
create, and I think it's a four color gradient.
| | 02:40 | The center one is at 0.
| | 02:42 | Actually, you probably don't even need that one.
| | 02:43 | So it's three colors really.
| | 02:45 | This one here will be at 0, and if you
put this hex color into your color palette
| | 02:50 | and copy that: #7B7D3F, the middle one
is at 32%, and that's #222D44, and the final
| | 02:57 | one is #050403, and that's at 50%.
| | 03:01 | You should, if you're lucky, get this
gradient here exactly right, and that's a
| | 03:05 | radial gradient, of course.
| | 03:07 | The next one you would do will be the
left gradient, and it's three color linear
| | 03:12 | gradient, as you can see here.
| | 03:13 | And again, three colors: the one on the left is
0% and your value is #3E3748, the middle
| | 03:19 | color is at 30%, #222944, and the
far is #16251C and that's at 70%.
| | 03:27 | And just copy that for the one above
and flip it horizontally, and you should be
| | 03:31 | able to follow along reasonably well. And
any little stick man you want to put in
| | 03:34 | there will probably fine.
| | 03:36 | So let's see if we can remember how we did this.
| | 03:39 | I'm going to begin with F6ing these
four columns, because these are the four
| | 03:44 | layers that we are going to fade out.
| | 03:45 | That's F6 here, and these will be the dark ones.
| | 03:48 | So I am just going to hide these layers,
so I can see exactly what I am dealing with.
| | 03:52 | So let's just work on the top layer
first, and I will select the Selection tool
| | 03:56 | so I can cleanly select him.
| | 03:59 | And we will do a basic brightness
reduction on him in the Properties panel under
| | 04:03 | color effect, and just pull him down to 0.
| | 04:05 | The next layer down is the gradient left.
| | 04:09 | So for this one we select the layer and
then select Gradient Transform tool,
| | 04:13 | or F. And you want all of
these to go to a solid black.
| | 04:17 | So I wouldn't want any tint or color on
them. And I find that easier to type in
| | 04:22 | the numbers with these.
| | 04:23 | Okay, let's hide that. Do the next one.
| | 04:30 | And just click on the values
here 100, and make sure it's black.
| | 04:36 | If any of these are even slightly not
black when you fade out there is a chance
| | 04:40 | you'll see a slight color band
along one of these lines here.
| | 04:44 | Now that's to be avoided.
| | 04:46 | It's one of the problems I've had
with these really subtle effects.
| | 04:49 | For example, that there is not pure
black, and you want it to be pure black.
| | 04:53 | Then the next one; this gradient.
| | 04:57 | Now here's where we can have a little
bit of fun by pulling these markers on the
| | 05:02 | gradient, you see it;
| | 05:03 | we are actually animating the dropoff
of the color, and here is where some of
| | 05:07 | the real subtlety comes in.
| | 05:08 | So this will actually animate, and I
can pull this out to narrow that last
| | 05:13 | central point, and again I want the end
state to be completely black for all
| | 05:17 | these colors. That would be
bad, so we pull that down.
| | 05:20 | Just pull it right down to the bottom,
anywhere along here at the bottom will be black.
| | 05:24 | Now let's see if we can pull the opacity up.
| | 05:27 | It's very hard to tell really until you
see the final things with all the layers
| | 05:30 | exactly what that's going to look like.
| | 05:33 | Well, let's do this and see what
happens, and this one should be 100 as well.
| | 05:37 | Again, I am having to type in those numbers.
| | 05:40 | So this one is going to be shape tween.
| | 05:43 | You see all the little white dots on it.
| | 05:45 | So we create a shape tween.
| | 05:47 | These are the two gradients as well;
| | 05:49 | they will also be shape tween.
| | 05:50 | Then the top layer is a graphical symbol
with the blue line around it, a classic tween.
| | 05:56 | We will activate the layers beneath.
| | 05:58 | It's hard to tell otherwise.
| | 06:03 | So right now they're all
basically tapering off at the same time.
| | 06:07 | So let's move some of these around.
| | 06:09 | I am going to just click and drag the two
linears out a little bit, and we can delay
| | 06:15 | the hit on the oilman by simply
clicking and dragging his symbol.
| | 06:22 | And I am going to make him actually a little
more dramatic, like he's really been hit
| | 06:25 | by the light just by dragging him so
that he is the last thing to darken.
| | 06:29 | And don't forget, too, that each one of
these layers has its own ease in and ease out.
| | 06:33 | So that gives you even further control over it.
| | 06:36 | Now the other thing that you can do, and
I am going to hide these for the moment,
| | 06:39 | is set a different state somewhere where the
top light begins to drop off. So let's do that.
| | 06:45 | I want to make a keyframe here.
| | 06:47 | Just hit F6 and then activate
the Gradient Transform tool.
| | 06:51 | We will select that, and let's
play with this a little bit.
| | 06:54 | Now I can go into the center color
here, and let's make it a little more
| | 06:58 | transparent, and see what this looks like.
| | 07:03 | That's giving us a hotter center,
which will last a little bit longer.
| | 07:07 | So this is the equivalent of having
access to a much more sophisticated control.
| | 07:12 | The thing that you're noticing right
now is, as the light is narrowing, it's a
| | 07:15 | little bit off-center, and I'd really
like that to be a little tighter on him. And
| | 07:20 | the cool part is, this little triangle
widget can be used to push the center of
| | 07:24 | illumination to target the oil man.
| | 07:27 | So let's do the same thing with
the last one even though it's black;
| | 07:30 | we can't really see much.
| | 07:32 | I am going to pull it back
over there to match that.
| | 07:35 | So now its like there is little iris, an
imaginary light in the sky, just slowly,
| | 07:40 | slowly fading out. And even here, right
at the end, you can see there's little
| | 07:44 | tiny dot right above it.
| | 07:45 | Now we can go into this and we
can use some of the ease outs.
| | 07:49 | So let's ease out to about 80 and
that will have it close out a little
| | 07:53 | quicker, and we'll ease in on this side, and
that will create a slightly more natural feel.
| | 08:01 | Now let's reactivate the two beams at
the top to see if they work with them.
| | 08:04 | I suspect they're happening a little too fast,
| | 08:06 | so let's see how they're working.
| | 08:07 | Yeah, I think they're.
| | 08:10 | I think they're being a little too aggressive.
| | 08:11 | So what I'm going to do is just select
the top one first, and the center point, I
| | 08:17 | think it's here, let's see. Yup!
| | 08:19 | What I am going to do is, instead of
taking that all the way to black, let's see
| | 08:25 | what happens if I make it 0 so it's
transparent. Because what's happening is the
| | 08:29 | bottom layer is going to black anyway.
| | 08:31 | So we don't need black on black.
| | 08:33 | So let's just make it go like this.
| | 08:36 | I will do the same thing with the other one.
| | 08:44 | Select that layer, and on the inside I
will bring that down to 0. And if we wanted
| | 08:49 | to, we could just widen this a little
bit using the widgets on the controller.
| | 08:54 | We could make the thing
animate so it's moving in slightly.
| | 08:59 | And we are not stuck with an
object that can't be manipulated further.
| | 09:03 | So same thing, I am selecting the
gradient on the other side, and also pushing them in.
| | 09:07 | So now when the scene closes out it's
creating the illusion of some volume in the light.
| | 09:14 | We also want to make sure that these
are tracking the iris as it closes.
| | 09:18 | So let's remember that we are a
little asymmetrical with this.
| | 09:21 | So I am going to turn that beam a
little bit that way. And switch that off; work
| | 09:26 | on one at a time. And this beam, also I
think -- let's see I am holding down the
| | 09:30 | spacebar to drag the Stage around, and
now I will turn that this way. And now,
| | 09:35 | easiest if we padlock all the levels.
| | 09:39 | You want a really good monitor for this,
but I think that's tracking really nicely.
| | 09:43 | So let's go back to the outer Timeline
and, again, have a look at that. Nice.
| | 09:49 | And if you compare it with the other one,
you see the difference. And this can be
| | 09:53 | used for more things than fading out.
| | 09:55 | Lighting is, I think, one of the more
underused elements in staging scenes, even
| | 09:59 | in live action films.
| | 10:00 | So with that I think we're done, and
I hope you've enjoyed following along
| | 10:03 | the course.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | That's the end of the course.
| | 00:01 | I hope these tips and
tricks will be of use to you.
| | 00:04 | I certainly wish I'd known about them when I
was starting out in Flash almost 11 years ago.
| | 00:09 | In my previous course, Flash CS5
Professional Character Animation, you'll see
| | 00:14 | some of these same techniques
applied in much greater detail.
| | 00:18 | Again, thank you for
following to the end of the course!
| | Collapse this transcript |
|
|
