the one thing that will mean the difference between your success and
frustration levels in working with Flash
is your ability to understand the timeline
in this tutorial
I'm going to try to cover all the basics so keep coming back to it until you
feel comfortable
before we go over this area of the timeline let's look at the player
controls
down here we have the ability to clear animation one time through
we can step back one frame
and forward one frame or go to the last
and the beginning
this is really helpful when your
project gets to be like six or seven hundred frames
to be able to use these player controls
we also have a looping feature
which allow you to loop whatever frames are in this shaded section
so if I hit return or enter on my keyboard
it'lll keep looping those frames
this is great for troubleshooting
and if you see any kind of jumps or bumps or what I like to call hiccups in your
animation
this allows you to keep seeing it over and over again until you can isolate
what's happening to it
in order to stop this, click enter or return
now you can adjust what frames will be looped
by moving it this way
the left or right areas
hit return or enter and it's gonna keep looping those
I'll shut that off and turn
onion skinning on
onion skins are great because they're showing you the in-between frames
we are the keyframers in flash
we create the first frame
and the last keyframe and flash will create all the in-between frames
that make up that animation
so if I hit return
that's gonna show me all of this and I can scrub it
which of course it's not letting me scrub it but
now
I can see all those in-between frames
if I go to onion skin outlines it's going to do the same thing except for
all those in-between frames are in outline form
if I choose edit multiple frames that's gonna let me edit the beginning
or ending key frame simultaneously
last let's talk about the frames per second and what frame we're on
again this is only twenty-four frames so sometimes you don't really need this
but if you scrub your playhead
this is gonna show you what frame you're on
and I can clicking in here and type a frame and it's gonna jump me to that
frame
which is great again if you have like seven hundred frames
now for here we have a frame rate which is frames per second this means that
at twenty four frames a second of your animation has gone by
and that's what we are seeing here
this is the elapsed time
so at this point it's at
2.
or .2 seconds in time
as with all of these
when you hover over them
you have the ability to scrub it
so change
things that are in here
actually I'll go back to twenty-fourth for that one, or I can scrub this one
and that allows me scrub the playhead as well
same thing for the seconds
now before we start talking about these actual
properties on the timeline
we're gonna go to this pop out menu and choose large and that gives you a bigger preview of all of
these frames
and I encourage you to kind of look through these and see what other options you have here
usually I work in normal but if I have a really long animation I choose tiny and
if I have really short I choose large
so what we're seeing here first is empty frames on this side
these are light gray or white and they are showing a grid and this just means there's
absolutely nothing on these frames
on this layer past frame twenty four
over here we kinda start seeing solid colors
and that's letting you know that there's something happening on these layers
I can turn the visibility on and off of each of these
and I can lock each of these so that I don't edit them
or modify them accidentally
now when I'm looking here this first identifiers layer
it's grey so think of gray as concrete meaning it's not moving
it just sits there
and right now
this whole frame
everything lasts for twenty four frames we have our first keyframe where we see
our first new artwork
which is all the text and the lines
and then that artwork just lasts all the way to the twenty-fourth frame
where we see something called a stop frame
it's a little white hollow square
or rectangle
that lets you know that the artwork that was immediately to the left of it and
the first keyframe to the left of it
has stopped at this point
then we have all these layers which are showing the three different types of
tweens
we have a basic motion tween which you're gonna use a majority of the time
then we have a shape tween which'll morph
a shape
like a green circle
into another shape
like a yellow star and this only works with shapes, you're not gonna use these a lot
but it's good to be aware of what it looks like
and you can see with kind of older tweens they have this line and saying
saying we're moving from this keyframe to this keyframe
and then this one is called a classic tween and it does the same exact thing as a
motion tween
except for the motion tween is more versatile
these classic twins are what we used to call motion tweens in CS4 and earlier
versions of Flash
but now with the new motion tween
we've renamed this the classic tween and we don't use these a lot
you can use these for things called motion guides which are great but
in general you're probably going to be working with the motion tween the
majority of the time
now down here we have a new layer
a new folder
and delete, so this is where you can delete layers create new layers or
organize those layers
to keep your timeline as clean and organized as possible
if I click new layer
you're gonna see that you can come here and you can name the layer
so I can call this one actions
and actions is a script that controls your project
an I'm gonna add a stop action here so it stops looping, if I preview this
you can see that it just continues to loop
but Flash automatically adds
as many frames as the longest layer on your timeline
because it assumes whatever you're creating you're going to want it to
happen
at least as long as the longest thing or you're gonna want to
have it at least that long or maybe even longer
in this instance
if you don't want all these other frames you can
select these frames and delete them
selecting things in Flash is kind of hard
because
it makes a difference whether you've clicked on it once are whether you've clicked on it
twice
if I click off of any of these frames
then just click and drag
that's gonna highlight or select frames
which is great
but if I click
and let go and then I click and drag again
now we've created weirdness
because this means it thought because you clicked and then you clicked and moved
it again that you were selecting that frame and then you wanted to move that
frame
So I'm going to undo that with Cmd + Z (Mac) or Ctrl + Z on a PC
and if you want to select and you forget that
you have to first click off and then click and drag
what you can do is select the first frame
hold the shift key on your keyboard and select the last frame
and then that will give you a whole
span or highlighted selected area
and now I can right-click on this and choose remove frames which we don't
need to do in this instance but you can
but a right-click, don't forget that you have that right-click option
even if you're on a Mac
you have this right-click option because you have
a lot of features you can cut frames, you can remove frames, you can copy motion
and paste motion
there's a ton of stuff you can do with this so
another thing when it comes to you moving things around is
if I wanted this frame
to be at the very end
I wouldn't do click and drag because again that's highlight but this time I
do actually want to move it, so I can click
and then I can click and drag
and move that down so now that
that keyframe
which is what we call a blank keyframe because it's hollow
that means that we know there's gonna be a change in action there's gonna be
something new, either new artwork or new
actions or what not
but we haven't added it yet
so that's called a blank keyframe
and by moving that over
I'm gonna add an action here that'll stop it
but what if I decided my animation
goes a little bit too quickly
well I have some options I can come to frame rate and I can change it to let's say
12, so that's 12 frames per second so this should last for a little bit under
two seconds
let's watch that
and it does slow down but it does get kind of jerky and choppy which is what I
don't want to have happen
so I want to keep the smoothness, so let's go ahead and change that to 24 frames per second
but I actually want to stretch out how long each of these animates
with the regular motion tween that you're gonna be using a lot
all you have to do is hover around the outside edge
of the left or right...click
and drag
and that allows you to stretch it out
as you can see my second key frame
which is shown by this
black
diamond
and that is a keyframe for a motion tween it's just saying there's a change in property and
the property in this instance
X, Y coordinates that
moved it to that end so that it goes a lot smoother
so if I watch that ball, that blue ball, that animation is slower but still smooth
for the shape and classic tween
it's a little bit different
you have to click on the last keyframe and then click and drag that last keyframe
you can't stretch these ones out
so I'll click
and then click and drag
and those will make them last
as you can see at this point
my identifiers go away
and that's not something I want to have happen I want them to be on there
the entire time these things are animating
so I just wanna add more time in which it lasts
so I could come here, select it
and then click and drag it
and that's can add more time but as you can see it adds another keyframe
so I'm going to undo that
because basically I just want it to last for longer so I can go to insert,
timeline, and choose frame
so that's gonna allow that to sit there for all of these motion tweens. Let's go ahead
and watch this
it's still smooth
but it's a lot... I mean we can take it in and it's not too fast
Let me change this back to a normal
size and let's talk about what
what happens when you want to move tweens over and you're gonna wanna do
this because sometimes you wanna make room for new things you're adding at the
beginning
and sometimes you realize that things are overlapping
whatever reason you want to move it
it's okay to move it
but you have to do it in a specific way or select it in a specific way
so
if I want
to move this guy
I'm going to double-click, a motion tween you can click and double click in there and it's
gonna highlight the whole motion tween and that's talking about the new motion
tween
so let's say I want to move this down to frame 5 so that
it doesn't start immediately right away on frame one
if I want to move the green
shape tween over, it's a little bit different, I have to hold or click the first
frame, hold shift, click the last frame
and then move it all over - I can't double-click
and then again if I want to move this one, click
hold shift,
click the last frame
and then drag it over
So we're gonna have to do some clean up you can see all of a sudden we have these empty frames
here which is perfectly ok because nothing should be happening
at this point for the classic tween it starts on frame ninety-five now which is
how I want it
but I want this blue circle to en
all the way at the end of the animation, I don't want it to go away which is what it's
doing now it'll go away
then that one will go away, then that one, and it will loop back
I actually want it
to last until this point
to where my last one comes in and stops
so I'll click on that frame and again do insert, timeline, frame
and that's gonna make it last and this one's a little bit different for the shape tween or
these original kinda tweens
I can
go to insert, timeline, frame
but then it creates this broken
tween because it's looking for another keyframe
so that it changes from this is to something else
sorry I'll right-click in here and choose remove tween
because I just want it to look exactly as it was here
for the rest of that time
so again
I want this the identifiers to last for the entire animation so I can click on the
frame I want it to last to and hit F5
which is the same thing as going up to insert, timeline, frame
and then the last thing is I want this very last
blank keyframe
to go to the very end
and this is where I want to create ActionScript that tells it to stop at this point
so I can go up to window,
and choose actions
and then I'll go to this plus
and
oops...I forgot I'm in CS3
so let's just type this out, the ActionScript for this is stop
open and close parentheses
and then a semi-colon
and I'll close that
and you can see on that particular frame
we may get larger
on this particular frame
you can see a little "a" and that tells you that there's actions on that
layer
or on that
particular frame
and that's good, we want that action there we want our actions on
the timeline on an actions layer
but if you start seeing little "a's" all over the place
then that's a visual indicator there's actions on there and you need to delete those
actions
so now I can kind of lock these so I don't mess them up and watch this
and it comes in and it'll stop and just last while the other one comes in
and then the last one
and then it stops it doesn't loop at all
so it's really important that you understand that
selecting things is a little bit different if you just click and drag
it's gonna highlight
but if you click
and then click and drag it's gonna move things around
you can right-click
to remove frames
remove tweens all that good stuff
and then being able to manipulate the controls down here will help you to get
through it easier