Showing a simple tap or click is important because it shows the user interacting with an interface. In this video, learn how to use a simple ellipse for this purpose and show the tap through the use of the opacity and scale properties of the ellipse.
- [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.
- Prototyping motion
- Using the Graph Editor
- Working with shapes and masks
- Supporting tap, press, and swipe gestures
- Handling pinch and spread gestures
- Designing patterns
- Making navigation, buttons, and breadcrumbs
- Creating progress bars
- Working with modals, menus, and cards
- Zooming content
- Making a floating action button
- Handling text input and cursors