IntroductionWelcome| 00:04 | Hello, I'm Paul Trani, and
| | 00:05 | welcome to Flash
Professional CS5 Animation Projects!
| | 00:10 | I'm going to show you how to create
exciting, professional animation that will
| | 00:14 | bring any project to life.
| | 00:16 | In this course, we'll show you how to
use motion presets to add quick animation.
| | 00:22 | We'll create custom motion tweens that can
be reused and nested into other animations.
| | 00:27 | I'll show you how to animate
characters, animate in 3D, and create complex
| | 00:34 | animations with ActionScript.
| | 00:35 | So, whether you're making a Flash web
site or Flash banners, I'm going to give
| | 00:41 | you the basics so that you
can be at your creative best.
| | 00:44 | So, let's get animated
with Flash Professional CS5.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you have access to the exercise
files for this course, you can put them on
| | 00:05 | your desktop, as I have here,
or anywhere else you want.
| | 00:09 | It contains an Assets folder that has
all of the various graphics that will
| | 00:14 | be used, and then also some Chapter
folders that contain the beginning and
| | 00:20 | final files as well.
| | 00:22 | If you don't have access to these
files, you can follow along with your own
| | 00:26 | files, as we proceed through this course.
| | Collapse this transcript |
|
|
1. Getting StartedGetting familiar with the workspace| 00:00 | Let's start out by creating our very
first Flash file from the Start menu.
| | 00:05 | So, here's the Start menu, and notice
I can create a file from a template or
| | 00:09 | even create a new file.
| | 00:10 | And that's what I want to do.
| | 00:12 | I want to create a new file
that's an ActionScript 3.0 file.
| | 00:15 | So, I'll just select ActionScript 3.0.
| | 00:17 | Let's not worry about the fact that
it says ActionScript 3.0 right now.
| | 00:21 | This is basically a blank document.
| | 00:24 | It's a Flash file, where all my
graphics and animation will live.
| | 00:28 | I could start drawing in here right away if I
want to, but I want to adjust the workspace.
| | 00:35 | I'm going to do that by going to Window,
down to Workspace, and currently it's
| | 00:40 | set on Essentials, but I
want to change this to Classic.
| | 00:44 | If I change it to Classic, it puts the
Tools panel on the left side, just like
| | 00:50 | other Adobe programs.
| | 00:51 | Then it gives me my Properties
panel on the right-hand side.
| | 00:55 | Now, if I want to move any panels, I
can always click on that tab and click and
| | 01:01 | drag out that appropriate panel
that you might want to isolate.
| | 01:06 | I've dragged out this Library panel
because I actually want to nest this
| | 01:10 | Library panel right down here
underneath the Properties panel, because I know
| | 01:15 | I'm going to be using this panel a lot, as
well as the Properties, and also the Timeline.
| | 01:20 | All right, so that's set up pretty well.
| | 01:22 | In fact, if I want to minimize any
panel, I can just double-click in the gray
| | 01:26 | bar there, and it'll minimize, because I
want to focus on this Properties panel.
| | 01:30 | From here, I'm actually
able to resize the document.
| | 01:34 | So, I'm going to click Edit, under Size,
and I can go ahead and change the Dimensions.
| | 01:41 | Now, this is going to be
for a web page I have created.
| | 01:44 | Currently, there is just a static graphic
there, and I'm going to replace it with Flash.
| | 01:48 | But on this web page, I need my
dimensions to be about 1,000 pixels wide by
| | 01:52 | about 400 pixels tall.
| | 01:55 | So, those are my dimensions.
| | 01:57 | I'm also going to change the background color.
| | 02:00 | So I'm going to click this white
square here, and I'll just pick a green color
| | 02:04 | for the background. I'll click OK.
| | 02:08 | That's more appropriate.
| | 02:09 | Now, if I want to resize, or navigate
around inside of this document, what I can
| | 02:14 | do is hold down the Spacebar
and move around, just like that.
| | 02:18 | I can also resize this area by
maybe selecting Fit in Window.
| | 02:23 | Now I can see all of the
content that will be drawn in here.
| | 02:27 | So, everything looks good.
| | 02:29 | This document is set up, so I'm
just going to go ahead and save it.
| | 02:34 | I'll just call this home,
because this is for my homepage.
| | 02:38 | Now, keep in mind, this is an
FLA file, it's a Flash file.
| | 02:42 | This is my source file for the
animation I'm going to create.
| | 02:45 | So I just want to hold on to this file.
| | 02:47 | It's equivalent to say a PSD, if you're
used to working in Photoshop. I'll click Save.
| | 02:53 | So, now my file is set up, and I can
start to draw, or import any graphics, and
| | 02:59 | do some animation, but I also want to
point out that you can go to File > New,
| | 03:04 | and if you click on the Templates tab,
notice that there are templates in here as well.
| | 03:10 | So, if you are doing any sort of
animation for a banner, well then it's just a
| | 03:16 | matter of selecting that size that
you need to use and then click OK.
| | 03:22 | All that really does is set up your stage.
| | 03:25 | Again, this is your document stage.
| | 03:27 | It'll set up the stage
size for that particular use.
| | 03:32 | But again, I'm not making a banner, so
I'll just go ahead and close that file,
| | 03:35 | and come back to my home.fla.
| | 03:37 | Now I'm ready to start to
create some drawings in here.
| | Collapse this transcript |
| Creating graphics| 00:00 | Flash has some very powerful drawing
capabilities, and yet it's similar to other
| | 00:04 | drawing programs, so it's easy to learn.
| | 00:07 | I'm going to go ahead and use some of
these simple drawing tools, as well as
| | 00:10 | some more complex ones.
| | 00:12 | But before I begin, I'm going to
be mindful of what layer I'm on.
| | 00:16 | So, in the Timeline, I have layer 1
selected, and I want to draw a rectangle.
| | 00:21 | So I'm going to rename this to say Rectangle.
| | 00:25 | Now I can get down to
selecting my Rectangle tool.
| | 00:30 | Then I'm going to go ahead
and define the stroke color,
| | 00:33 | we'll pick white, and then the
fill color, which is going to be red.
| | 00:37 | Then what I need to do is I need to just
make sure this Object Drawing is turned on.
| | 00:42 | So I'm just going to click on the Object
Drawing. Notice how it looks sort of depressed.
| | 00:47 | Now I can go ahead and
draw with the Rectangle tool.
| | 00:51 | There it is, and if I select my
Selection tool and sort of click off of the
| | 00:56 | graphic, you can see that it
does have that white stroke.
| | 01:00 | Again, I can select that graphic with
the Selection tool and move it around.
| | 01:05 | Quite frankly, this isn't really what I want.
| | 01:07 | I need to, first of all, make sure
it stretches across the screen.
| | 01:11 | So, what I can do is I can
use the Free Transform tool.
| | 01:15 | That way I can stretch it sort of
further across the screen and kind of scrunch
| | 01:19 | it up just by modifying these control points.
| | 01:23 | Another way to modify anything that you
have selected is using the Properties panel.
| | 01:28 | So, over here in the Properties panel, I'm
going to change its X position to 0, just like that.
| | 01:36 | I want to extend it, the width of
this document, which happens to be 1000
| | 01:40 | pixels, just like that.
| | 01:44 | My height is going to be about
100 pixels, so I can type that in.
| | 01:47 | So, if you want specific
control, use your Properties panel.
| | 01:51 | Notice also over in here, I
can change the fill and stroke,
| | 01:55 | change the Stroke color to nothing,
so it doesn't have a stroke now, and
| | 02:01 | I can change the Fill color to black.
| | 02:03 | All right, that's more appropriate, and
that's exactly what I want. With that set up,
| | 02:09 | let's go ahead and take a look at
some of the other drawing tools.
| | 02:12 | Each time you create something in
Flash, you should always put it on a new
| | 02:15 | layer, because that's going to
give you more control with that item.
| | 02:18 | So, I'm going to click this New layer
icon, and I'm going to go ahead and draw a
| | 02:23 | button shape right now.
| | 02:25 | I'm going to go beyond the Rectangle
tool into the Rectangle Primitive tool.
| | 02:30 | In my Properties panel down here, I'll
select a fill color, and notice that you
| | 02:35 | can actually sample any color as well.
| | 02:38 | So I'll just sample this green background color.
| | 02:41 | All right, my next step is to, before
I even begin drawing, I can adjust the
| | 02:47 | properties for this shape.
| | 02:49 | I'm going to go ahead and look down
here in Rectangle Options, because I have
| | 02:54 | the opportunity to curve the corners.
| | 02:56 | So, I can change that to 10.
| | 02:58 | That will change the
radius of the corners to 10.
| | 03:00 | Let's hit Enter for all of the corners,
and now I can go ahead and draw a button
| | 03:06 | shape, kind of like that. It looks great!
| | 03:10 | With it still selected, I can always
come in here and modify that further.
| | 03:15 | Say for instance, I could even unlock
it, and maybe I don't want to curve one
| | 03:19 | corner, and maybe another corner.
| | 03:22 | I can change it to that shape.
| | 03:24 | So, that's looking pretty good.
| | 03:26 | Again, that's a unique item to Flash,
a really great way to make buttons.
| | 03:30 | But this button really needs a label,
so I'm going to select the Text tool,
| | 03:34 | select a color, white,
| | 03:38 | then I'm going to go ahead
and look at my Properties.
| | 03:42 | Okay, so the first thing I want to do is
change this from TLF Text to Classic Text.
| | 03:49 | A TLF Text stands for Text Layout Framework.
| | 03:52 | So, if you're dealing with a lot of
text, you probably want to select that.
| | 03:57 | Otherwise, if it's something simple,
like a label, you can use Classic Text.
| | 04:01 | I'm going to make sure that
this is Static Text as well.
| | 04:06 | I can go ahead and define the font.
| | 04:09 | So, I'm going to use Arial.
| | 04:12 | It's going to be bold, and let's
give it a size of about 14 point.
| | 04:16 | Again, let's make sure it's white.
| | 04:19 | What I can do is just click, and
then type in "Replay," just like that,
| | 04:26 | use my Selection tool to kind of
position that right in there, and I could
| | 04:30 | always use my Arrow keys on the
keyboard to adjust it as well.
| | 04:33 | All right, so that's text.
| | 04:35 | Now, I want to go beyond, again,
this button, and create a new layer, and
| | 04:40 | actually change the layer name to Text,
because I'm going to have a larger
| | 04:43 | statement, I want to appear right here.
| | 04:46 | I'm going to select the Text tool.
| | 04:49 | Notice how it defaults to my last settings.
| | 04:52 | So that looks pretty good, but in fact
I want to up this to about 28 points.
| | 04:56 | Then I want to type in here, on
my stage, "Sustainable Design."
| | 05:05 | With it still selected, I can
always change its various properties.
| | 05:09 | So I'm going to change the font to
Regular, and what I can do, is anytime you
| | 05:14 | see something with an underline, you can
actually do a click-and-drag to adjust its size.
| | 05:20 | So, that's looking more appropriate.
| | 05:22 | That's the size I want for this text.
| | 05:24 | Yeah, I'd say it looks pretty good.
| | 05:27 | So, I'm going to use the
Selection tool and just kind of position it.
| | 05:29 | Now, let's get into one of the more
advanced tools in Flash Professional CS5.
| | 05:36 | I'm going to do this by creating a new layer,
and what I'm going to draw are some trees.
| | 05:41 | So, I'm going to rename this layer to Trees.
| | 05:45 | Next thing I'm going to do is I'm
going to adjust the stage size to Fit in
| | 05:50 | Window, just so I can see
everything from edge to edge.
| | 05:53 | All right, with this layer selected,
I'm going to go down here. Halfway
| | 05:57 | down, you'll notice this pencil with
these dots, and this is the Deco tool,
| | 06:02 | a procedural drawing tool, and I'll show
you what this looks like if you select it.
| | 06:07 | Go to the Properties panel and
determine what you want to draw.
| | 06:11 | So, under Drawing Effect, I
get plenty of different options.
| | 06:17 | So, I can draw with buildings, with fire,
with flames, flowers, and I want to go
| | 06:22 | ahead and select the Tree Brush.
| | 06:25 | Now I get to customize it even further.
| | 06:28 | If I open up this dropdown, you can
see all the different trees I could even
| | 06:31 | draw, quite a few in here, but I will just
go ahead and keep this as the Aspen Tree.
| | 06:39 | I can even further define the leaf color,
and then the flower color as well, but
| | 06:44 | I think that looks pretty good.
| | 06:45 | Maybe I'll go a little brighter or
something with the leaves if I want to,
| | 06:48 | something kind of like that.
| | 06:48 | But let me go ahead and draw.
| | 06:51 | If I just do a click-and-drag, you can
see how it generates that tree. Very nice!
| | 06:58 | I was able to quickly draw a tree.
| | 06:59 | Let's kind of do this corner as well.
| | 07:01 | I'm going to go ahead and change
this Drawing Effect to the Flower Brush.
| | 07:08 | Under Advanced Options, I'm
going to select Poinsettia.
| | 07:11 | Again, I encourage you to play with
all of these different drawing effects,
| | 07:16 | whether it's the flower size or the
leaf size or the color, but you can notice
| | 07:20 | that you'll get some
nice, little results as well.
| | 07:23 | I'm going to go ahead and bring this
flower size down, and then the leaf
| | 07:26 | size down to some more.
| | 07:27 | Then I can kind of sprinkle
those kind of around my tree.
| | 07:30 | So, that looks pretty good!
| | 07:32 | Again, it's a procedural drawing tool,
very cool, very easy to use, and it really
| | 07:38 | can jazz up sort of any
project that you're working on.
| | 07:42 | Creating graphics in Flash is easy.
| | 07:44 | It ranges from simple to more complex,
but I just encourage you to play with the
| | 07:49 | various drawing tools and
capabilities that are available in Flash.
| | Collapse this transcript |
| Creating reusable assets| 00:00 | At the foundation of Flash are symbols.
| | 00:02 | They allow for animation, interactivity,
and can even have special effects like
| | 00:07 | glows and drop shadows.
| | 00:09 | But most of all, they can easily lead to
a smaller file size, which is important
| | 00:14 | when it comes to web performance.
| | 00:15 | Where I'm actually going to
start is by testing this movie,
| | 00:21 | my home.fla, my home Flash file, my
source file, and I'm going to go to Control.
| | 00:26 | I'm selecting Test Movie, making sure
in Flash Professional is checked, and
| | 00:31 | then I'll click Test.
| | 00:34 | What that does is that
actually creates this SWF file.
| | 00:37 | This is my small web format file.
| | 00:40 | This is my file that I really
want to be as small as possible.
| | 00:45 | But here is an easy way to check its file size.
| | 00:48 | I can actually go to View > Bandwidth Profiler.
| | 00:53 | That will open up this Bandwidth
Profiler, which actually gives me the file
| | 00:57 | size for this document.
| | 00:59 | It says it's 296 KB.
| | 01:02 | I want to simplify this design to get
this file size down, and I'm going to do
| | 01:06 | this by creating symbols.
| | 01:08 | So, I'll close that SWF file, and just
by looking at this design, I can tell
| | 01:14 | that I really only need one tree
| | 01:17 | I can then duplicate and put in both positions.
| | 01:21 | So, what I'm going to do is I'm going to
delete this first one, and I'm going to
| | 01:26 | lock down those other layers.
| | 01:30 | Now I can go ahead and just click and
select all of those graphics and then hit Delete.
| | 01:35 | All right, now what I want to do is
hold down the Spacebar and kind of pan back
| | 01:40 | over, because I want to take this tree
right here with flowers, and I want to
| | 01:45 | convert it to a movie clip,
which is a type of symbol.
| | 01:49 | Open up the Library panel, click and drag
all of these graphics into the Library panel.
| | 01:56 | Here I have the Convert to Symbol dialog
box that opens, and now I can give it a name.
| | 02:02 | I'll call this tree design, and then
I can choose the type of symbol I want
| | 02:08 | to convert this to.
| | 02:10 | Notice there is Movie Clip, Button, and Graphic.
| | 02:13 | The movie clip is actually the most
robust and gives me the most flexibility.
| | 02:19 | That's why I want to use it.
| | 02:20 | So I'm going to select Movie Clip.
| | 02:22 | Most of the graphics I
create are actually a movie clip.
| | 02:25 | Button is also another popular
one that I will use in a second.
| | 02:29 | But I will select Movie
Clip, and I will click OK.
| | 02:34 | Notice how it appears in my Library panel.
| | 02:36 | I can see it right here. And if I sort
of expand out the Properties panel and
| | 02:41 | minimize the Library panel, you can see
that this tree is now an instance of the
| | 02:46 | tree design, which is in my library.
| | 02:49 | So this is now an instance
of that symbol in the library.
| | 02:52 | All right, so I'm going to go ahead and
hold down my Spacebar, and pan up here,
| | 02:57 | and open up my Library panel, because
what I want to do is I want to click and
| | 03:00 | drag out that tree onto my stage.
| | 03:06 | That creates a new instance of that tree design.
| | 03:09 | Now I can manipulate it into that
position I had it, just by using the Free
| | 03:14 | Transform tool, kind of
something like that, okay.
| | 03:18 | So again, I have two instances of one symbol.
| | 03:22 | Now all I'm going to do is I'm going to go
to Control > Test Movie, and test this out.
| | 03:27 | It was 266 KB earlier; now it's 143 KB.
| | 03:31 | It almost cut it in half, it did a
great job, and still the integrity of the
| | 03:37 | design is maintained.
| | 03:38 | All right, now I want to convert a
couple of other items, the text and then this
| | 03:43 | background bar, into movie clips, and
then I'm going to make this a button.
| | 03:47 | I'm going to lock my Trees layer,
and I'm going to unlock the Text layer.
| | 03:53 | It's the same process of selecting the
graphic and then dragging it into the Library.
| | 04:00 | Now I can go ahead and give this a name.
| | 04:02 | I'm going to make it a
movie clip, sustainable design.
| | 04:06 | It's going to be a movie clip. I'll click OK.
| | 04:09 | I can see it says it's an
instance of sustainable design.
| | 04:13 | I will lock that layer and
unlock the rectangle right here.
| | 04:18 | I'll just click and drag it to the library.
| | 04:21 | I will convert this into rectangle.
| | 04:26 | It's going to be a movie clip.
| | 04:29 | Then lastly, I'm going to go ahead and
select this text as well as that button shape.
| | 04:35 | So these two items, I'm going to click
and drag it into the Library panel as well.
| | 04:42 | This is going to be my replay button,
and it is going to be of the type Button.
| | 04:49 | So I'm selecting that, and then I'll click OK.
| | 04:52 | All right, so everything is
converted to a symbol now, and let's go ahead
| | 04:59 | and take a look at some of the
additional properties you can add to any sort
| | 05:03 | of symbol instance.
| | 05:05 | Well, let's select this rectangle
background, and I look in my Properties panel,
| | 05:11 | you can see that it is more robust.
| | 05:13 | I have this 3D position in view.
| | 05:15 | I have Position and Size.
| | 05:17 | I have this color effect, which is
definitely pretty nice, and then I even can
| | 05:21 | change the Blend mode.
| | 05:22 | I'm going to change this to Overlay.
| | 05:26 | That just tints it subtly and it will
be more pronounced once I get more
| | 05:30 | graphics back there.
| | 05:32 | Let's take a look at filters.
| | 05:34 | I'm going to select this button.
| | 05:36 | Under the Filters tab right here, I
can click Add filter, and here is where I
| | 05:41 | can go ahead and add a drop shadow,
a blur, pretty much anything I want.
| | 05:46 | In this case, I want it to look more like
a button, so I'm going to select Bevel.
| | 05:50 | As you'll notice, it adds that bevel,
and I can change it even further.
| | 05:57 | I want to decrease the blur, so I'll
just click and drag that down to give it
| | 06:00 | more of a harder edge.
| | 06:02 | Then I can start to modify
the color or the strength.
| | 06:06 | Let's go ahead and bring down the
strength a little bit, kind of like that, just
| | 06:10 | by clicking and dragging.
| | 06:11 | But again, you can see I can easily
modify any of the properties for any filter.
| | 06:16 | Of course, to add them, all you have
to do is click that Add filter icon
| | 06:20 | right there to add it.
| | 06:21 | So, that's looking pretty good!
| | 06:23 | My graphics are all squared away.
| | 06:25 | Even if I am not going to be using an
item multiple times, I still want to make
| | 06:30 | it a symbol, because it means that I
can then animate these graphics or even
| | 06:36 | control it with ActionScript.
| | 06:39 | So you want to get in the habit of
converting everything into a symbol.
| | Collapse this transcript |
| Importing graphics | 00:00 | Although Flash's drawing capabilities
are powerful, you probably want to import
| | 00:04 | some graphics as well, and that's
what I want to do with this image here.
| | 00:08 | I have it opened in Photoshop, and
it's called homeBkgd.jpg, and I just want
| | 00:14 | to show you, if I go to Image > Image
Size, that it's a 72 dpi image, and it is
| | 00:21 | an RGB image as well, and it's actually
set up to the height of my document in Flash.
| | 00:28 | So I am going to cancel out of there,
and I am also going to show you this
| | 00:31 | homeForeground.png, because
I want to import this file.
| | 00:34 | This happens to be a PNG file, so it
has varying levels of transparency.
| | 00:38 | So that's going to come across nicely.
| | 00:40 | It is my foreground image and then
lastly, what I want to do is import an
| | 00:45 | Illustrator file, which I
will get to in a little bit.
| | 00:46 | But let me go back into Flash, and the
first thing I need to do is create a new
| | 00:53 | layer, and on this new layer, I
am going to put in the background.
| | 00:58 | So I am going to rename that layer to
background, and I am just going to click
| | 01:02 | and drag it underneath
all of the current layers.
| | 01:05 | So with that layer selected, I am going to
go to File > Import, and Import to Stage.
| | 01:12 | Then I can locate the homeBkgd.jpg.
| | 01:16 | But I do also want to point out all of the
different file formats that you can import.
| | 01:21 | There is quite a few in here. All of the
popular file formats for images, video,
| | 01:25 | and audio are able to be imported into Flash.
| | 01:29 | I am importing a JPEG and a PNG
file, as well an Illustrator file.
| | 01:33 | But I am going to select this file and
click Open, and there it is, on my stage.
| | 01:39 | You can see that graphic.
| | 01:41 | With it selected, if I go to the
Properties panel, you can see that it's an
| | 01:45 | instance of the homeBkgd.
| | 01:47 | But what this is missing are all of the
various properties that you are able to
| | 01:52 | control if it's a movie clip.
| | 01:55 | So what if I want to, say, blur the
background or give it a drop shadow or
| | 02:00 | change its layer mode?
| | 02:02 | Well, I have to convert that into a movie
clip, and that's what I want to do next.
| | 02:06 | Let's open up my Library panel.
| | 02:09 | There is the JPEG, but in general, I
am going to click and drag that into the
| | 02:15 | Library panel to convert this to a symbol.
| | 02:17 | This symbol is going to be called
background, and it's of the type: Movie Clip.
| | 02:23 | Click OK, and now I can see in my
Properties panel that I have sort of full
| | 02:28 | control over this image now.
| | 02:30 | All right, next step.
| | 02:32 | I am going to create a new layer, and
this new layer is for the foreground.
| | 02:38 | With that layer selected, I am going
to go to File > Import, and Import to
| | 02:44 | Stage, and I will locate that PNG file.
| | 02:48 | I will click Open, and then there it
appears on the stage: the image of the lady
| | 02:54 | and the guy with unusually long legs.
| | 02:57 | That's actually not going to be
noticeable when I start animating it.
| | 03:00 | But in general, I am going to do the
same thing that I did earlier, just to click
| | 03:05 | and drag that graphic into the Library
panel and call it foreground, and it is
| | 03:11 | going to be a movie clip as well. Click OK.
| | 03:15 | Now that's set up.
| | 03:17 | The last thing I want to import is
actually going to be a logo from Illustrator.
| | 03:22 | So I want to show you that file.
| | 03:25 | Here I am in Illustrator, and here is
my graphic, and I'd like to point out, in
| | 03:29 | the Layers panel, that there is
only one layer, and it's called Logo.
| | 03:34 | Now, I could have multiple layers with
plenty of graphics, and what will happen
| | 03:39 | is Flash will import all of those
layers separately. Very powerful.
| | 03:43 | In this case, it's just this Logo
Illustrator file that I am going to import.
| | 03:47 | So I am going to go back to Flash.
| | 03:51 | In Flash, select any layer.
| | 03:53 | It really doesn't matter.
| | 03:54 | I am just going to make sure it's not locked.
| | 03:56 | But when I import this Illustrator
file, it's actually going to create the
| | 04:00 | layers for me, so I don't need
to create my layers right now.
| | 04:04 | So I am going to go to File > Import >
Import > Import to Stage, locate that
| | 04:09 | Illustrator file, it happens to be in
the home folder, which is in our assets
| | 04:13 | folder, and I will click Open.
| | 04:16 | Then I am given this import wizard.
| | 04:18 | Now, I can actually
control how this is imported.
| | 04:22 | What I want to do is I will just close
up that layer, but in general, I want to
| | 04:28 | select that layer and select Create
movie clip, because I want to automatically
| | 04:33 | convert this layer into a movie clip,
and then make sure it gets positioned on
| | 04:38 | its own Flash layer. Click OK.
| | 04:41 | There is my layer.
| | 04:44 | You can see that it automatically adds
that layer in my timeline called Logo.
| | 04:50 | Now what I want to do is start
positioning everything a little bit more
| | 04:54 | appropriately, and when you start
dealing with larger graphics, it's really hard
| | 04:59 | to tell what the end user will see.
| | 05:02 | Okay, so it's hard to tell where my stage ends.
| | 05:05 | So what I can do is I can go
to View, and uncheck Pasteboard.
| | 05:10 | If I uncheck that
Pasteboard, I don't see everything;
| | 05:14 | I just see exactly what the user sees,
and what they see is all within this area.
| | 05:20 | But now I can start to position
everything and scale down this logo, position it
| | 05:26 | in the upper-right, use my Selection
tool and start to move some of these
| | 05:31 | graphics around as well.
| | 05:33 | Again, I am just building this layout
that's going to be animated shortly,
| | 05:39 | use my Free Transform tool, sort of
manipulate that graphic kind of like that
| | 05:45 | and lastly, let's hold down the Shift
key and then just move that text into
| | 05:50 | place, kind of like right down there.
| | 05:54 | I can even use my Arrow keys
for repositioning my items.
| | 05:58 | So I'd say everything looks pretty darn good.
| | 06:01 | If you do happen to notice that you
need to edit a graphic that's already
| | 06:05 | imported, well Flash makes it easy,
because what I can do is I can double-click
| | 06:10 | on this movie clip here, which happens
to be the foreground because I want to
| | 06:14 | edit this image in general.
| | 06:16 | So I can go ahead and double-click on
it and what happens is now I am inside of
| | 06:21 | the foreground movie clip, okay.
| | 06:24 | When I am inside of this foreground
movie clip, I can actually select this JPEG.
| | 06:30 | It says it's an instance
of the homeForeground.jpg.
| | 06:33 | But if I right-click on that
graphic, I can then edit this graphic
| | 06:38 | with Photoshop CS5.
| | 06:41 | It opens up that image.
| | 06:43 | Now I can start to adjust it.
| | 06:45 | So, in this case, all I want to do is
use the Dodge tool on some of the midtones
| | 06:52 | to just bring her face out more
and some of this other detail.
| | 06:56 | Again, it's going to be subtle, but
you can always do the edits you need to
| | 06:59 | do in Photoshop, and once you are done with
them, save the file and then go back into Flash.
| | 07:06 | Now, it might be subtle, but you will
be able to see that her face is a little
| | 07:09 | brighter, and now this is all set up.
| | 07:13 | So I am going to click back on Scene 1,
and now you can see that here are all my
| | 07:18 | graphics, and now this is actually
set up for me to do some animation.
| | Collapse this transcript |
|
|
2. Creating AnimationUsing the Timeline| 00:00 | Before you begin animating, it helps
to have a good understanding of how the
| | 00:04 | Flash Timeline works, because
currently, for this project, if I look in the
| | 00:08 | Timeline panel, there is only one frame
in the timeline. And what I want to do is
| | 00:14 | I want to extend out the timeline for
all of my content, each layer, to appear at
| | 00:20 | a certain point in time.
| | 00:22 | So, it's going to build this final image.
| | 00:25 | So in order to do that, what I need
to do is, say, for instance, for this
| | 00:30 | background layer, I can go down to
frame 90, and I can do a right-click, or
| | 00:36 | Ctrl+click if you are on a
Mac, and I can insert frame.
| | 00:40 | Watch what happens when I do that.
| | 00:42 | It extends out the contents of
this layer clear to frame 90.
| | 00:47 | So if I go back down to frame 1, I
will just click right here, and I will hit
| | 00:52 | the Enter key, and I can see the
playhead moved through all of these frames.
| | 00:57 | In fact, if I do a Control > Test Movie
and I test this in Flash, you can see my
| | 01:03 | playhead move through all
of these various frames.
| | 01:07 | It will hit frame 90, and then it restarts.
| | 01:11 | Keep in mind that I actually have
the Bandwidth Profiler turned on, so you
| | 01:14 | can see this process.
| | 01:16 | Again, this spike right
here is all of the content.
| | 01:19 | So I need to extend out the rest of the
contents, so I will close this SWF file,
| | 01:23 | and it's the same process of just right-
clicking on the frame you want to extend
| | 01:28 | the content to and then selecting Insert Frame.
| | 01:31 | That looks pretty good, but what I
can also do is just do a click and drag
| | 01:36 | and select frame 90 for all of those layers,
do a right-click or Ctrl+click and Insert Frame.
| | 01:43 | Now everything is extended out to frame 90.
| | 01:48 | Take a look at these little black dots,
because there is a little black dot on each layer.
| | 01:52 | This is actually known as a keyframe.
| | 01:54 | For instance, if I don't want this
Replay button to appear till later on, all I
| | 02:00 | need to do is click and drag that
keyframe to about frame 90 just right there.
| | 02:07 | Now, that Replay button
doesn't exist until frame 90.
| | 02:14 | So I can start to stagger out this content.
| | 02:17 | I will select this text layer, that
keyframe, and just move that down to frame 50.
| | 02:23 | I will do the same for this
rectangle layer underneath it.
| | 02:27 | I will drag that out to about frame 40,
and then even the trees, what I can do is
| | 02:34 | just click and drag that out to about frame 70.
| | 02:38 | All right, notice now that all I have
in the first frame is the ecostyle studio
| | 02:46 | logo as well as the
foreground and the background.
| | 02:50 | So let's take a look at what this
looks like if I do a test movie.
| | 02:53 | Again, you can see it move through all the
content and notice how the content builds.
| | 03:01 | All right, now what I want to do is I
want to go ahead and add some keyframes
| | 03:08 | and really start to control each one of
these images and graphics a little more.
| | 03:12 | Say, for instance, this logo.
| | 03:14 | I actually want the logo
to be really big initially.
| | 03:18 | So I will just kind of move it to the
center, and with the Free Transform tool
| | 03:23 | selected, I can just expand out the
size of that logo, and I can make it
| | 03:29 | about that size roughly.
| | 03:32 | So, I want it to be that size until about
frame 70, and at frame 70, I want it to be smaller.
| | 03:43 | So, I can do a right-click and
insert a keyframe for frame 70.
| | 03:49 | What I am doing there as I am
saying to Flash I am going to define new
| | 03:53 | properties for this
object at that point in time.
| | 03:56 | So, now I can scale it back down and position
it in the upper right-hand corner. All right.
| | 04:03 | So now this first keyframe tells it
to be pretty large for most of the time
| | 04:08 | until it hits this second keyframe,
and then it pops down into place.
| | 04:12 | Well, what if I want this logo to
appear large for about the first one second,
| | 04:20 | and then I want it to go away entirely.
| | 04:23 | Well, in order to do that, what you
will need to do is do a right-click or
| | 04:28 | Ctrl+click, if you are on a Mac like me,
and what I can do is insert a blank
| | 04:33 | keyframe, because that's all this white is.
| | 04:37 | Sure enough, that takes away the logo
entirely, and it actually doesn't exist
| | 04:42 | from this moment forward.
| | 04:46 | That's basically keyframes in Flash.
| | 04:48 | You can start to adjust this even further.
| | 04:50 | In fact, I am going to
clean this up a little more.
| | 04:53 | I am going to move this text layer down
so the text layer and the rectangle are
| | 04:57 | close to each other.
| | 04:59 | But you will often run into a case
where you are going to want to extend out
| | 05:03 | your timeline even further.
| | 05:05 | Initially, what I did is I inserted frames.
| | 05:08 | If you want to insert frames within any part
of the timeline, you can easily do that as well.
| | 05:14 | So I could just do a click and drag,
and I can select a chunk of frames.
| | 05:19 | So let's select about 10 frames.
| | 05:22 | With those 10 frames selected, what I
can do is I can insert 10 more frames.
| | 05:27 | So I am going to do a right-click,
and I am going to select Insert Frame.
| | 05:33 | Look what that does is that pushes
everything down, and now I am about at frame
| | 05:37 | 100 or 101 for my content.
| | 05:40 | But again, it extended out this
section of my timeline to allow for more
| | 05:45 | animation, because ultimately,
that's what I want to do is have some more
| | 05:48 | animation room in here.
| | 05:49 | So remember, it just a click-and-drag and
you can select as many frames as you want.
| | 05:54 | I will do a right-click and Insert Frame.
| | 05:58 | Conversely, what you can also do is
remove frames if you need to remove frames
| | 06:02 | as well, so your animation goes faster.
| | 06:05 | But again, Insert Frame, and that
stretches out your animation even more.
| | 06:10 | Okay, I'll finish the cleanup because
I can go ahead and grab this foreground
| | 06:15 | keyframe and move that down to right
about frame 24 because I want this logo to
| | 06:20 | appear, and then it goes away the
same time you see this foreground image.
| | 06:27 | So that's an overview of the timeline in Flash.
| | 06:29 | I want you to remember to always keep
each graphic on its own layer, because it's
| | 06:33 | going to be easier to work with, as
well as some tips, as far as staggering out
| | 06:38 | your graphics so they appear
when you want them to appear.
| | Collapse this transcript |
| Making an object move| 00:00 | Most of these graphics are now
set up and ready to be animated.
| | 00:04 | Let's take, for instance, this background.
| | 00:07 | Well, I want to animate in this background
using a certain type of tween, and then I'm
| | 00:12 | also going to animate in this
foreground as well, including some other graphics
| | 00:17 | using a different type of tween.
| | 00:20 | And you are probably wondering, what is a tween?
| | 00:22 | Well, it's moving an object
between one point and another.
| | 00:26 | What you need to do, if you want to create a
tween, is you need to define those two points.
| | 00:33 | So currently I have this first keyframe
right here, which defines the position,
| | 00:38 | location, and various other
properties for this background.
| | 00:43 | So my next step is to insert another keyframe
that defines this object at a different place.
| | 00:50 | But before I even do that, I need to just
make sure this is the only graphic on this layer.
| | 00:57 | So again, the goal is to always have
each graphic on its own layer, if you're
| | 01:02 | going to animate it.
| | 01:03 | That's rule number one.
| | 01:06 | Rule number two is to make sure
that it is an instance of a symbol.
| | 01:11 | So, if I select this graphic, I can
look in my Properties panel, and it says
| | 01:15 | it's an instance of the background.
| | 01:18 | So again, it's the only thing on
the layer, and it is an instance of a
| | 01:23 | movie clip in this case.
| | 01:25 | So now I can go ahead and
define the second keyframe.
| | 01:31 | So what I am going to do is I'm going
to select, say, about frame 24, and I'm
| | 01:38 | going to insert a keyframe.
| | 01:40 | It adds that keyframe right there.
| | 01:45 | And what this keyframe does is it
stores information and various properties for
| | 01:49 | this object at that point in time.
| | 01:52 | So what I can do is I can just
go ahead and move this background,
| | 01:56 | move it over kind of like that.
| | 01:59 | Okay, so that's what's
stored in this keyframe now.
| | 02:02 | So the first keyframe, it's right here;
| | 02:04 | the second keyframe, it's at this location.
| | 02:08 | Now all I need to do is create a
tween in between those two keyframes.
| | 02:15 | So you can do a Ctrl+click on the
Mac or right-click, and I can select
| | 02:20 | Create Classic Tween.
| | 02:22 | So this is what I'm going to create initially.
| | 02:24 | It's just a classic tween. And what
happens is Flash adds this tween in -
| | 02:30 | it's actually this arrow - that basically
says it's moving from point A to point B.
| | 02:35 | So if I hit the Enter key, I
can see it slide across the stage.
| | 02:40 | That's exactly what I want, and it looks great.
| | 02:43 | I can go down to the second keyframe and
maybe move this background a little less,
| | 02:48 | so it's not as drastic of a move.
And I can go ahead and click on Frame 1 and
| | 02:53 | hit Enter, and it moves slower.
| | 02:56 | Okay, so it doesn't move as far.
| | 02:58 | Another thing I can do is I can even
select this keyframe and move it clear
| | 03:03 | down here to the end.
| | 03:05 | Okay, now it will constantly move, even
as these other graphics appear as well.
| | 03:12 | So you can manipulate where the keyframe
is, as well as what is on this keyframe,
| | 03:17 | such as the position.
| | 03:19 | Pretty much anything in the
Properties panel can be animated.
| | 03:23 | In this case, all I am
animating is the position.
| | 03:27 | All right, but again, that
enables me to animate the background.
| | 03:31 | I can see that background get moving.
And what I want to do next is I want to
| | 03:37 | animate this foreground.
| | 03:38 | So I'm going to go ahead and unlock the
foreground, and I'll lock the background.
| | 03:44 | In fact, I'll just take this first keyframe
and drag it down here to the very first frame.
| | 03:50 | And want I'm going to do is I'm going
to use the new motion tween available
| | 03:54 | in Flash CS4 and CS5.
| | 03:56 | All I'm going to do is, again, remember,
that that I do have this graphic on its
| | 04:04 | own layer, and it is an
instance of a movie clip,
| | 04:07 | so those are my two rules I need to
keep in mind, and then all I need to do
| | 04:10 | is do a right-click.
| | 04:11 | I'm going to select Create Motion Tween.
| | 04:16 | It turns this layer blue, and it's
basically saying, hey you know what? I'm now
| | 04:21 | ready to be animated.
| | 04:23 | So that's all I have to do
is I just have to turn it on.
| | 04:26 | I can go down, maybe scrub down to the
end of this timeline here, and then all I
| | 04:31 | need to do is move the graphic.
| | 04:33 | I am going to go ahead and turn off
these other layers because it's kind of hard
| | 04:37 | to see what I'm animating.
| | 04:39 | But I moved this graphic, and look what
it does is it gives me this motion line.
| | 04:43 | This is actually a motion path. But you can see
how I can adjust the distance that it animates.
| | 04:49 | It gives me this motion path, a nice
visual showing me where it's moving.
| | 04:53 | And not only that, it's editable as well.
| | 04:58 | What I can do is I can actually grab
that end motion and move that on down.
| | 05:03 | Say, for instance, for the start
position, I can grab that end of the motion
| | 05:09 | path and stretch that out.
| | 05:11 | So now it starts at a different
location, actually further to the right.
| | 05:15 | I don't have to keep bouncing between
keyframes in order to manipulate the
| | 05:21 | motion, because again, I
have this nice motion path.
| | 05:24 | So I'm going to go ahead and hit enter,
and you can see that sort of slowly
| | 05:29 | move across the screen.
| | 05:32 | Let me just kind of move this over to
the right a little bit more, and now it's
| | 05:36 | going to move at a
different rate than the background.
| | 05:39 | But I'm going to go ahead and
add a couple more tweens in here.
| | 05:43 | Again, I'll use the motion
tween because, let's face it,
| | 05:46 | it is easier. And what I can do is I can maybe
move this blank keyframe down to about frame 60.
| | 05:54 | For this logo, it's the same process.
| | 05:56 | I want to make sure it's a movie clip
in this case, or at least an instance of
| | 05:59 | a symbol, and it's on its own layer,
and then I can just right-click and
| | 06:04 | Create Motion Tween.
| | 06:07 | From there, what I can do is
determine where I want this logo to move.
| | 06:11 | So I can just click and
drag it over, just like that.
| | 06:16 | Point A, point B, and then it disappears.
| | 06:20 | So I might even want to push this clear
off of the stage, and I'll just use my
| | 06:25 | arrow keys to finish this out.
| | 06:26 | I'll hold down the Shift key move to move
it in increments of 10, but now I have
| | 06:32 | that sort of sliding out.
| | 06:33 | Now this is really starting to come together.
| | 06:37 | That's just a quick example of
how to create two different tweens:
| | 06:41 | the Classic tween and the Motion tween,
but really my next step is to start to
| | 06:45 | fine-tune this animation.
| | Collapse this transcript |
| Fine-tuning animation for depth| 00:00 | Once you have some basic animation in
place, probably what you are going to
| | 00:04 | want to do is refine that animation to
potentially even simulate a real-world experience.
| | 00:11 | In this particular case, if I just turn
off some of the layers and just show the
| | 00:17 | foreground and the background, if I hit
Enter, you can see the background moves
| | 00:22 | faster than the foreground, and in a
real-world scenario, this wouldn't happen.
| | 00:26 | I need the foreground to move faster.
| | 00:30 | I am also going to add some additional depth.
| | 00:32 | So the first thing I am going to
do is lock down that foreground and
| | 00:36 | for that background,
| | 00:38 | it, again, moves awfully fast,
| | 00:40 | so I want to come down here to this
last frame, this keyframe right here, and
| | 00:46 | since this is a classic tween, I need to
actually navigate down to that keyframe,
| | 00:51 | and then I am just going to go ahead and
move this image back to the right so it
| | 00:56 | doesn't move as much.
| | 00:59 | It's just going to be the fine art of moving
that image and then scrubbing the Timeline.
| | 01:04 | So all I am doing is clicking up here
where these numbers are, and I am really
| | 01:08 | able to determine how much this moves.
| | 01:11 | So I can either modify the first
frame or the last frame, but now I am
| | 01:16 | actually getting more of that depth.
And that's looking pretty good, but there
| | 01:19 | is more I can do as well.
| | 01:22 | With any object, if it is in the
Properties panel, then it can be animated.
| | 01:30 | So what I want to do is I am going to
add a blur to the background, because I
| | 01:34 | want it to start out pretty sharp and
then blur, and that's going to actually
| | 01:40 | create some nice depth.
| | 01:42 | For the second keyframe, I am going
to go ahead and select that background
| | 01:46 | instance. And under Filters, I am going to
add a new filter, and this is going to be Blur.
| | 01:53 | I am going to change the Quality from
Low to Medium, and I am just going to
| | 01:57 | click and drag to the right to
increase the blur of that background.
| | 02:01 | That looks pretty good. In fact,
let's type in about 15 pixels.
| | 02:06 | All right, and if I scrub back, notice
how again it's clear. And if I hit Enter,
| | 02:14 | since I have added that nice
filter, the background blurs out.
| | 02:20 | Since I am creating this depth, and I
am playing with the focus of your eyes,
| | 02:26 | this foreground image actually
needs to be blurred out, since you are
| | 02:32 | focusing on the background.
| | 02:33 | So I am going to select that graphic, and it's
going to be the same process of adding a blur.
| | 02:38 | Let's make the Quality Medium, and
let's make the blur about 15 pixels.
| | 02:44 | Now you get that nice depth,
| | 02:47 | focusing on the background, and I'll
hit the Enter key, and now you can see the
| | 02:52 | background blur out, and then
the foreground should sharpen.
| | 02:56 | I do need to actually select the
second keyframe here, and there we go.
| | 03:01 | Let's bring that into focus. There we are.
| | 03:03 | So let's try this one more time. Hit Enter.
| | 03:06 | Background blurs out, and then you
can see that image get a lot sharper.
| | 03:11 | All right, so that's looking pretty
good, but my next step is to really have
| | 03:15 | this slow down and rest into place,
| | 03:18 | because right now it just all of a
sudden stops, and I want to control the
| | 03:22 | easing, as it's known.
| | 03:23 | So I want it to ease out, or slow down
slowly as it reaches this second keyframe here.
| | 03:29 | I am going to select this tween, and
if I look at the Properties panel, I can
| | 03:35 | actually control the tween right in here.
| | 03:38 | So I want to change the Ease to Ease Out, so
that means clicking and dragging to the right.
| | 03:45 | So ease out 100.
| | 03:48 | Now it will really slow down into place.
| | 03:51 | I am going to do the same thing for
this classic tween because you can do with
| | 03:54 | classic or a motion tween.
| | 03:56 | Going to the Tweening properties and
clicking and dragging and adjusting that
| | 04:01 | ease, so now it eases out as well.
| | 04:03 | All right, so I'd say that's looking
pretty darn good, and the last thing I am
| | 04:10 | going to animate is this logo, because
again, if it's in the Properties panel,
| | 04:17 | it can be animated.
| | 04:18 | With that layer selected, I am going
to hold down the Shift key and press the
| | 04:23 | arrow to the right, to kind of bring
that into place like that. There it is.
| | 04:28 | I want this logo to fade out, so it's
going to start out, just as you see here,
| | 04:33 | and then it's going to fade out, and
it should be totally gone by the time it
| | 04:38 | reaches this second keyframe.
| | 04:40 | If it's in the Properties
panel, you can animate it,
| | 04:42 | so I am going to select that graphic.
| | 04:44 | I am going to go to Color Effect,
and I am going to change the Color
| | 04:49 | Effect to Alpha. And from there, I can
adjust the alpha of this graphic, which
| | 04:54 | is the transparency.
| | 04:55 | I can take that down, and
you can watch it disappear.
| | 04:59 | Again, it's 100% right there,
and now we can see it fade out.
| | 05:03 | You get the focus on the two people, and
the next step is to focus on the message as well.
| | 05:11 | So I am going to go ahead and do some
cleanup to these two layers, because all
| | 05:16 | that happens here is this text just
pops in and so does the rectangle.
| | 05:22 | So I will just click and drag this
keyframe over, and I am going to make sure
| | 05:26 | this is in the right position,
| | 05:28 | because I am not only going to shrink
up using my Free Transform tool, I am
| | 05:33 | going to decrease the height of this
bar right here to kind of fit that text
| | 05:38 | just like that, and let's turn on that.
| | 05:42 | So that's looking a lot better.
| | 05:44 | My graphics are in place, and
I will create a motion tween.
| | 05:48 | So it's going to start, potentially.
| | 05:50 | I will just click and drag it so it will
off the stage to the right, and in order
| | 05:56 | to see the right side, what I can do is
I can change the view to Fit in Window,
| | 06:02 | and now I can sort of drag it off
right-hand side like that. And then I can
| | 06:08 | scrub in to about frame 80, then
I can position this into place.
| | 06:13 | Now remember, I don't have to add a
keyframe. Flash does that for me automatically.
| | 06:18 | It adds that keyframe right there,
and now I can see that that slides into
| | 06:22 | place just like that.
| | 06:24 | I am going to do roughly
the same thing for the text.
| | 06:27 | I am going to create a motion tween, and
it's going to be positioned to the left
| | 06:34 | and about at frame 80.
| | 06:37 | I want it to slide in, so really, it's
just a matter of selecting it and sliding
| | 06:40 | it in, kind of like that.
| | 06:42 | All right, so that slides in just
like that, and then my other graphics
| | 06:48 | appear, and let's just make sure the trees
will also appear as well as that Replay button.
| | 06:54 | So I'd say everything looks good.
| | 06:57 | The last edit I am going to do is just
to make this text pop off a little more.
| | 07:01 | I can add a drop shadow and again,
I am just going to use Filters.
| | 07:04 | Add a drop shadow, and now
I can see that text better.
| | 07:08 | In fact, let's blur it out a little
more to kind of set it off some more.
| | 07:12 | That's much better.
| | 07:13 | Change the Quality to Medium.
| | 07:16 | Those are the refinements I want to do
this simple animation of graphics moving
| | 07:20 | across the screen, but now we
have created a lot more depth.
| | 07:24 | In fact, if I do a test movie, you will
see that depth that we have created and
| | 07:28 | then that smooth motion as well.
| | Collapse this transcript |
| Creating and animating a mask| 00:00 | A great way to reveal content is by
creating a mask and then animating it, and
| | 00:06 | that's what I want to do with these
branches is I want to create a mask that
| | 00:10 | animates and then reveals this branch as
if it's growing. And I want to do it for
| | 00:15 | both of them as well.
| | 00:17 | But the first thing I need to do is I
need to put each one of these branches on
| | 00:22 | its own layer, and currently
they're both on this Trees layer.
| | 00:28 | An easy way to put items on their own
layer is just by doing a Ctrl+Click or
| | 00:35 | right-click, and you can distribute to layers.
| | 00:40 | When I do that notice that it does put
both of these branches on their own layer
| | 00:45 | and actually names them
what the movie clip is called.
| | 00:47 | So these are the - sort of the
tree design. That looks good.
| | 00:50 | I don't need this layer, so I'll just
select it and then click Delete, and now I
| | 00:55 | can start building a
mask for this branch up here.
| | 01:00 | I'm going to first create a new layer,
and I'm going to call this layer, mask.
| | 01:06 | Then I'm going to go ahead and select
the Oval tool, and I'm going to draw a
| | 01:11 | circle, and I'm just going
to pick any color I want.
| | 01:13 | It really doesn't matter because
you are never going to see this color.
| | 01:17 | I usually select a green,
and you can adjust the alpha.
| | 01:21 | So I'll make that about 50%,
and then I'll just draw a circle.
| | 01:27 | So this is going to be my mask.
| | 01:29 | Use my Selection tool, and I'm going
to drag it into the Library so I can
| | 01:34 | convert it to a movie clip symbol and
again, this is just going to be my mask.
| | 01:39 | So that's what I'm going to
call it, mask. Select OK.
| | 01:43 | So that is my mask movie clip on this layer
that's above this branch layer, this tree design.
| | 01:51 | And in order to mask out the content
below this circle, all I need to do is
| | 01:57 | right-click and select Mask.
| | 02:01 | That will mask out everything outside of
that circle or whatever is on this mask layer.
| | 02:07 | And notice the icons change, and
then it locks down those two layers.
| | 02:11 | So in order to move the mask,
you're going to have to unlock it.
| | 02:16 | And now you can see why I made that
circle semitransparent because you still
| | 02:19 | want to see the content.
| | 02:21 | So I want to go ahead and have my mask
exist off the stage, and I'll choose my
| | 02:27 | arrow keys to kind of position it
off the stage, kind of down below.
| | 02:30 | And what I want to do now is I want to
animate this mask, and again, this is a movie clip.
| | 02:36 | It's on its own layer, so it should animate.
| | 02:39 | So all I need to do is do a right
-click and Create Motion Tween.
| | 02:44 | It activates this Motion tween, and I can
scrub down, say for instance about frame
| | 02:50 | 59 roughly, and then I can move this circle.
| | 02:57 | I'm not only going to move this circle,
but I'm also going to use the Free
| | 03:01 | Transform tool and then make it
larger as well, because I basically want to
| | 03:06 | cover this entire branch, just like that.
| | 03:09 | All right, so it adds that keyframe.
| | 03:11 | If I scrub up back, you can see it animate.
| | 03:15 | That looks like it will be a pretty good mask.
| | 03:17 | But again, if I want to see it mask, all
I need to do is lock those two layers.
| | 03:22 | Now if I scrub back and scrub forward,
you can see that branch being revealed.
| | 03:29 | I'll even hit the Enter key, and
we can watch it closer to real-time.
| | 03:33 | We can see that branch being revealed.
| | 03:35 | All right, so far so good.
| | 03:40 | And note, if you ever want to move a
keyframe, what you need to do it is hold
| | 03:44 | down the Command key, and then
you're able to select that keyframe.
| | 03:50 | So if I want to cut this
in half so it was faster,
| | 03:53 | I can click and drag that on down.
| | 03:55 | So now this mask is
going to happen a lot faster.
| | 03:58 | I'm going to do the same thing
for this tree branch down here.
| | 04:02 | So it's going to be the same process of
adding a new layer, calling it mask, and
| | 04:08 | then, from here, what I can do is bring
on that mask circle that I made earlier.
| | 04:14 | Position it sort of off the screen.
| | 04:17 | Create a motion tween for it and notice
how my order is a little bit different
| | 04:21 | because I can create a motion tween right now
by moving this mask later down in the timeline.
| | 04:30 | So I have already created this motion
tween, but I haven't applied the mask.
| | 04:35 | And I just point that out to show you
that you can basically create a motion
| | 04:39 | tween and then convert it into a mask.
| | 04:43 | Okay, just like that.
| | 04:47 | And now we have our two branches growing.
| | 04:50 | Let's go ahead and watch this.
| | 04:51 | I'll do a Control > Test Movie.
| | 04:56 | It plays through, and you
could see that branch grow.
| | 04:59 | Okay, I'm going to go ahead and turn
off the Bandwidth Profiler, and we can
| | 05:05 | watch a replay again, and we will
watch it to play through one more time.
| | 05:09 | Now there could be as many layers
as I want that are being masked.
| | 05:13 | It really doesn't matter. It doesn't
have to be one branch or one item.
| | 05:17 | It could be a whole entire
scene that's being masked.
| | 05:20 | But this was a quick example showing
you how easy it is to mask out content and
| | 05:26 | then animate it as if it's being revealed.
| | Collapse this transcript |
|
|
3. Using Prebuilt AnimationUsing motion presets| 00:00 | A great way to produce quick animation is by
using the presets built into Flash already.
| | 00:07 | And in this file, I currently have
some graphics set up and notice that I
| | 00:12 | have some of these layers locked,
because what I want to animate are these
| | 00:17 | words sitting right here.
| | 00:19 | They are all on separate layers.
| | 00:22 | So the first thing I need to do is
extend out the Timeline for all of these
| | 00:26 | layers, so then I can begin animating.
| | 00:29 | So I'll just scrub down to about frame
110, and I'll just do a click-and-drag to
| | 00:34 | select all those frames for all those layers.
| | 00:38 | And I can do a Ctrl+Click or right-click
if you are on PC, and I can Insert Frame.
| | 00:45 | So that extends out the
timeline for all these layers.
| | 00:49 | Now I'm just going to grab each one
of these keyframes for each word, and
| | 00:53 | just start to space out some of these graphics
because I want to focus on the shoes movie clip.
| | 01:04 | Notices that it's on its own layer and
if I select it you can see that it's an
| | 01:07 | instance of Movie Clip.
| | 01:09 | So I want to definitely make sure
those two things are in place before I do
| | 01:13 | any sort of animation.
| | 01:14 | But now I'm going to go ahead and select
that movie clip, and I'm going to go to
| | 01:19 | Window and open up the Motion Presets panel.
| | 01:23 | Here's my Motion Presets panel, and if
you open up the Default presets folder,
| | 01:29 | you'll see a very long list of
animation that you can choose from.
| | 01:35 | So there are bounces, some fly-in and blurs.
| | 01:40 | There are some regular fly-ins,
which are nice and then some other really
| | 01:44 | unique ones as well.
| | 01:46 | So multiple-bounce, pulse, even smoke.
| | 01:49 | So I encourage you to check out all of
these really cool motion presets available.
| | 01:54 | But in my case, what I want to use
is just this fly-in-blur bottom.
| | 01:59 | So it's going to fly in from the
bottom and kind of blur in and then sharpen.
| | 02:04 | So I'm going to select that movie clip,
go to my Motion Presets panel, select
| | 02:09 | the preset and then click Apply.
| | 02:12 | I'm going to move this Motion
Presets panel off to the side, and you'll
| | 02:16 | notice in my Timeline,
| | 02:18 | it adds that motion preset, it's
actually that motion tween, and if I scrub through
| | 02:23 | you can see my text actually sort of
sliding off of the screen. And of course,
| | 02:28 | I don't want this, but I can easily select
that path and then reposition that object.
| | 02:34 | So I can just move that path on down,
and now I can see that it comes in from
| | 02:39 | the bottom and then rests into place.
| | 02:42 | I actually want this graphic to actually
appear here a little longer beyond the 15th frame.
| | 02:47 | So I'm going to select frame 30 and do a
Ctrl+Click, or right-click if you're on
| | 02:53 | PC, and Insert Frame.
| | 02:57 | What that does is that extends outs that object,
| | 03:00 | makes sure it exists beyond frame 15, so the
user has a chance to read it.
| | 03:06 | Next up is jeans.
| | 03:08 | So I'll click and drag that movie clip
down, and with it selected, I can go to the
| | 03:13 | Motion Presets panel, select fly-in-
blur from the left and click Apply.
| | 03:20 | And I'll scrub through in my Timeline
and stop right here on this second one and
| | 03:26 | regardless of where I am, I can always
select that motion path and then move that
| | 03:31 | object into place, just like that.
| | 03:34 | Now we can see it blur in from the left side.
| | 03:37 | And again, I want to extend out its
Timeline by clicking on the 60th frame and
| | 03:43 | inserting a frame, just like that. Looks good.
| | 03:47 | Next one, shirt is going
to appear after the jeans.
| | 03:52 | I'll select that graphic,
| | 03:54 | select the preset I want to use, which is
going to blur from the right, and I can
| | 04:00 | click Apply, and then it adds it.
| | 04:02 | So you can see that it's pretty easy to
add these motion presets and then adjust
| | 04:07 | them just by moving the motion path.
| | 04:10 | So it does slide in and rests into place.
| | 04:17 | I'll extend out its Timeline as well.
| | 04:20 | I'll just insert a frame for that layer,
and now my object exists a little longer.
| | 04:25 | Okay, the last one I'm going to do deal
with is this style word, and I'm going
| | 04:28 | to have it come in a little more unique.
| | 04:30 | So I can pick maybe
another one of these down here.
| | 04:34 | Let's take, there's a spiral-3D, a
swoosh, and what I want to use is a zoom-in-2D.
| | 04:42 | So I'll select that preset, click
Apply, and then it adds that preset.
| | 04:50 | So you can see it comes
into place, just like that.
| | 04:55 | Notice that it actually added
multiple keyframes in there.
| | 04:58 | And you can extend or decrease the
length of these motion tweens if you want to.
| | 05:06 | And watch what happens if I do that.
| | 05:07 | I can actually sort of scrunch it
up, make it smaller, and it will
| | 05:11 | proportionately compress all of those keyframes.
| | 05:15 | Conversely, I could stretch it out, and
you can see it stretches out those keyframes.
| | 05:19 | So you really have the flexibility
you need if you're adjusting any of
| | 05:22 | these motion tweens.
| | 05:24 | And I'm just going to make sure
it ends right here at frame 110.
| | 05:30 | Everything seems to be looking pretty good.
| | 05:32 | So I'll just do a Control > Test Movie,
and I'm going to test it in Flash, and
| | 05:37 | we can see all of that text sliding in.
| | 05:42 | I'd say pretty easy to do.
| | 05:44 | Again, once these graphics are set up,
it really takes mere minutes to add any
| | 05:49 | motion preset that you want to
really bring some life to your project.
| | Collapse this transcript |
| Creating and reusing custom presets| 00:00 | Motion presets are very powerful,
allowing for quick animation.
| | 00:04 | But the thing I like about them most is
the fact that I can make and save out my
| | 00:10 | own motion presets for reuse later.
| | 00:13 | That's what I want to do
with this movie clip here.
| | 00:15 | More than - this is the movie
clip that I want to animate.
| | 00:20 | I want to animate it
sort of blurring into focus.
| | 00:23 | So, that's the animation I want to
build, and then I want to reuse it later.
| | 00:26 | So, I'm going to select this movie clip,
and in the Properties panel, down under
| | 00:32 | Filters, I can click this Add Filter button.
| | 00:35 | I'm going to add a blur, and I'm going
to change the Quality from Low to Medium.
| | 00:43 | Then the Blur amount is
going to be about 30 pixels.
| | 00:46 | So, I'll type in 30, and notice how that
movie clip gets blurred out completely.
| | 00:51 | So, that's its starting point.
| | 00:54 | Now what I can do is I can go to my
Timeline, and I will do a right-click or
| | 00:58 | Ctrl+Click if you're on a Mac.
| | 01:01 | From here, I'm going to
select Create Motion Tween.
| | 01:04 | That turns that layer blue.
| | 01:07 | Again, I have my starting
keyframe with it blurry.
| | 01:10 | So I'm going to go into about frame
15, right when this word shows up.
| | 01:16 | That's when I want this to become sharp.
| | 01:19 | So, I will select that movie clip, go
to my Properties panel, under Filters.
| | 01:24 | I'll change the blur to zero.
| | 01:27 | You can see it becomes sharp.
| | 01:28 | So, scrub back, and if I hit the Enter
key, you can see it blur in. Very nice!
| | 01:36 | That's exactly what I want.
| | 01:38 | In fact, I like that so much,
I want to reuse it later on.
| | 01:42 | If you want to reuse any motion tween,
all you need to do is select that motion
| | 01:47 | tween, do a right-click, and
then Save as Motion Preset.
| | 01:51 | I'll select that, and I'm
going to save this as Blur In.
| | 01:57 | Select OK. Now I'm going to go to Window,
and open up my Motion Presets panel,
| | 02:05 | because, just below the Default presets
folder, if I close it, you'll see Custom Presets.
| | 02:11 | So here's where all your
custom presets will be listed.
| | 02:14 | So, Blur In is what I want to use, actually
for another graphic that I'm going to bring in.
| | 02:20 | So, I'm going to close the Motion Presets panel.
| | 02:23 | I'm going to create a new layer,
and this is just going to be called
| | 02:27 | environmentally friendly, because on this
layer, I'm going to drop in another graphic.
| | 02:37 | This other graphic is in my Library
panel, in the Assets folder. Here's my
| | 02:42 | graphic I want to use, and I'll drop
it right on the stage, right about here.
| | 02:49 | I actually want it to appear later.
| | 02:52 | So, I'm going to click and drag this
keyframe all the way down, because I want
| | 02:56 | it to appear right down here when
you see this word "style" come in.
| | 03:02 | So, that's where I want it to appear.
| | 03:05 | At that point, I don't want to
see that "more than" word either.
| | 03:10 | So what I can do is always grab that end
and scoot it in to right about frame 90.
| | 03:17 | So now that goes away, and then
there's my word: environmentally friendly.
| | 03:22 | So, to apply that motion preset that I
made earlier, all I need to do is select
| | 03:28 | that movie clip, go the
Window, down to Motion Presets,
| | 03:33 | open up the Motion Presets panel,
| | 03:35 | select that Custom presets, and click Apply.
| | 03:39 | I'll close that panel.
| | 03:43 | Notice how it will extend out that
layer quite a distance, and that's because
| | 03:49 | that's how long the motion
preset was that I made earlier.
| | 03:52 | But I can always easily grab that end
and bring it on in and adjust it accordingly.
| | 03:57 | So I can have it end at about frame 110.
| | 04:02 | If I want to adjust it further, I can
always hold down the Command key to select
| | 04:08 | that keyframe, and then
adjust that keyframe as well.
| | 04:12 | So I can have it blur over
sort of a longer period of time.
| | 04:16 | But again, you can see that
it applies that motion preset.
| | 04:19 | That text comes in, that movie clip,
and then it displays exactly right.
| | 04:26 | I didn't have to animate this again.
| | 04:28 | I just saved out a motion
preset, and then applied it to it.
| | 04:32 | Really take advantage of
making your own custom motion presets,
| | 04:37 | because you'll save a lot of time, and
you're still able to fully modify them
| | 04:41 | if you want to, as well.
| | Collapse this transcript |
|
|
4. Simulating Real-World MovementCreating animation inside animation| 00:00 | The great thing about symbols is
that they contain their own timeline.
| | 00:04 | That means you can animate the contents of
the symbol while animating the symbol itself.
| | 00:10 | And that's what I am doing with this fish.
| | 00:12 | I can have the fins flap while
it animates across the screen.
| | 00:18 | So I have this Background layer locked,
and what I am going to do is I am going
| | 00:22 | to select all the parts of this
fish and drag it into the library.
| | 00:27 | And I'm going to convert the convert this
to a movie clip, and it can be called fish.
| | 00:33 | So there's my movie clip. So if I double-
click on this fish, notice that I have
| | 00:39 | a new timeline right in here.
| | 00:41 | And notice that I'm
inside of the fish movie clip.
| | 00:45 | So let me just zoom in on the contents here.
| | 00:49 | So, notice it contains different movie
clips and my first goal is to put all of
| | 00:55 | these movie clips on their own
layer because they're all on layer 1.
| | 00:59 | Well, what I can do is with my Selection
tool, I am going to select all these graphics.
| | 01:04 | I will do a right-click,
and I'll distribute to layers.
| | 01:11 | That takes all the content
and distributes it to layers.
| | 01:14 | So I have the fin, the body, and then the tail.
| | 01:17 | In fact, I don't even need this layer 1,
so I'll click that trashcan and delete it.
| | 01:23 | So I do want to animate couple of
different body parts, so I am going to go
| | 01:27 | ahead and extend out the timeline for
these three layers to about frame 15, just
| | 01:33 | by doing a right-click, and Insert Frame.
| | 01:36 | Currently, nothing is happening.
| | 01:38 | I am hitting the Enter key and nothing
is going on, but I do want to animate,
| | 01:44 | starting with the fin.
| | 01:46 | So I want the fin to
actually pivot from the right side.
| | 01:50 | So in order to do that, I need to
move this registration point right here.
| | 01:55 | So I am going to go ahead and select
my Free Transform tool. I'm able to
| | 02:00 | move that registration point just
to the right side, just like that.
| | 02:05 | And now, when I scale it, or whatever,
you can see that it's going to pivot
| | 02:09 | it from that point. I have it set up.
| | 02:14 | Now all I need to do is do a right-
click, and create a motion tween, so it
| | 02:22 | turns that layer blue.
| | 02:24 | Now, in about 7 frames, well
that's when I can adjust this.
| | 02:30 | So maybe I'll sort of scrunch it in,
and maybe I'll even skew it so if I
| | 02:34 | roll over that line right there, I
can sort of skew it down if I want to.
| | 02:40 | Something like that, so it animates at an angle,
| | 02:42 | so starting position, ending position.
| | 02:46 | And then I need to scroll out to frame
15 and then bring that back into place,
| | 02:53 | kind of like that.
| | 02:59 | Ending position. Starting position.
| | 03:02 | We can see that fin flap.
| | 03:03 | Looks pretty darn good.
| | 03:04 | Now, let's go ahead and take the tail,
and we're going to do the same thing.
| | 03:08 | Again, using Free Transform tool, I can
move that registration point, just like that.
| | 03:14 | I'll do a right-click and create a motion tween.
| | 03:19 | And it's the same process of going
in about 7 frames and then sort of
| | 03:24 | scrunching up the tail.
| | 03:26 | Let's make it a little more
dramatic, maybe kind of like that.
| | 03:30 | And I can skew it if I want to put it at
an angle and then frame 15, I can bring
| | 03:36 | it back like that and then stretch it back out.
| | 03:39 | And notice how the ending frame
and the first frame are the same.
| | 03:43 | You can also use your Transform panel.
| | 03:47 | So if go to Window, down to Transform,
I can open up that Transform panel.
| | 03:52 | And as you'll notice, the width isn't
quite 100%, so I can type into 100% right there.
| | 03:59 | Notice this skew. It says 1.8.
| | 04:01 | Well, I want that to be 0.
| | 04:05 | I can enter in 0, right there.
| | 04:06 | So if you want exact control
you can use your Transform panel.
| | 04:10 | But what I have going on now, if I just
hit the Enter key, you can see that the
| | 04:15 | fin and the tail are kind
of flapping appropriately.
| | 04:18 | So let's go back to scene 1.
| | 04:19 | I am going to click on scene 1.
| | 04:22 | And my timeline in scene 1 is just 1 frame.
| | 04:28 | So if I do a test movie, we should see
that fish animate. And I'm pointing that
| | 04:36 | out to you because it shows that the
timeline for a movie clip is independent
| | 04:42 | of the main timeline.
| | 04:44 | I can have this be a pretty robust
animation, and yet it will play through,
| | 04:49 | regardless of what's going
on on the main timeline.
| | 04:54 | So my next step is to move
this fish across the screen.
| | 05:00 | But what I am going to do is I'm
actually going to take this fish right here,
| | 05:06 | and I'm going to drag him into the library.
| | 05:09 | And I'm going to make this new movie clip
symbol, and I am going to call it fish animation.
| | 05:17 | This is going to be a symbol that's going
to contain my fish animation. Select OK.
| | 05:23 | Now, I am going to just change
my view so I can see everything.
| | 05:27 | So I'm going to do a Show All.
| | 05:29 | Now I can see the entire
screen, all the content.
| | 05:33 | And what I want to do now is just kind of
position this sort of off to the side over here.
| | 05:40 | But remember, this is my fish
animation movie clip, and I haven't
| | 05:44 | animated anything in here.
| | 05:45 | So I am going to double-click on that fish,
and this is the fish animation movie clip.
| | 05:51 | And what I can do in this movie
clip is I can animate this fish.
| | 05:56 | So I am going to animate him across the
screen, let's say in about to 30 frames.
| | 06:01 | So I'll extend the timeline
by selecting Insert Frame.
| | 06:06 | And starting position is going to
kind of off the screen over here.
| | 06:12 | And I can go ahead and do a right-click,
and create a motion tween, because I
| | 06:18 | want him to move from over here,
clear over to about frame 30.
| | 06:23 | So now I can drag him right over
here to this side of the screen.
| | 06:30 | And if I scrub the timeline,
you can see the fish go.
| | 06:33 | In fact, if I hit Enter, you
can see he goes pretty fast.
| | 06:36 | So I am going to go ahead and extend
out this timeline just by clicking and
| | 06:40 | dragging on the right side.
| | 06:42 | So there's my fish moving across the screen.
| | 06:44 | Again, we're inside of fish animation.
| | 06:49 | And you know what's inside of this fish
is, of course, my animation of the fins,
| | 06:55 | so we're three levels deep.
| | 06:58 | But again, I have an animation
that's inside of another animation.
| | 07:05 | My main timeline is still only one frame long.
| | 07:10 | So let's do a test movie.
| | 07:14 | See my fish swim across the screen.
| | 07:16 | All right, that looks pretty good.
| | 07:18 | But you might be wondering, why did I put
this fish animation in its own movie clip?
| | 07:25 | Well, I did that so I can add multiple fish.
| | 07:29 | So, I'm going to go ahead and extend
my main timeline out to about 40 frames,
| | 07:36 | and I am going to add a new layer.
| | 07:38 | And on this new layer, I am going to
drop on another fish, and I am going to use
| | 07:43 | that fish animation.
| | 07:44 | So I can drop on another fish,
right here on this new layer,
| | 07:48 | that I will evenly name to fish.
| | 07:52 | And with this new fish, I can have
that new fish coming at about frame 10.
| | 08:00 | Another thing I can do, since this is another
instance of the movie clip, is I can scale it up,
| | 08:07 | and that manipulate this all I want.
| | 08:09 | This might be even larger than that.
| | 08:11 | There is my larger fish that's
going to enter at about frame 10.
| | 08:15 | I can do that a couple more times if I want to.
| | 08:18 | I'll just do it one more time.
| | 08:20 | Again, drop on a fish, and this one's
going to be smaller so I'll shrink it
| | 08:24 | down, and then position it, say, right there.
| | 08:29 | And lastly, I will move that movie clip in.
| | 08:35 | These three animations are going to
play, but I still need to extend out this
| | 08:40 | main timeline a little more,
| | 08:42 | just so each one of these
animations have time to play, because my main
| | 08:48 | timeline loops through.
| | 08:50 | So I am just going to go ahead and scrub
down here to about frame 100 and insert a frame.
| | 09:01 | So that's how long my timeline is,
so these three fish will play.
| | 09:06 | So let's go ahead and try this out.
| | 09:08 | I'll do a test movie.
| | 09:09 | There is my three fish, and
they actually go pretty fast.
| | 09:14 | And this one actually disappears
sooner, but take a look at what happens.
| | 09:20 | These movie clips actually loop.
| | 09:23 | So if you have animation inside of a movie
clip, it's going to loop over and over again.
| | 09:28 | So this is just a quick example of how you
can animate the contents of the movie clip,
| | 09:33 | and then turn around and animate the
movie clip itself, and use it as many
| | 09:39 | times as you want.
| | Collapse this transcript |
| Animating along a path| 00:00 | One of the things that I like most
about using the motion tween is the motion
| | 00:05 | path that you're given.
| | 00:07 | The great thing about this
motion path is that it can be edited.
| | 00:10 | And that's what I want
to do with this fish here.
| | 00:13 | This is the fish animation movie clip,
so I'm going to double-click on it, and
| | 00:18 | inside there, you'll see this motion
path. And currently this fish just
| | 00:21 | travels at a straight line.
| | 00:24 | Not very appealing and not very natural
either, so what I want to do is just add
| | 00:29 | a curve to this line.
| | 00:31 | First thing I'm going to do, just to
make the line easier to see, is I can
| | 00:35 | double-click on the color here, which
represents the color of that motion path,
| | 00:39 | and in Layer Properties, I can just change
this to something easier to see, such as a blue.
| | 00:48 | Select OK and now we can see that dark blue line.
| | 00:51 | So again, I'm just going to select my
Selection tool. I'm going to make sure that
| | 00:56 | line isn't currently selected, because
all I need to do is just roll over it, and
| | 01:01 | then I'm given this icon
that's this curve the line.
| | 01:04 | And that allows me to take and curve
out that line, so I can curve this motion
| | 01:09 | path any way I want. In fact, let's
have the fish kind of dip down like that.
| | 01:16 | Pretty dramatic dip. But in general, I
can hit the Enter key, and we can watch
| | 01:21 | that fish follow that path.
| | 01:24 | Pretty nice and pretty easy to do.
In fact, what I can do is I can use the
| | 01:28 | Subselection tool and select
either end point. And as I select an end point,
| | 01:35 | I'm given these Bezier points.
| | 01:36 | So I can manipulate those Bezier
points if I want that sort of control.
| | 01:42 | And this might be more of what I'm after,
which is this fish kind of traveling at
| | 01:48 | this sort of angle like a wave.
| | 01:50 | So again, I'll just hit the Enter key,
and we can watch it follow that path.
| | 01:56 | You might want to actually just start
from scratch and draw your own motion path.
| | 02:01 | Well, you can do that.
| | 02:02 | And that's what I'm going to do now.
I'm going to create a new layer. And using the
| | 02:07 | Pen tool, I'm going to go ahead and draw a line.
| | 02:10 | So the Pen tool is selected. I'm just
going to draw a black line, kind of like
| | 02:17 | that, pretty unique, these sort of low,
and then this really high points, but
| | 02:25 | roughly I've just drawn out
this wave with my Pen tool.
| | 02:29 | And even from there, I can still use my
Subselection tool to manipulate it, but
| | 02:35 | the point is is I can draw any sort
of path I want, that I want to use for
| | 02:41 | this animated fish.
| | 02:43 | So let's go ahead and create a line,
something kind of like that. I'd say
| | 02:48 | that looks pretty good.
| | 02:49 | What I'm going to do now is with my
Selection tool, I'm going to select that
| | 02:55 | line, and I'm going to go to
Edit, and I want to cut it.
| | 02:59 | And since I don't need this layer
anymore, I'm going to delete that layer, because
| | 03:04 | I want to go to this layer, where that
motion tween exists, and then all I need
| | 03:10 | to do is do an Edit > Paste in Place.
| | 03:16 | When I do that, it overrides that
previous motion path, and it gives me that
| | 03:22 | line that I created my Pen tool.
| | 03:25 | So now you can see that fish follow that path.
| | 03:28 | And still it's editable, so I can
still use my Subselection tool, and it
| | 03:33 | manipulate any one of
those points just as easily.
| | 03:37 | So that was just a quick example of
how you can manipulate any sort of motion
| | 03:41 | path to simulate sort of
more organic natural motion.
| | 03:47 | Now, let's keep in mind that I was
inside of this fish animation movie clip, so
| | 03:52 | if I go to scene 1, you'll notice that
there are actually other fish here.
| | 03:56 | So I'm going to go do a test
movie, just to see our results.
| | 04:02 | And sure enough, we can see all of our
fish sort of following that wave motion
| | 04:08 | that I've created. But again, a quick
example of editing motion paths to really
| | 04:13 | stimulate a nice, organic, sort of
natural feel, that can be fully customized.
| | Collapse this transcript |
| Morphing shapes| 00:00 | Sometimes you might find the need to
animate a shape morphing, and what I mean
| | 00:06 | by that is potentially like a tomato sort of
splatting, or some liquid effect, even such a
| | 00:13 | thing as a jellyfish, which is what I
want to animate in this scene right here.
| | 00:18 | So what I'm going to do is I'm going to
go ahead and create a new layer, and I'm
| | 00:22 | going to call it jellyfish.
| | 00:24 | So I want to animate a jellyfish
organically moving through the water.
| | 00:30 | So with that layer selected, I'm going
to open up this fish parts folder, and
| | 00:36 | this Jellyfish Animation movie
clip is the one I want to use.
| | 00:39 | So I'm just going to click
and drag it onto the stage.
| | 00:44 | So there is my jellyfish, and I'll go
ahead and zoom in on this jellyfish, and
| | 00:50 | I'll double-click it to enter the
jellyfish animation timeline. You can see
| | 00:56 | it does animate up. That's fine.
| | 00:59 | I actually want to double-click on it again.
| | 01:01 | So now I'm actually editing the jellyfish.
| | 01:05 | This jellyfish contains the body
of the jellyfish and then the legs.
| | 01:11 | Now, all of these legs are an
instance of the jellyfish leg.
| | 01:15 | So the nice thing there is the
fact that I only have to animate one.
| | 01:20 | So I'll double-click it.
| | 01:22 | Now, again I'm four levels deep down into
the jellyfish leg, and I want this to morph.
| | 01:29 | I want it to basically change shapes.
| | 01:32 | So how I'm going to do that is I'm
going to actually go down to about frame 40,
| | 01:39 | and I'm going to go ahead and select
Insert Frame, because that's how long I
| | 01:46 | want my animation to be.
| | 01:48 | Now, what I can do is I could
insert a keyframe down here in frame 40.
| | 01:55 | Insert Keyframe, and then also what I
want to do is I want to click in between
| | 02:02 | those two keyframes, and instead of
choosing Motion Tween or Classic Tween,
| | 02:08 | what's available to me is the Shape Tween.
| | 02:12 | So unlike if you're going to be doing a
motion tween or classic tween, a shape
| | 02:16 | tween has to happen on -
you guessed it - a shape.
| | 02:20 | So if I select this and I look at my
Properties panel, it is a Drawing object,
| | 02:25 | and this could just as
easily be a shape as well.
| | 02:28 | But in general, this is not a
movie clip. It's not a button.
| | 02:32 | It's not a graphic symbol.
| | 02:33 | It's not an instance of anything.
| | 02:35 | It is just a line that was drawn.
| | 02:39 | So I need to make sure it's just
a drawing object, or just a shape.
| | 02:44 | If I could just go ahead and go
to Modify, I can break this apart.
| | 02:50 | I've selected Break Apart, and now you
can see that it's actually a raw shape.
| | 02:55 | That's what I would now want to morph.
| | 02:59 | I've defined the
beginning point and the end point.
| | 03:02 | I do need to modify the line, but again,
the first thing I'm going to do is I'm
| | 03:08 | going to go ahead and create a shape tween.
| | 03:10 | I selected the shape tween, and
it gives me this green arrow.
| | 03:15 | So again, nothing is happening.
| | 03:17 | My start point and end point are
exactly the same, because right here in the
| | 03:21 | center, this is where I want to adjust the line.
| | 03:25 | So I'm going to right-click, and
I'm going to insert a keyframe.
| | 03:30 | Now, I can go ahead and modify this line.
| | 03:32 | I could do it a number of ways, but
what I'm going to use is the Subselection
| | 03:36 | tool, because if I select that line,
you can see I'm given all these different
| | 03:40 | control points I can then modify.
| | 03:44 | This might give you the control you
need, but again, I'm just going to kind of
| | 03:47 | scrunch this up into a half circle almost.
| | 04:02 | Notice how it's looking pretty rough.
| | 04:04 | So I'm going to use my Selection tool.
| | 04:07 | If I double-click on this line, what I
can do in order to smooth it out, since it
| | 04:12 | is just a shape, is I can go down here
to the Tools panel. Right down here, second
| | 04:18 | from the last option is Smooth.
| | 04:19 | So if I click that Smooth, you can
see it starts to smooth out that line.
| | 04:25 | So it definitely smoothed it out.
| | 04:27 | I have less points to deal with.
| | 04:29 | So if I go back in here with my
Subselection tool, you can see that I have less points.
| | 04:34 | So again, that's another little tip
that's really helpful if you're dealing
| | 04:37 | with actual, raw shapes.
| | 04:39 | So this is looking better.
| | 04:42 | I'm just modifying this line.
| | 04:44 | I am going to give this a nice curve, and
again, let's just smooth it out a little more.
| | 04:50 | Click that a couple times,
and that's what I want.
| | 04:53 | Remember, this is the center
point, right here at about frame 20.
| | 04:56 | So it starts here, and if I hit Enter,
you can see it morph into this nice curve
| | 05:03 | and then back out to the way it was.
| | 05:06 | So that's just a quick morph,
and this could be a line.
| | 05:08 | It could be any other type of shape.
| | 05:12 | Just keep in mind it has to be a shape,
and it shouldn't be an instance of a symbol.
| | 05:16 | So that's what it makes shape tweens unique.
| | 05:20 | Again, this is the jellyfish leg, so if
I go back to jellyfish, note that these
| | 05:24 | are all instances of that animation.
| | 05:28 | So I can click on this back one back here.
| | 05:30 | If I double-click on it, notice
that it's still an instance of that
| | 05:33 | jellyfish leg, and it will move appropriately.
| | 05:36 | Also, note that I flipped it, and that's
why it actually bows out the other direction.
| | 05:42 | So if I click on jellyfish, this has
actually been flipped using the Transform panel.
| | 05:50 | It's actually been adjusted that way.
| | 05:51 | So, each one is going to be a little
bit different if I start to look at
| | 05:54 | this Transform panel.
| | 05:57 | That's all I really needed to do is just
modify this line, so the legs kind of bow out.
| | 06:01 | Now, I'll go back to Jellyfish
Animation and note that the jellyfish actually
| | 06:07 | will animate from that point on up.
| | 06:11 | So if I click back on scene 1,
notice that I probably need to move this
| | 06:15 | jellyfish down off the bottom of the stage.
| | 06:20 | So I'm going to go ahead and
change the view to Show All.
| | 06:25 | That allows me to select that
jellyfish and then move it on down.
| | 06:31 | I don't want that jellyfish to start
animating when all the fish start coming in.
| | 06:37 | I want it to come in later.
| | 06:38 | So I'll just move this
keyframe on down to about frame 30.
| | 06:43 | With that in place, let's go ahead and take
a look at this animation. Then there it is.
| | 06:51 | So you can see how the legs morph,
and that jellyfish animates upward.
| | 07:00 | The reason he disappears is because
it's actually playing through the timeline.
| | 07:04 | So it actually goes to the end of this
timeline and then restarts everything
| | 07:08 | regardless of where it's at.
| | 07:11 | I'm going to fix that later, but do
you know that the morph is happening.
| | 07:14 | And if I test this one more time,
you'll see the jellyfish animate across.
| | 07:20 | From there, since this is the
jellyfish animation, I can actually add as many
| | 07:25 | movie clips as I want, create quite a
few jellyfish, if I want to as well.
| | 07:30 | But again, that's just a simple example of
how you can take just what is simply a
| | 07:34 | line and morph it into
pretty much anything you want.
| | Collapse this transcript |
| Animating objects in 3D| 00:00 | One of the most exciting features that
Flash has is the ability to manipulate
| | 00:05 | graphics within 3D space, and that's
what I want to do in this underwater scene.
| | 00:10 | I want to manipulate some graphics, and
those graphics are just going to be some text.
| | 00:16 | So I am going to create a new layer,
and this is going to be eco as the name of
| | 00:22 | this layer because I am going to use
the Text tool, and just type in "eco."
| | 00:29 | So this is the graphic I
want to manipulate in 3D space.
| | 00:32 | So the first thing I need to do is
I need to convert it to a movie clip.
| | 00:36 | So I am going to drag it to the
library and call it eco and my registration
| | 00:41 | point is going to be in
the center. I will click OK.
| | 00:45 | So there's the text I want to manipulate,
and I will just zoom in on this text
| | 00:49 | really fast, and what I need to do
next is go down to that fourth tool here,
| | 00:57 | the 3D Rotation tool.
| | 01:00 | So as I select that tool,
I'm given these circular lines.
| | 01:06 | So I can adjust the X position.
| | 01:07 | If I rotate that vertical line, I can
see it spin. There's the Y position as
| | 01:15 | well, or I can even use this outer line -
| | 01:19 | this orange line - and manipulate it in 3D space.
| | 01:24 | So definitely pretty nice.
| | 01:25 | I can go ahead and angle
that in something like that.
| | 01:28 | I am going to go ahead and create a new
layer, and this time, I am going to type
| | 01:35 | in friendly, and I'll drag that to
the library, and call it "friendly."
| | 01:45 | It's a movie clip, registration point
in the center, click OK, and I can do the
| | 01:49 | same thing, by selecting that
fourth tool down with this text.
| | 01:54 | So I can kind of angle it in.
| | 01:57 | The idea is I want this text to float
up as if it's floating up in water,
| | 02:03 | and this is lighter than the water.
| | 02:05 | So that's the effect I want to do, and
luckily, what I can do is I can actually
| | 02:11 | animate these objects in 3D space,
and this is really a pseudo 3D.
| | 02:16 | It's not true 3D as in I am able to
import a 3D model. But again, it will take
| | 02:23 | any object and put it on a flat plane.
| | 02:25 | So I am going to start with this eco
layer and this eco object, and I am
| | 02:29 | going to animate it up
| | 02:31 | so it follows the same principles of
making sure it's a movie clip, on its own
| | 02:36 | layer, then I can Create Motion Tween.
| | 02:39 | So I am going to go ahead and Show
All to show everything on my stage right
| | 02:46 | here, and then I am going to select
the Selection tool and move this down.
| | 02:51 | In fact, let's go to frame 1 and
sort of move it down off the stage.
| | 02:57 | Now, let's go to frame 30.
| | 02:59 | I can then bring it into place.
| | 03:02 | So it might start at an angle down here.
| | 03:06 | In fact, let's kind of rotate it a
little more, flip it like that, and you can
| | 03:15 | see it animate, and then at this point, I
want to go ahead and flatten it out a little more.
| | 03:23 | So again, it might take
a little getting used to.
| | 03:25 | Well, I just rotate it around, just like
that, and you can always manipulate any
| | 03:31 | one of these lines accordingly to get that
angle that you're looking for. There we go.
| | 03:39 | That's what I want.
| | 03:40 | Again, it starts down here and then
floats up into position right there, and I
| | 03:47 | can add a couple more keyframes.
| | 03:49 | Frame 70, I can go ahead and have it
move a little bit, and even have it move
| | 03:56 | up a little as well.
| | 03:58 | So from 30 to 60, it continues to float,
and then clear down here at the very
| | 04:04 | end, that's when I am going to go ahead
and move that object off of the stage,
| | 04:10 | and use that 3D Rotation tool to manipulate it.
| | 04:15 | This is a case, since I am animating
something off the stage - it starts off the
| | 04:21 | stage and ends off the stage -
| | 04:22 | I probably want to change my view.
| | 04:25 | I want to change my view, so I can
see everything on the pasteboard.
| | 04:30 | So that will show all of the
content that's beyond the viewable area.
| | 04:35 | This allows me to use the Selection
tool and move this object completely off
| | 04:42 | the stage like that.
| | 04:44 | That's what it does from frame 70 on to 120.
| | 04:49 | You can see it float off.
| | 04:50 | So that's looking pretty good.
| | 04:51 | I like the motion it has.
| | 04:54 | I am going to do the same thing with
this friendly movie clip, and I am going to
| | 04:58 | rename that layer to "friendly."
| | 04:59 | Now I am going to go ahead and
right-click, and Create Motion tween.
| | 05:05 | I will scroll down and again, this one is
going to start off the stage like that.
| | 05:11 | In fact, I will manipulate it some more,
and maybe make it backwards, kind of
| | 05:20 | like that, rotate it this way. There we go!
| | 05:27 | It's going to start there,
and it's going to land in place
| | 05:32 | the same time the word "eco" does as well.
| | 05:35 | I can move that back up, use the
Rotation tool again to rotate it into place.
| | 05:42 | Now, I can understand that
these lines can get kind of tricky -
| | 05:47 | maybe you're not used to dealing with
them, maybe you just don't want to - and
| | 05:50 | that's perfectly fine because you can
go beyond using these lines, and actually
| | 05:58 | use the Transform panel.
| | 06:01 | So I am going to go to Window and
open up Transform, because in the
| | 06:05 | Transform panel, you have the
ability to manipulate the 3D rotation based
| | 06:10 | on these coordinates.
| | 06:12 | So if I did want to flatten this out, I
might want to change all of these to 0,
| | 06:18 | even the Rotate to 0.
| | 06:20 | So now I have something perfectly
flat, and I can always manipulate it
| | 06:25 | accordingly if I want to.
| | 06:27 | But feel free, if you need
to reset something back to 0,
| | 06:30 | you can do that using the Transform panel,
and let's just position this kind of like that,
| | 06:38 | go down to frame 70, and again it
continues to sort of float up in the water.
| | 06:44 | So I'll move it up and manipulate it a
little more, and then I'll scroll down to
| | 06:53 | frame 120, move it off the stage and then
rotate it even further, kind of like that.
| | 07:03 | All right! So let's check that.
| | 07:04 | Move down, and now it rotates into place,
it looks good, in a 3D fashion, pauses
| | 07:15 | there, and then floats up.
| | 07:18 | Another thing you can do is I am going
to create a new layer, and I'm just going
| | 07:23 | to call this Recycle.
| | 07:24 | But you can actually use
pre-built 3D settings as well.
| | 07:31 | So I am going to go ahead and select
this recycle movie clip, and drop it onto
| | 07:38 | the stage, and I am going to make sure
this icon exists at about frame 30 when
| | 07:43 | you can see that word.
| | 07:45 | I will just reposition it.
| | 07:47 | In fact, just to give it even a cooler
look, I will select this movie clip, and
| | 07:52 | I'll change the display to Overlay.
| | 07:55 | So we get that nice blue look, and really
this is just an accent graphic for these words.
| | 08:01 | So again, I can even put it on top, and
what I want to do is I am going to go to
| | 08:06 | Window, and go to Motion Presets
because in my Motion Presets panel, under the
| | 08:12 | default presets, notice there is a
couple 3D motion tweens that you can use.
| | 08:18 | I want to use this spiral-3D.
| | 08:20 | So I am going to select that movie clip,
select that motion preset, and click Apply.
| | 08:28 | Now, I will close that Motion Preset panel,
and again once, those words come together,
| | 08:33 | that's when you see that eco friendly
symbol, and you can see it twirl around.
| | 08:39 | I can start to adjust this further.
| | 08:40 | I can actually decrease the length of it.
| | 08:43 | So at about frame 70, I can even move it
up with that text, but in general, it's
| | 08:50 | going to actually just spin
really fast and then disappear.
| | 08:55 | So again, that was just using a quick motion
preset to add a nice 3D accent to these graphics.
| | 09:02 | So let's go ahead and watch it in action.
| | 09:04 | Remember, there's actually quite a bit going on.
| | 09:06 | So if I hit Enter, you'll see
that animate, just like that.
| | 09:10 | That looks pretty good.
| | 09:13 | If I do a test movie, everything is
going to play, including the fish, as well as
| | 09:19 | the jellyfish and the text.
| | 09:23 | So you can see that come in, and then
you can see that jellyfish kind of bust
| | 09:29 | through it at that point,
and that works pretty good.
| | 09:33 | I encourage you to use the 3D Rotation tool.
| | 09:36 | It will add another dimension to any
graphics that you are creating, as well as
| | 09:41 | any animation you plan on implementing.
| | Collapse this transcript |
|
|
5. Creating Character AnimationAdding bones to a character| 00:00 | Flash is very powerful when creating
animation, especially when it comes to
| | 00:04 | character animation, and that's what I want to
do with this file in particular. This movie clip,
| | 00:11 | if I double-click on it,
| | 00:13 | this is the character that I
ultimately want to animate, but I first need to
| | 00:17 | give it some structure.
| | 00:19 | But what it's made up of currently
are a bunch of different movie clips.
| | 00:25 | So I've taken the silhouette, and I
have broken out the different body parts
| | 00:29 | into separate movie clips that I now
want to join together, so you can't
| | 00:34 | move them independently.
| | 00:37 | So that's what I want to do, and the
first thing I am going to do is zoom in on
| | 00:41 | all these graphics. And I am going
to link each one of these movie clips
| | 00:46 | together using the Bone tool.
| | 00:49 | So I'll select the Bone tool, and I am
going to start down here at the base, and
| | 00:54 | all I need to do is just do a click and
drag from this space, and what I'm about
| | 01:00 | to create is this armature.
| | 01:02 | I'll just do a click and drag from the
upper body to the stomach, and now I've
| | 01:09 | connected those two.
| | 01:11 | Now, let's connect the stomach with
the waist right here, just do a click and
| | 01:15 | drag to the waist, go from the
waist to the upper leg right here.
| | 01:21 | Then I am going to go from this upper
leg to this lower leg, but I actually
| | 01:28 | want to connect right to this knee right here,
because I want this to be the rotation point.
| | 01:34 | So I'll just click and drag to that knee.
| | 01:37 | Let's go from the knee to the foot.
| | 01:40 | Again, I want to kind of determine
where the joint is going to be, the rotation
| | 01:43 | point, and then release.
| | 01:46 | Then let's go from the foot to this
toe, and I'll show you why I added that
| | 01:50 | toe in a little bit.
| | 01:53 | But in general, what I've done is I've
added the structure to this character,
| | 01:58 | and I can just go ahead and use my
Selection tool. And now all of a sudden our
| | 02:04 | character is swimming, or doing
whatever we want this character to do.
| | 02:09 | But it's not without its issues
because notice how the base moves.
| | 02:13 | So that's one thing I want to take care
of right now, and then I'll take care of
| | 02:16 | some of the other rotation issues.
| | 02:18 | But this base moving around is because
of this armature is moving around as well.
| | 02:25 | So I need to lock down this armature.
| | 02:28 | So I am going to select that
armature, and I am going to go to the
| | 02:31 | Properties panel, and in the
Properties panel, it gives me all the properties for
| | 02:36 | this bone or this armature.
| | 02:39 | But in general, I'm going
to disable the Rotation.
| | 02:43 | So I am going to uncheck that.
| | 02:46 | Now, I can go ahead and move the
lower body without the upper body moving.
| | 02:55 | So far so good, but still we have
some issues because, of course, the knee
| | 02:59 | wouldn't quite bend that way.
| | 03:02 | I need to lock that down now.
| | 03:04 | So I am going to go ahead and stretch
out her leg like that and let me just zoom
| | 03:10 | in on this armature right here.
| | 03:14 | Again, I don't want it to rotate
360 degrees. I want to constrain it.
| | 03:20 | So with that armature selected,
I am going to go to the
| | 03:23 | Joint Rotation and check Constrain.
| | 03:26 | When I do that, I am given
this sort of rotation area.
| | 03:31 | So there's the minimum, and then
there's the maximum that it can rotate, and
| | 03:35 | this is its current position.
| | 03:37 | So if I just scale down the Max to
where it aligns up, again with that
| | 03:44 | line because I don't want it to extend
any more to the right, then it will be constrained.
| | 03:50 | So let's just try that.
| | 03:51 | Sure enough, it doesn't go beyond that point.
| | 03:55 | The next coordinate I want to change
which is going to be - if I select that
| | 04:04 | armature there - is going to be the Minimum.
| | 04:06 | So I am going to take the Minimum down
because I want to be able to rotate the
| | 04:12 | knee around more as well.
| | 04:15 | Again, I'm able to constrain any
rotation just by selecting that armature and
| | 04:21 | then adjusting the minimum and the maximum.
| | 04:24 | This is much more appropriate.
| | 04:25 | I do have the same problem with the foot,
and that's why I've actually connected
| | 04:30 | this armature from the foot to the toe.
| | 04:32 | I don't have any plans to animate
the toe, but what that does give me the
| | 04:36 | ability to do is rotate this foot.
| | 04:40 | I do want to rotate the
foot some, just not that much.
| | 04:43 | So again it's a matter of selecting the
armature, checking Constrain, and then
| | 04:48 | controlling the minimum and maximum
that you want this foot to rotate.
| | 04:53 | Again, it's not going to be that much,
but I do want to have a little bit of
| | 04:57 | sort of natural movement with this foot as well.
| | 05:00 | So let's just do a couple of
more edits, kind of like that.
| | 05:03 | We will increase the maximum,
and then there we have it.
| | 05:07 | So the foot rotates just fine. So far, so good.
| | 05:12 | I'm going to hold down the
Spacebar and pan over here.
| | 05:16 | You might run into a case also where
your movie clip might be off a little bit,
| | 05:20 | as you start to rotate your character.
| | 05:23 | So what I need to do in this case is
I need to move this leg over a touch.
| | 05:27 | I am going to do that really fast by
just holding down the Option key or Alt
| | 05:33 | key if you are on the Mac, and you can move that
movie clip independent of the other movie clips.
| | 05:40 | That allows me to kind of move out that
movie clip appropriately, and then I can
| | 05:45 | even use the Free Transform
tool to position it as well.
| | 05:49 | So you still have a lot of control, even
once you add the structure for your character.
| | 05:56 | So let me go ahead and zoom out to about
200%, maybe about 100%, just to see this
| | 06:04 | person's body and again, I can
go ahead and straighten them out.
| | 06:09 | That's what I want something more like
say a perfect handstand, and I can do a
| | 06:14 | couple more tweaks if I want to, using
the Free Transform tool, because I want a
| | 06:18 | perfect handstand for this character.
| | 06:21 | Because if I go back to scene 1, I can
now position this character to become the
| | 06:27 | L for the word "Style."
| | 06:32 | It's set up, so I can actually just
link movie clips, and manipulate them
| | 06:37 | together as if they're one complete unit.
| | 06:40 | But this is set up for me to go ahead
and add some animation to it as well.
| | Collapse this transcript |
| Animating character poses| 00:00 | Once you've added a bone structure to
your character, you can then move on to
| | 00:04 | animating that character.
| | 00:06 | So let's take a look at my character,
because right here, as I zoom in on this
| | 00:12 | movie clip, this is
actually my armstand movie clip.
| | 00:16 | If I double-click on it, notice that
it already has a structure in place.
| | 00:21 | Again, I've just used the Bone tool to
connect these different movie clips, and
| | 00:25 | now I can actually move this character.
| | 00:27 | But what I want to do next, as opposed
to just moving them, is I want to build an
| | 00:32 | animation, so this person actually animates.
| | 00:34 | So I am going to do this by adding
separate poses. And so if you'll notice, in my
| | 00:40 | timeline, there is Armature_14.
| | 00:43 | So that is all of these
graphics connected together.
| | 00:48 | But I don't need these other layers.
| | 00:50 | So I'll select layer 2 and delete it,
and I'll select this armstand layer
| | 00:55 | as well and delete it, because right in here,
this is where I want to create my poses.
| | 01:01 | But notice, there is actually a keyframe
there already, and that defines this pose.
| | 01:08 | So what I want to do is I want to
insert another pose at about frame 15.
| | 01:13 | So I am going to just do a
right-click to insert a pose.
| | 01:18 | I've inserted a pose at frame 15.
| | 01:21 | Now, what I can do is I can go ahead and
manipulate this body to something like that.
| | 01:28 | I will deselect it, and let's watch
it move, frame 1 clear to frame 15, we
| | 01:35 | see that nice motion.
| | 01:37 | Very nice, how everything is linked
together, everything moves very smooth, and
| | 01:42 | I can continue to add more poses.
| | 01:44 | So let's go to frame 30 and again,
I'll do a right-click, and I'll insert a
| | 01:49 | pose, and again, I'll move this
person's body maybe out to that direction, and
| | 01:55 | I'll just kind of bend the knee.
| | 01:57 | But really, I have a lot of
control for manipulating this character.
| | 02:02 | Again, the animation just gets built out.
| | 02:05 | So that looks good like
that, like that. Looks great!
| | 02:09 | What I want to do next is I want this
character to end up at the first pose this
| | 02:15 | character started with.
| | 02:16 | So I am going to extend out the timeline.
| | 02:19 | Let's go to frame 45, and I am
just going to insert a frame.
| | 02:24 | That extends out that timeline.
| | 02:26 | Right down here, that's where
I want to insert that pose.
| | 02:29 | So let me go to my pose right here, and
if I do a Command+Click or Ctrl+Click if
| | 02:35 | you are on a PC, then I can
select just that one pose.
| | 02:40 | So with it selected, I'll just do a
right-click, and I want to copy this pose.
| | 02:46 | So, let's copy this pose.
| | 02:47 | Let's go down here, and I am going to
select that last frame, right-click, and
| | 02:55 | then go down to Paste Pose.
| | 02:59 | Then there's that pose.
| | 03:00 | So again, back to its original position.
| | 03:02 | If I go to frame 1 and hit the Enter key, I
can see that person do that sort of movement.
| | 03:09 | Very nice!
| | 03:11 | Lastly, I'm just going to insert some
additional frames, just so the person stays
| | 03:15 | at this angle for a little while.
| | 03:18 | Frame 60, Insert Frame again, just so
there is a little bit of a pause at this angle.
| | 03:24 | Let's click back on scene 1.
| | 03:27 | Let's do a Control > Test Movie,
just to watch this in action.
| | 03:32 | There we go, just a really
simple example of animating poses.
| | 03:37 | Again, you've got to make sure your
structure is in place, using your Bone tool,
| | 03:41 | and then animating, as you
just noticed, is really a breeze.
| | Collapse this transcript |
| Creating organic movement| 00:00 | Usually when you think of the Bone tool,
you might think of animating something
| | 00:04 | that of course has bones.
| | 00:06 | But you can do more with it than just
that, because I'm going to use the Bone
| | 00:10 | tool to animate this flower.
| | 00:12 | I'm going to go ahead and double-click
on this flower movie clip, and I'm going
| | 00:17 | to zoom in on the contents in here, and
if I select this flower, you'll notice
| | 00:22 | that it's just a shape.
| | 00:23 | So there are no movie clips involved
here. It's just short of a raw shape.
| | 00:28 | Again, I want to add structure to it, and
I'm going to do that using the Bone tool.
| | 00:33 | So I'm going to select the Bone tool, and with the
shape, I'm going to start giving it some structure.
| | 00:38 | I'm going to click and drag an armature
out to connect those two parts, and I'll
| | 00:45 | connect sort of this stem out here, to
this part of the base of that leaf, out
| | 00:50 | here, and again, you can see how
I'm adding structure right here.
| | 00:54 | I'll even click and drag
and connect to this leaf here.
| | 00:59 | I'm adding structure to this
sort of organic shape right here.
| | 01:03 | I'll click and drag clear up
hear to this flower right there.
| | 01:08 | Then I'll just do a simple click and drag
over here to this branch for this flower.
| | 01:14 | So I've given it some structure, and
let's take a look at what happens if I use
| | 01:19 | my Selection tool and
manipulate these armatures.
| | 01:23 | Well, look at that.
| | 01:24 | You get this nice, sort of
bendy, organic movement.
| | 01:29 | And again, I didn't have to
do any morphing or anything.
| | 01:32 | It's just a matter of using the
Bone tool, and then you can manipulate
| | 01:37 | objects more organically.
| | 01:39 | You can kind of see how that works.
| | 01:40 | So this is going to work out really well for me.
| | 01:43 | But that's my next step is to
animate these different armatures.
| | 01:46 | I'm going to bring these armatures down some.
| | 01:50 | I'll just grab each one of these.
| | 01:53 | Bring this leaf down.
Bring this flower over here.
| | 02:03 | So that's going to be its starting position.
| | 02:06 | It's going to be kind of like that.
| | 02:09 | And notice that I've been working
on this layer. This is armatures 16.
| | 02:13 | I don't need this flower layer,
| | 02:15 | so I'll select it and just click Delete.
And now I can begin to animate, because
| | 02:21 | in this layer, this is my first pose.
| | 02:24 | So if I want to add another pose, I can
come down here to about frame 30, do a
| | 02:31 | right-click, and I can
Insert Pose. So that's pose 2.
| | 02:36 | I can go ahead and select that
armature and move the flower sort of onto the
| | 02:42 | screen a little more.
| | 02:43 | Move these leaves into place, bring
up this branch of these leaves as well.
| | 02:49 | So that's like it's just coming into view.
| | 02:51 | It's going to be nice just to
manipulate each one of these armatures you can
| | 02:54 | see sort of more of this flower.
| | 02:56 | So let's start out.
| | 02:58 | Frame 1, I'll just hit the Enter key, and
you can see it come in to place just like that.
| | 03:03 | That's very nice how that
kind of comes together.
| | 03:07 | I'm going to go ahead and do a right-
click, and I'm just going to insert a frame
| | 03:12 | at about frame 45, and what I want to
do is I actually want my flower to be at
| | 03:20 | this position for a little bit.
| | 03:22 | So I'm going to actually copy this pose.
| | 03:25 | So I'm going to hold down the Command
key if you are on a Mac or Control key
| | 03:28 | if you're on a PC, and then I can copy this
pose, so I just do a right-click on that as well.
| | 03:35 | Copy that pose, hold down the Command
key or Control key if you're on a PC, and
| | 03:41 | then I can Paste Pose.
| | 03:44 | So now, this flower is going to be in
that same position for a little while, and
| | 03:52 | then I want to do the same process
because I ultimately want to get this flower
| | 03:56 | back into its original position.
| | 03:58 | So it animates up into that position,
and then it's going to come back down.
| | 04:03 | So I'm going to go ahead and copy this pose.
| | 04:11 | Command key, right-click > Copy Pose or
Control key if you're on a PC, and then
| | 04:19 | come down here, and it's a matter of
inserting frames, and then I can paste this pose.
| | 04:28 | Looks good.
| | 04:30 | I'll hit the Enter key and
you can watch it play through.
| | 04:34 | Keep in mind I can still
manipulate this flower at any point in time.
| | 04:39 | I can come to say frame 30, and I can
select it and if I decide to sort of bring
| | 04:44 | it up even higher like that I can do that.
| | 04:47 | Now it kind of comes in a position like that.
| | 04:49 | It still kind of moves around, and I like
that additional motion that we have here.
| | 04:53 | So again, I'm just manipulating
these various armatures, and you can see
| | 05:00 | that flower still move.
| | 05:02 | Again, we're just bringing life to this graphic.
| | 05:07 | I'll hit the Enter key, and then
it animates, and then back down.
| | 05:13 | Again, this works just
like any other motion tween,
| | 05:16 | in that I can grab the end and I could
say make it happen faster, so I can move
| | 05:24 | it to the left so it comes up faster
and then back out faster, or I can extend
| | 05:29 | it out further to about frame 100.
| | 05:33 | Now it's going to happen a lot slower.
| | 05:36 | So let's see our final result in action.
| | 05:38 | I'll go to Control > Test Movie.
| | 05:40 | Let's test this out.
| | 05:42 | Keep in mind that our L in our
word "Style" will animate as well.
| | 05:47 | But again, you can see
that flower moving into place.
| | 05:51 | It's really nice how that's kind of
flowing and pretty easy to do, all using the
| | 05:56 | Bone tool and then just inserting poses.
| | Collapse this transcript |
| Adding springiness| 00:00 | There are actually some additional
settings you can add when using the Bone tool
| | 00:05 | that really can mimic real-world
movement without very much work.
| | 00:11 | And that's what I want to
do with this earring here.
| | 00:13 | So I am going to double-click on it and
zoom in on the contents, because notice
| | 00:19 | that it's made up of various movie clips.
| | 00:23 | So the first thing I need to do is
link these different movie clips together.
| | 00:27 | So I am going to select the Bone tool,
and I am just going to click and drag to
| | 00:34 | start linking these movie clips together.
| | 00:37 | So I am creating my structure right
now, kind of like that, so I have my added Bone
| | 00:44 | structure, and it did create this armature 18.
| | 00:47 | So, I'll just select that layer and
delete it, and it adds this pose right here.
| | 00:54 | So I have added the structure, I have
a pose here now, and I'll go into about
| | 01:00 | frame 15, and I am going to insert another pose.
| | 01:05 | So the start pose is actually going to be a
little different. So I am going to use
| | 01:09 | the Selection tool, and I am just going to
click and drag this earring up, kind of like that.
| | 01:17 | And I'll just hold down the Spacebar
to make sure I can see all this.
| | 01:22 | But my earring is basically going
to start kind of from this location,
| | 01:26 | something kind of like that.
| | 01:29 | That looks pretty good, and if I hit the
Enter key, you could see it swing into place.
| | 01:38 | I am also going to extend out my
frames as well to about frame 80.
| | 01:42 | I am going to select frame 80, and
I am just going to insert a frame.
| | 01:47 | But even though there are all these
extra frames, there is really no motion that
| | 01:53 | happens beyond frame 15, currently.
| | 01:57 | But I can add motion, and actually I want to
add sort of a swinging motion for this earring.
| | 02:03 | And I am going to do that using springiness.
| | 02:06 | And if I select these armatures, I am
just holding them with Shift key, and I am
| | 02:11 | going to be able to select all these armatures.
| | 02:13 | And in my Properties panel, right
down at the bottom it says Spring.
| | 02:18 | So, this is where I can
add some nice springiness.
| | 02:21 | There is Strength and then there is Dampening.
| | 02:24 | So, if I add strength, it's going to
mean I am adding weight to this object.
| | 02:29 | The lower the number, from one on up, it
will actually have sort of less strength
| | 02:36 | for lower the number is.
| | 02:38 | The dampening is the falloff.
| | 02:40 | So, how much is it really going to swing?
| | 02:42 | So is it going to swing a lot, or less?
| | 02:45 | So I am going to keep my
Strength, let's put it about at 50.
| | 02:49 | My Dampening is going to be about at 20.
| | 02:51 | So, I'll just do that for all of these
armatures, and let's go ahead and take a look at this.
| | 02:57 | As I hit the Enter key, you can
see that it swings into place.
| | 03:01 | So look at all that extra
animation, and I didn't have to do.
| | 03:05 | In fact, even when you reach
frame 80, it's still trying to move.
| | 03:09 | So I am going to consider
actually inserting some more frames,
| | 03:12 | clear down to 150. I'll right
-click and insert Frame.
| | 03:16 | And now, that's all that
dampening that's going on.
| | 03:20 | That's going to continue to make it move.
| | 03:24 | And I actually kind of like that,
but I can add more control to it.
| | 03:28 | In fact, what I can do is I can add
springiness and different levels of
| | 03:34 | strength and dampening per armature.
| | 03:37 | So I can select this top armature up here.
| | 03:39 | And I don't want this one to move a whole lot,
| | 03:42 | so I am going to increase its Strength
to about 100, and it's Dampening about 80.
| | 03:48 | Next one, Strength is going to be about 80,
| | 03:51 | Dampening is going to be about 60.
| | 03:56 | And then I am going to do some
more drastic moves down here.
| | 03:59 | So this Strength is going to be
20, Dampening is going to be 80.
| | 04:03 | Last one, Strength is - let's make that
Strength 1, Dampening is going to be 90.
| | 04:11 | So, I have adjusted all of these.
| | 04:13 | The strength is higher on these ones,
as well as the dampening. And then it
| | 04:17 | changes as it moves down.
The strength is actually the lowest there.
| | 04:21 | So if I Enter, you could
see how much it swings around.
| | 04:26 | And you can really start to control this and
determine sort of the weight of your objects.
| | 04:32 | Say for instance, this
earring is actually kind of heavy.
| | 04:35 | So, maybe I don't have the strength so low.
| | 04:38 | But again, I have full control over that.
| | 04:40 | I can bring this back up to 60, and
bring the dampening down to about 30.
| | 04:46 | But again, I can control each of
the movements of each one of these.
| | 04:52 | So this still has some sway,
but not as much as it did before.
| | 04:56 | So just a nice, natural movement, that
again, then I didn't have to animate.
| | 05:01 | I didn't have to insert
all of these various poses.
| | 05:03 | It looks really good.
| | 05:05 | And if I do a test movie, we can see
it in action with the other animations.
| | 05:11 | So again we just kind of have that rest
in a place, and that looks pretty good.
| | 05:17 | Some nice movement, and again, I am
just keeping in mind the weight of these
| | 05:22 | objects, and then I am able to determine,
what the strength and the dampening in
| | 05:27 | the springiness, in general, is for this object.
| | 05:31 | Now this could use one little addition
that I am going to do really fast, which
| | 05:35 | is I want to add just a nice
drop shadow for this earring.
| | 05:39 | So I'll close that SWF,
| | 05:41 | select my earring and in the
Properties panel, I am going to add a filter.
| | 05:48 | This is going to be a drop shadow.
| | 05:50 | I'll add a drop shadow.
| | 05:52 | I'll first adjust the angle.
| | 05:55 | So, again, I want my drop shadow to go
down and to the left, and I am going to
| | 06:01 | increase the Quality and the
Blur, as well as the Distance.
| | 06:09 | So again, this is just kind of a fine art,
being able to kind of add a nice drop shadow,
| | 06:14 | again just decreasing the strength of
that drop shadow. I want it to be pretty
| | 06:19 | subtle, but I still want to
make sure that it's realistic.
| | 06:22 | There is my drop shadow.
| | 06:23 | I'd say it looks pretty good.
| | 06:24 | Let me go ahead and do a
test movie, and see it in action.
| | 06:28 | Hey, that's looks pretty good.
| | 06:32 | Again, that was just the final touch I
want to add to this, but otherwise, I
| | 06:35 | would say this is a really realistic animation.
| | Collapse this transcript |
|
|
6. Creating Animation with ActionScriptControlling the Timeline with ActionScript| 00:00 | So you can do a lot with the timeline, adding
different motion tweens, using the Bone tool.
| | 00:06 | You can do quite a bit.
| | 00:08 | But eventually, what are going you want to
do is control the timeline with ActionScript.
| | 00:13 | If I take this file, for instance, if I
do a test movie, you'll notice that this
| | 00:19 | animation will play through, and
then it loops back to the beginning.
| | 00:25 | So I need to stop this
timeline with ActionScript.
| | 00:29 | I want to stop the timeline
clear down here at the end.
| | 00:33 | So again, when this playhead hits about
frame 110, that's when I want it to stop
| | 00:39 | to show this message.
| | 00:41 | So all I need to do is navigate to the
frame I want the timeline to stop on, and
| | 00:47 | I am going to use a code
snippet to stop the timeline.
| | 00:50 | So I am going to go to Window and
open up the Code Snippets panel.
| | 00:54 | Here is my Code Snippets panel and
as you can see, it's full of code.
| | 01:02 | This is ActionScript code
that I can take advantage of.
| | 01:06 | So there is actions, timeline
navigation, animation, quite a bit in here.
| | 01:10 | So I really encourage you to
check out all the different code
| | 01:13 | snippets available.
| | 01:15 | But I want to control the timeline.
| | 01:17 | So I will open up Timeline
Navigation, and sure enough, here we are.
| | 01:22 | Stop at this frame.
| | 01:23 | Well, that's the one I want
to use. I am in frame 110.
| | 01:26 | I will just double-click on that.
| | 01:28 | Stop at this frame.
| | 01:31 | Then it opens up my Actions panel.
| | 01:34 | I am going go ahead and click this
left arrow right there, just so I can see
| | 01:41 | the actions available, because it
added this ActionScript is what this is, as
| | 01:48 | well as some notes - this is called a
comment - referring to what this ActionScript does.
| | 01:55 | Notice that right down here the
bottom it tells me where I put it, in the
| | 01:59 | Actions layer frame 110.
| | 02:01 | Well, let's take a look at that.
| | 02:03 | If I move that down, sure enough, it
adds this Actions layer, and right here,
| | 02:09 | that's actually in A right there,
that refers to my ActionScript.
| | 02:13 | So with that frame selected, that's
actually referring to this code right here.
| | 02:19 | So that should stop the timeline.
| | 02:20 | Let's do a test movie.
| | 02:22 | It plays through the animation and
then stops on that last frame. Gorgeous!
| | 02:30 | That's exactly what I want. Very nice!
| | 02:33 | So I am going to go to my swimwear
file, because it has this same issue.
| | 02:41 | Just nest this Code Snippets panel
over here to get it out of the way.
| | 02:46 | But overall, it has a timeline that
plays through, and at about frame 120 is
| | 02:53 | where I want it to stop.
| | 02:54 | I am going to go ahead and select frame
120, go my Code Snippets panel, and just
| | 03:01 | double-click on Stop at this Frame again.
| | 03:03 | So it adds that same code,
very easily, very nice.
| | 03:07 | I will close that Actions panel, and you
can see that code was added right there.
| | 03:14 | But this file is a little more
unique, because it has more going on.
| | 03:18 | There are actually some movie clips in here.
| | 03:20 | The movie clips have animation in them.
| | 03:25 | So if I just double-click on this fish,
notice that it has its own separate
| | 03:30 | timeline that's
independent of the main timeline.
| | 03:33 | So I will click back on the scene 1,
and what that means, in general, is that
| | 03:38 | these animations are going to play
over and over again, even though the main
| | 03:42 | timeline stops right here.
| | 03:44 | So we will only see this eco-friendly
animation once, and then when we stop
| | 03:51 | action right here, the fish are going
continue to swim, as well as some other
| | 03:56 | items, such as the jellyfish.
| | 03:58 | So let's do a test movie.
| | 04:00 | We can see our text, we've got our
jellyfish, and again, the jellyfish and the
| | 04:09 | fish continue to animate, even though
the main timeline has stopped, and that's
| | 04:14 | exactly what I want.
| | 04:16 | So just be aware of that.
| | 04:17 | If you have animation inside of a
movie clip, it will continue to play
| | 04:22 | through, unless you put a stop action in
there, which brings me to my next file.
| | 04:27 | I have this fashion file right here,
and what's in here are movie clips that
| | 04:34 | again, contain all a lot of animation.
| | 04:36 | And most of these, if I double-
click on this armstand movie clip, it's
| | 04:41 | actually a looping movie clip, and
looks really good, because the start and end
| | 04:45 | frame are the same.
| | 04:47 | So I don't need to add a stop action
in there, but if I go to scene 1 and I
| | 04:51 | just double-click on this earring, well,
this is a different scenario, because
| | 04:58 | it rests into place.
| | 04:59 | And I don't want it to all of
the sudden snap back up here again.
| | 05:03 | I want it to stop down here.
| | 05:05 | So again, I'm inside of a movie clip.
| | 05:08 | It's the same process of going to
the Code Snippets panel, under timeline
| | 05:12 | navigation, just adding a stop at this frame.
| | 05:15 | If I double-click on it, it adds it.
| | 05:17 | But I just need to be
mindful of where my playhead is.
| | 05:22 | But it doesn't really matter
if I am in a movie clip or not.
| | 05:26 | It's always going to add that stop action.
| | 05:29 | So if I test this one, you can see
that the animations play through, and this
| | 05:36 | one should just ultimately
sort of rest into place.
| | 05:39 | And that's, again, exactly what I want
while these two loop, because they don't
| | 05:43 | have a stop action inside
of them. So far, so good.
| | 05:47 | Let's take a look at one more.
| | 05:49 | Here's my home.fla, and again, this
one has a beautiful animation that plays
| | 05:55 | through, and I am going to add a stop
action right down here at the very end,
| | 05:59 | at about frame 118.
| | 06:00 | I will double-click stop at this frame.
| | 06:03 | That stops the main
timeline at that point in time.
| | 06:07 | But what I have here is this Replay button.
| | 06:11 | So let's just go ahead and do
a quick test of this movie.
| | 06:14 | So again, it plays through.
| | 06:17 | You can see this text will slide in, it
stops on this last frame, and now I want
| | 06:25 | to actually activate this button.
| | 06:27 | So I want to control the
timeline with this button.
| | 06:30 | And when you click on this replay button,
I want the playhead to go to frame 1
| | 06:36 | and then play this animation again.
| | 06:38 | So with this button selected, the first thing
I am going to do is give it a specific name.
| | 06:45 | So, in the Properties panel, I'm going to
give it an instance name, and I am going
| | 06:49 | to call it replay_btn.
| | 06:52 | Now it has a specific instance name that's
going to be referenced in my ActionScript.
| | 06:59 | So I am going to go to my Code
Snippets panel, and that second code snippet
| | 07:04 | is what I want to add.
| | 07:06 | Actually, the third one, I want
to click to go to a frame and play.
| | 07:09 | So that sounds like what I want it to do.
| | 07:11 | So with that button selected, I will
just double-click on my code snippet,
| | 07:16 | and it adds that ActionScript, as well as, again,
some more comments, and even some instructions.
| | 07:23 | So it says, hey, you know what?
| | 07:24 | Replace the number 5 in the code below
with the frame number you would like to
| | 07:29 | move the playhead to when
that instance is being clicked.
| | 07:34 | Well, that makes sense to me.
| | 07:35 | I will come down here, gotoAndplay 5.
| | 07:37 | Well, I actually want to gotoAndplay 1.
| | 07:39 | So I will just change that 1,
and I will do a test movie.
| | 07:46 | This, again, will play through.
| | 07:51 | See my text should stop on the last frame.
| | 07:54 | We have our replay button.
| | 07:55 | If I click that, it replays the animation.
| | 07:59 | So that is controlling
the timeline with a button.
| | 08:02 | So I encourage you to also explore the
other code snippets that are available,
| | 08:08 | because you can do quite a bit.
| | 08:10 | It's all under timeline navigation,
the most common being stop at this frame.
| | 08:15 | But again, if you want to control the
timeline, just look to your Code Snippets
| | 08:20 | panel and add the code
snippet that you would like to use.
| | Collapse this transcript |
| Creating movement with ActionScript | 00:00 | Now you can do a lot of really cool
animations on the timeline in Flash.
| | 00:05 | It is definitely very powerful.
| | 00:07 | But sometimes what you're going to want to
do is use ActionScript to animate objects.
| | 00:12 | This is really helpful if you need to
animate a lot of different objects and
| | 00:17 | it would just take forever to do it in the
Timeline, or if you want to create random movements.
| | 00:22 | Well, you can use
ActionScript to do that as well.
| | 00:26 | Or even potentially user-initiated
movement - maybe you want some animation
| | 00:32 | to follow the cursor.
| | 00:34 | All this would have to be done using
ActionScript, or at least that's the
| | 00:37 | most effective way.
| | 00:39 | I am going to just start with a simple
example of animating with ActionScript,
| | 00:44 | and I'm going to use this raindrop.
| | 00:47 | It's actually called rain right in here.
| | 00:49 | But if I drag this onto the stage,
notice that it's just one raindrop.
| | 00:54 | So let's just zoom in on it.
| | 00:56 | This is my one raindrop that I want to
animate, coming down from the top, at an angle.
| | 01:03 | The first thing I need to do is I need
to give this object an instance name.
| | 01:08 | So in my Properties panel, I
am going to call it raindrop.
| | 01:14 | So there is my raindrop. It has an instance name
of raindrop, and I'm going to animate it actually
| | 01:19 | using code snippets.
| | 01:21 | So if I go to Window, down to Code
Snippets, notice that there is plenty of
| | 01:27 | different code snippets in here, but I
want to focus on this Animation folder,
| | 01:32 | because if I open that up, so I just
minimize that panel, you can see that there is
| | 01:37 | quite a few things I can do in here.
| | 01:39 | I can move movie clips with the
keyboard arrows, I can just move objects
| | 01:44 | horizontally and vertically, I can
rotate them, fading them in and out is an
| | 01:49 | option as well, but again, what I want
to do is I want to animate vertically.
| | 01:54 | So that's what I am going to start with.
| | 01:56 | So with that object selected, I'm
going to double-click Animate Vertically,
| | 02:01 | and that's adds the code to this frame right
here in this Actions layer that it creates.
| | 02:09 | So in my code, you notice that it gives
me some comments, not only what it does,
| | 02:15 | but how to modify it.
| | 02:17 | So the default direction of the animation is up.
| | 02:20 | So it's referring to this code
right down here, and it says raindrop.
| | 02:27 | So I'm pretty much at the Enter_Frame of the movie.
| | 02:30 | So if this movie is going 24 frames per
second, that's how often this function
| | 02:37 | is going to execute, 24 times per second.
| | 02:41 | In this case, this raindrop is
going to move its Y position.
| | 02:45 | So it's going to move vertically, like
it's saying here, and it's going to go up.
| | 02:50 | That's what this says. It's says -10.
| | 02:52 | So it's going to move it upwards.
| | 02:54 | It's going to -10, because 0 and positive
numbers are down. Negative numbers go up.
| | 03:01 | So, the first thing I need to do is
modify this, just like it says here, to modify
| | 03:06 | this, change the minus to a plus, if you want
to change the direction of the animation.
| | 03:13 | Again, that's what I'll do.
| | 03:14 | I'll just change that to a Plus sign.
| | 03:16 | Now, it's going to move down.
| | 03:18 | So let's do a test movie.
| | 03:23 | And we can see it moved down.
| | 03:24 | That happened pretty fast.
| | 03:26 | So let's go back into our code,
and we'll change this to 5.
| | 03:30 | Now, this should go at least half as fast,
but now we can see it moves straight down.
| | 03:37 | It's not bad, but as you'll
notice, this raindrop is at an angle.
| | 03:43 | So I might consider moving the
raindrop at an angle as well.
| | 03:48 | So I'm going to type in
"raindrop." Its X position,
| | 03:52 | so, horizontally, I want it to move += 1.
| | 03:55 | So this is going to move it to the
right one pixel pretty much every second.
| | 04:04 | So let's see if it goes at a
nice angle now, and it does.
| | 04:09 | That looks pretty good.
| | 04:10 | It's going at an angle,
and it works really well.
| | 04:13 | But what's happening is it still animating that
raindrop, even though you can no longer see it.
| | 04:20 | So it's off of my stage.
| | 04:22 | It's way down there, but it's still animating.
| | 04:24 | So what I want to do next is I want
it to reappear up here at the top, once
| | 04:29 | it leaves the stage.
| | 04:31 | So I'm going to go back into this code
here, and I'm going to add a comment.
| | 04:38 | So just like you have comments up
here, I can add my own comments down here.
| | 04:43 | If I just do it two forward slashes,
I can go ahead and type in a comment,
| | 04:49 | because I want to basically say, if it's
off the stage, have it reappear at the top.
| | 05:01 | Off the stage on the bottom, is what I mean.
| | 05:03 | Let's expand this out, because I am going
to write a couple of lines of ActionScript.
| | 05:11 | So let's just put in some hard
Returns, just so I have some room, and right
| | 05:17 | underneath that comment, I'm
going to add an if statement.
| | 05:19 | So if the raindrop, its Y position
is greater than stage.stageHeight -
| | 05:32 | so you notice how I start typing in
stage.stageHeight, which happens to be a
| | 05:37 | property of the stage -
| | 05:39 | I get this code hinting here.
| | 05:41 | So anytime I see what I want in here,
and I can just hit Enter, and it adds it.
| | 05:47 | So anytime it's greater than the
height of the stage, which means it's off the
| | 05:51 | bottom, then do whatever is in
between these two curly braces.
| | 05:56 | And in this case, what I want to do is I
want to reposition the raindrop, its Y
| | 06:02 | position, and I'm just going to make it = 0.
| | 06:05 | So that's puts it right back up to the top.
| | 06:10 | That's all the code I'm going to write.
| | 06:12 | If you are curious about the position of
things, what you can do is open up your
| | 06:17 | Info panel, because this gives me
to X and Y coordinates of my mouse.
| | 06:23 | So notice as I scroll up, the Y
numbers decrease, and of course they
| | 06:29 | increase as I scroll down.
| | 06:30 | So if that helps determining the
position of things for you, then consider using
| | 06:35 | that Info panel. But with that code
in place, I'm going to do a test movie.
| | 06:41 | We should see animate off, and it should
come back on up at the top. There it is!
| | 06:49 | I'm not modifying the X position
at all, but I could do that as well.
| | 06:55 | That's really just one raindrop, and
this might be the start of a storm, which is
| | 07:00 | fine, but what if I want to create more rain?
| | 07:03 | That would really be my next step
with this, which is sort of creating more
| | 07:07 | raindrops and having
them all come down randomly.
| | Collapse this transcript |
| Dynamically creating graphics| 00:00 | ActionScript is very powerful.
| | 00:02 | It allows you to control graphics really
well, and also allows you to create many
| | 00:08 | graphics that can then be animated, as well.
| | 00:12 | In this case I have this raindrop, and
it's just one raindrop, but what if you
| | 00:17 | need to create a whole landscape of
raindrops, say about hundred of them?
| | 00:22 | Well, animating all of those in a
different way would take quite a while, and
| | 00:26 | that's where ActionScript comes in handy.
| | 00:29 | So first off, let's just go ahead
and take a look at our raindrop that's
| | 00:34 | currently being animated down.
| | 00:36 | Again, I am going to
fill the sky with raindrops.
| | 00:41 | The first thing I am going to do is
just delete this raindrop layer, because
| | 00:47 | I'm going to dynamically pull this raindrop
from the library and place it on the stage.
| | 00:53 | In fact, I am going to pull a hundred of them on.
| | 00:55 | So let me go to my Actions
layer and open up the Actions panel.
| | 00:59 | Here is my current code and all
this does is animate my raindrop.
| | 01:05 | I don't even need these comments right
here - so I'll just delete them and do a
| | 01:09 | couple of Returns - because I'm
going to add my own comments in here.
| | 01:12 | So I'll just do two forward slashes,
which allows me to add my own comment, and
| | 01:18 | I want to dynamically pull raindrops
from the library, and I am going to do
| | 01:29 | that, but the first thing I need to do,
before I can start writing any code, is
| | 01:35 | make it available to ActionScript.
| | 01:38 | So I am going to right-click on that
rain movie clip, go to Properties, and I
| | 01:45 | might need to twirl down the Advanced
tab right here, and under Linkage, you'll
| | 01:51 | see that it says Export for ActionScript.
| | 01:53 | So I want to make sure that's checked.
| | 01:55 | Then I am going to give it a specific
name. I am going to call it Rain, with
| | 01:58 | a capital R. Class files
usually have a capital letter.
| | 02:03 | Either way, you just want to be really
mindful of whether it's capitalized or
| | 02:07 | not, and to stick with one or the other.
| | 02:10 | But in general, do an initial cap.
| | 02:12 | This is called Rain. I'll click OK.
| | 02:14 | It says that it's going to create a class path.
| | 02:17 | I am like, that's fine, just click OK from
there, and notice how under Linkage, it says Rain.
| | 02:22 | So now it's available to ActionScript.
| | 02:25 | So back in my Actions panel, I can go
ahead and create a new variable called
| | 02:30 | raindrop, and it is a
movie clip. I'll type that in.
| | 02:36 | I've selected movie clip.
| | 02:37 | It adds that import statement.
| | 02:40 | I am going to type in new Rain,
because that's the class that I just made.
| | 02:45 | So I need to make sure this word
matches up with this linkage word right here.
| | 02:50 | Okay, so this new variable was created.
| | 02:53 | Now I need to do an add child raindrop.
| | 02:58 | That's what I'm adding.
| | 02:59 | I am adding this raindrop to the stage.
| | 03:02 | So I am going to go ahead
and run this. Do a test movie.
| | 03:07 | We should see it animate on down
from the upper left-hand corner.
| | 03:10 | So there's my one raindrop.
| | 03:12 | Let's close that, go back into my code,
because I need to generate 100 raindrops.
| | 03:21 | So I want to dynamically pull
100 raindrops from the library.
| | 03:25 | I am going to do this by creating an array.
| | 03:29 | So the first thing I am going do,
right up here, is create an array called
| | 03:34 | rainArray, and it is of type Array, and
I'm instantiating it. It is a new Array.
| | 03:45 | It's my big rain cloud, full of rain.
| | 03:47 | Currently, there is nothing in it.
| | 03:50 | But I did just create this Array,
which I am going to use in a second.
| | 03:53 | All right, with this new Array
created, what I want to do next is I want to
| | 03:57 | create a For loop, and I'll
talk you through what this does.
| | 04:01 | But I first need to create a variable,
that's a number, that starts at 0, and
| | 04:10 | as long as my number is less than 100, then
Loop through this For Loop, just like that.
| | 04:20 | That's what I want.
| | 04:21 | I'll do an open curly brace.
| | 04:23 | If I hit Return, it adds the
closing curly brace.
| | 04:26 | This says it's going to start at 0.
| | 04:28 | So here's my variable name. This could
be anything, but as long as i is less
| | 04:33 | then 100, then it'll loop through this code.
| | 04:36 | This just adds one each time it goes through.
| | 04:40 | Right in here, this is where I need to
add my raindrop, where I have instantiated
| | 04:46 | it from the library.
| | 04:48 | I am going to go ahead and tab that in,
but now I've created that new raindrop.
| | 04:55 | But I haven't put it in
this array that I've made.
| | 04:57 | So I need to put it in my rainArray.
| | 05:02 | So rainArray push raindrop.
| | 05:05 | Push it into that big rain-cloud.
| | 05:07 | rainArray.push(raindrop);.
| | 05:09 | So that's what I have done.
| | 05:10 | I've dynamically pulled 100 raindrops from
the library, and I've put them on the stage.
| | 05:17 | In fact, let's just autoformat my code.
| | 05:21 | So I'll click that button, and that will
make sure all my code looks nice and neat.
| | 05:27 | That just adds in any tabs and any line breaks
| | 05:30 | that might make it easier to read.
| | 05:32 | I'll check my syntax,
| | 05:33 | it's another thing I might consider.
| | 05:36 | Then I'll just do a test movie,
and again, there is my 100 raindrops.
| | 05:41 | There is only one that animates,
so I want to animate them all.
| | 05:45 | So again, it's going to be a
matter of creating this For Loop again.
| | 05:50 | Just to make this a little simpler on me,
I am going to actually copy this For
| | 05:56 | right here, because down in here,
instead of just animating one raindrop, I want
| | 06:03 | to create that For Loop right in
here that's going to animate them all.
| | 06:07 | So I've just pasted in the same For Loop.
| | 06:09 | So as long as i is going to be
less than whatever is in the array.
| | 06:14 | So there might only be a
couple in there initially.
| | 06:17 | So I would probably want to
change this to rainArray.length.
| | 06:23 | So whatever is in the array, just
loop through it, and you're going to loop
| | 06:28 | through all of this content.
| | 06:32 | I've just added a closing curly brace
down here, because anything within these
| | 06:37 | two curly braces is going
to execute in this For Loop.
| | 06:41 | That's why this Auto
Format button comes in handy.
| | 06:45 | So if I click on it, it actually nests that
all nice and neat, and there is my For Loop.
| | 06:51 | So we're looking pretty good so far.
| | 06:53 | It will loop through all of this, but
it's still only moving that one raindrop.
| | 06:57 | So I actually need to change that.
| | 06:59 | I need to say rainArray.
| | 07:02 | Whatever is in my rainArray -
I am not sure what's in there -
| | 07:05 | I could actually define within these two braces.
| | 07:09 | I could maybe point to the second
raindrop, or the third, or the fourth.
| | 07:15 | But I want to change this to i,
because it's going to Loop through here.
| | 07:19 | The first time through it
might be sort of equal to 0.
| | 07:22 | Then it will refer to the first one,
then it will refer to the second one.
| | 07:27 | But if I keep that at i, it's always
going to reference every single one.
| | 07:32 | So I'll copy that, and change that
raindrop to rainArray. Pretty much wherever
| | 07:39 | it says raindrop, I am going to change
that to rainArray, because again, that's
| | 07:44 | going to change each time it
Loops through this For Loop.
| | 07:49 | Lastly, I'll just copy this line and
paste it below because I want to change my
| | 07:57 | X position to 0 as well.
| | 08:00 | So you're just going to see pretty
much all of my raindrops animate from the
| | 08:03 | upper left-hand corner and
then just down at an angle.
| | 08:07 | So that's all this does.
| | 08:09 | In fact, if I hit Return, I
can add a comment in here.
| | 08:13 | So loop through the array,
and animate all raindrops.
| | 08:20 | That's what that does.
| | 08:22 | I'd say that looks pretty good.
| | 08:24 | We're dynamically pulling the
100 raindrops into my scene.
| | 08:28 | So let's do a test movie.
| | 08:31 | Again, there's my one big raindrop, 100 of
them stacked on top of another, and they animate.
| | 08:39 | So really, my next task is to go ahead
and randomly position all of these
| | 08:46 | raindrops sort of across this
whole scene and have them rain down.
| | 08:51 | So that would really be the next step for this.
| | Collapse this transcript |
| Randomizing content| 00:00 | One of the powerful features of
ActionScript is its ability to just randomize
| | 00:06 | content, and that's where I'm at with
this project is I want to be able to just
| | 00:10 | randomize the position of these movie
clips, because what's currently going on
| | 00:16 | is there's about 100 raindrops
coming down in the same position.
| | 00:20 | So this is, again, a perfect case for
ActionScript where I want to randomize some
| | 00:25 | of those properties for those movie clips.
| | 00:29 | So I'm going to select this first layer,
| | 00:30 | I'll open up the Actions panel, and again
here's where I place all of the movie clips.
| | 00:38 | They actually get added to the stage.
| | 00:41 | They're all called raindrop, and then
down here, I referenced each one in this
| | 00:47 | rainArray, which I have kind of been
referring to as a big cloud, because it
| | 00:51 | contains lots of raindrops.
| | 00:53 | So this is the motion up here.
| | 00:55 | This is where they get created.
| | 00:57 | So after they are created - and quite
frankly I want to change the position of
| | 01:06 | each one as they get added to the stage -
| | 01:10 | so right in here, this is where I want
to change the properties of each raindrop.
| | 01:17 | So all I need to do is say raindrop,
and for this raindrop, maybe I will
| | 01:25 | change the X position.
| | 01:29 | So to left or right, change its X position.
| | 01:33 | In this case, I want to go
ahead and find a random number.
| | 01:38 | I'll show you an easy way to do that,
because if I open up my Code Snippets
| | 01:42 | panel - just minimize that a
little bit - under the Actions folder,
| | 01:48 | there is Generate a Random Number.
| | 01:51 | So let me just go ahead and double-
click on Generate a Random Number.
| | 01:55 | There's instructions for it,
| | 01:57 | but overall, what I want to do is I want
to go ahead and get a random number, and
| | 02:01 | that's right in here.
| | 02:02 | This gets the random number.
| | 02:05 | So that's what I want to use.
| | 02:06 | There is also Math floor as well.
| | 02:10 | Math floor, that sort of rounds the number down.
| | 02:14 | Anytime you use Math random, it
actually gets a number between 0 and 1, and it
| | 02:19 | might be 0.25, whatever the case may be.
| | 02:23 | This rounds it down to a whole number.
| | 02:27 | So I'm going to just steal this code right here.
| | 02:30 | So I'm going to copy it,
and I'll just delete that.
| | 02:33 | But I encourage you to use the Code
Snippets panel as a way to sort of
| | 02:38 | start writing your code.
| | 02:40 | Okay, raindrop X, and I will just go ahead
and paste in that Math floor, Math random.
| | 02:50 | I do want to get a random number, but
I want to get a random number between 0
| | 02:56 | and the stage width.
| | 02:58 | So Math random, times, let's do
stage, stageWidth. It highlights.
| | 03:06 | I can Hit enter, and it will
add it, just like that.
| | 03:11 | So whatever that random number is, go
ahead and multiply it by the stage width.
| | 03:17 | So that's going to give me a number
between 0 and the width of the stage, which
| | 03:21 | happens to be 1,000 pixels.
| | 03:24 | But in case my stage ever changes,
that's why I'm typing this in.
| | 03:30 | I'll just keep this as Math.floor.
| | 03:32 | So that's going to randomize the X position.
| | 03:35 | Well, if I run this code now - I'll
just do a quick test movie - you can see it
| | 03:43 | animates all of them down, and
again, that was pretty drastic.
| | 03:48 | So in fact, if I run that again,
you'll also notice that it just animates
| | 03:53 | them all down, and then when they reach the
bottom, they all are back where they were.
| | 03:58 | So that's why I have to take this line
of code, copy it, and down below, right
| | 04:07 | in here, instead of putting it at zero, I
need to go ahead and paste in that line of code.
| | 04:15 | So again, it's not raindrop X. I'm referring
to, actually, the rainArray, and whatever
| | 04:23 | raindrop that is being animated.
| | 04:27 | Again, I've changed this
from 0 to that random number.
| | 04:31 | Now, if I do a test movie, it will not
only be random here, but when they come
| | 04:36 | down again, they will
also be in a random position.
| | 04:40 | Again, I haven't seen rain like this,
so I probably want to change it, but
| | 04:43 | it's the same process.
| | 04:45 | I'll just copy this line again, paste
it, and I'll change it from X to Y, and
| | 04:53 | let's make this equal to the stage height.
| | 04:55 | It's going to go ahead and randomize
the position for each one that way, as well
| | 05:01 | Let's do a test movie.
| | 05:04 | Now, it looks pretty good.
| | 05:05 | At least everything is random, but
overall, I think it needs more depth, because
| | 05:13 | all my raindrops are the same size.
| | 05:15 | So I want to adjust the opacity,
and even the size of each raindrop.
| | 05:21 | So back in here, next line.
| | 05:25 | I'm going to change the alpha, and the
alpha is usually a number between 0 and 1,
| | 05:33 | which happens to be what Math random returns.
| | 05:37 | So I'll just copy that and paste it below.
| | 05:40 | So now it's going to get a
random number for my alpha.
| | 05:44 | Next up, raindrop.scale X is going to
be equal to again Math random, because
| | 05:54 | scale X is a number between 0 and 1.
| | 05:57 | 0.5 would be 50%, so it's 50% opaque, or
transparent - whichever way you want to look at it.
| | 06:05 | Next up, I have raindrop scale Y. Now,
I don't want to do a random number for
| | 06:14 | the scale Y because I always want it
to be the same scale as the scale X. So
| | 06:19 | I'll actually copy this and paste it right here.
| | 06:23 | Now, it's always going to
scale it down proportionately.
| | 06:28 | Lastly, what I'm going to do is I'm
going to click the Auto format button and
| | 06:32 | the Check Syntax button, just to
make sure it cleans up my code.
| | 06:36 | In fact, I'll just go ahead and remove
all those spaces as well, and add some
| | 06:42 | final comments, since my code
seems to be down right now.
| | 06:46 | Move the raindrops.
| | 06:49 | Again, this is so in case I come into
this code later on or want to reuse it,
| | 06:53 | I'll remember what everything does.
| | 06:56 | But I'd say that looks pretty good.
| | 06:57 | I'd say it looks set up.
| | 06:59 | But this final test movie will prove if it
does and sure enough, it does work out just great.
| | 07:06 | You can see those different-sized raindrops.
| | 07:10 | I'd say my only complaint now, which
might be my last edit, is to increase the
| | 07:15 | speed of these raindrops.
| | 07:16 | So let's up this to about 16,
and let's make this, say, 4.
| | 07:22 | The raindrops are going to go
a lot faster. That's better!
| | 07:28 | I like that, and again, I can start
to play with those various properties.
| | 07:32 | But you can see that it is pretty
straightforward to manipulate movie clips.
| | 07:38 | Again, these are all being pulled from
the library, and I'm manipulating them
| | 07:42 | randomly, and you can see the results
I get are quite impressive, considering
| | 07:48 | animating these separately
would take me a long time.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thank you for watching.
| | 00:01 | I hope you learned a lot from this title,
| | 00:04 | but more importantly, I hope you are
inspired to create unique, exciting
| | 00:07 | animations that will really
allow you and your projects to shine.
| | 00:13 | I look forward to seeing them on the
web or anywhere else they may appear.
| | 00:17 | Thanks for watching and good luck!
| | Collapse this transcript |
|
|
