2.3 Working With Basic Triggers and Responses

Welcome to lesson number there, where you'll learn about the two fundamental aspects of any prototype created with proto pi, which are triggers and responses. So let's see how they work. I have a demo app set up here where I've loaded three scenes or three art boards from this XD file I showed you previously. So let's talk about triggers. A trigger is most of the time a user action like a click, a mouse over, a tap, a scroll, and so on. You can find a list of triggers by selecting an element, let's say this Next button and clicking Add trigger. And these are nicely categorized, so you'll have a much easier time picking the right one for you. For example, under Touch, we can find Tap, Double tap, Touched down, that's when you press with your finger. Touch up, that's when you lift your finger after a touchdown. Long press, iPhone users you might be familiar with this when you hold your finger on an item on the screen. Then you have some additional ones like Pull, Drag, Pinch, Rotate so these are gestures that you can do on your phone with your fingers. And then you have some conditional triggers. Like for example when the prototype starts then you have some triggers for the mouse like Mouse over, Mouse out. You have a trigger for when you press a specific key on your keyboard and then you also have triggers for input elements like when you focus them or when you hit Enter. And then depending on the device, you also have triggers for the different sensors you have. Like for example, when you tilt your phone, when you do a 3D touch, it's that longer harder press on an iPhone. Proximity sensor also works. Right, so you have all of these triggers you can choose from. For this example, let's say that when I hit this Next button, I want to go to Scene 1 and let's actually rename these as Step 1, Step 2, and Step 3. So when I tap on the Next button, I wanna go to Step 2, so how do I do that? I select it, I hit Add trigger, tap. So now my trigger is added. And under it kind of nested, I can add responses. And that means what happens when the trigger Is activated and for responses, I can do a lot of things. I can add a move transition scale, rotate, 3D rotate, these are all animations, right? I can affect the capacity of an element, the color, radius border shadow, I can reorder elements. I can choose to scroll then I can choose to jump, this is for going to another stage. I can reset which means I can bring in that element to its original state, and the list can go on and on. There are some advanced options here like for example condition, but we're not gonna cover these in this course. For me personally, for this example, I'm going to choose Jump. Okay, and jump In the Inspector, I can go ahead and select my Scene, which is Step 2. And I can choose a transition and also a delay, but let's see how this looks like without any kind of transition. So what I can do is hit preview here, and this opens up a nice preview window. And you'll see that when I hit Next, it immediately jumps to the next or to the scene that I selected. And I think I might have said stage previously I meant scene, not stage, all right? So let's say I wanna add a nice transition to this. Well, I can go ahead and select my Jump response and I can select from one of these transitions and I can hit Preview. Here is Fade, here is Pop, I can hit Refresh here, that's Pop. I can choose Slide in, Slide out, I can choose Flip and we also have some additional options here. But probably, the one that you're going to use the most is Fade. And I can also specify a start delay, like for example, one, that's one second and there it is. So with this you've just created your first interaction with Protopia, a very simple jump between two scenes using a tap trigger. Now what if you wanna go back? Well, it just open step 2 and you can select this Element. You can add a trigger to this, tap, add a response to it, jump, and prototype is actually very smart. It gives you an option to select previously shown scene and this is gonna take me in this case to step 1. You can choose a transition, let's say Fade and now if we go to Step 1, let's actually get rid of this delay. Next, And this is the way it works very, very easily. Now you can add multiple responses to a trigger. Let's say that on this particular page, when I'm loading these, I wanna create a nice animation. So I'm gonna add a Trigger, that's called start. And then I'm gonna start by selecting various elements and going Opacity and setting it to 0. I'm gonna select this, Add the new response, Opacity set this to 0, do the same for this And do the same for this. Now this is the animation duration, we can also see it here and you can edit it from here. Or you can edit from here directly and you can do the same with the others. You can also select multiple responses, and you can change them all at once. Now currently, if I do a preview, you'll see that those items are now gone. Let's try and show them again but this time let's add a nice animation so I can select this again and I can add Opacity. Let's set this to 100% and let's leave the duration at 0.2, here you can choose the easing that you want for Opacity. I think linear is more than enough, let's do the same with this one. Again at Opacity, 0.2 linear, set the opacity to 100%, do the same with this. Opacity to 100% and the same for the next button, opacity 100% linear. All right, so now let's do preview and all of them showed up at the same time. But let's add a delay to each one of these so I'm gonna choose Opacity here, let's do 0.1 delay on this. Point to on this 0.3 and 0.4. So now, I don't know if you saw that. Let's do a next 0.5.speed, a refresh. You can see that they start appearing one at a time because I've added a delay to each one, very cool. One other thing you can do instead of doing opacity for this element, let's turn that off. We can do a reset and the reset can have exactly the same properties as the other responses. So you can set an easing to it, let's do linear 0.2 seconds and let's do a delay 0.5. And the result is exactly the same. Reset basically brings an element to its initial state so it removes any kind of changes you made to it like position size, rotation, opacity, fill and so on. It just brings it back to how it works. And that's pretty much it for triggers and responses. Now that we understand how this work, let's go ahead and create some animations for our prototypes. And that's coming up in the next lesson. See you there.