1 00:00:00,420 --> 00:00:01,110 Welcome back. 2 00:00:01,560 --> 00:00:08,760 Now we're going to go over some prototype actions next, so what we've been basically doing is some 3 00:00:08,760 --> 00:00:12,660 basic stuff, like if we click on something like this, it goes to the next page. 4 00:00:12,660 --> 00:00:16,160 And this is essentially the prototype action. 5 00:00:16,410 --> 00:00:19,230 Do you want it to navigate to you want it to open a overlaid. 6 00:00:19,230 --> 00:00:23,250 You want to swap with you want to go back close overlay, open a link. 7 00:00:23,580 --> 00:00:25,440 I mean, there's a bunch of different things you can do. 8 00:00:26,070 --> 00:00:28,760 So I'm going to demonstrate a couple of them. 9 00:00:28,770 --> 00:00:34,560 So navigate to we've been doing and that essentially just goes from one page to the next. 10 00:00:34,560 --> 00:00:35,280 Very simple. 11 00:00:35,280 --> 00:00:40,080 And at this stage, like when you're early on prototyping, that's all you really need. 12 00:00:40,710 --> 00:00:49,770 But if you want to do something a little bit more complex, let's just drag this all the way down to 13 00:00:49,770 --> 00:00:50,550 our search. 14 00:00:56,360 --> 00:01:05,660 And what we can do is interest trying to think, let's create a new search and we're not going to have 15 00:01:05,660 --> 00:01:13,150 anything in here, we're not going have a background and we're just going to call this keyboard overlay. 16 00:01:14,630 --> 00:01:15,050 So. 17 00:01:16,830 --> 00:01:21,530 We can do is let's just delete that, let's put something together. 18 00:01:22,460 --> 00:01:30,500 So if I click my prototype and I click the trigger just to go over to that page, once I stop the search, 19 00:01:31,100 --> 00:01:33,590 what will happen is it will come to this search page. 20 00:01:35,750 --> 00:01:37,430 And what we can do is. 21 00:01:42,620 --> 00:01:43,790 And let's take a look. 22 00:01:44,240 --> 00:01:50,030 OK, so we've gone to this page and like on this, what we can do is after delay. 23 00:01:51,980 --> 00:01:59,600 He can open up overlay and that overlay can be this and we can have it like move in from the bottom 24 00:01:59,900 --> 00:02:01,340 and we'll get into this a little bit more. 25 00:02:02,890 --> 00:02:10,540 But this can happen like two hundred milliseconds after the initial click and I'll show you what it 26 00:02:10,540 --> 00:02:10,830 looks like. 27 00:02:10,840 --> 00:02:15,970 So I'm over here, I want to search, I click search and the overlay comes up. 28 00:02:15,970 --> 00:02:17,800 So that's a little weird how it happened. 29 00:02:18,370 --> 00:02:20,910 And we can actually customize that behavior. 30 00:02:22,160 --> 00:02:25,460 So this will come up no. 31 00:02:26,210 --> 00:02:26,650 Hmm. 32 00:02:29,750 --> 00:02:31,940 This will open overlay. 33 00:02:32,270 --> 00:02:32,880 There you go. 34 00:02:32,900 --> 00:02:39,200 That's why and this overlay will be sticky to the bottom and the center, you can specify where that 35 00:02:39,200 --> 00:02:39,920 happens. 36 00:02:41,560 --> 00:02:46,120 So this essentially will be really. 37 00:02:47,500 --> 00:02:53,320 Affixed to the bottom, and when you click outside, you can remove it. 38 00:02:53,800 --> 00:02:55,060 OK, let's take a look. 39 00:02:56,970 --> 00:02:58,250 This to restart. 40 00:03:00,230 --> 00:03:01,520 Boom, there it is. 41 00:03:02,150 --> 00:03:03,680 If I click outside of the overlay. 42 00:03:05,160 --> 00:03:06,330 It should have closed at. 43 00:03:16,160 --> 00:03:22,880 So let's see close when clicking outside, oh, it's probably because it's the whole frame, so if I 44 00:03:22,880 --> 00:03:23,870 do something like this. 45 00:03:23,870 --> 00:03:24,410 There you go. 46 00:03:26,580 --> 00:03:35,070 Now closes, so let's go back and restart that, so search on overlay, click it perfect and we can 47 00:03:35,070 --> 00:03:36,840 even link this together again. 48 00:03:36,840 --> 00:03:42,240 If I click that again, I want wanted to open and it's going to automatically select, like, open overlayed 49 00:03:42,390 --> 00:03:45,680 over again so we can kind of create like a little bit of a loop here. 50 00:03:46,650 --> 00:03:49,600 Boom, boom, boom, boom. 51 00:03:50,010 --> 00:03:51,960 So let's actually keep on going with this. 52 00:03:52,960 --> 00:03:58,270 The next is to swap now swap allows you to replace one frame with another. 53 00:03:58,630 --> 00:04:03,700 This will kind of behave similarly to the navigate option when triggered from a hotspot like in a regular 54 00:04:03,700 --> 00:04:04,020 frame. 55 00:04:04,270 --> 00:04:10,000 If you apply a swap to hotspot in an overlay, it will replace or swap that current overlay with a new 56 00:04:10,000 --> 00:04:10,940 destination frame. 57 00:04:11,740 --> 00:04:12,220 So. 58 00:04:13,640 --> 00:04:14,870 I'll show you what that looks like. 59 00:04:16,810 --> 00:04:23,080 So if I create another one over here and like I change the background color. 60 00:04:24,370 --> 00:04:26,380 The black men don't do this. 61 00:04:27,500 --> 00:04:29,570 OK, let's see what this prototype looks like. 62 00:04:29,600 --> 00:04:35,960 So if I click prototype and I click on this, I can. 63 00:04:36,980 --> 00:04:41,480 Swap it, so untap swap with. 64 00:04:42,550 --> 00:04:46,090 The new keyboard overlay and let's see what that looks like. 65 00:04:52,990 --> 00:04:56,670 You see, I would just swap the overlay, so that's very useful if you need it. 66 00:04:57,780 --> 00:05:04,160 I was kind of like a terrible color choice for that keyboard, but it gets the point across now. 67 00:05:04,260 --> 00:05:06,600 Another thing we can add to this is like back. 68 00:05:07,670 --> 00:05:14,750 So I have the the icons selected here, that topical area and on top, I want to just go back that's 69 00:05:14,750 --> 00:05:17,560 essentially is going to navigate back to the previous scheme. 70 00:05:17,720 --> 00:05:21,320 This is perfect for, like simulating in the back button in your prototypes, which we're doing right 71 00:05:21,320 --> 00:05:21,570 now. 72 00:05:22,730 --> 00:05:24,760 So this will go back there. 73 00:05:24,800 --> 00:05:28,000 Let's go search overlay quick outside the overlay. 74 00:05:28,280 --> 00:05:32,720 Go back and you'll notice that even though we brought in the new frame as an overlay, it doesn't like 75 00:05:32,720 --> 00:05:35,090 effect that when we're actually going back and forth. 76 00:05:35,390 --> 00:05:42,200 What you can also do to simulate the back button is to actually link it if you want to. 77 00:05:42,200 --> 00:05:48,380 That previous screen, I mean, you really only come in from search in this prototype from the screen, 78 00:05:48,680 --> 00:05:51,230 so you can easily just link that back. 79 00:05:52,250 --> 00:05:53,990 To like that, so let's. 80 00:05:56,350 --> 00:05:57,910 There you go, perfect. 81 00:06:00,070 --> 00:06:05,530 Now, another action is like close overlain, we've kind of done that already, like if we want to click 82 00:06:05,530 --> 00:06:07,840 on this, we can actually do like on top. 83 00:06:11,170 --> 00:06:15,020 Close overlay, and essentially that will remove the overlay. 84 00:06:15,040 --> 00:06:17,200 So let's go back, let's search what that looks like. 85 00:06:17,680 --> 00:06:18,140 Boom. 86 00:06:18,880 --> 00:06:21,860 And there you go, removing the overlay. 87 00:06:21,970 --> 00:06:27,130 So this actually allows you to close or dismiss any overlays that have appeared over that original frame. 88 00:06:28,120 --> 00:06:33,910 And essentially, those are all the different types of prototype actions that I use overlays really 89 00:06:33,910 --> 00:06:38,440 nice for simulating stuff like keyboards or like models and stuff like that. 90 00:06:38,440 --> 00:06:40,840 Like you can add stuff to that overlay. 91 00:06:41,620 --> 00:06:46,830 So an example is, let's see, Irvan used overlain a long time. 92 00:06:47,350 --> 00:06:53,890 So we're going to do is so this trigger is going to open up overlay and you can add like a background 93 00:06:53,890 --> 00:06:54,520 behind it. 94 00:06:55,290 --> 00:06:57,430 I think you need the whole frame to do that. 95 00:06:57,440 --> 00:06:58,840 So let's take a look. 96 00:06:58,900 --> 00:07:00,030 So actually, no, it's fine. 97 00:07:00,280 --> 00:07:03,700 So you can add the background around the overlay, which is really nice. 98 00:07:03,910 --> 00:07:07,570 I mean, in this case, when you're using a keyboard, you probably may not want to because if we're 99 00:07:07,570 --> 00:07:13,330 doing, like, predicting the type ahead in terms of what the user's typing here, we probably want 100 00:07:13,330 --> 00:07:14,830 to see what's showing up over here. 101 00:07:15,970 --> 00:07:21,760 But like, if you're using a model, you'll definitely want to add an overlay just to kind of hide that 102 00:07:21,760 --> 00:07:25,520 background information and create more contrast for that model to kind of pop on the screen. 103 00:07:26,170 --> 00:07:31,570 So, yeah, that's definitely an easy way to use prototype actions within Sigma.