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!