- [Instructor] In many respects
our interactions with the user interface
is a deeply personal one.
We either physically touch a UI element
on a smartphone or tablet screen
or use an extension of our finger,
the mouse or a pen, to touch a UI element
on a desktop screen.
In either case we need to show in our prototypes
how a user will interact with the UI elements
by mimicking a touch or tap interaction,
and we'll start with a simple tap.
To get started open the 01 tap file
in your chapter download.
In this exercise let's assume the user
will tap the sign in button right here
to open a screen.
A common practice is to use a circle
to show where the tap will happen.
So what we're going to do
is we're going to use an ellipse shape.
Now make sure you haven't got the image selected
or the layer selected, and just click on the comp,
and we'll come here to the ellipse tool,
and we're going to draw a small circle
over the sign in button.
So we'll just hold down the option and shift keys
to draw that circle, and we'll fill it with gray,
and we'll turn off the stroke.
Now another thing you might want to do
is to move the anchor point into the middle,
and to do that we choose the pan behind tool
or we can just press the Y key
and move that anchor point in place.
So if I select it, and we'll just move it down.
There we go, it's in place.
So back to the selection tool,
and we'll just put the circle right there.
Now the other thing you might want to do
is to change the name of the shape layer to tap.
So let's just press the return key
and type in tap.
Now I'm going to move the play out to the 15 frame marks.
So we'll just come across here.
There we are at the 15 frame mark,
and I'm going to press the option alt left square bracket keys
to set the endpoint.
Okay, so option or alt on the PC
and left square bracket,
and you can see that the endpoint is set right there.
So this doesn't appear till about here.
So it's about 15 frames in.
The next thing we are going to do
is to add opacity and scale key frames
at the 15, 20, and 25 frame marks.
Now to do that we're just twirl it up,
and we're going to open up the opacity property,
which is T, and then hold down your shift key
and press the S key, and now we've got scale
and opacity showing.
So we'll just add our three key frames.
I'm just going to move this up
so you can see what I'm doing.
So we're going to add key frames there.
Okay, so that's the 15.
We're going to come over to the 20 frame mark,
and we're going to use the diamonds
to add key frames.
So we'll just add key frames here and frame,
and of course we're going to come over
to the 25 frame mark right there,
and we'll click the diamonds again.
Okay, so there we go.
Go our three free key frames in place.
So let's deal with opacity first.
The start and end key frames
will have an opacity value of zero.
So I'm just going to come over to the first key frame
in the opacity, and I'm just going to knock
the opacity down to zero,
and we're going to come over to the middle key frame,
and we're going to pull the opacity up to about 50%,
and then we'll take the last opacity key frame,
this one here, and we'll knock it back to zero,
and if we scrub backwards, you can see
we've got a nice little tap action happening here.
Now to show that the user has actually tapped,
we can also use scale,
and we've got the three scale key frames here.
So the first key frame we're going to set
the scale value to 70,
and make sure that you've got
the constraint proportions link selected
so that they both change to 70,
and then we're going to come to the middle key frame,
and we'll set it to 100.
So we'll just leave it there,
and then we'll take this back to 70%.
Now all we have to do is select the key frames
and apply an easy ease.
So I'll just right click, key frame assistant,
easy ease, and we've got it.
Now we need an out point for the tap layer
'cause we just don't need to hang it around.
So we're going to place the play head,
we'll go out just about a frame out
from the last key frame,
and we're going to press the option
or alt and right square bracket key,
and that trims off the action there
as you can see.
It just trims it off, and it's gone.
So we now know that we've got a tap in here.
So if I come back and press the space bar,
you can see there was that tap.
Okay.
Now by doing this we can actually reuse
this tap animation.
For example, we could also show a tap
on the sing up button right down here.
All you have to do is to duplicate the tap layer.
So you select it and press Command + D on a Mac
or Control + D on a PC,
and we've now got a tap two layer,
and all we have to do is just slide its duration over.
We'll just slide the duration strip over
say to 35 frames.
Okay, so I'll come to the 35 frame mark.
There we are, right there,
and all we have to do now is just move it down,
and you can use the arrow keys for this.
So we'll just move it down with the arrow keys.
There we go,
and, if we deselect and come back
and press the space bar, there's the taps.
So there you go.
There's how you can quickly show a tap.
You can use opacity to show the tap.
You can use opacity and scale
to show the tap in material,
but the cool thing is you only have to really create one,
and then just constantly reuse it.