Tip:
Highlight text to annotate it
X
Hello, everybody.
My name is Jon Reid, and I'm one of the developers that
helped build Google Web Designer.
In this video, I want to talk about some of the more
advanced features and the advanced mode of timeline.
There is another video where I cover basic animation using
advanced mode and the timeline.
If you've seen that video, you'll recognize our current
setup here.
This is where we left off in the previous one.
I'll open up that file so that we can see it.
And you'll recognize this animation.
This is what we had before.
You see, it's a very simple animation that we built in the
last video.
I want to talk about some of the features that the timeline
has in advanced mode for helping you keep your
workspace clean, and help you organize your animations a
little bit.
We have the concept, of course, of doing labels.
As I said, you can double click on any layer
and change its label.
This, actually, for HTML elements, when you do this,
this actually modifies the ID attribute on the element.
So when you save your file, this actually gets written
into your document as the ID attribute on that element.
The exception is for our components, our tap
area, and so forth.
These guys here.
So if you use one of these in one of our ads and set the
label on that, that goes in as an attribute in the scripting,
rather than as an actual ID on the element itself.
So that's one way of helping you organize your animations.
You can label your individual layers as you need to.
Another way is we have a concept of
hiding and showing layers.
So each individual layer can be hidden or shown.
A hidden layer is just invisible on stage.
You can't select it on stage, so you can't select it with
the marquee, and you can't select it with Control A. You
can select it in the timeline and you can modify its
keyframes and so forth, and you can drag and drop it and
so forth, but you can't actually select it on stage,
and it gets out of your way.
So this is a great way of tidying
up a complex animation.
So if you had an animation that had lots of layers in it,
and you wanted to hide some of them, this gives you the
ability to be able to do that.
In addition, we have a concept of locking layers.
A locked layer is visible.
It doesn't affect the visibility of the layer, but
it does affect whether or not it can be selected.
A locked layer cannot be selected on
stage or in the timeline.
So you see here, we have the blue one locked, and we
cannot select it.
We select the green one, not the blue one.
Can't select it here, no matter how hard we try, and we
can't do it with Control A. We can only select the other one,
because this one is locked.
So it can't be moved, and it can't be selected.
It can't be modified or anything.
So this gives you a way of leaving stuff on stage
visually so that you can see where they are, and maybe you
need to animate around stuff, but you don't want to be
selecting these things every time you do something.
This gives you the ability to do that.
In addition, we have a dropdown menu here, the
timeline options menu, which lets you lock all layers or
hide all layers.
So it's a way of basically going through and clicking
each of these icons individually.
So if you have a lot of things you want to hide, this is the
way to do it.
In addition, we have this concept of showing only
animated layers.
So if I add in a couple more layers of elements, and I'm
not even going to do anything with these guys.
I'm just going to add them.
So you see we have three new layers.
No animations on them.
If we hide them, they are still on stage.
They're still selectable.
You can still modify them.
But they're not in the timeline,
because they're not animated.
When this feature is activated, all we see in the
timeline are animated layers.
So this is another way of helping you
organize your stuff.
These settings, lock, hide, and
showing of animated layers--
these are an author time construct only.
They do not get published when you publish your files, so
it's just for your benefit to keep your files organized
while you're doing your work.
We also have a concept of looping animations, and we
have the ability to be able to set our Preview Mode to loop
infinitely.
This is, again, just an author time construct.
This doesn't get published, but it does give you the
ability to be able to see.
So I'll activate it, and now both of these animations will
loop infinitely as they play.
And you can see this gives you an idea of what it looks like
while your animations are looping.
Again, that doesn't get published.
If you want to publish that, what you need to do for each
individual element is go to its set animation repeat
button and click on that, and that brings up a little pop up
menu where you can set how you want that particular
animation to loop.
No times, two or more times, or an
infinite amount of times.
And that gives you the ability to do that.
That actually does get published.
So this is where you would go to actually do your individual
track animations.
And that gives you very fine control over what gets
repeated and what doesn't.
In addition, now, in the keyframes, we have a couple of
other features that we haven't outlined.
You can drag and drop keyframes.
So let's say we've got this nice animation going here, and
this color change part here, between here and
here, takes too long.
So I'm just going to drag this end keyframe and I'm going to
move it into here.
So now it only takes 400 milliseconds for
that last bit to happen.
And we'll play that.
You can see it happened a lot faster.
You can drag entire keyframes.
You can also click and drag spans
in between two keyframes.
You can see when you click on in between two keyframes, it
highlights both keyframes at the beginning and end, and
then you can drag and drop that entire span.
That makes this animation a lot longer.
So you can see it's a lot slower than it was before, and
then it's very quick, because we have the same duration that
we made at the end.
You can also, if you drag the very first keyframe, this is
used to create an animation delay.
So what I've done here is I've set a delay.
This animation now will not start for one second.
Then it'll do its animation just like we have here.
So we'll see the green layer will go ahead and animate as
normal, but as soon as it stops, the blue layer will
start its animation.
So that's how you can induce delays in your animations.
Now, you'll notice while I was dragging these spans and the
keyframes, they were snapping to our time markers.
Similarly, as you click through the timeline, wherever
you click, it'll try and move the playhead to the nearest
time marker.
If you need more precision, you can actually turn off
keyframe snapping here, and this will give you the ability
to be able to move your time marker to wherever you need
and to be able to drag and drop spans to
wherever you need.
That will give you that extra precision if you really find
you need that.
That will go ahead and give you that extra precision that
you can do.
But I generally find that the keyframes mapping is pretty
much what I like all the time.
In addition, if you right click on a keyframe,
you can remove it.
That will give you finer control of your animations.
You can also view the animated properties on
that particular keyframe.
So these are the things that are actually being animated in
this keyframe.
Every keyframe will have top left width and height, whether
or not they're being animated, and then obviously, we're
doing the background color as well.
If you click on the X next to one of
these, it will get removed.
So that gives you the ability to knock out something in
between two keyframes so you can span an animation across a
keyframe if you need to do something like that.
That gives you the ability to do that.
It just gives you a little bit more insight into things.
You can't add things, but you can delete them
once they're there.
And then if you right click in the middle of a keyframe, you
can insert a keyframe at that point.
So this gives you the ability to split two keyframes, split
the area between two keyframes and add a new keyframe.
You can also change the easing.
So if you take a look at this, I'm going to move
this back to here.
So we'll take a look at this thing, where it goes
from here to here.
So what we'll do is I want to change the easing on this.
And when you do that, this brings up a menu where you can
alter the easing.
Now, it comes with a set of preset easings.
These are the ones that are defined by the CSS standard,
and you can pick whichever one you want, or you can do a
custom one.
So what I like to do is I like to do the little bouncing ease
that you can by just doing sort of an exaggerated thing
like this, and this will cause a nice bounce on that.
You click Apply.
And you can see the label here changes to Custom, whereas the
rest of these are still linear, which is the default.
Linear is the default, according to the standard.
And then if we play that, this motion here will have that
little bounce at the end.
So we'll go ahead and launch.
Boing.
Pretty cool, huh?
That gives you the ability to go ahead
and modify your easings.
So that's the more advanced capabilities of the timeline.
And that gives you a lot more finer control over your work
and over your animation.