1
00:00:01,500 --> 00:00:03,580
Hey, in this video, I’m going to show you

2
00:00:03,580 --> 00:00:05,940
how to use auto transition to create a flashing cursor.

3
00:00:06,340 --> 00:00:07,760
Let’s get started.

4
00:00:09,080 --> 00:00:13,911
As soon as you place all the assets, you’ll
see a nav bar, a keyboard, a form field, an

5
00:00:13,911 --> 00:00:15,630
enter arrow, and a cursor.

6
00:00:15,630 --> 00:00:19,200
Set them up like so, with the keyboard placed
just below the navbar.

7
00:00:19,960 --> 00:00:23,820
Create a “Username” text field and set
it to white with a 50% opacity.

8
00:00:25,880 --> 00:00:31,920
To really match Android standards, set it
to Roboto-Regular 16 point.

9
00:00:33,060 --> 00:00:37,320
Set the enter arrow button to 50% opacity
so it looks disabled, and set the cursor to

10
00:00:37,320 --> 00:00:39,660
0% opacity for now.

11
00:00:40,620 --> 00:00:44,520
Create a rectangle, which will be our hotspot,
and place it over the form field.

12
00:00:46,040 --> 00:00:49,700
It’s good practice to label the layer, but
more importantly, make sure it’s placed

13
00:00:49,700 --> 00:00:51,100
above all the other layers.

14
00:00:51,900 --> 00:00:54,340
Set the fill alpha to 0.

15
00:00:56,380 --> 00:01:00,220
Using the opacity property won't work for
hotspots, so make positively sure it’s the

16
00:01:00,220 --> 00:01:02,100
fill alpha you’re setting to zero.

17
00:01:03,040 --> 00:01:07,040
Create a tap gesture from this form field
hotspot to a new artboard by dragging the

18
00:01:07,040 --> 00:01:10,040
spaghetti code arrow onto itself, which will
duplicate it for you.

19
00:01:11,120 --> 00:01:15,300
Drag the enter arrow, as well as the keyboard,
up.

20
00:01:17,040 --> 00:01:22,000
Set the cursor to 100% opacity, and move the
“Username” placeholder text to the label position.

21
00:01:23,720 --> 00:01:28,200
Change the username text to 100% opacity and
12 point font.

22
00:01:30,040 --> 00:01:31,740
Let’s check out the interaction so far.

23
00:01:33,640 --> 00:01:34,440
Looks good.

24
00:01:35,160 --> 00:01:39,010
Now we want to make the cursor flash, so click
on the entire artboard and create an auto

25
00:01:39,010 --> 00:01:42,700
transition to itself.

26
00:01:45,340 --> 00:01:49,920
Set the cursor opacity in this new artboard
to 0% and create an auto transition back.

27
00:01:54,460 --> 00:01:58,580
This looks good, but to make it even more
realistic, set an ease-in-and-out curve on

28
00:01:58,600 --> 00:02:00,220
one of the auto transitions.

29
00:02:06,860 --> 00:02:10,620
Create more invisible layer hotspots above
and below the form field on both of these

30
00:02:10,680 --> 00:02:14,960
artboards to allow the user to dismiss the
keyboard and return to the first artboard.

31
00:02:21,620 --> 00:02:25,040
Remember to put the hotspot layers above all the
other layers.

32
00:02:32,020 --> 00:02:33,180
That’s it!