Time Delay Transitions
Welcome friends were in the new section we're into prototyping. Okay more advanced prototyping. We've done this before but we're gonna look at this one. It's going to be timed delay transitions. Okay it means that when I hang around here for a little while don't do anything. See changed all by itself. Hang around again, you can see it's just moving through my upwards over here after a certain amount of time that I've set and also you get to hear and you're like come on dude click the button. Look you can hint and say that button I mean that one and then they can move on. Alright so that's time delayed transitions. Let's work out how to do it now and do B. X. D. Alright to create our timed transitions we're gonna use these outboards right? And at the moment there's some basic interaction right? You can go to the next one, go the next one, skip to the end but it's very manual. Let's say this onboarding process. We just need it to be if people don't do anything that is just going to autom...
atically move them on to the next outboard. So to do it you do it to the whole outboard So give the give the outboard name selection, make sure I'm prototype, remember. Control tab toggles between design and prototype and I'm gonna say drag this to here and instead of using the tap which it is by default it's go time. How long? I think it defaults to zero and let's put it in for five seconds so they've got time to read it before it moves on. It might be even be a bit longer. I'll have to do some testing. So cool. This one here, drag it across, remembers the last thing you did the same with this occasionally when you're messing around with that time, you'll you might go back to the first one and it hasn't actually done it. If I drag it out and start typing here, kind of get halfway through it, it might cancel it. Just f Y. I Check it first. Alright, so click on the first outboard, giving a preview. Wait five seconds, waiting, waiting, waiting, go what's that mean? Just kind of moves along. You can still use the button so I can skip the next and then wait another five seconds and it will move me on. Awesome. And it will stop here because there's no other time transitions. So that's a way of kind of moving people along. I'll show you another little trick you could use is I'm going to move this all along. I'm going to make two copies of that. I'm duplicating it in prototype mode. So all the rest of the buttons work. But the one thing I want to do is break this link actually this one here, I want to break the link because it's going to jump this outboard. So what I want to do is after I want what do I want? Yeah, just one extra up. What I think. So what I want to do is when it gets to hear, I want to indicate you're going to use the next button so it's just going to stop here and what I want to do is say like click here buddy. So what I'm gonna do is just add a little hint. You start at the beginning, I'm gonna switch to design mode rectangle tool. I'm going to try out a nice big rectangle, give it no border, let's give it a black fill. Let's add background blur. I'm going to lower the blur, lower the lightness of it so it's quite dark and what I want to do is I want to grab the ellipse tool and I'm going to draw a little circle and we're going to use our boolean masking. Amazing nous because I want to just kind of highlight this button down here, so selecting both of them using the second one in which everyone uses. Okay, I might have to double click the edge. It's not not perfect, let's get it going around this, it's just gonna be like a little hint to say click this one, dude has done it to the wrong one needs to be over here, it's ok, easily fixed. So here it's going to do a timing transition to this one. Okay, so it's going to do time eventually then this one when it's finished. I'd like it too because it's going to pause here, let's give it a go. So we'll get to this onboarding, it's going to move across, Its gotta next and it's gonna wait there forever and the person is meant to click the button but they're not doing it. So you can say hindi, hint, look at that, click that button please, but it will stop here forever. What you could do is actually this outboard, say after a certain amount of time, so maybe only after two seconds go back to their, they can click the button. Alright let's go to here, let's go to the next one we're waiting, hanging around the guy doesn't or girl doesn't know what they're doing and he goes, hey what about this, look at that but then it goes away again, Go away, it's gonna look back around ready, awesome. Now we've just added a circle, you could add some nice little hint text to say to do this, do that and you could actually do full on boarding this way, you could hover above this little plus button and say this is what this does and this is what this means. You add lots of different texts in this loop. Alright buttons still work, remember we can get to this bit and it's going to stop and that my friends is time delay transitions in adobe. XD. Alright, next video