ProtoPie completo — aprenda prototipagem avançada sem código

1. Total ProtoPie Introduction: Hi there and welcome to total pros and my name is Darren bed and I'm a designer with over 30 years experience in the design industry. Waves has been spent in the digital space where I've been designing web experiences and experiences from mobile devices. And to be introducing you to my favorite interaction designs or prettify. So we're gonna be learning profile from the ground up. You don't need to open this soil before you don't need any prior knowledge. And we're going to be taking it step-by-step learning or the fundamentals and leveling you up to a level of experience where you're going to feel confident to be able to use this tool in your job on your projects in the real industry. And you're gonna get the benefit of me having used is total for the past three years actually in the industry on real projects and in the building of real apps. So we're going to be using a fake app. Coal plants rest as our way of exploring the different pints of problem-solving and techniques that we're going to, we're going to use. And I've chosen this app because it's a good mix of using standard mobile design patterns as well as a lot of custom design patterns and animations as well. So we're going to have a lot of fun building out some of these features. Will start. We've learned how to swim cool graphics from other supported industry tools, such as Fichman, sketch and Adobe XD. We're gonna learn how to create both standard and custom animations. We're going to create a real login flow, together with error handling, will create a favoriting feature that will dynamically saved content based on user choice. Using conditional logic, will explore navigation and create an ATS had been that low in turn uses a reusable component that you can use in any project. Will build a real photo app using protoplasts capabilities to integrate with device hardware, such as your phone's camera. Go explore complex features such as variables and what pros at PyCon, full minutes, discrete instructions, which are easy to learn and offer advanced power, but without the need for advanced knowledge, you'll be amazed at how easy it is to feel really advanced features will then take our app and make some reusable components, turning them into a component library that can be used on multiple projects. Finally, we'll have a look approached by cloud and how you can test and share your prototypes for using usability tests or to share with stakeholders. And how you can use interaction recipes to easily communicate your live in, work in interaction design with developers without the need to create boring, lengthy. And we're going to have a laugh. I'm learning probe Heights again. I truly believe that the only interaction design, so on the market at the moment, that's really worth investing your time. Especially if you don't want to learn to code or if you find coding a scary proposition. Probe height is a tool that's been built for designers to explore that design ideas all the way from the beginning, all the way to the end. So if that's something you're interested in learning, then pick up this course and I'll see you in class. 2. Installing ProtoPie: Hi there. So before we get started, we will need to install the protoplasts software if you don't have it already. So if that's the case, just head over to prototype. This is protoplanets website here. And this tap on the triumph of free link. You'll be redirected to this page where you'll just need to put in your email and then sign up and you'll get the installer file. And it's just a normal atom. So installs in the normal way for both Mac and Windows. So make sure you do that before you move on to the next video. The other thing I want to draw your attention to is the assets phi also attached to this video is a zip file for all of the assets. If we just double-click on that and just have a look inside of here. So there are just a few asset. So you've got Adobe XD files. If you're following along with Adobe XD, we've also got sigma, and we've got the sketch files. We don't use assets of every single video, but there are some of the lectures which we do require assets for if you want to follow along. Another thing I've included is the fondness is a Google Fonts free to use. But I had just for convenience, I've put it into the assets folder as well. And then finally, we've got another Assets folder inside the assets folder. And inside of here, some pre exports HD graphics that we're using on assessing videos. So you should be able to find everything you need in here and you should be ready to go. Okay, so that's about it for this video. So look forward to seeing you in the first video and getting started to get into prettify it. See you there. 3. 3 A quick tour of ProtoPie Studio: Okay, so let's start off by taking a look at probe high studio. When you launch studio, you're going to be presented at the start window. So let's create a new file. Okay, so now we have a brand new untitled file. So in the sensor, you'll see the ARPU where you'll create your prototype. And just above here is the device presets menu. So this is where you can choose the size of your prototype. And there are a number of presets here for iOS, Android, and desktop. And we've also got the ability to create a custom size as well. On the left here is our Layers panel. So when we import graphics from our graph attack application, or we create objects natively, they can repair here. To the left here, we want to pop out panels. So this first one is the scenes pattern. And then just below, we've got the Components panel. Just moving down to the bottom here. We've got the variables panels. So this is where we'll create our variables which we use for certain logic features within Pr pi. And just to the left here you'll see we've got access to our pro pi account and also some studio application settings. To the right here we've got our zoom controls so you can zoom in and out of our Apple. And over to the right here, we've got the ability to our device frame on an off. Now, not all of the presets have frames, but some of the major ones do, such as the iPhone. And we can go down and have a look at, say, the Galaxy S ten, which also has a device frame. Okay, move it over to the right. We've got how Triggers panel. So this is where you going to create all of your interactions. And next to that, we've got the Properties panel. So this panel will be contextual depending on what you've got selected at the time. Currently, we've got the same selected so we can see the prophecies for our scene. And just above in the Properties panel We've got a preview, an image preview area. And just above that, these sources look pretty familiar to you. Alignment tools that we've got. So we can align objects on the loop. In this corner here we've got some left and right arrows. So this is a history navigation. So as we move from seems to seed or inside of objects or components, we can navigate forwards and backwards along the history from where we've been. Tackling quite useful. Okay, moving up to the top. So we've got a whole bunch of buttons and menus across the top here. So on the left-hand side here, we've got impulse. So this is where we can import our graphics from Adobe XD Fichman sketch. We've got an image button which allows us to import images from our file system. We've got a media menu which allows us to import other media types such as Boolean video. The shape menu here, it gives us some basic primitive objects that we can draw directly inside a pro supplying structures, rectangles and circles. And the tax menu allows us to also add some needs HIV objects. So we've got a text label objects, and we've also got an input text field objects. Next to that, we've got the container menu. So you can think of containers to be synonymous with groups in your graphics application. So we've got a basic container, but you've also got these specialized other containers. We've got scroll contain Out which allows us to do scrollable views. And we've got a paging container which allows us to do paging views. And finally here on the right-hand side we've got Component button. So we can click that to create new components. Ok, so moving over to the right-hand side. So this group of buttons is all to do with viewing him previewing our prototypes. So we've got the preview button so that I will just bring our preview windows to the front. So the preview window will always be activist a separate window, but it's gonna be sitting behind our all through file. So we can just bring that to the front of my hidden apathy. Next to that, we've got the device menu. So this is where we connect real devices to studio. So we can send a prototype to an iPhone or an Android phone or a tablet. And to do that, we use the Run button. So unlike preview, where the previous auto update, as we build our prototype, we need to manually send our prototype to a device with the Run button. Finally, in this top right-hand corner, we've got clouds so we can upload our prototypes to the Cloud. And Cloud has a whole bunch of features which will be going into laser. Things like the ability to share our Prosite with others. And of course called version control inside of cloud and a bunch of other stuff will look into later. And to upload your prototype to the cloud, you use the Upload button here. Okay, so that completes our quick tour of the precipice Studio interface. So as you can hopefully see in it's pretty familiar to other graphics tools that you probably use. Certainly tools such as thickness sketch in the day we XD. And we're going to begin a lot more familiar with us as we work through the course. So that's a wrap for the quick tool. See you in the next video. 4. Organising your files - best practices: Before we get into the specific input features, I think it's worth taking a moment to talk about some best practices when we are structuring, importing our files during graphics is a very different mindset. Crazy interactions. Over time, you will learn how swaps mojo graphics folder on the flyer. But if you're new to prototyping or interaction design, you're probably going to need to do some file clean up before you import. So here are my top set for things that will make your life easier. Tip number one, name your layers. If you want to stay sane while prototype in this is a must. We've all been here with this kind of naming structure about when we're inside of proto pi, we're gonna be using the names and objects as a reference to add interactions. So we want to make sure that all of our objects will allow graphics inside of our file have logical names so we can find them when we need to add interaction to them. Tip number two, avoid unnecessary nested groups. So as you can see here, we've got these, these groups which effectively are empty groups that is going to add a lot more complexity to our file. And it's gonna make it harder for us to find things. So this is this sort of thing we want to avoid. What's remove any of the unnecessary nested groups. Tip number three, group related UI together. So when you're designing for interaction, the motion, you're gonna want to group things logically together. So as an example, if I go over to this screen here, and you can see I've got this, this kind of grid of images. And if we look down in the layers panel, we can see that all of my images are grouped together in this group could cool photo stream. And I've done that because this photo stream group is going to be a scrollable view and I'm going to want it all to scroll together. So think about your design and think about what bits are related together, what bets are gonna kinda move together, and then make sure you group those together up from okay, final set. Reorder your layers to the hierarchy matches the UI. So what am I talking about there? So that's go over to this login screen. So you can see here I've got these objects which kind of dark from top to bottom. And if we look over in the layers panel, you can see that that actually in exactly the same order. So if I mouse over these objects and if you keep your eyes on the layers, you can see that they're all in the same order. So when you're animating, when you're at an interaction, this makes a lot more sense to your brain than the way graphics programs normally do that. So as an example, we can see here, I've got this frame with these two images, pile and pile too. If I then duplicate, what are these images? You can see that it actually adds it above. The image has indicated and not below. And that makes total sense when I'm inside of graphics programs are probably going to want to move this object will do surveys objects traits away. So having it in the top makes it accessible. Effort was added underneath. I'd have to select in the layers panel or move something out of the way. But when we're at an interaction inside of a tool such as proto pi. This is actually makes it a lot harder for us because it's kind of in the reverse order of the way it looked on screen. And that kind of messes with our brains a little bit. Okay, so that's my top tips for impulse hing, organizing your file for impulse before you go into pi to pi. So next up, we're going to be taking these first screens and importing them from sigma into pi. So see you in the next video. 5. Importing from Figma: So the first step of burden our prototype is to improve our act designs. Through this course, we're going to be building a cool new app called piety rest. I don't know about you, but I loved pies. So having an app where I can look at photos of piezo day to sounds like heaven. Before we import our plants for us designers though, I'd like to run through some of the nuances when imports him sigma in spread apart. The first thing I want to talk about its components, when you Greg and put an impulse into prettify, it comes in as an editable group. But there are some restrictions to how that group can be imported since there are some downsides. So one of the downsides is that if you add a fill to the container, to the Fieger container, that's not going to be brought through through the importer into interpreter pine. Another thing that isn't supported from components is rounded corners. So there are enough things around components which are, which are negative says unfortunately at the moment, which means that I normally does break my component, components apart in sigma, I bring him in spread apart. Okay? The second thing is if you hired a layer in sigma that's going to suppress it from being imported into prototype. So that's actually quite a good way if you want to have layers which you don't want to import, you can just hide them inside of a bitmap. Text layers are impulse heads into processor Pi as text ready layers. And what that means is that they're not going to instantly come in as editable text. They're going to keep you going to have the ability to convert them into editable text and soda. But to preserve the typeface, they come in as text ready, so they are effectively still GraphX. And, but that, that does, that does mean that they will, they will support the typefaces and the fonts that you choose. When you convert a tax ready layout in credit pies to real text. You're going to have to come, we'll, we'll, we'll go through this. You're going to have to load the phone onto, say, your device when you're testing on your device to make sure that renders correctly. Ok, so if you reduce the opacity of a frame in sigma for a component or group, it's ignored an impulse. So the only opacity which is recognized applied to actual object layers, FISMA objet labs. And then finally, if you apply any text effects such as stroke, it will be impulse it because the, as I said previously, that's hex laser-like in his tax ready format. But if you do convert them into editable text, and for me you're going to lose those, those effects. So just some things to bear in mind when you're prepping your sigma files before you bring them into prettify. Okay, so if you're following along, please download the attached thick refer to the course that Section two, high-stress assets. And I've already prepared this file, so it conforms to all of those importing guidelines that I've given you. So you don't need to worry about any of those. But this particular file, make sure you've got the file open in sigma. With that open, as you can see here, we're gonna go over to prettify it. And we're gonna create a new pipe. So that's just gonna create a default untitled file, and it's going to default to the iPhone 11 pro. So we're going to be building this app for the iPhone 11 pro. So we're just gonna use a default presets. So that's absolutely fine. And the first thing we're gonna do is we're gonna go over to this impulse menu here. So we can see we've got the three options that U3 supported apps, Adobe XD, figurative sketch. So we're going to choose sigma. And we're immediately going to get this permissions dialog from protoplanet. So because fig murmurs an online tool, we need to give permission to access our fake profiles. So we're just going to tap the proceeds Browser button. That's going to bring up a browser window. And we're going to be asked to give access of S and R axis. So that's done. We can go back and we can continue. So that's Go back to import and choose sigma again. Okay, so we've now got the sigma Import dialog open. So let's just step through the options that we've got here. So the first thing we can see is this drop down box, which shows us all of the frames that we've got inside of our Figaro wishes to sit in the background and slid to the right here, we've got the options to choose the input size. So you can see it's defaulted to add 3x, which is the same as the pixel density of our iPhone 11 preset. But we do have the option to change that to another density. You want to make sure that this density matches your preset density. If we are proud of ISIL, otherwise your graphics are going to come in at the incorrect sites. The next thing that we have some options on is how we import layers. So by default, it's going to imple all last structure. So what that means is going to take the sigma layer structure and its going to duplicate that correctly inside of prototype. For the most part is how you want to pull your designs into predicate. There is a secondary option which is only layers MLT for exports. So if you do want to have a bit more granular control over what you import from fig. You can export specific layers. And if you choose this option, then is only going to, say going to import the exported layers into your, into your credit profile. The rest of the oxygens are all regarding a, another feature inside of prototypal re-import. You can re-import a FISMA file after you've initially imported at and this has kind of got limits, heads, benefits. Certainly from my perspective, I don't really use this that much, but just to kinda step for the option so you understand what they mean. So by default, the first two oxygens Hecht, which are overripe positions of layers and overwrite sizes of layers. So if you have already imported your file and you go back and you change the position of the layout or you change the size of a, they are so effects that you're changing the design is when you re-import set, it's going to update all of the layers where you've made those changes. The other two chat boxes, which are update layer orders and group instruction. So again, if you've changed the group instruction or you move to the layers around new fema is going to apply those changes to your import When you re-import it into prototype. And then finally we've got removed layers, deletes it, or made invisible in thick mark. So as you saw before, when I said that if you make over the layer invisible, it's going to block it from being imported. So this is going to happen if you check this option where if you re-import. But just to reiterate, this is only related to if you use the re-import feature. And that's not really something that we use a whole lot. Okay, so we're going to initially bringing our first screen, which is our start screen. So it's going to hit the Import button. And it's gonna connect to sigma. And it's going to import all of those layers. And as you can see, it's brought in. If we look at the layers panel here on the left-hand side, you can see that S accurately rendered all of our layers and our land names as they appeared inside a FISMA. And one of the things to point out here is that when you use the imports are from sigma interpreter pi, it's going to import everything as PNG file. So they're going to be pixel based graphics. It's going to, it's going to make groups out of the, out of the frames that you've got. So that's all rendered like for like between the two. And here's one of those tax ready layers I was talking about. So you can see it's got a little tea in the corner base circle, an image icon. So that means that its attacks layer and I can convert it into tax, but at MOM, still just an image. Okay, so that's our first files for our first screen, import it. That's good. So now we wanna pull the other two screens who've got a login screen and we got home screen swimming pool. You can see here the owl first screen has got a little labels seen one. So protoplanet has the concept of scenes and we're gonna be presence and more seems to employ our other screen. So we're going to be very brief, breaking our press hype down using the scenes feature within protoplanet. So if we go over to this little icon just under the Import button that we used, and we just tap it. We can see C1 and we can see this plus button. So we can use that to add a new scene. So I'm going to add a couple of scenes. And we got a double-click on s2. So make sure we've got seem to activity. I'm gonna go back to imple Sigma. And we're gonna import our second screen, which is the login screen. Again, we're going to leave everything. It's defaults and hit Import. Downloading layers there and there we go, bang. We've got our, our whole screen rendered inside a prototype. Okay, so that's goes to our third and final scene. So double-click on that. And we're gonna go back swimming pool. And we're gonna bring in our home screen. Okay, that's looking good. I'm just going to rename these scenes so we can rename these things whether it's double-clicking on them. So I'm gonna call this start. This one is going to be login. And finally, third one. Cool. Okay, so let's go back to our start seeing for a second. So I'll just double-click on that. And I want to talk a little bit about SVG. You can employ SVG into prettify. Unfortunately, the importers, and that goes for all the importers, beverage people scattered over dxdy. They don't support SVG at the moment. At the moment, they're just as we saw there bringing in PNGs. But there are some features with him, credit pi where you're going to want to have SVGs inside of your, inside of the file. So I'm just gonna show you how to import an SVG and it's relatively painless. So what we're gonna do is an example of this is we're going to replace the plateau stress and logo here. So if we skip back to sigma and we find our start screen, and we're just going to select the pipes rest logo and we're going to right-click or control-click. And if you haven't got a two button mouse and we're just going to choose copy paste, which is at the bottom of the menu. And we're going to choose copy as SVG. Okay, so that's skip back to prototype. And we're just gonna do a irregular paste here. So Command V, control vehicle using windows. And you can see we've got our logo, but you can see it's much smaller. And this is because we've got this pixel density thing going on. So our current iPhone 11 is at 3x, but SVGs, because their resolution independent, they don't really have a pixel density. So credit by just bringing them in at one x. So effectively, in our current screen size, That's easily, easily fixed. So if we keep our, our SVG selected and we're gonna come over here to the size values. And inside of these, these inputs we can effect. We do some simple maths. So we're just going to multiply this width by three and just make sure this should be on by default because make sure you've got the little padlock locked. So this will look how aspect ratio. So we can just put times three in this field and it's going to scale our logo up correctly. Ok, so now we've got our logos Gao credit. We're just going to position that more or less in the correct place where OWL, where our current pixel based logo is. And we're going to go to allows Pam, I'm going to delete the pixel based logo. So we've got this SVG, so this has got yes, another icon. So you can see it's got little image icon with this little circle in the bottom right-hand corner. And we're just going to double-click on this on the name and we're just gonna call it over. Okay, so that about wraps it up for the fig import video. So as you can see, it's relatively painless to bring your assets into a pie from sigma. There are a few optimizations, are few things that you'll need to do to prep your file just so you get the best out of the importer. And I've also shows you how you can bring SVGs into, into prettify from figure as well. So if figure is your tool of choice, then you can skip the next couple of videos. Do make sure you watch the impulse from File System video though. So there's some things in there you'll need to know before we progress. And I'll see you in the next tutorial. 6. Importing from Sketch: Hi there. So in this second video, we're going to be looking at how we can improve our graphics from scatch ends approach a pi. And we're going to be building our cool new app called Pirates arrest. The only app on the market which allows you to look at pictures of pies all day. We should frankly, just sounds awesome. And what I wanna do before we get into imposing our graphics InterPro pi is I want to just go through some of the gotchas that you need to be aware of when you're importing graphics from sketch. So the first thing I'd like to draw your attention to is the fact that protocol, it doesn't support sketch components or symbols. If you've got a design which is using components from Sketch and you import it into presser pi. What's going to happen is protocol is going to convert all those components into flattened bitmaps. So I've got say outboard over here just to illustrate what I mean and what's going to happen. So you can see here, I've got a logo and strap line component. And if I don't break this apart, then it's going to be flattened. The second scenario where this is going to happen is if I've got a group which has got a mosque inside of that, again, if you mask objects inside of scatch before you bring them into processor Pi, protoplasm is going to convert that group into a flattened bitmap. Now this might be something that's desirable, especially if you've got lots of graphics which are not add an interaction to, you can use these two strategies for flashing things automatically, which is actually quite useful. So what I'm gonna do now is I just want to show you what happens when I bring this up bought into process Pi. So we're gonna move over to process pi. And we're going to create a new pile file. And I've just got an iPhone 11 pro setup. So I'm using this standard preset. And to import graphics interpreter Pi, you need to come over to the import menu and I'm going to choose sketch. And you can see instantly that protocol is looking at the sketch file that sits in behind. And it can see all of the art boards that are inside of our sketch file. So I'm going to select start sculptures. And I'm gonna come back to this, this menu and explain it. But just for now, we're just going to leave it all of the defaults and impulse. Ok, so you can see over here in precipice Layers panel, my two logo and strap line objects. So in scatch, the first one was a component, and in sketch the second one was that mosque groups. So you can see that it's just squash them all down into a flattened bitmap. Okay, so we're going to undo that. We're gonna go back to sketch. And we're just going to have a look at these other graphic files I've got here. And it's wanna talk a little bit about some other features that the importer has. So one of the things that is really cool is you can do lots of dynamic things with text layers. So you wanna make sure that your sketch Text layers are caps exactly like, like this. And when we import them in, profile's going to map the sketch texts layers to his own native tax layers. And we're going to be able to do some things with those and that's, that's pretty cool. One final thing I want to draw your attention to is the fact that when you bring graphics via the imports from Sketch, interpreter pi is going to convert all of your graphics into bitmaps. So at the moment, prettify it doesn't support the important or vector graphics, a holy impulse bitmap versions of your vector graphics. And for the most part, this isn't too much of an issue. And you do have the ability to create some native shapes with incredibly high and we'll explore some of those things later on in the course. But apart from that, you can expect proto pi to respect to allow hierarchy. Everything that's in a folder is going to be converted into prototype version of a file folder, which is a container. But for all intents and purposes, it's exactly the same thing and everything else is going to appear in the order that you've got it inside of your sketch file. Okay, so with those gotchas out of the way, we're going to take our first step. We're going to import some graphics interpreter pi and start the creation of our place rest app. Right before we do that, I'm just gonna get rid of my stock captchas are food. Get rid of that out of the wakes. We don't want to get confused by that. And we're going to skip over two pi. And we've got our py file that we created just a little moment ago, which is absolutely fine. We can start with this one. And as we did before, we're gonna go to import and we're gonna choose sketch. And when we choose that, we're gonna get this dialog popup is Import dialog. And by default, it's going to read the active sketch file that's sitting in the background. In this case is how section two, pipes rest assets. And it's going to also be able to see all of the outputs that we've got setup in our file. And it's going to list them in this Apple menu here. Over here we've got the input size. So depending on the device that you're prototyping for, you're going to want to make sure that the graphics are size at the correct pixel density. And again, because protocol doesn't support the import of vector graphics and via the imports at the moment, you're going to need to make sure that your bitmap graphics are at the correct density because they are Resolution dependent. So for the iPhone 1011 pro, we know that the impulse size is at 3x, so we're gonna leave it at the default. Protocol knows this as well, is that knows what the device pre-sales. And as it's going to preach, choose the impulse size, which is correct for us. Okay, moving down to here, we've got two options under lateral impulse. So we can either import all last structure or we can choose to just impulse exportable layers. So if you've already sat certain layers to be exploitable in scatch, it's only going to import those layers. This is something I don't really do that. If that's something that's desirable for you, then you can choose that as an option. The last part of the impulse are I, once it comes quickly chats about is this re-import options. So pros Pi does have the ability to re-import graphics that have just been imported, only remembers the last graphics that you imported. So there isn't any kind of dynamic link between all of the graphics you're importing and the particular areas in your pile file wavy important too. So if you've just spotted something you'd need to quickly change, then there can be a useful option. But to be honest, It's not something that I really use. If that's something that you do for your gonna get value ourself, then you've got a few options here. So we've got the ability to override positions of layers. So if you've already imported some graphics interpreter pie and you want to change the layers around. You can change the layers in Sketch and then reimport. And it's going to reorganize the layers inside of your PY file, overwriting sizes of layers. Again, if you've changed any sizing on your layers and scattered them, re-import, it's going to update those. Update layer orders in group and structure. Again, if you've reorganize your layers of your groups inside a sketch when you re-import it's going to apply those updates. And finally remove layers deleted in sketch. So if you do delete any lasting sketch and then reimport, it's going to remove those layers as well. Okay, so we're going to effectively leave all of these options is formed, is going to set the last bats are all layer structure and we're going to import our start screen. Okay, so our graphics have now impulsive. And if you have a look, you can see that the layer hierarchy matches our sketch file. The little boxes with the dotted lines. These are groups, these are effectively the groups and sketch, and these are our pro supplier containers. You can see here we got a text objects and this was a native text layer inside of scatch. It's been imported, interprets or pi as is kinda special sketch. Sorry, this, this special tax layer. You can see it's got a little C in the bottom corner base also got a graphic icon as well. And what this effectively means is that at the moment it's still a graphic, but we do have the ability to convert it into tanks if we want to. So not all of your tags will immediately be converted into native texts. You will be able to select a V, choose what piece of text you actually want to be native. And that's normally just the things you want to add, some interaction too. Okay, so that's our first layer imported. So you may see here we've got this name here which says c1. So protoplanet has the concept of scenes and we can use seems to break down our prototype. So we're going to add a few more scenes. So if we come over to the scenes panel fly out, which is just over here on the left you can see we've got how C1. So I'm just going to add another seasons because we want to import our others who screens from our sketch file. And we're just going to double-click on s2. How are we gonna go back to import sketch? And this time we're going to choose login. We got to leave everything at the defaults and click inputs. That's good. And then finally we want to go to our third scene. Go to impulse sketch. And we're going to choose home and click import. Coastal, that's our homes seen imported. So what we're gonna do now is we're just going to rename these three scenes. So we're gonna call the first one, start. The second one, we're going to call it login. And third bond we're going to call her. Now. I did say that through the importer, you, you can only import graphics in the bitmap format. And that is true. But there is another way of impulse him graphics from sketch into praise pi, where you couldn't actually imple graphics as vectors. So protoplanets supports the SVG format and there is the functionality to be able to import SVG integrates by just not directly through the imports are at this current time. So what we're gonna do is we're just gonna go to our Start screen. And I'm going to open up his group and I'm going to gets my logo, my Pintrest logo. I want to bring that in as an SVG because we're going to be adding some animations where later. So wasn't going to do is I'm gonna go back over to sketch and I'm going to find my logo group. So this one here, just want the logo mark parts of the logo. And I'm going to right-click the folder inside the Layers panel. And I'm gonna choose Copy SVG code. Okay, so I'm going to switch back to prototype. And I'm just gonna do a regular Paste command here. Now you'll see that my my Logos imported in. It's called image wide and it's got this icon. This is the SVG icon, but you'll instantly notice that it's very, very small. So currently at the moment impressed by five dot 05, there's an issue with SVG imports, where the import only brings in the file, add its physical size at 1X, and it doesn't recognize the pixel density of your file size. So we just need to do a little bit up maps and a bit little bit of manipulation to fix this is SVG, so scalable vector. So the size isn't really an issue for us. So we're just gonna keep this selected and we're going to come over to the Size. So over here we've got the width and we've got the highest. And inside these fields, I can actually do simple math. So I'm going to make sure that my padlock is locked, that will lock the aspect ratio. And in the left width field, I'm going to tie it asterisk, which is the symbol for multiply and look at its height three. And effectively we're going to multiply this value by three. So it's gonna hit return. Okay, so we've now got our logo sized up to the correct size because it's at 3x pixel density. We multiplied it by three and we've got it to the correct size. Okay, so I'm just going to put that into place. That looks about right. And I'm going to rename this logo. And I can now safely remove my logo group does this one in here. And in fact, that's just put the logo inside of this group here. And I've now replaced my bitmap logo with a scalable vector graphics one. So that about wraps up our look at impulse in graphics from Sketch interpreter pi. In the next video, we're going to look at how we implore graphics from Adobe XD interprets a pie. But if sketches your tool of choice, then you can safely skip that video. Make sure you watch the video where I talk about importing from the file system though, because there's some things in that video that you're going to need to know. So I'll see you in the next tutorial. 7. Importing from Adobe XD: Hi. In this third video, we'll be looking at how we import graphics from Adobe XD to create this amazing new app called Pipes rest. I don't know about you, but I love it when I get to know those things I love, such as pi's and prototyping. I mean, Rule looking for our dream projects right? Anyway, before we input our designs, I want to chat a bit about some of the nuances between XD and Presser pi. So some of the things I want to discuss with you is about the way you tend to design graphics in these kinds of softwares. All three software applications that are supported with pride of pi, Adobe XD, if ignorance schedule have the concept of components, all have the concept of text layers and styles. So there are certain things that we're all doing when we're creating graphics make a lot of sense when we're creating those graphs in these, in these applications. But there are some nuances between how we create those graphics and how we need to import them into proto pyre and how prototype has kind of SAP to interpret the graphics that we, that we add. And you'll see if you do happen to watch all three videos, how does the subtle differences between how the three apps work? So for Adobe XD, it's nuances are, are these. So the first thing we'll talk about is components. So Adobe XD components. So when you import a component, which is a component from Adobe XD and you import it into proto pi, it's going to be imported as a process Pi group. So that's actually really good. It allows you to still use components inside of your Adobe XD projects without fear of losing or any functionality or having to manipulate those components in a particular way like you might have to do in some of the, in some of the other apps. So components are important as groups. And all the graphics apart from text layers, are turned into bitmaps. Now this is something that's pretty common across all of the import is at the current point in time, all graphics are turned into bitmaps when they're imported, interprets upaya pressed by doesn't support within the impulse, the impulse of vector graphics. But that being said, the fact that you can have a component in Adobe XD and bring it into processor Pi and still manipulates hair. And also for the fact that the text layers are preserved and actually mapped directly to press by text layers is a good thing. It's really cold. The second thing I want to talk about is masked layers. So W x D has a couple of different ways of dealing with images and mass. So we've got over here in this home screen, we've got this, this shape, which is got these this mask applied to it. So if you import a mosque in Adobe XD interpreter pie, it's gonna flatten that, that whole group of objects. It's going to assume it's just a single layer. So that might be something you actually want to use. You can use mass layers to condense UI and that you don't need to add interaction to. And doing that actually condenses the file size of your prototype and it also condenses the complexity as well. So that's actually something that's quite useful. But just bear that in mind that if you do have a mock, objects inside of dxdy is going to be flattened. So something you don't want to do. You don't want a mosque, a group where you've got a tax layer and N for example. And you might want to use that tax layer improves applied dynamically because you're going to, you're going to lose that edits ability when you transfer over. Okay, so if you, another thing to bear in mind is if we just go over two again, home, this Home scene here. And if I look into, let me just highlight this. And we're gonna go into the photo stream here. And we're just going to open up one of the images, actually Cisco Sekhmet one. So you can see here that I've got just a single objects. It's an image that's effectively is a rounded corner rectangle where I've just dropped an image in. And as per Adobe XD is native functionality is instantly marks that image. And I've actually got rounded corners applied to this. Now, the problem, well, it may not be a problem, but just something to be aware of is that if you wanted to manipulate those rounded corners dynamically inside a proto pi, you're going to have to rethink the way you bring objects in, in for, for this kind of stuff. So the way protocol works is it allows you to add around the corners to groups, to native proto pi groups. And you've also got functionality which allows you to dynamically animate those rounded corners and change those rounded corners. So if that's something you're going to need to do when you're, when you start prototyping. Then you're going to want to take the rounded corners off inside of Adobe XD. Just bring in your square images and then group and apply the rounded corners inside a prototype instead. Okay, so that's really the only things to draw your attention to. Apart from that, you can carry on designing exactly the way you have been in Adobe XD. Knowing that you'll be able to bring your graphics into prose upaya, without any, any weirdness going on. Okay, so now we're going to actually import some graphics into prose papaya from Adobe XD. So, and we're going to import graphics from this section to P3s Assets file, which is available in the downloadable files. And what I'm gonna do is I'm going to switch over to produce a pie. And I'm just gonna create a new pipe. And by default I'm going to get this iPhone 11 pro acts, which is the size of phone that we're gonna be using through this whole training course. And what I'm gonna do is I'm just gonna get rid of the preview here. So the first thing I'm gonna do is I'm going to import my graphics. So if I go up to here and you can see I've got this import menu. And if you've watched the other two videos, you've seen this already. This is pretty much exactly what I went through with the other two with the data to apps. So for this particular video, we're going to import from Adobe XD. So I'm gonna choose Adobe XD from the menu. And they're gonna get presented with this dialogue. And this dialogue is almost identical for in fact, it's completely identical for all three apps. Just a few terminology things which different? So for Adobe XD, I can see here my file which is open. So you have to have your file open in Adobe XD sitting in the background and prettify is gonna pick up that file and it's going to introspect that file and it's going to be able to look at all the airports you've got. So in this menu here, initially I can see the art boards that I've got inside of my XD file. Here, you can see the impulse size. So because as I said before, all of the graphics will be turned into, or most of the graphics will be turned into bitmaps. We need to make sure those graphics are important, that the correct size. And for devices because we have an, I'm sure you're aware, because we've have pixel density screens with different, different densities of pixels, then we're going to have to make sure that we bring in our graphics that are correct size. So because we're designing on an iPhone 11 Pro, we press apply. It already knows that that's, that's a 3x density. So he's already pre-chosen the correct density for us. Ok, so moving further down, we've got layer to import. So there's two options here. We can either import all of our layers in the same last structure as it sits in our EXE file. Or we can select only layers marked for Batch Export. So I tend to just use the OLAP structure. But the just to know you've have to hover option there and available to you if you only want to import certain layers. The whole bottom section is all to do with something called re-import. Now re-import is a feature within proto pie at which allows you to re-import a design you've just imported. And that allows you to make any changes to your Adobe XD file. Maybe you've noticed a graphic hasn't been positioned correctly or you wanted the layers in a different order or something. You can then make your changes in Adobe XD and then you can use the re-import options depending on what you initially set here. Azure re-import options when you import for the first time, that's what's going to be updated when you do any future re-import. So there's four options here. They're all pretty self-explanatory. So we've got overripe position of layers. So if you make a positional change in your layers in XD, it's going to overwrite and prettify it. Overwrite sizes of layers. So again, if you change the size of layers, that's going to be updates it. And then you've got these other two options, update layout, orders and grouping structure, and remove layers deleted in Adobe XD, again, pretty self-explanatory, but they'll allow you to make those changes. And when you re-import your file, those those changes are going to be made. As I've said previously, I don't really use the re-import feature that much. And there's lots of reasons why I tend to change things a lot once like enterprise, but That's something that's of value to you, then the feature is there. Okay, so we're just going to leave this or at the defaults and making sure we've got all last structure and we're going to tap inputs. Okay, So our initial screen has been impulse it. You can see over here in the last panel, the layer hierarchy has been respected and preserved. You can see that all my graphics, which were vectors, are now converted to bitmaps. Apart from my text layers which have this special tax law icon. And text layers by default GET impulse said as graphical Text layers. And what that means is that it's not proper text until I actually converted to text. So this, this allows you to not have to have all of the text converted by default. There are some issues with when you're previewing your prototypes, say in the cloud or on the web. We can't, we can't load custom fonts on the Web. So any, any fonts you use needs to be supported by funds that had your browser has access to. So things like that, maybe reasons why you might not want to convert all of your, all of your fonts into native fonts. So, but apart from that, we've got our groups, which are effectively the groups that were in Adobe XD. And everything else is pretty neat. Okay, so you may have noticed that actually we've got this little title Haeckel's scene one. So that will allude to the fact that pro supply has the concept of scenes. And you can think of scenes as a way of compartmentalizing your prototype into manageable chunks. And we're gonna be using scenes quite a lot with, through this course you're gonna learn a lot about how to use sings and the pros and cons of scenes. We're going to bring in our initial 3C, three scenes, three screens into intercedes. And to do that, we're gonna go to this scenes flyout menu, and we're going to add a couple of extra scenes us by hitting the plus button here. And we're going to switch to seem too, just by double-clicking it. And when I go back to our impulse, bats, Adobe XD, and we're going to bring in our second screen, which is our login screen. We're going to choose that again. We're going to leave all of the other options at the default and we're going to input clock. So we've now got our login screen imported. We're gonna go over to our final scene, seeing three, and we're going to import our home screen. I'm just gonna choose the for us home here. And we're going to import. Okay, cool. So everything's looking good. So as I said previously, pro supplier only impulse bitmaps, but they're up there is actually a way of guessing vectors, interpreter pyre, and that's through the use of SVG. So pro supply supports SVG. It's got a limited amount of support right now, but it does allow you to impulse graphics individually as SVGs. So what we're gonna do to have a look at that as we, they go over to our C1. So we've got this logo is peice rest logo. We can see that six is here in this group and it's got the text layer there, but it's got this logo mark, which is a graphic. And I actually want to apply some animation to this. We're going to, we're going to do that in a future video. So once about to scale up and down, I don't want it to bitmap, so I'm going to bring in an SVG. So the way I'm gonna do that isn't going to go back to Adobe XD. And I'm going to find my logo, I'm up. So it's just inside this group here. And I'm going to select set and I'm going to right-click and I'm gonna choose the option Copy SVG code. Okay, so I'm going to switch back to processor Pi, and I'm just gonna do a regular paste here to paste our logo in. And you can see our logos come in, but it's insanely small what's going on? So as of the current version of protocol which is probed by 5-0 five, there's an issue when you bring in SVG in the sense that it comes in at one acts now because our prototype is an iPhone and it's our pixel density or 3x. It's not taking that into account, but it's an easy effects. We've got an SVG after all, so we can just sign up. And because we know exactly the multiplier that we need to size it up at, we can just do some basic mass. So one of the cool things about pros empire and its impulse feels like a love of rap says you can do basic math, mathematical calculations inside of the fields themselves. So we're gonna come over here to size and where we can see our width and our height. And making sure that the padlock is locked. So it locks the aspect ratio. We're going to just put a times three inside this field. Now times inside of software tends to be the asterisks, so that's what we're going to use. So Astra S is times and we're just going to type the number three. And we're going to hit return. And lo and behold, we've now got our logo mark sized up to the correct size. Okay. So that's the position it into the correct position just over our how current bitmap logo MAC. And we're going to move the image one which is our SVG, which is going to move that into the logger group. And we're going to rename it logo mock, just by double-clicking mark. And we can now safely remove our bitmap group of the logo. We don't need that anymore. And we've successfully replaced our bitmap graphic with an SVG graphic. Ok, so one final thing we need to do is we need to just rename these scenes. So we're gonna name this one starts. And then we've got login. And finally we've got home. Okay, so that about wraps it up for our look at impulse in graphics into Adobe XD. We've covered a few nuances and things that will be good for you to know if Adobe XD is your tool of choice and you want to use them in concert with prosopagnosia. And in the next video, we're going to be looking at how you import graphics from the file system. So there's a few other things that are quite useful to know as far as when your impulse in graphics from the file system, as opposed to just using the impulses. So I'll see you in the next tutorial. 8. Importing from the file system: So in this video, I'm gonna show you how you can import GraphX from the file system. So you might want to be doing this if we're using a tool, a graphics tool to create or graphics that isn't one of the three supportive tools. It has a specialized inputs. So for example, something like Photoshop. Or if you've been supplied graphics by somebody else and you just need to kind of get those in a case. So there's a few different ways we can bring images in from the file system. Also supports a number of image file formats. So suppose PNG, JPEG, and SVG. And to illustrate this, we're going to start by navigating over to the home screen. And we're going to just replace one of these pie images with, with an alternative one. Now, one other thing to bear in mind is that when you export graphics out, they need to be the correct pixel density. So when the importers import they worked that out for you. But if you're doing it with another tool such as Photoshop, You're going to have to save the image OWL at a larger size depending on what you want your pixel density is. So because we're doing, when we were building our prototype Editor, iPhone 11 Pro, we can check with the pixel density here. So for us, it's 3x, which basically means that any graphics we bring in needs to be three times the size of the physical site. So for example, if we had a 100 square image when we're guaranteed to explore African Photoshop at 300 pixels square, for it to be the correct size insight about photospheric. Okay, so one of the first ways I want to show you how to bring in images from the file system is just using the regular image button here. So plus half this is going to open a Finder window. I'm going to navigate to this folder where I've got some laws, had us have pyre images here. I'm going to select this one. And let's import it that just kinda stuck at the top of the layers panel here. And I'm going to replace this first pi in the photo stream, so image1 with my, my input to damage. So I'm just going to drag that into the container. And I'm going to just reposition that at 0-0, so it's in the same position. I can now remove this, this exist in image1 and double-click on this to just rename it to image one. Okay, so that's the first way we replaced our first image. Now, there's some problems with bad if we say, for example, wants to replace. So we've, we've effectively replaced an image with another image, so replacing existing graphic. And, and the problem with that is that if we, if we'd already added some interactions via the Triggers panel here. It's going to break and interactions that we add if we're tags in that particular image. And the reason for that is that this, this image layer here, you can think of it as a container. So when this gets imported and when we target, say image1 with one about interactions, it's actually gonna target air. This, this as a container. It's not just going to be the image name or we'll choose the image name, but it's actually a unique objects. And you can think about here as an image container that has an image inside of that as opposed to just a regular image. So there is another way of replacing existing graphics. And I'm going to show you that now. So if we keep our image one selected and we look over here, we can see that there's a replace button. So this is going to allow us to actually replace the image inside the image container with a different image. So if we hit a replace button, we'll navigate back to our, our pyres and will choose a different players when those tastes deep s, That's replace our current image from this one. So we're going to hit open. And you can see now our image has been placed. There has been replaced inside of the existing container, the filename still. And if we do it this way and we did have some interactions attached, then they're going to be fine and I'm going to be broken in any way. So if you do need to replace graphics, this is the way you should go about doing it. Okay, so that's one way to bring images from the file system into your pile file. There's another way of doing it. So to illustrate this, I'm just going to jump I was valid login screen. And if you remember, in the previous video, we replaced our price for S logo on our start screen with an SVG. But we've got this instance of the same logo on this, on this second login screen as well. And you can see that this is a container group. It's got a number of separate images that make up. This is just the way it was imported from sigma. So I can't use the Replace command. It doesn't exist because it only exists when there's a single image. So if I select one of these images, you can see I've got replaced him on that because our logo mark is made up of multiple graphics, that's not gonna work. So I'm going to have to bring in an image for new. This time though. I'm going to bring it directly in the desktop. So this is under supported on, on, on the MCAT present system. So FI here I'm going to find this logo, SVG. I'm just going to drag and drop back. And you can see that's input to that as well. So that's just bringing that n Now as before, it smaller because it's only one acts because it's the resolution independent file. And we're just going to size this up. We're just going to eyeball as they say, get it to more or less the correct science that looks pretty close. And again, you know, it's an SVG has got this very specialized icon with the image icon and this little circle in the bottom right-hand corner. So I can now safely get rid of my group. And I've now been narrowed based that with the SVG. Okay, so that brings us to the end of the impulse action. You should now have a good understanding of the different ways you can import your GraphX together with new, old series of all of the different supported UI tools as far as the importer Cellar de vx, the sketch with FISMA. Next up, I'll be introducing you to precipice concept model and to explore that we're going to be gracing our first interactions. So see you in the next tutorial. 9. The ProtoPie concept model: Protocol works conceptually, but real-world objects, there isn't any code, just objects, triggers, and responses. If you think about sir, you can apply it to anything you do in the world, like pouring a glass of water. You have to tap, which is the object. You need to turn on the tap, which is the trigger, and then out pour some water, which is the response. In principle, there are many triggers or responses. Some are contextual as well. For example, if we have a look at the drag trigger, it only allows the responses move, scale, and rotate. Others, like tag, pretty much off every response that prayer has to offer. Responses also change their properties depending on what trigger is used. To give an example of this, when you add a move response to attack trigger, you can move to a location or by our number of pixels relative to the objects current position. At a move response to a chain trigger, however. And this time you're asked for a range of values. As the nature of chain is to connect one object's attributes to another objects affects, we chain them together. Triggers are grouped into a number of categories. These are touch, conditional, mouse, key, input, and sensor. So you can see there's quite a few triggers to play around with. Responses are also grouped together. But I don't have any category names. But I like to think of these as translation properties. Movement, navigation, input, audio visual, and a final group of miscellaneous non-visual responses. The final response isn't really a response at all, but a way of organizing and multiple other responses based on certain conditions. You would add a conditioned response if you wanted to create an interaction with multiple outcomes. For example, a login will be doing just this in a future video within this course. Ok, so that's six blog called set model with a simple example. I'm going to draw a square and a circle. I'm gonna make them different colors. We'll add a tab trigger to our circle. Now let's add a rotation response and choose the square as our target. And we're gonna make it rotate by a 180 degrees. I want the square to spin from its center. So we need to change the origin point. By default, the origin point is the top left-hand corner. Ok, so less loss to preview window. Now as you can see, every time I tap to circle, the squares fit is I can add multiple responses to a single trigger. That's how the scalar response will make the square scale by a 5%. Let's preview that. So now every time I tap the circle, the square spins and it scales. It's important to know that the order in which the responses are executed is based on time rather than the older and they have them in the Triggers panel. I can control each responses, starts, and duration with these values down here. There's also a very simple Timeline. And I can control both these values within this higher mine as well. So delay, duration. So as you can see, the creation of interactions is super easy to do. There are some exceptions and it's true that each trigger response has its nuances. But with a bit of playing around us and trial and error, they're all fairly easy to grasp. The press quite documentation is pretty good. And you can access the docs for each item by selecting the question mark when you hover over the item in the trigger or responses panel. So we can go to jump here. And it's taken me straight to the jump documentation. So now you should have a basic understanding of the concept model and how objects, triggers, and responses work together. In the next lecture, we'll apply some of the theory we have learned here. Start to build out our planet's rest app. 10. Creating your first interaction: If you've been following along, open up your previous file with your importer graphics. Otherwise you can download the starter file from this tutorial. Okay, so the first thing we're gonna do is we're gonna select CTA and add a tap trigger. And now we're going to add a response called Jump. So jump is a response that allows you to transition from one scene to another. So we've jumped selected, we're gonna go to select how C, And we're gonna choose login. And you can see here we've got some prebuilt transitions that we can use. So we've got fade, POP, slide in, slide out and flip. For this first transition, we're just gonna use fade. And that pretty much is our first interaction created. So that was easy, wasn't that? Ok? So let's connect our login screen to the home screen. If you wanna pause the video and have a goal for yourself, do so now. Ok, if you've had a go at connecting the second screen up, I hope it went okay. Let me just catch up with you and do it as well. So I'm gonna select the Continue button on login to has to go to our login seem. So let's now continue button. I'm going to add another tab trigger. As before. I'm going to add a jump response. And this time I'm going to select the home screen. And we'll keep this one as a fade as well. Okay, so let's test this. So first of all, we need to make sure our file is on the starting scene before we go into previews of S, double-click on staff. Preview. And we'll hit login. Nice fade transition into our login screen. And then we're going to hit Continue. And a nice fade in to our home screen. Great, so now we've connected out the three screens using some basic triggers and responses. Next up we're going to create some real text input and are looking forward to see you there. 11. Creating a login form: Hey, welcome back. In this video, we are going to create a working login form. To do this, we're gonna use prettify special text inputs, which allows us to type real tax using the native keyboard. Okay, so we're going to make sure that you're on the login scene. If you haven't, if you haven't been following along, you can download a starter Python file. So you can follow along. So the first thing we're gonna do is we're gonna drag out a text inputs. We're going to create text input over here from the tax menu. And we wanted to style this input SAT reflects our design here. So the first thing we're gonna do is we're going to set the size to be the same size. So we check here is 343 by 48. So that's made that same. Okay, and we're going to want to curve off the corners. So let's set the radius corners. This flatted. So we're going to set the radius to 24. And we're going to set the background fill of the input to white. Okay, so we want to also match this padding. So we're going to add some padding to the left. And we're going to add some padding. That's when C. And I'm gonna set the font is going to change the thumb. You can use whatever you want. And I'm going to use Museo sounds, 516 pixels big. And we're gonna change the, this is where it says input dot-dot-dot. This is the placeholder text. So I'm just gonna change the color of that. So I'm going to find placeholder text. And I'm gonna change this to seven. Okay, so as you can see now, that between each removes, let's get rid of that border. So I'm just gonna uncheck that. That was the original gray border. Okay. So that looks good. We're gonna move vans position just over the top of that email field. And I want to change the placeholder text. So I'm just going to change that to email. Okay? And we're gonna rename this input, email. Input. Okay, so that's duplicate that. So Command or Control D. And we'll name this password. And I'm just gonna position that over the password field. But I'm also going to change the order inside the layers panel. Okay, so that's changed the placeholder text to password. And if we scroll down to the keypad options here, so we can change the keyboard type to a number of keyboards. So by default it uses the tax keyboard where we have URL, email, number, text and password and number password. And we're gonna change the keyboard to tax password. Okay, so actually, if I go back to my email input field, I'm also going to change that keyboard to email. And I'll just give us the, the app symbol on the keyboard. Okay, so that's just quickly test that, see what we've got. So if I tap into email, you can see now a keyboard comes up. Now this keyboard here in preview isn't a real keyboard. This is just to show you that the keyboard functionality is working. But if this was connected to a real device, you'd get a real working keyboard. When you're, when you're testing on preview, you can still use your real keyboard that's attached to your computer. You just can't type or tap on any of these keys inside the preview window, that network. So if I can just type on my keyboard here and you can see that I'm getting everything that I need. So I tell my email and if I type password, if I start typing, you'll see I'll get the password dots because we chose tax password as the, as the keyboard type. Great, so now we've successfully replaced our graphical TextField, have real interactive ones. So you can see when we tap into any of these fields, the keyboard pops up and obscures our Continue button. And so we're going to handle this in two ways. First, we are going to make the go button work so that when we had, when we tap it, we navigate to the Home screen. So let's do that now. So we're going to add another trigger and it's going to be a return trigger. And from the layers drop-down, we're gonna choose choose the password field, password input. And because we're effectively going to be using the same transition as we already have set up without capturing, and we're just going to copy this jump response. So Command Z or Control Z, if your windows, and we're going to paste that in. And we test this now we should navigate to the Home screen. So let's have a go. So if I tap into my password field and then I hit the return button, you can see I've transitioned to the home screen. Okay, so that's cool, but we still want to make our button visible as an option as well. So we need to animate above the keyboard when it pops up. The first thing we need to do is to trigger the animation when a user is in the email field. Ok, so that's moved the text fields together and group them. And that's going to put them inside of a container. We can actually remove how to graphical password layers as well. And we're going to name this container form. Ok, so that's open this up and select the email field. And now we're going to add a focus trigger handler. The fall, we've we've got it satisfies, which is what we want. Okay? So that's that a duns we've reflects how form. And we're now going to add a move response inside our focus trigger. Notice that in that spatial we've got our form selected. That's better. I'm gonna set the wire to 3-20. Okay, so let's test that. So when we folks in email field, we can see that our form moves up looking good. Okay, so let's go back to our prototype. And that's duplicate this move. So that says Command Z or Control D. And this time we're going to choose the CTA primary, which is our Continue button down here. I'm going to set that as the target. And we're going to set the y to four 55. And that's test that again. So we select into our email field, we can see that our form now adjusts itself to sit above the keyboard. Okay, cool. So we've now built our login form. For now, it's pretty done, but we'll be adding some conditional logic in a later video to make it work for real. So we've covered some pretty cool stuff already with inputs and animates him based on input focus. And the app is already starting to feel more real. To make it fell even more real though, is to try it on a real device, which is what we'll be doing in the next video to see you there. 12. Testing on real devices: Hi there and welcome back. So in this video, I'm just going to take you through the companion app for prototype higher, which you can download for iOS and Android respectively, is free app and it's a player app. And this is a great way of testing your prototypes on devices, in fact, is essential for you too, and be able to test your prototypes on devices. I can't stress how important it is to tests on device. Obviously it depends. Also on watch your building. There are some things that you're going to need to test on device. And actually in this course we're gonna be using some features which are device only. So things like we're going to be building a camera app and we're going to be using haptic feedback later on in the course. So you're going to need to be able to use a device to experience that. So how does it work with devices? So if we have a look over here in this menu area here we can see we've got this device option and we've got this Run option. So you can see right now that device icon is actually green. So if I tap on that, you can see that my iPhone is connected. We know it's connected because it's in blue and it's those little play icon next to it. And there are a couple of different ways to connect devices. So I'm, I'm connected via USB, so I've got a USB cable connected from my computer into my phone. So that's one way of doing it. You can also connect via WiFi. You just need to make sure that your computer's wildfire and your phone's wifi is the same. And then you can connect. So you can also, if you do use Wi-Fi and then you can, you can scan this QR code. And you can access this QR code from within the pro supply at that will also save you the trouble of typing in the IP address of your, of your wifi. So you'll make sure your phones connected in one of those options. And then the run button basically sends a prototype to your device. So unlike preview, where it's kind of automatic. So preview, if i show that here, we've got this also buses. So as soon as I make a change in your three environment is gonna update automatically in Preview. That's not how it works for device. You're going to have to hit the Run button. You're gonna get this little chime sound and you'll see it load on your device. And then you're going to be able to test that. So we're actually going to have a look at our host site as it currently stands on our device. So I'm going to switch over to our device now. So you can see over here, I am now viewing my prototype on my, on my device. So I'm just going to drag from the bottom of the screen to reveal the menu. So we've got some options here within player, which is the name of the app that you download for both iOS and Android. And we've got the ability to stop, we've got the ability to restart the prototype and we've got the ability to save. So we can save the prototype to the device itself, which is really useful if you have a really bad internet connection, if you're doing some usability testing. We've also got a basis to change the player speed and we can also change the scene that we're, we're viewing. So we can, we can do that within the control panel. And if I just stop the prototype here you can see this is the default screen that you'll see. Where you can see I can connect via USB or I can scan the QR code. You can see that we're connected via USB at the bottom. So just to draw your attention to the tab bar at the bottom. So I've got the ability to access Cloud. I can log in and see my prototypes I've uploaded to Cloud. I've got the folder where I can access the prototypes I've saved to my device. One thing I want to show you, which is really, really important is the font manager here, which we've got inside the general settings. And if I click on that, you can see the, I've got certain fonts installed. So if you want to use the dynamic type capability inside of Pro pi, which will definitely be using in future videos, you can actually download custom fonts onto your device. And you can make sure that your prototyped renders correctly. And that's really, really, really useful. There's something that isn't supported inside of cloud, inside of the web, the web part of press Apply. But you can totally do app on devices. And the way you do that is as long as you can share those fonts with an app on your phone. So whether it's by email or by slag cloud or, or any other way, any other app where you can transfer those files onto your phone, you can just share them. We produce a pie in the Share menu, and you can then download them onto your device. Okay, so let's just start up our prototype by hitting the play button here. Okay, so I'm in my app, so I'm just going to intro of my app. We're gonna hit the login button and I'm going to hit the continue button and that's logged me into home. Okay, so this is the way you preview your prototypes on devices. It's essential for a lot of features inside a PPO plan. I really encourage you to test your prototypes on devices in this way. And there's some other features within the app which you might want to peruse, such as ability to turn hints on and off. So yeah, it's a really, really great app and it's a really great way to view your prototypes. Okay, so this about wraps up our video for looking on how you preview on device. And I'll see you in the next video. 13. Creating the scrollable photostream: Hey there. So in this video, we're going to be creating a scrollable photo stream. So open up your file if you've been following along. If not, there's a star file that you can download. So I wanted to talk about containers. So there are three kinds of containers. There's a regular container which is like a group. There's a scrollable container and there's a paging container, and you can access them from this menu here. One way you can access them. But mostly you're going to be crazy containers by a group in layers together. And there's, there's a, there's a really good reason for this. So if I just create a blank seem just for the sake of demonstration. So I create a container from here. And it's effectively an empty box. And you can see it here, my Layers panel. So fight us create a rectangle. And I'm just going to position my rectangle here. And I'm going to drag that into the container. So you can see that when I hover over my container, the container boundary is, but my rectangle is a factory outside of that container. So now I'm going to need to manually position my rectangle into the position I want. And what you can see is the, if I grab my container, I can move that around. You can see that the rectangles moving with the container. If I select the rectangle, you can see that moving separately. But it's, there's a lot of manual work here to kind of get everything in the correct position. If I want to make sure that my rectangles in a, in a position in the top left-hand corner. And you can see here if I select Rectangle that the position is relative the container. So at the moment, if I, let me just change this to 00. So you can see when I hover over that my rectangle is entirely in the top left hand corner and its position is relative to the container. If I select the container, you can see its position is a different value because it's relative to the scene. So there's this parent-child relationship between containers and objects which are nested within containers. Okay. So that's one way of, of, of using containers. But like I said, we're mostly going to be grouping containers, which is, is much more useful and easier to get things perhaps. So just as an example of that. So if I, if I create a rectangle and an oval, and I'm just going to shift select those, and I'm going to group those together. So that's command G on the Mac control G on windows. You can see now that they've been put inside of a container. And you can see that the containers boundary exactly matches the area that's taken up by the two objects. So this is by far a much better way of creating containers. And you'll probably likely to find yourself doing doing tracing containers this way more often than than the other way. Okay, so let's get rid of this scene. We're going to draw our attention back to the home scene. And we're going to make our photo stream. So our photo stream container here with wiring images. And we're gonna make that into a scrollable container so we can scroll up and down. The first thing we're gonna do is we're gonna select the photo string. And if we scroll down in the Properties panel, you see there's a section called scroll paging. So we're gonna select scroll. And that's now turned our regular container into a scroll container. And you can tell this a couple of ways. Number one, you can see that the icons change for these two little arrows inside, which means it's a vertical scrolling container. And also when I selected scroll, you can see I've got a few more options that have been revealed to me. So namely the third one, which is the direction of the scroll, which defaults to vertical. That tends to be the more popular scrolling direction. By can change it to horizontal with a wish. And I've also got this option called over scroll, which is the balance that you get when you scroll container and you get to the end of the container and you kinda pull it any like fills its non elastic. This is very much an iOS pattern. And you can have that which is toggled by default here you can also turn it off if you wish. The final option is this scroll position. So I can set the default position of my containers or be something other than 0. We're going to keep it 0 for now, but that's what that is if you're, if you're curious. Okay. So at the moment, so we've got this scroll container. But at the moment, if I just preview this, so you can see that I can't actually even move in. And that's because we've got this group at the top is device and bezels group, which is effectively blocking our access to the photo stream. So this is something to bear in mind if you're, if you're trying to scroll container and it's not scrolling, then is there's a good chance there's something higher up in the layers panel that's Block in that. Now, there's a couple of ways you can deal with this. Ross, We don't need this group at all, so we can just deletes here. But I just want to show you another way of dealing with air. So if I did want to keep this group, if I keep it selected. And here at the bottom of the Properties panel, you'll see this option make lower layers touchable. So if I select this, what is effective is gonna do, is gonna tell my cursor to ignore this group, this container, and all of the objects inside of it. So I'm going to effectively be able to click through it and get to my photo stream. So if we just preview that again, right, so you can now see I can semblance of scroll, I can scroll my photo stream. Not exactly why one, but at least I can get to it. And here you can see that over scroll inaction. Okay, we're going to actually delete this group was we don't need it. It was something that came from the thickening Ripple. Ok, and we're going to return our attention back to the photo stream scrolling container. So the way you make it actually scroll is you need to define scrollable area. So that's the viewable area. So for us, alveolar areas going to be this kind of area of cell phone screens. So it starts just below the catchphrase, but we want it to finish just above the tab bar here. So the way we do that is we just need to change the size of the bounding box of the scroll container itself. We can just drag from the bottom here, get it roughly in their position. The one. So that's looking good. So let's preview that. Okay, so now you can see I can actually scroll all the way to the bottom. But every like when I'm scrolling how it goes underneath the categories I wanted to, I went to effectively disappear when it goes under the cat scripts. So how do we do that? So what we're gonna do is we're going to make sure our photo stream scroll containers selected again. And we're going to go back to the Properties panel. And we're going to select this option called clips sublayers. So clips up layers is effectively we weight the way we masking process pi. And you can see immediately it's clipped the, the, the content of the scroll to my scrolling bounding box. So if we now preview that, we can see that we're effectively clipped inside of this, inside of this window. Sounds good. But now I don't really like the way it's, it's kinda coming on screen. I wanted to kind of the images to be underneath the tab bar. I just don't want them to disappear underneath the categories. So I'm going to extend this back down. Okay? And we're going to preview that again. Okay, so that's looking nicer, but now I can't scroll any further. And that's because the scroll view only scrolls to the maximum depth of the content that's inside. And the last objects that I've got inside of my scroll consent or are these two images? So I need to do a little hack to force it to scroll a little bit further. So we're gonna create a rectangle. And we'll just call this scroll hack. And we're going to drag that into the photo stream. I'm gonna just gonna sit there at the bottom. And I need to position this. So just for the lambdas and just kind of to unclick the sublattice so I can see what I'm doing. And I'm just going to practice to the bottom. Okay, so that's just have a look at this. So we need to work out what the distance is. So we've got how tab bar, which is 52. So let's make it. Okay. So now we can now see a case that's looks good. That's almost always pathways. But I don't want to see this gray box. So I'm just gonna go back to this grey box and I'm going to turn the visibility to fill opacity down to 0. So we can't see it. Okay, let's preview that one final time. Ok, so now I've gotten the correct scroll position and everything's looking good. Sweet. We now have a nice scrolling photo stream. Scrolling views are the workhorse patent for mobile. And as you can see in pro upaya, is it's really easy to create them. So that's it for this video. Joined me in the next video where we'll be exploring the paging container and we'll be building a page view. See you then. 14. Creating paging between detail views: Hi there. So in this video, we're gonna be building some paging functionality into our prototype into the home screen. So we've got this category scrolling tab across the top. So we're going to enable users to be able to page between d today screen and the recent screen. Okay, so for that we're going to need a little bit more content. So I've got another page prepared in the figure file. So we've got this home recent page, which is pretty much the same design, is just got so extra different content so we can build this feature. So because we don't need the rest of the graphics, we just really need this photo stream. What I tend to do is just create a new scene in my Py file. And I'm just gonna call this impulse. And this is just a place where I am cool graphics, which I can then extract out the various pieces that I need. Okay, so we're gonna go to Import Fichman. Just let that connects and we're going to grab our home recent design. Ok, so all we really need from this, this important file is the photo stream groups. So we're just going to copy that command C on the Mac or Control C or windows. And we're going to switch back to our Home scene. And we're just going to paste that in. And I'm gonna leave that for now, is going to leave that there. And I'm going to call this page two. And I'm going to need to make this effectively the same as our photo stream into much Elaine Page one. It's a scrollable container and all of that. So let's just do that now. So we just check how page 1716, So there's can make that 716 high. And we're going to need a little padding graphic as well. So I'm just gonna copy that and paste that into, into here. Same thing. Ok, so we need to turn this into a scrolling group. So that's scroll down to our paging and choose scroll. And we will set the defaults here. So we should now have effectively a duplicate scroll page. So we need to offset this two to the right hand side so we won't pay she felt right-hand sides. We want it just to be on the boundary of our screen. So we know our iPhone is 375 wide. So we're just going to change with page two selected. We're just gonna change the x position 2375. Okay, so we've got our pages. So what we need to do now is we need to, in fact, it was going to reorder these page ones on the top. And we select both of these and do another group. So command and control, G, Mac and PC. We've now groups are two pages into this other container. And because we've groups the pages that container is exactly the same size as the two groups containers that two groups pages. So we're going to take this photo stream and we're going to turn this into a painting container. So we go to the same scroll page and but this time we choose paging. And paging containers default to horizontal because page intends to be horizontal week can you can use vertical paging as well. And similarly to the way scrolling containers work, it's the page is defined by the bounding box. So we need to reduce this bounding box so it is just the size of one-page checkout page width. We can see that it's for 343. So we just want to make our photo stream paging container the same three for three. Okay, so you can see now that's inherited the same boundary. Okay, time for attached to this hit preview. And there's trial paging. So you can see it's paging, it's got annual resistance that you get with paging. But you can see that it's not paging in exactly the correct position as we can still see the edge of our FirstPage. And the reason for this, we've got this gutter between the two pages, but we're using the paging container width to define how far, how next screen pages. So if we just have a quick look down at scroll paging options, it says page by container. And our container is 343. So it's paging by three for three, but we need to take the gasoline into account. So what we're gonna do is we're gonna select our photo stream paging container. And there's this option page by which we're going to choose the second option which is custom. So we can actually define a custom width. And I know that this custom with these sp3 to take into account the GSA. So I'm going to type 360 into, into there and we're gonna give out on the test. Okay, so now we can see when we page everything pages into the correct position. Okay, cool. So that's the first job done. The second thing we wanna do is we want to be able to tap on these category buttons and switch between the two. So we want to be able to effectively what I make this reset button a tap on the button at the moment you can see none of these work. And we also want to make this scrolling is half scrollable. So let's do that now. So first we're going to slit the categories group. And we've got to turn that into a scrolling containment. But this time we want the scroll direction to be horizontal. As before, we need to change the width of the bounding box. So we're going to reduce the width 2343 site matches the same width as our content. And if we quickly test that, we can see we've now called scrollable tab. Okay? So if we open this out, we want to find the reason the recent butters and that's, there's a container for race. And what we wanna do is we want to make that second ball. So we're going to add a SAP triggers, so make sure it's selected here in the last panel and add attack trigger. And keeping recent selected, we're gonna add a color response. So color responses, as you might guess, allow us to change the color of things. Color responses only work on native profile objects. So you can't bring in a PNG or, or just an SVG and change the color. You have to do some extra steps and some of those where applying a colours forms two and a sub containers. So that's all kinda ready to go. And we're just going to make this a particular colour. So we grab the reference which is 00064, and we need to make sure that Phil is 100 otherwise works here. Okay? So let's quickly test that. Tos i. When we've tapped it, we can see that the the pill shape has changed color, but we can't see the text. So if we open up our container, we can see we've got the text and it's this special graphical text objects. So we can't currently effect that's hex color because it's this graphical objects. So we need to convert into text. So let's do that by this tap on this button here. And you can see now the icon is changed and it's now real text. So keeping that selected, we're going to add another color response. And this time we're gonna change the text to white, Making sure that Phil is set to 100. Let's test that code so we can now see we've got outs, hap, state, completes it, but when what's happened is free, so Owl today is still selected. We wanna make unselected do that next. So what we're gonna do really easy, We couldn't, you can copy whole chunks of interactions within the Trigger panel. So it's going to select this hat trigger. And we're just going to copy that. And we're gonna paste it. So we've completely duplicated. The tap trigger and all of its contents. And just as another way, let me just delete this. We can't select and do Command D to duplicate here as well. Okay, so this tap trigger is going to be for our two-day button. So we're going to change the target to today. So that's just type search words today. And we can see we've got two options we get today, which is the container and today we should attack. So we're going to choose the container. And we're going to change the container for today to today. And we're going to change the recent lawsuit. So for recent we need two. Sorry for today was changed today. First of all, the text objects. And we're just going to, as we did before, we're gonna change the graphic to text. Combats are kinda response and we're gonna make that white 100. Okay, so we effectively duplicated both tabs. We've created both our tabs. So if I tap on, reset is gonna change and if I tap on today is going to change. But as we can see, that both selected, so we need to change the state of the other one. So when recently selected, Today changes, changes color. So how are we gonna do that? We're just going to shift select these two color responses and we got a copy these. And we're gonna paste directly inside. And we're just gonna change the, the targets to the other buttons. So here we're changing recent to blue and white and now we're gonna change today. So we're going to find today, choose the container and we're gonna change that to white. And we're going to select the next color response. We're going to look for today. The text. And we gotta change that to that bloom. So this crap that hex value. And we'll apply that here S certainties to Command D to duplicate these two in our second button. And we're gonna do the same thing for actually we're going to reverse these and we want recent, which needs to be white. And let me one recent, the text objects. And we want to change that to our blue. Okay, so that give that test. So we started today, we can tap over recent, now, recently selected, and today is unselected because we've changed the color properties. And we can also because we've created both tactic as we can tap on today. And again, recent is unselected. Okay, so that brings us to the end of this video. So we've created these two tap triggers. We've created the ability to page, and in the next video, we're going to hook these two things. So when you page here, you're selected tab will change. And similarly when you select its hub here, your page will also move. So see you in the next video. 15. Creating scrolling tabs with Chain: So in this video, we're going to be connecting up the scrolling tabs with a trigger called chain. So when we swipe from one place to another, we want the selected tab to move. There's a little complexity here. As we can see, these labels have different lamps and colors. So we need not only to transition, changing their Lemma, we also need to handle the changing of the label color as well. So the first thing I'm going to do as well, just to make it a little more dramatic, I'm just going to reorder some of the categories here. So the first thing I'm gonna do it and this can to get the order in the layers panel. The correct order. I like my layer ordered to reflect hierarchically. So because today is the first item in the list, I want that to be at the top. So let's just move these around. So we got today, I'm actually wanna put recommended next just because it's a slightly longer word and it's gonna make it a little bit more dramatically. Functionality that we're going to add here. So next will be recent. And then we can leave the rest as they are. So sweet, savory and chicken. And I want search at the bottom. I want that to be underneath. Just for a particular reason why that has to be like that. Okay, so thats has to first parts and the next part we just need to visually change recommended recent around. So I'm just going to reposition these roughly. And I can select all of these. And over here I can just evenly spaced them out. Okay, that's good. Okay, so first off, we need still moving tab. We want them we want the movement of the pill to max, to movement of the paging container as we swipe it as well. So, so first thing we're gonna do though, is we just came to give the ability to switch tabs when we, when we select them with tapped, right? Okay, so the first thing we're gonna do is we're gonna create a shape rectangle. And this is gonna be our pill. So we need to kind of create a graphical pill. So we're going to make this the same size as our, as our graphical pill that we've already got here, this container. So we're just going to make 7727. We're gonna change the radius to 14. And we're gonna change the color 00, 0-6 or d, k. And we're going to name this help. And we're just going to move this to underneath the first two tabs. And we want to make sure it starts off its position in the exact same position as today, which is 390390. Okay, that's cool. Okay, so the next thing we need to do is we need to remove the fields on these two containers themselves. So we just need to let Today we're going to send the fill, not the opacity of the filled answer 0. And we're going to change, recommend, recommend it's filling out to 0 as well. Okay? So next thing we wanna do is we want to duplicate. Tap containers, say commodity. And we're going to move them to underneath the pill graphic. And we're gonna call this one today. And recommended pregnant today. But I'll tap to select hit. It means it's Hex is white, so both these texts needs to be why it's the first one is what do you want? For that? We just need to change the recommended selected color, white. And we can see here actually that recommended is not a text native text object yet. So we first need to convert this text. That then unlocks how that ETC, to change color, which we can change to wait. Okay. Just going back to our two containers underneath the pill. So these both needs to be the blue. So next to us in today, let's make that 00064. And we can just copy that. And for recommended, again, we need to convert this to text. And that's already got the crank color, so that's good. Okay, all looks a bit weird and we just need to do one more thing to make this magically change. So we're going to select the pill and we're going to choose this option way down on the Properties panel at the bottom there's an obstacle uses mass, so we going to select that. Okay, so you can now see that the two objects, the two containers above the pill have been mass CCS based little arrow. So and the two underneath everything underneath is not mass. So if I just grab the pill graphic and I just move it, you can see I get it magically changing from blue to white. Okay, so that's sorted the color change. Next, we need to connect the tabs to the paging container. For this, we're going to use a powerful trigger call chain. Chain allows us to Cannes any property value range to any other proxy value right? Here we're going to use the scroll range of the paging container to move the pill. But now only gonna move the pillar. Remember that the second label is much longer than the first. So we're going to use change and transform the lemma. Okay, so let's select the photo string. I'm gonna add a chain trigger. And we're going to set the origin of the two taps just to top center site matches out Hill. Could you read off the right value? Because we are effectively going to transform from this today pill to the recommended pill. Okay, so let's let the pill and we're going to add a response to the chain. So when you look at chain, you'll see it's made up of six boxes. And certainly for the mood response. So the other responses would be different so that the first two boxes are the range of movement. So because we're changing to the paging container, the amount of distance from one page to the other is 360. So we're going from 0 to 360. So that's our starting value. So that's the value of our, of our scrolled our foci distributor. You can see above here, we've got this mapping infographic, which directly relates to the two sets of boxes. Okay, so that's just check the values of the today pills. So when we're looking for the position, the central position. So it gives us an axe of 77.5 for the star. So we're removing the acts. We can ignore these, these white boxes. So we're going to add 77.5 here. And then we now need to check the recommended box x coordinate, which is 204. When we pump that value in here. Okay, so that's test that. Okay? So we can see now as we age our content, but as you can see, we still need to deal with the length of the pill. Today. Word is much shorter than the recommended work. Okay, so let's go back to our chain trigger. And we're going to add a scalar response. And we're gonna set, make sure we set the pillow layer as the target. And again, we're going to need a range of 0 to 360. So we're using the same range of motion or the photo stream to change the size of the pill. So well starting scale. So we check out today. So width is 77 here. And the recommended pill which is 126. Ok, let's test that. So as we move me page, we can see now that not only does our uphill moves, but it scales to the correct size. So I can encapsulate the recommended tab and then cool. So now we have successfully connected our page and tabs together and create a cool animation between the tape. If we go back to tap into tabs, we can see things are a little broken. And that's because we changed the tab transition. In the next video, we're going to fix this to see you there. 16. Selecting tabs to move between pages: Hi there. So in this video, we're going to complete our scrolling and paging by connecting up our tabs to move the pages. Nobody will users be able to swipe the screen, but they will also have the ability to tap on the tabs. Ok, so the first thing we're gonna do is we're gonna select our first tab and we're going to change this to recommended. So next we're going to remove all of the color responses. We don't need those anymore because we've now created our new hill animation. And we're going to select the pill. And we're going to add a move response. Ok, so that's set the x to 204. And let's now add a scar response so we can scale the pill as well as moving in. And we're going to set the width here, 2146. Okay, that's cool. That's working as expected. Okay, so let's move on to our next tab. And we're going to select the next hop trigger. And we're gonna change this targets who today. And again as before, we're going to remove all the color responses. Okay? Because our animation, we pretty much the same as the first one. We can just copy this movers scale. So does command C or control C or Windows. And if we select tab, we can paste it in. And this goes to the move and we want to change the values. We want to change the move to 77.5 ampere change scale too. Ok, let's test that. Co. So we've now duplicated the motion design whens happening on our tabs. So now we need to connect how to tabs to the scrolling behavior. Okay, so we're gonna go with my first tab, and I'm going to add a scroll response down here. And we need to make sure we choose the photo stream as the target. Because that's what we're going to scroll. And we're gonna scroll to three-sixths. Okay, so let's copy this scroll and paste it into our seconds HAP. And this time we're going to change the scroll value to 0. Ok, there, see if that works. So as happened recommended, my scroll view now pages him back. And if I move it by actually paging agile content, we've got our previous animation as well. Awesome. We've completed connected up how tabs. I just want to do a bit of housekeeping. So let's rename some of our triggers so it's a little bit easier to identify what a law. And so we're going to double-click on the first tab and rename that tap recommended. We can call the second one tab today. And finally, we'll rename this chain to page for the SRI. I think we're done. So this section is covered a lot and I hope you're getting a real sense of how probe works as well as being a bit more comfortable with the concept model. It's really a bit like building Lego is an M. Maybe that's why it's so much fun. If you want to practice some more, try creating a third page and make it another tab active. That'll be interested because you'll need to work out how scroll bots have as well so that the active tab is on screen. So this brings us to the end of this section. I hope you're enjoying it so far. Take a break, have a cup of tea, and join me in the next section where we'll be learning all about how to create a work in tab bar that allows you to navigate between scenes. See you there. 17. Building the tab bar - the setup: Hi there. And in this video, we're going to be setting up our tab bar so our flattens happy that we've got here at the bottom of the screen. So we've got some new graphics, some new streams that we're gonna be importing. First off, before we do any important though, we're gonna, we're gonna set up our tab bar here on the home screen. And if tab bar, you'll see we've got this floating tap, our group, and we've got to two sub-groups. One called selected, and we'll call it unselected. And within here, we've got the States of our full tab items. Ok, so the first thing I'm gonna do is I'm just going to reorganize these. So the homes have called a tata effectively, we're reversing the order of these to make a little bit easier. And we'll do that for unselected as well. This is just something I like to do. I like to have the leftmost item in my design to be the topmost item, my layers in my lineage panel. Okay, cool. So we're already on the home screen, so we want to first make our home tab item selective. So all we need to do is if we go and select a group and we shift, select the other three. And we're just going to turn the opacity down to 0. So this is going to reveal our unselected state, which is sitting nicely underneath. So the dark blue is a selective patents. Is these unselected? Okay, so let's go to C and we're going to create three more scenes. And we're going to name these Favorites, updates and profile. And that's just moved the impulse seen humbling. Okay, cool. So let's employ our graphics. So if we go to impulse sigma, sigma for the duration of this tutorial, and I'm going to choose my, so just make sure you've got your file open in the background, whether using SketchUp. And I'm going to choose favorite pie is as my first import. Leave all the, this is the defaults. Let's do the same for the other two screens. And finally, Profile. Great. Okay, so let's go back to home. And what we're gonna do now is we're going to connect them all together. Okay, so let's select our hearts unselected. And we're going to add a tap trigger. And we're going to add a joint response. And we're going to select our favorite scene. Okay, and let's repeat that for the other two tabs so we'll slap balance so that Ted at a tap Trigger chart response jumped to updates. And then select our user unselected. Tap response. Sorry, tap trigger, John respondents, and select our profile seen. Okay, so let's preview that and test that. So you can see that nothing's working, so something's going on here. So let's try to figure out and what's, what's occurring. So if we go back to our group, we can see here that the selected group is actually sitting above the unselected Group and is taken up the same amount of space that's effectively overlaying the unselected group because this, this selected group has got an opacity of 100, even though it's got a fill of 0, it's effectively tappable, which means it's blocking the access to unselect it underneath. Luckily, there's a really easy way to allow the unselected group items to be tappable. So with the selected group, selected, we're going to scroll down to the bottom, the proxies panel and we're going to choose this, make lower layers touchable. We're gonna check that box. And what that's gonna do that's going to effectively ignore this group and allow us to tap the lightens underneath. So that's our test. So now you can see that I can get to my, my trigger and everything's working as planned. So we obviously need to apply our tap to the alcohol does have b2 to the other seems. Okay. Before we do that, we're just going to name our name, our group's, name, our name, our triggers. So we're going to be called S tap favorites. This one's gonna be tap updates. Kindness wasn't to be tapped profile. And then we're just gonna shift select all three of these and we're just going to command G, control G on Windows to group these together. And we're gonna call this tab bar. So I'm gonna do now is we're going to apply outs, have br to all of the other, the other three same. So that's select outflow sins have br in the Layers panel. And we're just gonna do a copy. And we're going to switch to our favorite scene. And instead of just giving this existing placements have, instead of just paste them, we're going to use this. Interaction pieces. And what that's gonna do is go only paste our graphics, but our triggers and responses as well. So they're snack that court so you can see the offloads the tab bar is here. I'm also all of our true because responses are here as well. But you'll notice there's an orange item. So when you ever come across any, Here's orange in pro pi in the Triggers panel. It means that there's a bit of information missing is not going to work. You need to do something. And in the case of this, it's the joint response will set to jump to favorites were obviously on the favorite scene. So we can't, we can't jump to the Siemer alms and that's why it's broken because it won't show the scene. We're on in auctions in the dropdown. But that's fine because we actually want to change that to home anyway. So we're going to rename this to tap Home. And we're going to choose home unselected. And we're going to set a joint response omega and I set that to jump to code. Updates come profile should be fine. Okay, so that's just jump back to home. And we are going to get this test to make sure this isn't working properly. So we start on how we select favorites. We go here and we can see that we've forgotten to change that Cisco and do that now. So it's gonna open up the places hat bar and we're going to reduce the capacity of the Home Selected Item. And we're going to increase the capacity of the heart selected item because we are now in that scene. And so you can see now that that's that looks correct. So that's Test button one more time. Go back to Home. Preview. So running home, we slap favorites. We've now selected favorites and we can now go back to home. Okay, so that's effectively work in, right? So we just need to apply this to the other. If you want to pause the video and have a go and do that yourself, please do so now. And I will catch up to you in a minute. Okay, so if you pause the video, I hope that all then good for you. Let me just catch up with you by an update in my file to match those. So I'm just going to go to my favorite scene. And I'm going to copy my tab bar updates. I'm going to remove that tab bar patient interaction pieces. There's actually a shortcut Command Shift B that you can use. Kind of a change updates to Favorites and slept the favorites unselected pattern selected. And we're going to jump to Favorites. And then I need to switch my, my state so HA, becomes 0 and we just want to turn up to that 1000. It looks good. Okay, so that's this. Do that to the final scene. In fact, let me just copy this tab bar again. You don't have to keep hop in a tab bar just the way I do that, but you can still use the first one as long as all of your tabs match the structure of that should be fine. But this is why I do that. Just kind of relieve thank system presents how Paso commercial FV. And I'm just going to change profile to how picks. I'm going to select Updates. Val is now balanced selected, select updates. And then finally we just need to change power selected states. So bow is now going to be unselected and user is going to be selected. Okay, so that's this. Go back to home and have a quick test. So run home. We can navigate to favorites, we can navigate to updates, and we can navigate to our profile section. Cool. So we've printed out basic tab navigation for our app. Hopefully, you can see how easy that is. Where is it were enabled? We're enabling it to be easier because we are using scenes and we're using the ability of switching between scenes to only compartmentalize our prototype, also make it easier to, to create our, our tab bar. So hopefully I'm gonna see you in the next video where we'll create an image detail screen. And we're going to set up the ability to navigate back and fall from that detail screen. Back to our photo stream ListView. 18. Custom navigation to the detail screen: So in the previous video, we learned how to create navigation between scenes. In this video, we're going to learn how to navigate within a scene. So the first thing we need to do is just go to our imports and just remove everything from head is delete, delete that off. And we're gonna go to our fema file or Scatchard for using this catchword dvx, dy. And we're going to import al-Din tells you. Okay, cool. Let's select the contain the groups and the overall container group called DES how Card. And we're just going to check the clip sublattice box so we can cut out any of the extremities around the border. And we're going to copy this group. Switch to our home screen. And we're just going to paste it. We're gonna reduce their past C2 is 0. And we're also discards his hat, this little icon to the right of the DES howl card layer. And this is just because when we work on this, we're going to, we're going to need to get to the objects underneath. And even though the diesel cars opacity 0 is still going to be blocking us when we're working in the authoring environment. So just him a little I icon, just heights. It can be folded from assembly, can click through to items are linear. So that's cool. We're gonna use this harangue icon as our target to show out these are springs and find that. And we've gotta have a tap trigger. Shout these out again. And we're going to add an opacity. And we're going to increase the capacity to 100. I guess has staff that's working code. So I've tapped on my harangue image and I've revealed the d's health. You can see here we can see the area underneath the screen underneath that's looking at MSC fixed apps as code back to our scene. Extraoral rectangle. And we want to make care exactly the same size as the screen. So a little tip here, and she can go into the size inputs and we can just type a 100% in both of them. And it's going to work how, what the actual size of our scene is and make it a right size. Okay, let's change that fill color. I'm going to change that two to 1999. And I'm going to rename that Bg for background. That's position at underneath that these held out group. And we're gonna group both of these together. And I'm going to rename this container and detail view. Okay, so now we've changed the target of the capacity will need to go and edit our trigger and response. So that's changes from DES, how cards details. And we just need to play around with the opacities of these, of these two groups. So for these howl card, we want the capacity to be 104. The new container group does help you. We want that to be 0. So it is changing needs because the container Group, which is now these health you when that 0, everything inside of it will be 0 as well. Equally, when we want to show this view, we wanted to test increase their pasty of these health huge 100s. So if the detailed Cobb was still at 0, it still wouldn't show. So we need to make sure that that's already at 100. Okay, let's test this. Let's make sure our trick is working correctly. Okay, that's looking good. Next, we need to initiate the back navigation. Okay, so that's just bring our detail view capacity up to 100 so we can work with that. We'll need to remember to turn it back down when we go and test. And we're going to select this back button here. And we're going to add a tab trigger. Okay, let's copy this opacity from the previous trigger and just paste it into our new trigger here. And we're going to set this opacity to 0. Okay, so let's go back to these health you and turn it back down to zeros. We finished working with it. And we're just going to test, test to see if our back interactions are working properly. So we tap on the moraine image to open the detail view, and we tap on the back button to close it. There you have it basic navigation within a scene. The next thing back to the reverse animation, we just did. We use a pasty, but we could have used something else. You remember what's useful to set objects back to their original state. Yet that's right, the reset response. So let's go and change the opacity to the reset response now. So that's just add a reset. To reset that these healthier that's already selected, that's nice and handy falling and I'm just gonna remove this opacity. Okay, that's just double-check. That will work in so we open and close. You might be wondering what the benefit of reset is over the reversing of opacity. Or in this case, to be honest, the answer is not much. But if I start adding more animation when the view opens, reset will always set all of the objects back to their default state. We'll explore this more in the motion section. Okay, so that about wraps it up for this video. Next, we're going to add a bit of navigation to our login scripts. So see you there. 19. Adding navigation to login: So I just want to revisit the jump respondents in a bit more detail. To explore this, we're going to add some navigation between the first two seats. So let's go to our input stream, and we just came to copy the backbone here. Let's go to login and paste it in. Now, let's go to the Start C. So we have this jump response which is just set to fade to give this a bit more of a feeder progression that's changed to transition to slide in. And we're gonna leave the transition direction to right to left. Okay, let's switch back to the login scene. And that slept how Back button. And we're going to add a tab trigger. And to that we're going to add another jump response. Okay, so we want this button to go back to the previous scene. And if we, if we open up this select seeing drop down, we can see all of our scenes, but we can also see this optionals hop previously shown the same. And this is quite useful if you've got multiple scenes as targets and you don't know, you're not going to know which one the user has come from. You can use previously shown same. So we're going to use that one here. And we're going to choose a slide out transition. And we're going to choose it to go from left to right. So again, we get this continuity of animation. Okay? The thing about previously shown senior only works when you test your prototype from the previous scene because it needs to recall that history of actions. So we're going to navigate back to our start C. And we're gonna slap previous test. So if I now press login, I come to my login screen. And if I hit the Back button in, navigates back to my previous scene. Okay, so that brings us the end of the navigation section. In the next section, we're going to learn all about predecessors motion capabilities. So see you there. 20. Adding an animation to the tab bar: In this video, we're going to create a small animation when you navigate between scenes using the tab bar. So I'm just gonna demo it for you here now. So when I tap and tap on the heart, and you can see there's this little bounce animation going between these two. Okay? So the Sappho is using scenes for navigation. So we need a way of automatically triggered an animation when the seed loads. And for this, we're going to be using the star trigger. So let's go to our home screen. And we just needs his hands back handed was hit. Okay. And we're going to add a stop trigger. We kinda add a scale response. And we're going to set this Haag is Home selected. Let's just have a look at Home selected. We want our animation when it bounces to bounce from the center outlets. So we need to make sure our origin on our homeostatic group is sent to censor. Otherwise, it's going to use that origin as the point of the scale, standing up or scaling down. Surface off left and it's going to animate out from the left, which is more we want. Okay, so let's go back to our scale response. So we have to weigh scale. We can either scale to a specific size or we can scale by a factor, which effectively is a percentage. So we're gonna select factor. The next thing we need to consider is whether we scaled to a specific value or scale by a certain amount. I'm going to add a 122 both here. So I'm going to scale to a specific amount. Use Gao Bi is purely a preference. I think that because I am going through a very specific literal value, I feel scale to. Is it a little bit more understandable but feel free to have a play around with that. Okay, let's test this and see where our first bit of animation looks like. So I'm just gonna hit refresh here if you just focus on the home icon. So you can see there's a little bounce there. So that's the first half of the animation. Okay, so you may, quite hard to see, but you may notice that the scale speeds up and then slows down. And this is because it has an easing curve appliance fit by default. And the easing curve that it has by default is ease in and ease out. So having easing adds a more natural fields when objects and probe I has quite a few to choose from. There are lots of different easing curves or you can select. So you've got at the beginning, you've got linear. So this doesn't have any speed changes, is a completely Has, it says a very linear animation. So it's very flat from the one animation, but it's great for looping animation today would really want to slow down or speed up and animation curve and you're looping because you're going to notice when those, those leaps happen. Okay, so IES, The next one is that steps effectively. Speeds up and slows down. But you don't have any ability to change what's called the interpolator, which I'll come to in a minute. 0s in the animation curve, which slows down at the end. So it almost you imagine a kind of starts at speed and its extent slowing down. But if we select this, you can see this gives us the ability to change what is called the interpolant. So which is effectively the specific curve that the animation is pencil follow can, will come to those in a minute. On the other side of the ease in and ease out our curve. So this start slow and finishes fast. And again, if we choose this, you see we have access to the interpolations. Next up is easy in and out. So that's a mix of the ease in and ease out we've, we've just looked at. And this is by far, the most common animation curve that people tend to use is actually one of the Disney is 12 animation principles of thinking about the physics of an object and how it would work in the real world if you ever look at the motion of somebody walking or run em, we don't just suddenly run at two miles an hour. We build up speed. If you look at car, it builds up speed and then it slows down. It doesn't immediately start, immediately stops. So this is by far the most natural animation curve that you can use. Cubic Bessie BCA is a, is a similar animation curve, but you've now got control over the four points. You can create custom easing curves using cubic bases. And actually you can see here, if I tap on this, you've actually got a little cubic Bessie, a graph where you can effectively create your own animation interpolation curves. Okay? And finally, we've got spring. And so spring is a very different animation curve would impress pi gives you instead these two sliders, once a control tension and one to control friction. So, and we're gonna be using this easing has in a minute for an animation and explain to you how these two sliders work with each other. So the second half of the animation puzzle is intercalators. So if we go back to ease in and actually you can click on, we'll click on this, see the differences here. And I'm just going to bring frame. So this is the documentation for eating curves. On the website. You can see here how different the curves are and the different curves are going to change. You can see here, if you just mouse over, you can see that different animations you're gonna get by using these different curves. And these curves are all presets that come with and proud of higher. So you can definitely have a bay around soon here at easing in curves and here, down here on the easing out curves. And then we've got. And ease out curves. So do check out this webpage and have a look and have a play with the animations. The animation curves within, prettify it. I'm gonna stick for the moment with ease in and ease out. And then next thing we need to look at its duration. For, for most U IS somewhere between 0.20.4 is a good rule of thumb for the duration of an animation. Although this does depend greatly on a few things such as the size of an object, the distance it has to travel across your screen, and the emphasis it needs for the user. Another thing I tend to do also is have a slightly longer animate in duration than the animate outmigration. For example, a dialog appear in would be slightly longer than when it disappears. When you add responses to a trigger, you might be surprised to know that from an emotion perspective, the order you add them is kind of irrelevant. The sequence at which the animating responses execute are based on duration and delay. This brings us neatly onto delay. Delay is just a point at which the animation starts. If you're familiar with traditional animation, you'll delay will be your starting keyframe. The end keyframe is defined by the curation itself. There is a way to see a more traditional view of your animations here in pro pi. And it's just here on the right-hand side of the Triggers panel. So I'm just going to pull that out. So currently the functional, so the timeline is fairly limited. It just acts as another way to change duration and delay. Here you can see my scale animation. I can click on it and move there and you can see that moving it will change my duration and my stop delay. Iran the rights and on the right-hand side here. Ok, let's just set that back to the defaults. So we'll leave it to layer 0. Okay, so let's continue with our bounce animation so we can see how all of these features and trolls fit together. So I'm just going to highlight this timeline because this particular animation, okay, for our bounce, we've bounced up, but now we need to bounce down. So we need to reverse the animation and we know what's a really good response for game batch defaults, right? That's right, reset. Let's add a reset response target in the same home selected container. What's nice about reset is that yes, it resets back to the original state. But how it enemies to get there can be completely different. So I want to add a bit of fun and light personality to on my animation. So I'm gonna change the easing to spring. Okay, so I'm going to add, I'm gonna change the tension to 500. And I'm going to add ten to the friction. Okay, let's test that. Okay, so you can see that nothing's changed in here and that's because we need to actually sat a delay. So if we go back and look at how scaled animation, we can see that it's taken a duration of 4.2. So we need to add 0.20.2 here and ask if that's hatched. Tears, we run that. Okay, so now you can see. That the first part of the animation is adequate and up and the second part is giving it that nice bounce. And we're using the delay to offset these two animations. And actually, if we just go back to our timeline again here you can see that my first animation duration is here, and then my second animation duration is here. And you can obviously play around with these different, different sizes. What you'll notice with the reset is that it doesn't have these little handles. So these little handles in their view to kind of change the, the size effectively as changed the duration of your animation. But because this that has got a spring animation curve applied to it and it's very much locked by at attention and the friction you can see the duration here is actually greyed out. We can't change the iteration. We change the duration by changing the tension and the friction. So slightly, slightly different situation with that one is going to receive that, reset that back. Ok, I think that's looking good. So we now have our enemies shall first part of our animation. We need to just apply that now to another scene. So let's, let's copy our trigger block. How stark trigger block. So come on C. And we're gonna go to our favorite scene. And we're going to paste it in. And because I've copied a trigger block, I don't need to select anything is going to know exactly where to put a. You can see I added it to the bottom of my Triggers panel here. Okay, so we can see we've got some orange responses. That's because the things that targets they were connected to don't exist on this, on this same so which needs to add our new targets. And in fact, we are going to be targeting a completely different tab item. So we're gonna be targeting the hearts have item. So let's go to our scour response and that's find our hearts selected. Okay? And we're going to leave everything exactly the same. And we're also going to change our resets, our house selected. And we also need to make sure that origin point is set to center. Centers you will see by default is always set at the top left. Okay, so let's go back to home and test. So I'm going to select my favorites. And you can see up on the animation their logo to snap my home. And you can see that there's no animation. Okay, so this is because the responses in a star trigger only trigger once per session by default. So we need to change that. So next go to our star trigger. And you can see here there's an option to restart every time, and that's what we want to select. So we want to select that also on our favorite scene collapsed I trigger. Right, so that's reads half-staff. Okay, so when I select my Home, Selected, sorry, when I split my favorites, you can see animation is gapes there. I select home. And you can see that animation is there as well. But you can see that we can still see the white unselected underneath. So we need to just make sure that's opacity 0 almost seems. So let's come back to our Home scene. And that's find OWL unselected state for home in the tab bar here. Unselected hormones method, we're just gonna reduce their pastizzi 0. And we're gonna go through our favorites and we're going to do exactly the same thing. But for harp on selected, we're gonna reduce that to 0. Let's go back to home and test again. So now we can see we've got a nice clean animation between the two. Okay, well that about wraps it up for this video. That's a practice. And before you move on to the next video, I'd like you to apply the bounce animation to the other tabs. Also feel free to play around with the easing options and circulates as go crazy, create something unique. In the next video, we're going to look a transition which requires a bit more choreography. So see you in the next video. 21. Animating the Login: Hi there. In this video, we're gonna be tackling a screen transition between two scenes. Previously we had a very basic transition between the start and the login screens. And now we're going to spice things up with some custom animation. So let's go to make sure you understand screen if you're following along and we're going to look at it, we're going to set a jump transition that's currently air. And instead it's going to take off our, our basic transition. And we're actually going to disable the whole jump just for the minute and set up our custom animation on this screen. So we're going to have one section of the animation on this screen. So we're going to animate the logo and the strap line and the buttons. And then we're going to jump out and say login screen. And we're going to set the animation, the intro animation for the login screen here. So that's done on the start screen. Okay, so let's animate the logo. So let's select the logo graphic. And we're gonna set the origin to top center. That's the point where we want the animation pivots hit from and with the logo selected, we're just going to add into this tactic or we're going to add a move response. Okay, and we're gonna say it's Y 2119. We also wanted to play around with the animation timing. So we're gonna set duration 2.4. And we're going to set the relay also two-input for ok. So the first part is going to be yet the labor moving to the top of screaming also wants it to scale. So we're going to add a scale response. And we're going to set the scale, so we're gonna leave it by default. So we're going to set a scale size 257 12ths. And again, we're going to set the same duration, 0.410.4. Okay, so I'm gonna, I'm gonna select mood shifts, select both of these responses. And I want to change the easing curve to an ease out. And again, this is just to do with the timing of the animation. We've got 1.5 happening on this first scene, and the other half had been on the second scene. Okay, so let's get that quick test. So if I tap login, I can see that my logo is animating into position. So that's looking good. Let's now turn our attention to the strap line. So that's make sure that's selected. We're going to add an capacity and settle past his Sarah, how are we going to give it a duration of 0.3 K? This is test that again. So this effectively fading out the strap line really is just take that away from the screen. Okay, as cool. Okay, so finally for this screen we need to do something with the coarse fractions. So let's select the Primary CTA, CTA. And we're going to add a move. And we're going to set the x 2x minus three for three runs, hits it, go off screen, off to the left hand side of the screen. And again, I'm going to play around with the animation. Curves are going to sand intercalators who back. And I'm going to change the durations of this set. The duration still put sex and the lanes. And 1.6, I just want to slightly offset the movement of these call-to-action is away from the animation of the logo. Okay, so that's just move response. And I'm gonna change the target to the tertiary buses as hell out of us. And on this one I'm just going to change the delay slightly to 0.8. So that's when offset this button from the Other Button. Okay, let's go and turn our jump response back on. And to make sure we can see this animation actually running, we need to delay our jump response as well. Otherwise going to jump instantly and we won't see any of this animation happens. So we're going to set the delay of this to 1.4. Okay, that's best. Test that and see what that looks like. So when we hit login, our m, our action can slow this down. So you can see it happening in slavery. Listed not to take it down to a quarter of a second. So I hit the login. May logos fading out and my two buttons are sliding off. Cool. So we've completed half of our transition. We're now going to finish up on the screen. So that's switch scenes. Okay, so we're going to add a start trigger. I'm just gonna move it to the top. And we need to change some of the default properties on the star triggers. So we're going to select it to stop with jump instead of staff the jump. And all this means is that the animation is going to start a little bit quicker and we're going to check our restart every time. And that's mainly because we want this to run every time the seed loads. Okay, so that's select our welcome back strap line. And we're going to, to this star trick, we're going to add an capacity. And we're gonna set its capacity to 0, MSN its duration to 0. So what this star trigger is doing is setting up a default state before this scene has loaded. So if you remember, we've already got the logo in a particular, animated, in a particular position on the startup scene. And we've also already faded out the strap line. So we need to continue that the animation on this scene and set those default status because they have those things and effectively happened. Okay, so next we're going to target the form group. And we're going to add a move. And we're going to say as x 2375. And again it's duration to 0 k. We're going to now target the CTA. And we've got to add another move. And we're also going to set as X2 375 and duration to 0. Ok, so we've now set up our runtime defaults. Next we're gonna do the final bit of the transition. So we're going to add another star. And again, we're going to talk out full. And we're going to add a reset response. We're going to change the interpolator of the Reset to back. And we're going to set the duration to 0.6. Okay, that's now target these Primary CTA at another Reset. I'm also going to change the interpolator to back. We're going to set the duration to set 2p 06. And we're gonna give it a slight delay, will be 0.2. Okay, so let me just explain what we've done here. We've, we've set a default state of some objects based on the animation that's happening in the first scene in the star c. And we're effectively using this other star trigger to reverse our defaults by using the reset responses. Okay, we've done a lot here, so we've edits has to see what we have. So let's go back and select the style of scene because that's where our animation starts. And that's run this animation. So we start solving the star c, we hit login. We get the animation is ASI, right? And a quarter speed to so you can see it. And then we get our second CMB coming in. So let's just run that Pat full speed code. Looks good to me. So let's review what we've done in this video. We've pimps how transition between two scenes. We've learned how to set runtime defaults. We've learned a bit more about animation curves and interpolator. I think now it's time for a cup of tea before we move on to the next video. And in the next video we're going to be fervor exploring customer animations by adding a custom animation to when a user taps on a photo in their photo stream. See you in a few minutes. 22. Creating a custom animation: Hi there. In this video, we're going to create interaction that enables users to save an image from their photo stream into the favorites section. So let's have a quick look at demo, but we're going to be building. So I'm just going to scroll down to this image here. I'm just going to double-tap. We're gonna get his favorite icon. And a little thumbnail just drops into the favorite section. And you saw some of these other images fading out. Bestest run that at a much slower speed. So we can just kind of go through that step by step k. So I'm going to scroll down. So first we're going to create the favorite interaction on the double-tap that's going to bring in our favorite bags to the US can see what they've tapped, then will fade away the other images so as to emphasize the image that we favorited. Next, we'll enemy the image thumbnail, which will serve to help us understand what the image has been saved, will be using a few animation principles here like anticipation and staging, follow through and overlap in action, as well as timing and exaggeration. This will be shown when a thumbnail hits the heart, causing the heart to react. Finally, we'll fade all the other images back into complete the animators set piece. There's a lot going on in this small micro interactions to make sure user knows what's happening. And this is by all accounts, our most complex animation yet. Ok, let's get cracking. So I'm just going to open my previous file here. So first off, we need to go and get our graphic from our sigma file or, or sketch or dvx, dy dependent on what you're using. So I'm just going to switch over sigma. And I'm just going to copy my graphic, has an SVG comeback to prettify it. I'm just gonna paste ten. Okay, so as previously seen, the SVD will come in at one x, so we need to just multiply that by three. And we're going to name it renaming favorite spots. Okay, let's go to page one about photo stream. And we're going to group all of these contexts together. And we're gonna call this photos. And if we just open this up, we're going to find this pi image, which is imaged nine, and we're just going to drag it outside of sin above. I'm now going to move my favourite spots him just above the image nine. And we're just going to position this centrally over the image. Okay, I'm finally, we're just going to be one. We want this to appear So we need to make their past T 0. So that's the setup done. So next we're going to choose how image nine. And we're going to come over to our Triggers panel and we're going to add a double-tap. Let's go to our favorites, Boston. And we just want to make sure that the origin is in. We want to wait, wanted to animate from the center. And keeping that favors button selected, we're going to add an capacities who outs have trigger? I'm gonna make a 100. And we're going to set duration to a slightly quicker and 0.01. OK. We're also going to add a scale. And we're going to scale to a factor of a 120. And we're going to set the duration here to 0.01. ok, let's get that test. So if we scroll down to our image and tell what's happened, so we can see that the image is just appeared straightaway. So wanted delayed slightly so that we can see the scale actually happening. So that's hadn't delay plus 0.1. And let's test that again. Okay, that's a little better. Next, I want to emphasize which folks who has been selected a little bit more. So that select the photos group. I'm going to add an capacity. And I'm gonna make it 10% because saturation to 0. And we're going to add it to the lab zero-point too. Okay, that's duplicate that I passed in. And we're going to increase it to a 100. This I'm going to set a direction to three and the delay to 0.4. okay, that's good. That test. So we double tab and we can see we've effectively faded out. All of the afterimage is like a kind of wow fat and then they slowly fade back in. Let's just play it out again. Okay, so next we're going to add the thumbnail animation. So what we're gonna do is we're going to duplicate our image nine. And we get a real rename this image nine thumb, hematite underscore thumb. And we're going to set the origin at the center, center. And which can scale this, making sure your aspect ratio is not going to scale this to a width 20. And that'll give us a calculator. Hi, I'm slightly, slightly higher, 2126. And we're going to move this outside of our paging container. We don't want this to scroll. So we're gonna set this in a fixed position there and we're going to move it to a different position. Effectively, we want to move there just above where the favorites is quite AS roughly locates heads. And it's going to sell this to 600 degree. It's like a good position. Okay, so we're going to now set its opacity to 0, also two-time way to show quite yet. And keeping it selective, we're gonna add another opacity to our trigger, where we're going to increase the thumbnail invisibility to 100. And we're going to set the duration at 0.2 and we're going to add a delay of 0.2. So still with the immune system, we're going to add another response this time scale. And we need to pump in the current size values because we need to size up and we want the more pro pi to work how the sizing forests correctly. So we know just kinda whichever this is 20 by 21.6. So that's just pull that into these values initially, 1.6. And with aspect ratio lopped, we can now change this side two faulty and it's going to work out the correct height for us, K. And we're going to set the duration to 0.4. And we're going to set the later 0.2. Ok, let's get that test. So double-click. And now m is Tom now appears looking good. Okay, so what I wanna do now is mimic it dropping into the favorites will also going to use one of the 12 core animation principles that Disney animation principles here, which is exaggeration. So when the thumb drops in the hardest going to swell up, just lucky absorbed the image. So again, it's just going to emphasize the animation that a little bit. What we're gonna do is we're gonna go back here. We're gonna duplicate this scale. And we're going to change the width to ten. And that will automatically size are higher. And we're gonna change the duration to 0.2. And we're gonna give it at the lab one. But also going to move vets are going to add a move response. And we want it to, we want it to move. This is where it's going to drop into the, into the favorites icons. So we can kinda position at two where we think it should be. Something like that. That's just round that down to six. 669 and came back to our move. Okay. So yeah, that's really to Mrs. undo that same quickly about space, correct position. So now we know what that value is. We can pump a into or move into the why S6 69. And that's sometimes a you have to do things because we don't have any ability to scrub timelines and things like that. If you move your object into your final location, you can get the value. Then just make sure you wanna do and move it back. And then you can put that value into your response. Ok, so yes, the duration, duration 0.2, I'm going to delay this by 1 second. Okay, there's tests that see what that looks like. So double-click and the thumbnail disappears into the heart. Now it's actually going behind the scenes hat is going to be so fast that people are not going to really notice that. Also, when we add the next animation with the heart's gonna swell, the human brain tends to figure out the frames in between so we don't have to be super accurate all the time, has to how things react. Sometimes we can get away with very, very fast animations just by allowing the brain to figure out the animation from one frame to the other. Okay, so let's find our heart unselected group inside our floats. It's happening here. And we're gonna make sure that origin is set to sensor, sensor because we're the heart to animate from the center. It's very natural and natural way for its y domain. And we're gonna come back down to our double-tap response. And we're going to add another scale. We're gonna scouts with factor. And that factor is going to be 120. We're going to set the duration where lever duration answer 0.2 actually, and we're set the delay to one. Okay, so that's the first half of the heart animation to that threat to swell up, we now need to complete that. So I'm gonna do is I'm going to add a resets response. Making sure you have the set, the set X to the heart unselected group. And this time we're going to choose spring has our easing curve. And we're gonna make the tension 500s. And we're going to set the friction to ten. And finally, we are going to delay that by 1.2 seconds passes given a time for the first part of the animations to run. So that we can choreograph these together. And actually if we just have a quick look, because I've pumped at a whole bunch of values here. But you can see the how things are actually animating hair vita timeline. And you could actually use this to rough it if you want to understand, if you want to tweak here, you can tweet your hair by moving things backwards and forwards for delay. And then you can also change the duration by us by dragging. Either. Decide if you drag the leftover, see your your change in the delay, as well as the duration system. Do that. Cause I'm and we put in the values. And so that's just have a quick look and see what that looks like. Server scroll down, double-click on my pipe. It's gotta favorite. And the thumbnail drops into the heart and the heart reacts to absorb in that thumbnail and does that little, that little bounce animation. Cool, well that completes the favorite animation. And this brings us to the end of this video. Hopefully this gives you some more ideas on the sorts of things you can do. We played with some new triggers and spent a lot of time on animation choreography. In the next video, we're going to be having our final look at motion by adding a fantasy of transition from a photo to its detail screen. 23. Creating a custom detail screen transition: Hi there. In this video we are going to be creating a custom transition to our photo detail screen. So before we build that, I just wanted to show you what that's gonna look like, what we are going to be building. So I'm going to tap on this thumbnail image here. We've got a transition into this detail view with this customer transition. And then I'm going to be able to hit this back button and transition back out again. Okay, so let's get to F. So if you've been following along, you can carry on with your existing file. Otherwise you can open up the starter file is attached to this chapter. Okay, so let's navigate to the Home screen. And we're going to open up these health you and these howl card. And we'll just came to bring up the opacity of the whole thing. And then we're going to want to firstly, this group or this lower contents together. So this is going to shift select that we are a group that together and we're going to call this card details. And we're doing this because we're gonna be, later on we're going to be animates. And this was one big, big group. Ok, so that's hideout. He's healthy for a second and we're going to go down to our photos group. And we're gonna find image tree, which is the image we're gonna be as happy or custom transition to. And we're going to group this to put it into a container. And we're going to name this container image tree. And we're gonna go back to how these health you are gonna copy our main page. And we're gonna paste it into our newly created imagery contain hit. Ok. Let's reduce the width to a 163, but basically sizing it down. So it's the same size as the thumbnail. We're recreating a thumbnail effectively here. And we're going to adjust this image. Its position, so is in the same position, has the, has the current thumb now. And it's good. And we're going to clip the sub layer. So select how group, and scroll all the way down to the bottom and chooses clip sublayers option. So that's going to hide all the other slow content added. We're going to set the radius of this Conservancy 16. Okay, so now it looks like our original thumbnail image. Okay, so we're gonna rename our new image to image rape inside of this container. And we can now say through move our old image. Okay. So that's the first bit done. To the problem we've got is that we have this image which is inside of a scroll container. But we, when we open up the, when we transition to this custom, custom feeds healthy, we don't want this. These have to be scrollable and it will be scrolled off. It's still inside of the scroll view. So we need to figure out a way of still connecting exposition to the scroll view. But also when we tap on there for it to be outside of the ScrollView. Obviously, we still need to have the thumbnail scrolling as well. So the way we're gonna do this is going to use a trigger called chain. I'm gonna do is we're going to duplicate our imagery container. And we're gonna rename that imagery chain. And we're going to move it outside the scrolling all the way up hip underneath these healthy. And with the page one contain a selected clothes. Okay, so with the page one Scroll View selected, we're going to add a change where we're going to chain to the scroll position. So that's by default, so that's good. And we're going to select how imagery chain group. And we're going to add to that trigger, we're going to add a move. Okay. So when we add a, a trigger to a, sorry, a response to the chain trigger, we get this different kind of box and the way chain it, it connects ranges. So we wouldn't see chain the range of motion of the scroll view to a range of motion on the move response for our imagery chain group. So first off, we're going to fit in this, this half, which is the range of the scroll view. So Scroll Views away start at 0. So that's a nice, easy starting point. And we're going to just set it to scroll a thousand pixels. So we need to now map the y position of our imagery chain to this range of zeros below 1000. So the first thing we need to do is fine and position. And we can see here is that to eight. So it's nice to know that our starting position. And because we want to have a one-to-one mapping between the range of the scroll and the rate of the move. We need to make sure they move the same amount of pixels. So scroll views work in the opposite direction and move in the opposite direction to objects that move below the screen. So currently, the position of any object starts in the top left hand corner. And anything outside above will be in the negative and anything down will be in the positive. For scroll though it works in the other direction. So up is positive and that is negative. So we need to flip these around. And industry chain is starting to AAA and we needed to move a thousand pixels. So we just need to do a little bit maps. And we just have to mine this 28 thousand and that gives us minus 712. So that is now moving from to a to minus 712, which is a 1000 pixels. And that maps directly to our scroll view, which is moving from 0 position to a 1000 pixels. Okay, so let's give that a test. You can see that we can see that that's moving in and its exact position. If that's if I pull the over scroll, you can see the other image underneath. Okay, so we're gonna fix that. So let's go back to our file. And we're going to reduce the imagery chains opacity to 0. And that's going to fix two things. One, it's going to hide the image so we don't see that over scroll. And number two is if a user had decided to scroll by tapping on that image, that image, because it's a 100% and is outside the scope, is going to block the scroll view. So we need to be opacity theory way so it doesn't get in the way. Okay, cool. So next thing we're going to draw attention to is the actual transition animation. The first thing we need to do is we need to fix this tap trigger. So we need to tap trigger to point to our imagery group, which is the group inside of our Scroll container. Okay, that's cool. And we can remove this capacity. And we're gonna, we're gonna add a new opacity. And we're going to target the image three chain group. And we're going to set its opacity to 100. We're also going to set the duration to 0 cuz we want that to appear immediately. Next, we're going to add a scale. And we can scale the industry chain, 2359764, atom move. And we're going to move the imagery chain 240 down. Okay, so basically these two responses are scaling up our thumb now and get into the correct position so it matches our original detail view. Okay. We're going to now we need to size up the image inside so to a particular positions. So we're going to let our image three and we're going to add a scale. And we're going to set this to 359 by 8. Okay, so let's test that, see if that's working code. So we can see here, we've got our images scaled. We can see that we've got our top half of our container, but we can see there's this empty space and you can still see the image underneath. Ok, so what we're gonna do is we're gonna go back. We're actually going to set the imagery chain background to a 100. And we're going to get back into are these healthy? We're gonna grab our background, which is how how Claire tins hit box and whose TNC now the background of the ListView, it's going to bring that underneath how imagery chain. And we're gonna turn this opacity down to 0. Keeping it selected, we're going to add another opacity response to our trigger. And we're going to make the, the background shim 70%. Okay, we're gonna go back to our imagery chain and we're going to add a radius. So we want to change the curvature of the, of this original thumbnail, which is 16 pixels. We want to, we want to grow that radius so it matches the phone shapes and we're gonna change that radius two from 16 to 32. And let's test that. So that looks like. So we can now see we've got our larger radius corners. We'd never are white background. We've got this nice radius which is, which is matching our phones. So it starts to look like the customer transition that I showed you in the beginning. Ok, so let's go back to our file. Okay, so next we need to bring back in our content and controls below the image. If you remember way back at the beginning of this video, we group them together into a container and we called it carved these house. So let's go and find that called DES. How's group? We've got a here and we're going to, we're going to copy that. And we're going to paste that Intel imagery chain group. And we're going to set its y position 2561. Okay, so that's tests that, see if that's true. That was like, OK, so tap on it and we can see we've got our bottom concept now coming into position. Ok, so that's played out again. Okay, so that's, we're going to pair it with and pay around. That is to make sure that animation is looking. So let's go back to it. That's keep our quad leads. These house selective. We're gonna, we're going to change their passwords is 0. And we're going to add an opacity response to our tap trigger. And we're gonna set the opacity to 100. And we're gonna give it a duration of 0 dot three and a slight delay or 0.1. so let's look at that. Hey, I, so that's now just fading and we didn't have a kinda moving up from the bottom like it was before with a little bit strange. Okay, so everything's looking good. The last thing we need to do is bring back the Back button so we can do our reverse transition. So let's go and grab back. So if we go into how these how view again, we'll grab our backpacks and we'll copy that. And we're going to paste that inside the equipment button two. And we're gonna set its position. So x is going to be seven, is going to be eight. And we also need to switch our targets on outs have triggers, so we need to find our original tap back button and we need to find two switches, switch that. Okay, so final thing we need to do is add the reverse animation. So let's change this reset to target imagery chain. And we're going to add another reset. And this time we're going to target the background. Shim scrim, get the right word. And then finally we're going to add a third resets. And we're going to target the image tree image. And there are a few imagery images poking around the same, but just make sure you've got the right one. You couldn't. You can see when you've got a selected here, it will be selected in your Layers panel here. So you can see this is the one we actually want to reset. And we wanted to change the duration and a little bit to 0.3. Okay, that's good. That test. So we're going to click on our image is kinda size up. We're going to hit our backbone and it's gonna size back down. That looks a little bit fast. So let's just go back to our resets and I think we've probably changed them all to the early trails. Try that. Test has that little bit better. Okay? So we can see that there's not bad, but it's not perfect. And if we scroll a little bit and then open and close it, we can see that it doesn't actually go back necessarily to the positioner, Perfect position where it was. He's gone back to where it originally was. But it's not too bad for now. We're gonna come back to this hand. We're going to fix these issues. But do that, we need to learn about formulas. Okay, so this has been a long video. I hope I have a major brain a2 much. We've managed to get quite fast still with pretty much the same stuff we've had learned previously. And we've had a little bit more practice creating motion. In the next video, we're going to revisit the start login transition as there's some stuff there that we need to fix before we get into, into formulas in the next section. 24. Creating custom transitions using Reset and the Timeline: Hi there. So in this final video, looking at motion, we're going to go back to the beginning of our app. We're gonna go and look at the stuff in the login screens. And we're going to add a custom transition between those two screams. If we just have a review of what we've got so far, we've got the login, which hasn't concentrated edition on m. But if you remember, we added a back button in a previous video. And if I hit this back button, you can see that's just a basic transition. And also our first green doesn't build in. The components are missing, so we're going to fix this. Okay, so that's just refresh that and go to our file. And we're going to start with the with the start s2 spatially on the staff team, if you're following along, carry on with your file. Otherwise, you can download a starter file for this, for this video. So we're now start seeing, and what we're gonna do is we're going to add a start trigger. And we're gonna add a stark trigger because we want and animations who run it automatically when the scene loads. So today start trigger, we're going to check this box reset, restart every time. This, this restart every time is related to jump to the junk response and we're using junk responses to navigate from scene to scene. So that's why that check box isn't too. And we're going to add a reset for every single object that we've got in our animation. So we've got a logo with strap line. We've got the primary CTA, we've got the tertiary CCA. So we need to add a reset response for each one of those. So I'm going to first step tertiary CCA, and I'm going to add a reset. Then I'm going to select the Primary CTA. At a reset. Next will be the logo. And I'm going to add a reset there. And then finally, I'm going to add a reset for the strap line. Okay? So what we're effectively doing here is when the start treaty loads, we are going to reset the starting position of these objects. So when we tap on the tap trigger above, that's going to animate our objects into a particular position state and it's going to leave them. There. Is going to remember that stay. When we come back to this screen, we want to run an animation which resets and back to their original state. So let's have a quick test to see what we got so far. So we tap on the login. We go to the second login screen. When we hit back, it's going to trigger those. And you can see they all come in at once. They've, they've all got the same motion properties. And we want to change that so better mimics the reversal of the custom animation that we've got going in the first instance. So before we do that, we're just gonna Reese rename these responses so we can understand what each one is at the moment they're all say receptor to be a bit confusing. Let's name this one tertiary CTA. Next up, Primary CTA, logo. And finally strap line. Okay. For this situation. And just so we can play around with the timeline, I'm going to use the timeline to change these motion property values. I just want to show you how you can use this Highline and how it can be quite visually useful when you're doing choreographed animations like this one. Lets first, this work from top to bottom. So the tertiary CTA, I want that to dominant to last 4.6 per second. So I'm just going to drag that out to 0.6. You can see we've still got the property values here. So we can see to make sure we're on the right, on the right amount. And I'm going to leave the delay at 0 because I want this to run first. Next up Primary CTA, I'm Gaines who also satisfy the same duration of 0.6. And you notice it kind of snaps imposition. So that's quite helpful. And for this one I'm once you delay it by 0.2 of a second, cable logo, we're going to, we're going to leave it at the duration of 0.2 of a second. But we want that to not happen until we're a second into our animation. So we're gonna move them way out to 1 second. And then finally the strap line. We're going to also leave the duration at 0.2. But we want this to happen last, and we want that to happen At 1.3 of a second. Okay? The other thing we wanna do is we have a look back at our initial move responses for the two buttons we can see we've used interpolates with back. So we want to replicate that in our reverse animation as well. So that's select shift, select Tertullian Primary CTA and trace the cubic, interpolates it back. Okay, let's give that test. So we login, we get our initial custom animation. And then you go back and we get how do animation? Okay, that looks pretty good. So that's the first half of the cost of animation that we're creating this video. Next up, we're going to create the back animation, which is the exit from the login screen. So that's Go over to our login scene. And we're going to first select the Back button. And you'll notice that I've probably mentioned this a few times in previous videos, but when you select something in the Layers palette in the last panel, it automatically selects any usage instances of it in your triggers, which is really used Sweden CS is light grey, highlight here. So especially where I've got multiple TAP triggers and I haven't been very good at naming them which are should be doing really. But this is, is we've got these two tap triggers, so there's helps us find the correct one. Ok. So we're going to look at the jump response. And you can see here we've, we've previously pawn, hey, basic transitions. We're gonna turn that transition that we're going to set that to none. Okay? And we're going to go to our first stop trigger. And this is this start trigger is the trigger that basically sets all of our objects into their beginning positions. And if you remember back, the way we did this animation was we use the Star Trek two sets of initial position states. That's why the duration and delay is 0. And then on this second star trigger, we use to reset respondents, to reset it back to their original state. And this is the way we created this and summation, because we've used reset to create the first entry animation, we can't use reset in this instance to create the next animation. We have to use some standard motion techniques to create that. So that's what we're going to do now. So we're going to go back to that first start trigger, and we're going to shift select responses. We're gonna copy them, and we're gonna paste them into our backup buttons have trigger. And, but just make sure that I mean, this is not necessarily super important because as I've said previously, duration and delay decides when things execute, but just for and your sanity, I guess. And to make sure that when you're looking at you can see the order of things like, I only tend to still keep the order or try to keep the order of these things in the order they execute. So these objects are going to happen first and the jumps can happen last. So we've got jumped at the bottom. Okay? We're going to turn our attention to the opacity response first and we're gonna set its duration to 0.2. Next up, we're going to deal with how to move responses which control the input fields and the primary CTA. So that's shifts that happen those. And we're gonna we're gonna set the duration to 0.6. We want them both to move at the same time. But we also want to do, is we want to, again, if we look at these, of these reset, We've got back interpolator. So we want to also add a back interpolator to our reverse animation for these two objects as well. And just to have a look at there. So we've got, in fact, we can see it here on the end. This is another reason why the timelines quite use where you can see the power capacity is kind of R1 and R2 moves are gonna run all at the same time, the auger enemy at the same time. And you can see the job response, which is this little dot that's gonna execute immediately as well. Obviously, if our jump, jump straight away, we're not gonna get to see any of these animations. So we actually have to make sure I'll jump happens after the animations of executed. So what we're gonna do is when I sat down, responses are going to add a delay. All 0.06, which is the longest duration for AR objects is 0.6. And we'll go we safe knowing that all the animation has completed. And we're also going to make sure that any start responses we've got here, this just double check that we want them to all restyle every time. And we want to do that because we're using jumps to transition. So we want these things to happen, these animations to happen every time we jump back and forth. Okay? So I think that's everything, will just go back to the start seeing. And we'll preview our new updates and custom animations. So I'll tap look in my entry, custom animation to the login screen. And then if I hit back, I'm going to get my accustomed back animation to the start screen. Ok, cool. So that completes the fix for this custom transition for this video. Also rounds of the motion section. In the next section, we're going to be exploring the world of conditions and variables. These are two really powerful features that will enable us to build real logic into our prototypes. And that this is just going to make things look even more realistic, is going to be really cool. And then we're going to be used in that capability to make a real login. Also, what we are going to be doing in the next section is give the ability for users to view photos that they have favorited. So we're gonna add some personalization using our, our new found skills. We've conditions variables. So see you in the next section. 25. Making Login work using Conditions: Hi there. In this video, we're going to be using conditions to create the logic behind our login form. We are going to create both success and error states with some associated messaging as well. So if you've been following along the shoes to fail that you that you've got. If you haven't been following along, then you can download the starter file that goes with this video. Okay, so we're gonna start obviously with our login screen to this, make sure you go to the login scene. And we're going to first off, we're going to rename some of these layers because they are a bit confusing. So we're going to rename this, this first layer and go to home. And we're going to rename this layer, returned. The focus, we're going to call focus female. This will be back because it's connected to our back button. This first Star Trek and we're gonna call kinetic initial per initiation. And that's because we're initiating some of our, some of our states here. This is why normally call my top group if I've got any, any, any staff to kind of set up this one, we're going to cool intro. This is how intro animation. And lets us read, organize them in, they're in a good order. I'm going to bring it up under here. That's fine. That's all. Good. Okay. Well, we'll leave it at that Holder case we got in it. Intro focus email goes to Home, returned to her and tap back. One final thing I'm gonna do is I'm going to actually group these two home groups again. So I can, I can group, I can group groups of groups. So I'm gonna group a group of a group, vega. So this is a really good way to organize your last stack, your, your interaction stack, I should say, because it can get quite lengthy. As you add more and more functionality, will disclose home cook. Okay, so first thing we're gonna do is we're gonna create the logic for the email field. So let's go to our home trigger. And we're gonna add a condition. And we're going to choose the email input. And you can see here that we've got a whole bunch of properties that we can target. All-female impulse aware, learn and look for the text property. And you can see here. We've got a few different options as far as how we want to set up this condition. So we're looking for equality. So we want to match the value of the text field to particular value. So we're going to keep that equals. And we're going to set the value. You can, you can put in whatever you want. I'm just gonna set into my email address. Okay? And we're now going to take our jump condition. I'm going to move it into the cabin. Responsive says, hey, I'm going to move into the jump condition. Okay. So we'll just go and run a test. And what I just want to show you is that retype now we call here a condition which is looking for this particular value here. So if we just type anything in there and hit continue, we're not going to progress to the home screen. And that's because we've put the jump. Response is inside of this condition now, so this jump is false, isn't gonna run unless this condition, this condition equals to true. In this case, the I type this email address into the email field. Ok, so just to show you that it actually does work, that's politically correct one. And if I continue, you can see I go through to the home screen. Okay. So that's the that's the first condition set up. Obviously, for a login, you need both her, an email and a password or a username and a password and now cases and email and password. So that's add another condition. And this time we're gonna add a condition in a different place. We're not going to add a whole new condition as we, as we normally do from the bottom of the menu, we may actually need to add another, another comparison to our single condition. And so you can add a multiple sub conditions to a condition. And you can think about this as when you need to compare something to multiple values. So all those, all those multiple values need to be true for this condition to be a success. And that's exactly what we need to do. Their login, we both need the email and the password to be correct before we allow anybody into the home screen. So there's a app button which you may or may not have noticed just down the bottom here. So we're going to press that to add a second condition. And this time we're going to select the password input field. We're going to and the Text property again, it's going to be the equal comparison. And this time we're going to put in a password. So you can just make up a password. I'm just gonna make up a password value. Okay? And we're going to test that. So now if I put in my email address, but I'll put it in the wrong password. It's not an alanine. If I put in the correct password. It allows me in. So it's looking and comparing both these conditions, making sure that both true before it will allow that jump condition to run. Okay, cool, so that's it for this video. In the next video, we're gonna continue with built in the logic for the volume form. And we're going to be putting in some error handling OC at the moment. If you put in the wrong credentials, the cable just disappeared and just gets blank screen arena was going on. So we wanted to do something to make the user experience a little bit better here. And so that we are going to be adding a custom error state. So see you in the next video. 26. Handling error states on Login: Hey there. So in this video, we're gonna continue our move, our login logic, and we're going to deal with how the interface reacts when we put in the wrong login credentials. As this is a login for security reasons, we don't want to allude to which value is wrong. So we're just going to be showing a generic message that the user's got, got some information in Rome. So to do this, we're going to go and grab an asset. So that's skip over to fig, scatch or Adobe XD dependent on what, what program we're using. I'm using sigma and I'm just, I've got this error message. Hey, you can obviously does create an MSD. Well, if you want to or you can copy the asset I've created for you. And we're just going to copy this as SVG. And we're gonna go back to PowerPoint and we're going to paste our graphic in. Because it's SVG. As per usual, we need to multiply it by three to get to the correct size. And we're just going to place it somewhere below in this space down here doesn't have to be super exact. And we're going to rename its error message. And we're gonna turn to surpass t down to 0. Ok, so let's go back to our condition and we're actually going to rename this condition to login success. So they began to create a few more conditions. So we want to make sure we know which, what we're doing. And we're going to see now duplicate this condition. So Command D control deal windows, and we're going to name this email fail. We're gonna remove the jump because this is going to be a scenario with our jumpstart Home scene. And we're gonna go into the condition and we're actually going to change the comparison operator here. So instead of equal, we want it to be not equal. And not equal is this little equal sign at the strikethrough love diagonal straight through six. Want to switch over to not equal for both. In our, in our responses, we're going to select the error message and we're going to add an capacity. And we're gonna change that to a 100. So we're basically gonna fade in the error message. We're also going to fade out owl continue button. So our primary CCA, if we started with, we select that. And we're also going to add an opacity. And they're going to tear it down to 0. Okay? We're now going to duplicate this condition again. So the one we just created. And we're going to change the name, I'm gonna call this password felt. So whereas we had a successful condition where we, we needed both of these email and password to be true to allow the user in. These two conditions, we don't want to have this compound condition here because basically if a user does tie ups the email wrong, but actually gets the password correct, this is still not going to, that's not gonna, that's not going to have a comparison of successful comparisons at s, So it's going to fail, which would be incorrect. So we're actually breaking down our L2 conditions into two separate blocks. So for email file, we just want the email condition to run, so we're just going to hit across to remove the password condition. And similarly on the password file, we need to remove the email condition. So basically you've now got a, the condition in each one. And those are just going to run individually. What this will allow to happen is that the user can get both credentials wrong, ball, get either one correct and the other one role. And they're still going to get the error, the error handling message. So that's just this test that so Predators Put in wrong credentials. I get the I get the message. If I actually type in a correct password. But I put in the wrong password. I also get the error message. So it deals with all the different scenarios. So that's looking good. Okay, so next we have to deal with the state. After an errors user wants to try again. If we go back and preview this, if I have, if I put in the wrong credentials and I hit Continue, is gonna give me the error, but also there's no way of me getting back to the Continue button. So I need a way of resetting the form so the user can try again. Okay, so that's what we need to do. So, but to do this, what we're gonna do is we're going to copy our two opacity. And we're going to go to the focus email trigger and we're gonna paste them in here. This is pulling underneath. And what we're gonna do is we're going to reverse these. So the RMSE we wanted to disappear and the call-to-action, the login, but we wanted to re-up here. Also, we need to copy boy, the conditional logic. So these three conditional blocks, and we need to also add it into our return key trigger. If you remember, there's two ways we can submit the form. We can either press continue by law, we can hit there were Sankey, so we can remove this jump. And we can just paste the whole lot in here. Okay, so we've got our conditional logic in both interactions. That's if the user presses the Continue button or if the user hits return on the Home key. We've also added this. These are pastors who the focus email so that if the user gets one of those credentials rung, then they can tap on the email field and get the Continue button back. One final thing we need to do is we just need to duplicate this focus email because we haven't. We need to add it to the password field as well just in case they got the password wrong. So I'm going to rename this to focus password. And we're just going to change the the target to the password field. Ok? So if we prefer that if I put the wrong conventions in and I hit continue, and we get the error message. If I tap into the email field, then I'm gonna get the Continue button back. And then if I also tap into the password field, I'm also going to get the Continue button back. Okay, awesome. So we now have a working form of real logic. Next up, we're going to use some variables to make the login even more flexible and dynamic. So see you in the next video. 27. Using variables for Login: Hi there. So in this video, we're going to be replacing the hard values for our e-mail, our password with some variables. So having the data in variables keeps it separate from all the other logic. And this gives us easier access to do things like change in the value or even the data-type. If in the future we wanted to create a prototype where the user sets their login. We can then easily access it and use it in our login flow. Another reason we might want to use variables is so that we can perform other calculations or formatting will end. As it happens, we have an issue with our login right now. If we tested, the login will likely fail as a login is case sensitive and devices tend to capitalize the first character. In a later section, we're gonna take a look at formulas to overcome this particular issue. Okay, so let's have a look at variables. Okay? So variables exist down in this panel in the bottom left-hand corner. So this is your variables panel. And if we tap on this little add button, you can see there are two types of variables We can add. There's a variable for all scenes, and then there's a variable just for this C. So if you want to access a variable value across your whole prototype, IOUs in the scenes in your prototype, you're going to need to choose this first option. If however, you only either need the variable accessible within the current senior in, or if you're not using scenes at all, you can use this second option. Okay? So I'm gonna keep my options open and I'm going to choose for all seems just in case I need to use in the future in a different scene. It's worth also pointing out that once you choose a variable type, you can change it. So I can't now convert global. There's kind of for all scenes variable at Hunt change into a. For this scene variable. I would have to create a new variable, delete this variable, and change around. And that can be quite problematic, especially if we're using the variables inside lots of conditions and things like that. So do think hard about which type of variable you, you, you're gonna use. You could just go and add global variables for everything that way you've always got access to. The only downside to that is all these variables for all scenes, I call them global variables. They will be accessible in the Variables panel for every single scene, whether you're using them or not. And that if you're using a lot of evolution can get quite lengthy. So yeah, it's, somebody just needs to kind of see what works for you, see what works within the prototype you're building. Okay, so I'm going to stick with the full scenes variable just in case I need to use it and other scene later on. And we're gonna make sure we're on the login scene here. And if you, again, if you're following along encounter with your file, if not, you can download a starter file for this video. So we're going to rename this variable. So you just double-click into rename it and we're going to include email. And When you select the variable and you look over to the right-hand side, you can see there's actually three different kinds of variables we can set this variable to. So these are variable types. So you've got number, text, and actually hex colors. So dependent on what the value is going to be kept in this variable, you want to choose the correct variable type. Color is quiet, niche. You probably not going to use our whole lot texts in them. You'll definitely be using a lot. For us. We're saving the text value of our email and our passwords. So we're going to want to choose texts as the, as the variable type. You've also got the ability to add an initial value in this. It's textual below. We're gonna do that. So this is our email. So we are going to pump him Ni email that we want to use in our in our conditions as we did before. Okay, that's good. Okay. We need to do we need to give up the password as well so you can duplicate variables in the same way as you did pay elsewhere. Let us do this e-mail and we're gonna call this password. And we're going to change the value to our password. Cool. So now we have variables set up. Let's apply them to our login. So you want to navigate to the login success condition. So this one here. And if we look our first sub condition, we've got this hard value in here. So if you look at the box just above where it says one a value, we can actually click on that and we can choose a whole bunch of different stuff I'd end in this case, we want to choose our variables so you can see how two variables are listed here. For this one, we need Email variables we're gonna choose. Now. Let's move on to our second condition, which is password. We need to do the same things that we need to choose the password variable. Okay, let's test that. So effectively, for the success criteria, nothing should, should change. We should be able to login in the same way we did before. And my password so that you can see we locked in so but it's now using the values inside our variables instead of b values. Cause we just need to apply that to our other conditions. So we done the login success, let's do the email foul conditions, change this to email and password foul condition we are going to change to password. We also need to set it in our return to home trigger as well. So what you could do is actually just delete everything out here. And we can just copy, copy our conditional block and this paste in. So we've now got that set using our variables as well. Cool. So as you can see, is already made things a bit more accessible. And also we only have to change the value in a single location. Now, as you can see previously, we've got these, these exactly six conditions or with hard values would have had to change those six times. Now we can just update the value in a variable. Ok, so that about wraps it up for login and this video. In the next video, we are going to use variables and conditions to show a favorited phones have in our favorite section. So see you there. 28. Managing states with variables and conditions: In this video, we're going to be using variables and conditions to change this Favorites view from the empty state you can see here into showing our favorites ID pies. So if you remember in the previous video, we added an animation to one of the images in our photo stream, which then they would ask to favor that image. And we basically did this animation where it does fell into the, into the high. So we're now going to add the logic to this screen. We can actually see that image pop up as a favorited pi. So this, this is a good example of how you can use variables and conditions for state management. And states are really important parts of apps. So being able to prototype states is a really important skill to learn. So you're going to learn some really cool stuff in the coming videos. First thing I wanna do is I want to impulse, does some graphics for a slightly updated version of this particular screen. So I'm gonna skip over two sigma. So this is my new favorites design. So you can see here, I've added a tab navigation here for favorited pies and also a Maya place section. You can see there's a thumbnail here, floor. Propose. This is effectively what our screen is, Gainesville somebody can look like. So that's the skip back to probe. And we're gonna go to how people see. And let's just delete any old graphics off of that. And we're going to import our new design from sigma into this scene to leave everything as defaults. And then I'll see if we're using a sketch or Adobe XD, then does NFO as you have done previously. Okay, cool. So our graphics has come in. For now. We're just going to grab the standard header graphic. It's going to copy that. And we're going to skip back to our favorites scene and we're going to paste our header in. And we're just going to take the word copy off the end of that, we're going to delete the existing standard header Graphic group that we had there. And we're just gonna replace that in positionally with our new one. Next up, we want to group the graphics which make up the empty states together. So that's illustration, the texts and the button. So it is going to group them together. And we're going to call this empty state. Okay? And where next we're going to, we're going to set up our kind of state management framework. So the first thing we're gonna do is we're going to create a variable for all scenes. And we're gonna make that sex variable. And we're gonna call that F state, F underscore state. Again, the naming. Structure is more important is the way I made things. Okay, and we're gonna set, we're gonna give this variable a default value of empty. And what we're doing here is we're using the variable to control what state we're actually showing. So our default state is the empty states, so would ascend up the first day as the empty stay as our default, default state for our state manager. Okay, next up, we're going to add a star trigger. And we're uninstalled treated because start trigger is the trigger that runs automatically when the scene load. So we want our state managers who initiate when the scene. That's why we're using a star trigger. And we're going to rename this start trigger to states. And we're going to assess it to start with jump rather than a star after jump, because we want the state to be set before the screen gets rendered. Using start with jump, just happens a little bit quicker than star after jump. If we use staff jump, then we probably get a flicker of whatever was there before, before we sell steaks and also we don't want that. And we want to check restart every time because we want the state Manager to check how stay every SQL time we come to this, see, we're gonna go back to our empty state graphics. And like I said, we want to actually use our state Manager to initiate the empty state first by default. So we actually wants to turn the opacity of this down, so we don't want it to be there by default. We want that to be initiated by our manager. And we're actually going to add a condition to our state. And we're going to call this empty. And we're gonna set the condition to choose our F state variable. And we're going to look, because this is the empty state we're actually assessing here. We want to look for the word empty. So in caps, so it matches the value that we added to our variable. And if the condition equals MC, We want to effectively load the anti-state. So we're going to add an opacity. And we've got to turn up to 100. And we're going to set the duration to 0 because we want this to happen straight away. It is not. So there's going to be animating in This is how do we want to just be there if that particular state is the state that needs to be shown. Okay? So that's just give that test. So obviously this is setting the empty state by default. So you should just see your empty state as you saw before. But obviously you can see that in our real file. So past here 0. So we know that our state manager is working because we can see the state here core. So we've effectively south how state Manager. And we've sat on our first day, which is our empty state. So we've got everything in place to add more states as we, as we progress. In the next video, we're going to be setting up our favoriting functionality. So we can actually add our fun now from the photo stream into this stream. So see you there. 29. Creating a photo favouriting feature: In this video, we're going to add some personalizations are n variables and conditions are really good for adding personalization features. In section six, we started building the favorites, seeing a photo feature. In this video, we're gonna continue with that feature by building the ability to show the photo in the favorite section. Predator doesn't have the ability to actually move objects from place to place between scenes, for example. Nor does it have any ability to import real data. So we'll have to add some fakery to make this work. But that's ok. This idea prototype ofs rule. Okay, so if you're following along, carry on with your file. Otherwise you can download a starter file for this video. And we're going to pick off by going to the Home section, the home screen. And we're going to copy image nine inside of our photos groups or photo stream group effects not open then OpenFlow stream grape and on page one. And we're going to grab this image nine here. And we're just going to copy this. And we're going to go back to our favorite section. And we're going to paste. And we're gonna rename it. And we're going to position at headquarters coordinate 16 for X and 96 for y. So it's in the top left hand corner. And we're going to group the image so we can, so we can put it into a container and we're gonna call this container favorite pies. Okay, so we're going to reduce the opacity of the containers whose era. And we're also going to reduce the pi one image to. Next up, we're going to create a numeric variable for all scenes. So by default, you will get a numeric variable that I'm gonna call this pi one. And we'll leave the default value is 0. Okay, so we're gonna create a new star trigger. And we're going to quit content manager, says another manager creating and set it to restart every time. And today, we're going to add a condition. And we're going to call this pi one. So in the condition we are going to choose our pi one variable. And we're going to, we're going to look for a value of one. Okay, so let's go back to our Player one image and we're gonna select that and we're going to add an opacity response inside of that condition. We're going to set it to 100. And we're going to reduce the duration to 0. I'm gonna come back to our state's Manager, which we set up in the last video. And we're going to add a new state, so a new condition. And we're going to call it as favorites. And we're gonna set F state. And we're gonna look for the value favorites. Folding caps, as you saw previously in the previous video, I'm using all caps for my state names. And if that's true, if we're going to, if we get an equal to favorites, we want to analyse capacity. And we want to select our empty state. And we want to set the opacity to 0. And we want to set the duration to 0. We want to then select our favorite pyres group. We want to add another opacity. Hey, we want to set it to 100. And again we want a duration too. Okay, so we've done two things here. We've saddled concept manage, which is basically to manage the showing and hiding of our pi L favorited pi images. Here, we've added another state to our stage manager, which is effectively going to show our favorite pie if our f stay equals favorites. And we're also going to hide the empty state. Has alpha c will be changes take from empty to shine something. Ok, so next up we need to stop the images that the image is going to be favorited. So we'll go back to the home screen. We're going to find out double tap trigger. And that's opened that up. And we're going to add a new response. And this is going to be an assign response. And assigned respondents allows us to assign values to variables. And we're going to select our f state variable. So you can see, because this is a variable that can be seen by all scenes. You have access to it in all things. And the reason I called F underscore stay is F obviously for favorites. So because you're gonna see across all of your scenes, you just need to make sure it's got a unique name. So I'm gonna choose that as our variable. And we're going to change the value to Favorites, making sure it's all caps, right, so what's gone wrong here? We can see that the full mirrors is still an orange. An orange as we know, means that there's something wrong. Ok, so because we're parsing aids hex value. When we add a text value inside of a formula, we need to wrap it into double-quotes. Otherwise it won't work. So just wrap the word in double-quotes. And now you can see that the, our interests gone away. Okay, we're gonna add another assign response. And this time we're going to choose our pi one variable. And we're going to set in the formula to one. Ok, let's test that out. So we're going to run our home screen. What kind of flame to our pi one. And we're going to have, well, they'll peice of the favorited, which I believe is this one. We're going to double-click it. We got the animation that we did before. And if we now go to our favorite section, we can see the r pi has appeared. Okay, that's cool. We've now added some cool personalisation to our app. That is, may seem overly complex, but we all future-proof net for where we might want to add multiple favorites. The wears out gives us control over both individual images and the favorites you as a whole, which will make things a lot easier in the long run. One of the things we throw a pie, especially when you start creating lots of functionality, is that things can get a little unwieldy pretty quickly. This is why a good structure and good name and his vitally important. Okay, so this wraps up Section seven. I hope this has given you a good foundation of understanding or variables and conditions and how they can be used. I've challenged you were some pretty advanced concepts here. So for all makes sense and you're well on your way to create some amazing things. If it's been a bit hard going, Key, Pass it, play with the features, and try out other ways of doing things. There certainly different ways of creating the same functionality. In the next section, we're going to explore some of pro pies hardware features. You don't want to miss this one. So see you there. 30. Creating a real in-app camera: Hi there. In this video, we are going to be curating a real in-app camera. So in section seven, we added a new feature to our Pintrest app called My pies. With this feature, we're going to give our users the ability to add their own Python's hopes. We can prototype this with predator pies ability to access the camera on the device. So we can focus on the camera feature. I've already built how the paging view and tabs everything idea is identical to what we covered in Section four. So feel free to have a go at building this half feature yourself. Alternatively, you can just download the starter file where they're already built in. Okay, so we have our pager and our two sub screens. You can see that I've got a placeholder called my appears. So first off, let's import our design from the assets folder and create this view. So I'm going to skip over to FISMA. Obviously use the tool of choice that you're following along with. And I'm going to impulse, I just wanted to show you the two view. So I've got these two views about the mind plays view and I've got the camera view. Okay, so I'm going to import this may apply as you. Let's go to the impulse scene inside our file and just delete everything out there. And we're gonna go to import. And I'm just going to import that design so that my upaya is designed to improve the N. Now I am only interested in the camera button here, so I'm just gonna copy this. And I'm going to switch back to my favorites here. And I'm just gonna paste it into place. Okay, so I want to, I want it to be inside of my plays group, which is this page content just off to the right hand side has, and it's going to move it into this group container. And I'm going to set the acts to 1-0 and make sure the Y is 0 as well. So it's in the top left-hand corner of this. My PI is container. Okay, cool. So great. So we have our empty stay view ready to go. Next type, we want to create the camera modal. Unfortunately, there's no way to save photos or move them between scenes in prayer to pi. So any photos taken with the camera can only exist in the scene they were shot. This is a bit of a constraint, but we can work with that. So effectively what we need to do, we need to create our camera modal view inside of the same scene that we want to use the photo that began to take. And in this case, it's all got to exist inside of our favorite scene. So let's go back to the impulse seen again. And again. We're going to delete all of our graphics here. And this time we going to impulse our camera design on camera mode or design. So we're gonna choose Camera and we're gonna pull that. The first thing we're gonna do is we're going to delete this Bessel guide that this was just for our, for my usage when I was putting the design scholars believe that group how completely. And we're going to add a rectangle. And we're gonna make it the exact same size as our phone device. So really quick and easy way of doing that is just setting the width and height to a 100%. And then probe I will work out the exact width and height for us. We're going to move this to the bottom of our last app. And we're now going to group everything together. Okay, so the only reason we correct this rectangle was to force the group to be the exact size of the screen. So now the rectangle status job, we can just remove the rectangle completely. We're going to rename this container camera. And we're gonna set the containers background's color to one E1, E, when E. And making sure it's got a 100% fill. And we're now going to copy the whole group. And again, to go back to our favorite scene and we're just going to paste it. Let's just get rid of that coffee cup. So now what we need to do is add the camera layer to access the hallway camera, we actually have to add a special layer. And that layer exists inside of this media menu here. So here it is cameras. So we kinda choose camera to add a special camera layer. And you'll see it's got a little icon of a camera in the middle of that. And what we wanna do is we want to make it the same size as our photo placeholder layer inside of our design. So that's three 5-9 where 359. So let's make that the same. 259 by 359. And we're going to put it into our camera container group just above the photo. And we're just gonna move into position sites in the same position as the, as the guide foes WHO guide layer. And then we can now remove this hotel Aristotle's job. And we can just rename this camera. Okay, so that's if you make sure your, you've got your camera last selected. We're gonna go over to the Properties panel and we're going to check this box next to autostart. And that's going to automatically start our camera as soon as this layout, who are effectively as soon as the prototype is loaded. And you can see here we actually have control over the front facing and the rear-facing camera. For this particular feature we want to use. In cameras, we want to take a photo of our pie. So we'll leave it at that default. And if we look to preview, we can see we've got this zigzaggy line thing going on. So this is basically our camera lab and because preview is on our, on our computer and now computer doesn't have a camera or it doesn't have access to the to the camera. If you've got built-in camera on your computer, it's just going to show us these exactly lights. So what we're gonna do now is we're going to actually send our prototype to our device. And then once it's on device, who actually pick up the real camera, you'll see the real camera work in. So let's do that now. So close off, review. And what we wanna do is we want to open up the press, Apply a player on our device. So I'm just gonna switch over to the, the camera view so you can see what I'm doing. You can see here I've got the probe I player open. So and you can see down here we've already connected via Wi-Fi to our process high up. So you can either do this by scanning a QR code. If I just show you that. So if you click on the device menu, you can see you've got this QR code. And you can see I've already connected my phone here, so you just need to scan this code. Okay, so once ask all connect said we're going to hit the Run button. And you'll hear that and it will chime. That means it's just the prototype to my phone. And you can see that it's just loaded here. And you can see now that my prototype has loaded. And you can see that the camera, the real cameras actually work. And you can see I've got my my still life off my Pi shot set up and I'm looking at it with my camera. So that's pretty cool. That's all work in nicely. Ok, so next up we want to make the camera view modal. So what we're gonna do is we're going to select our whole camera group. And we're just going to move it off the bottom of the screen. We want miss to animate in modally from the bottom of the screen. And we're going to select our camera button, which is this big thumbnail inside of our maya plays group, the one that we added earlier, one that's selected. And we're going to add a tetramer. And we're gonna call this tap trigger Open Camera. And we're going to select our camera view again. And we're going to add a move response to our newly created trigger. And we want to move the camera lambda_2 0 y position. So effectively one that's Animate up from the bottom. And we're just going to increase the duration to 0.4 is traveling quite a, quite a distance the whole screen in fact, so we don't want the duration to be too quick, otherwise it's going to be too fast. Pace. And next up, we want to hook up the close button. So if we look inside of our camera layer group, we've got a inside the standard header here, we've got a Close button, so he wants to select that. And you'll notice this. Actually, if I scroll down, you can see my close button here is quite a small target. So you have this ability and probe pilots who actually increased the tactile care without add-in like a rectangle or anything like that. So we're gonna do that now. So if we have that selected and we scroll to the bottom of our properties panel, We've got this option touch area. So we're going to check that box. And that's going to open up and give us the ability to add padding on either one side or all of the sides of our, of our button. We want it to be padded all the way around. So we're just going to keep this box checked equal m for all sides and we're just going to add 16 in any of the boxes. And when we hit return, it's going to add it to all the way around. And you can see now I've got much larger tapped hole gets. That's going to be a lot easier to heads. Okay? What we gonna do now is going to add another tab trigger for our close button. And to that we're going to add a resets and effects. We, what we wanna do is we want to reset the animation of the modal view opening. So we want to make sure we've got our camera modal view. So that's sort of the capital C. That's cool. And we're gonna set the duration to 0.3. So as I said in the, in the animation section, I tend to put a, a faster duration on something that's closing or, or couple going out doing this our animation than I do too, it's in animation. So that's why I've set at a tenth of a second faster. Cool, so we've now completed a setup of it in our cameras. So again, we're going to run this and test this on our device. What we're gonna do now is we're going to swipe cross that we get four. We're going to open up our camera modal. That's going to bring up our modal view there. And we can see we've now got is how live camera view still. And then we can hit this close button to close the modal view. So there we go. We're all set up and ready to do the next piece of functionality, which is to actually take the photo. And that's what we're going to be doing in the next video. We're going to be taking a photo. So and we're gonna make that photo thumbnail appear in the marketplace section. 31. Adding a photo taken by the in-app camera: Hi there. So in this video, we're gonna continue on with the build of our, our feature to allow users to take photos of her own pyres and bring it into the app. And specifically, we're going to be looking to take a real phone. So after you take a photo and we're gonna be adding some more realistic camera interactions to our prototype. So let's get going. So the first thing we want to do is we want to, if you're following along, you can download the starter file. You wanna make sure you navigate to the favorite scene hair. That's where I currently am. And the first thing we're gonna do is we're going to find the button group inside the camera Group, which is an R group here. And we want this button group here. And I'm just going to scroll down so we can see how camera last. So it's this, this button in the center. So we wanna make sure that's selected. And we're going to add attack trigger. And we're going to name it Take Photo. And to that we're going to add a camera response. So the camera response works in conjunction with camera layers. We've only got one camera layer in our project site. That's the one we created previously. So we're going to select our camera layer here. And we've got two options here. We can start the camera and we can stop the camera. So we've already set up the the phone TO The in-app photo functionality to automatically start with cameras to the cameras was already running it. If you've watched the previous video, you saw a hat that live feed. So to mimic taking a photo, we're effectively going to use this risk bugs to stop the camera. So we're gonna select stop. And the way the camera layout works BET. Probably a bit unusual in terms of how you think this, this function knows how it works within protein pi. So the camera layout can either start or stop, like I said before, when it stops, it remembers the last image. It was, the life he would look in that and how effective pauses the video. So you've got a still image. So we're going to use that, that functionality to mimic us actually taken a photo. And that's what this response is doing. It's offensively stopping the camera and on the, on the, on the feed. What we can actually do is if we just run that and we'll load up how prototype here on our device. And we'll go in and I'll show you, I'm going to launch our how camera, camera functionality. So we've got our live feed here as I was, as I was saying before. And I'm now just going to press the button and you can see now that we've got a still image, camera has now offensively stopped. So this is the first part of mimicking. Taken a photo. Cool. So we're going to switch back to prettify studio. So we've done the first part where we've. Effectively frozen the MSC grouse till image, but it doesn't really look like we've actually taken the photo. So, so I just want to add some more interactions, more visual interactions to make it feel a bit more light. We've actually taken a photo. And what we're actually gonna do is it's going to add a little, little effect to make the cameras look like it's blinked. And that's to mimic the way a camera shutter works. And it gives you that feeling that you've actually taken a photo. Okay? What we're gonna do is we're going to add a rectangle. And we're gonna make it black. And we're going to make it the same size as our camera there. So it's actually drank it in into our camera group just above the layer. And we're just going to get the coordinate size at NIH and a 101. And the same. And we want the dimensions, the width and the height to be the same as well, 359 square. And we're going to call this labeling. Ok, so we want to turn it so initially when its opacity to be 0. So we're gonna turn that down to 0. And we're going to go back to now take photos. Whoa, trigger. And we're going to make sure we have the, the blink layer selected. And we're going to add an opacity. And we're gonna make it a 100. And we're gonna give it a duration of 0. Okay? We're going to duplicate the opacity. And we're going to turn it down to 0. And we're just going to add a delay of 0.12 passes. Hey, cool. So that's dealt with the animation. We also want to do is we don't want this CPA to be showing until we've actually taken the photo. So we're going to set its initial work past teeth are 0. And making sure it selected, I'm going to add another opacity to outtake folks WHO trigger for this, for this CTA. And we're going to change its opacity to 100. We're going to keep the duration at 0.2 and we're just going to add and 0.3. delay. Okay, let's go over to our, our device and test that. So we're just kinda run it. We can see here that's just reloaded onto my device. And I'm going to initiate my camera and get my folks WHO ready. And you can see here now that the CTA is now missing from the bottom of the screen. So I'm gonna take my photo. And you can see I've got my little blink and I've got my still image. Okay, that's looking good. Skip back to studio. Ok, say back Harry Studio. And I want to add one final thing. And that is, I want to add a little animation to the actual button itself to make it look like it's been pressed. This is all to help give them realistic effect or taking a photo. So what I'm gonna do is I'm going to select the button container. And I'm going to add a touchdown trigger. And then I'm just going to select the inner circle of my, of my button. And I want to make sure that the origin is set to center, center because I'm going to do political animation on to this. And keeping the enter, the enter button selected. I'm going to add a scale response to this trigger. And I'm gonna set it to scale by a factor of 90. So we're just going to reduce his scaled by 10%. And I'm gonna say that duration of that to 0.01. okay. I'm now going to add a touch up trigger. And I want this to be on the button container. Gets a copy this scale, the scale response from the other trigger. And I'm going to paste it into my touch up here. And I'm going to change the scaling back to 100. So effectively we are going to scale it back up to its original, original position. Okay, let's test them. Okay, so that's run that on swelled device. And we will initiate our photo again. Make sure you can see c o and I'm going to hit the button. And hopefully you saw that low animation there. We've now got our still image and we've also got our safe photos CCA showing as well. Cool. So now we have a real realistic in-app camera that takes photos. Well, one photo at least, that about wraps up for this video. In the next video, we'll take the captured photo then construct a fun now and added to the myopia section to see you there. 32. Saving a photo as a thumbnail: Hi there, welcome back. And in this video, we'll be continuing on from the last video where we created a photo with the camera layer. And in this video, we're going to be saving that folks have assets. And now we've got a bit of a problem though, because the way prettify it works with the camera layout is that we can't repurpose stat that image from the still image of the camera layer that we, that we took in the last video. So we have to do with our smoke and mirrors to mimic the functionality, functionality of saving that photo so as a thumbnail. So what we effectively have to do is we have to use another camera layer. And just to explain a little bit about, a little bit more about the camera layer. Because you're not actually taking photos with a camera lay or actually just looking at the camera through a layer. You can actually add lots and lots of camera layers. And they're all going to do the same thing. They're all going to look through the camera. So what we're actually going to do to, to mimic the saving of the photos were actually going to have to camera layers running at the same time. One your say, which is the one we built already, but one you're not gonna see which is going to be the thumbnail one. And that's where the smoke and mirrors part comes in. So next guest artists, so it'll make more sense as we go along. So the first thing we're gonna do. So if you haven't made, just to say if you haven't been following along, then please download the starter file that comes with this video. Otherwise will continue from where we left off. So we're hearing now Pintrest at and where in the favorite scene. So just make sure you navigate the favorites. We can be on the same page that we're. And the first thing we're gonna do is we're going to duplicate our camera layer. And we're going to rename it to camera thumb. And I'm going to position into the maya plays views. So we're gonna bring it down here. And what we wanna do is we want to make you the same size and put it in the same location as the camera button here. So the Karabakh sins 163 by one, 76. So let's just make our layer and the same science by 17. And then we just need to grab the position which is 00. That's nice and easy selling the celiacs and whiter 00. Ok. What you could also see is that if I just hide this camera and this has got rounded corners this time, and I want my my thumbnails or have rounded corners as well. Unfortunately, you come you don't have access to radius corners on the camera. Lera selves will we need to do that? We need to group the layer, so does command G, control g of Windows. And we're just kind to Saturn radius now of the group 16. And we're going to go down to the bottom, going to clip sublayers. So now you can see we've got our rounded corners. We wrap go around a corner camera layer. And we're going to name this image one. And it's gonna tell us initially, we gotta tell its opacity down to 0. Okay, back to our Take a Photo trigger. So this one here. So with our camera funds selects, we're going to add another camera response. And we're going to set the camera thumbs to stop. What we did before. We're going to add an opacity. We're gonna target how, how image one group. And we're going to add capacity to a 100. I. Finally we're getting to owl, save a Photo button, scroll down. Cta primary. Select that. And we're going to add a tap trigger. And we've got to copy the reset that we added to our close button here. Copy that. I'm going to enter into this this tap trigger. Okay, that's, that's looking good. So effectively what we want to happen is when we press the Save button, we just want the whole camera app disappear. So what we're gonna do now is I'm going to test that on device. Okay, so that's run that loading up here on my device. So I'm going to ask before I'm gonna go and I'm gonna select my, my button to go into Camera mode. And I'm going to get a nice photo of my, my gorgeous 2k pi here in where my lovely little setup. Scott and I sang came back. Hey, take that photo, that looks good. Okay, so we've got my image handout. So I'm just going to hit the say Photo button. And voila, we have saved our pool point to our favorites list. So what we've really done here, as you, as you can column, we've actually got the two, the two layered running at the same time. So when we when we stop the camera, she stopped in both camera layers and we just bring up the opacity. So oftentimes repro pi, you have to think a bit out of the box to achieve the results E1, okay, there's one final thing I would like to do at the moment. You can see I can only take one photo as the camera button has been hidden by the first folks WHO selects, rectify that back over to the studio. Okay, so what we wanna do is we effectively, we want to move our camera button just over one. So when we get the photo showing up on the left, we want to move over to the right. So what we're gonna do is we're going to go back to our taken photos, but some McKenna we're going to select now now Camera button. So that's that one here. And we're going to add a move response. And if we look at the width of how of our camera button, we can see is a 163. So we'd wanna move there along with, with a better patterns. So we're actually going to move by and we're going to move there by a 180 on the x. And we're going to set the duration to 0 because we don't have, we don't want you to see this. We just wanted to solve for the hair. So we're just going to set the duration to 0, so especially in the correct position. Okay, we're just going to test that again. Back over to our device, a case that's run our prototype. Okay, so here we are again. So let's go and take a photo. And we're going to save the photo. And you can see here, we've got our folks over here and we can see we've got our camera button that's been moved over to the right-hand side. Perfect. There you go. We just created a predecessor at that takes real photos and saves them to the MyPlate section will stop here. But you could continue adding the ability to take more photos if you wish. You will just need to use more camera layers. Okay, so this brings us to the end of this video. In the next video, we're going to put some icing on the cake by adding some haptics tile app. So see you there. 33. Adding haptic feedback with device sensors: Another device capability we have control over is haptics probe, I suppose arrange of haptics for both iOS and Android as it uses real hap sex. The feedback auctions for the two platforms are different. In this video, we'll be using the iOS, but if you have an Android phone, you'll be able to choose your own haptics as well. So I'm thinking there's two places where we could add some Hapsburgs to the Pinterest app when we save a favorite and when we tap on the camera button, let's do the favors 1 first. So let's go to home. I'm on the homes, on the home screen here. And we're going to open the double-tap trigger. Okay, so we're going to add a vibrate response. So the haptics is called vibrate inside of Pro pi. And when you select vibrate, you can see there's a number of options. So we've got iOS here and we've got Android, and it's hap six here. So we're going to focus on my OS. And we can see there's a number of handsets, notification, segues, impacts, haptics, and had a selection helps as well. So I'm gonna go with heavy for the hat sake that I want to use. And you literally can run this on your device and then feel, Obviously there's not, I can't really show it to you in this video cuz we can't communicate and vibration through, through, through his medium, but, but run it run it on your on your phone like we've run before. So you want to go to device and you want to scan the QR code and you want to run it on your phone. So that's the first place I think would be where I want to put some haptics. Okay, so let's move on to the camera. So let's go to the favorite scene. And we're going to go to the in-app camera. So this, this group we've got here and we're gonna go to the touchdown trigger. So this is where we're pressing our buses. So it's really nice to forbear homesick when you're pressing buttons. So we're going to add into our Photo button here. So we're going to again, we're gonna add a vibrate response. And this time where Gaines who use the success haptic as I think it works nicely here. Again, run it by connecting your device to your prototype and see how you, how that feels. And that's, that's literally as easy as it is to add haptics to your, to your prototypes. Okay, so feel free to have a play around with different hap, sex and feel how different they are and feel what's right. There's a little very experimentation goes along way so that we really call for you to experiment with these for this particular very physical sensor that you've got available here within petabyte. Okay, so that's a wrap on our look at device hardware. Feel free to explore some of the other hardware responses such as, we've got compass here, and we've also got tilt as well. So and as well we've got 3D Touch, which is something that has been deprecated for iOS now. But if you've got an older and you do have to have a founders that support 3D touch. But if you have an iPhone ten for example, then, then you can experiment as well. Okay? In the next section, I'll be introducing you to formulas which adds some amazing superpowers for you to really create some advanced functionality. So see you in the next section. 34. Using Formulas to track position: Hi there. So in this video we're going to be using formulas to track position in some of the components that we built already in our prototype. So we're gonna go back to the home screen and we're going to go to the scrolling tab. And instead of using those manual values that we had for the tap triggers, we're gonna put a formula inside of those and we're going to those, those values dynamically. So that's gets to that. Firstly, we want to do is we want to navigate to the Home scene. Okay? And we're going to finds the tap today trigger here. So just to remind you, the tap today trigger is connected to this today's hab. And inside of it where effectively we're moving this pill graphic. So they centers in the crab position on the tab when you select that. And if, and if you select the move response here, you can see that we've got a hard value here, so we've got 77.5. If you tap into that field, you'll see there's this fx icon dusted a writer there. And when it wherever you see and fx icon inside of an input field, inside a pro pies UI. That means you can add a formula instead. So what we're gonna do is we're going to tap the fx icon. And it's going to pop out this little field here. And this is where we can start to create our formulas. And what we're gonna do, we're just going to remove the hard value here. And what we're gonna do is we're going to tap the plus button. And we're going to search for the group called today. So make sure you groups, that's one dotted square icon next to it. So we're gonna select that. And you can see here we've got these little tick marks. So this is the thanks of Lee. How within a formula, you reference a layout or a group of layers within your, within your process hype. Okay, so we've got our group. Now, we now want to add a particular property of that group. So to access a property on a group, the first thing we do is we tapped a periods, so adopts. And as soon as you tap that, you'll see a menu pops up. And you can see you've got access to the usual properties that you've seen in various stages through this course. And we can actually access these properties of this group directly through this formula. So what we're gonna do is we're going to select the x property. So you can see when I type banks also completes and then basically filters this drop-down box into everything that's got x into S. So we just simply wanted the x values. So we're gonna select that. And we're going to click OK. And we're going to test that. And what we're really looking for is no change. So we tap over to recommended that I'll see works as previously if we tapped today, we can see that also works. But now today is actually used. Formula, it's using the x is the x value of the, of the today Group. And bats now driving this behavior. So if we, if we effectively move this group to a different location, the pelvis still work. It was still find the center of that group because it's actually directly connected to a dynamic value on the group itself. Okay, so that's the first use of formula that we're using in our prototype. Next up we're going to, we're going to fix an animation that we did quite a while back. And it was the animation where we was on this home screen. And what we're gonna do actually, I'm just going to, It's going to lock off this background just so we can access other, other components. So we got this, this image of this moraine lemon meringue pie. And if you remember, in the previous section quite a while back, we basically created a detail view. When you select this, let's just run that so you can see what that looks like. Soft got Maya, my preview window here. So I'm going to click on them or empire. And we got this. And that's all fine. It was kind of growing out of the thumb. Now, we also had a back animation where I just hit this back button and that effectively shrinks back. And that's fine. It works fine when the scroll position is in this, in this default position. But if I now move this scroll, this lemma, marine pyre graphic up to the top of the screen. And if I now press it, you'll see that it starts from the correct position. So still growing out from the thumbnail. But if I hit the back button, you'll see it's actually gone back down to somewhere down here. And let me just slow that down. So you can see that. So we'll, we'll move up house Roll position and will tap the pi. And you can see that's growing out correctly. But when we tap back, we can see it's actually going down to its start position space not, not following the scroll position. When it's when we come out of that, that these healthy. So that's what we're going to fix now by using formulas. Okay, so what we're gonna do is we're gonna go to the tap trigger connects to the Back button too. So we need to find out the back button to which is here. So we've got this group here back Boston. And here's outs hat trigger. And actually this is rename that to make it a little bit easier to find. And we're going to open this out and we're going to remove these three recess. We're just going to delete them completely so that we're going to recreate this, this back animation. But this time it's going to be following the correct position of the scroll position of our, of our view. Okay, so we're going to go into this trigger just above. So this is how in fact it's just rename this tap detail view tab for. So this is our entry animation and we effects, we want to reverse this for X animation. Okay, so again, to copy the opacity of the card, these house or this first one. And we're going to paste that into our tap back. And we're gonna set the opacity to 0. And we're going to set the duration to 0 dot one. And we're going to remove the delay. So the next one we're going to copy is the background or Pasiphae. And we're going to paste that. And we're going to set that to 0. So this is the background tent that effectively this marks out the underneath when the, when the view pops out. Next up, we're going to copy the radius. Paste that in. And we're gonna set the radius backed 16 because that's the original curvature of our thumb. Now, next we're going to copy the image three scale. I'm gonna paste that in. And we're going to set the scale to one. And I'll give you two for 4.5. And we're gonna leave the duration at two, and we're going to leave that delay at 0. That's all good. And k Next we're going to copy and paste that in. And we're going to set the x to 16. And this is where our fully there now is going to come into play because the move is the, is the key response to get the animation in the correct position on that scroll, on that scroll position. So I'm gonna just happen to Y into the y field and we're going to hit the fx icon. And we're going to remove the heart value. And we're going to tie it and all of our math. So the first thing I'm gonna type is 19 to plus 96. And we're going to wrap that in some brackets. And what that reason we've done that is we want to add these two values together before we work out the next calculations have we recommend in brackets that's going to force the formula to add these two values together first, get the result and then use that result. And sometimes you need to do that. Otherwise you might get different result if they work how value first? So we're then going to add a minus. So again, c minus this from something. And then we're gonna pour space. You don't have to go to space M, but it just makes it a little bit more readable. And we're now going to tap the plus button. And we want to search for page one, which is that our first scrolling view here. So we want to choose Page one. We're gonna type prepare it the Doppler we did before. And this time we want a different value. We want something called scroll offset. So this is gonna give us the value of the scroll and a particular time when the user has scroll down. Okay, so we're going to click OK. That's how formula complete. Okay, so we're now going to copy the image three scale. That's the mystery chain scale. I'm going to copy this one. And we're going to paste that into reverse. And we're going to set that to 163176. And then finally, we're going to copy the image three chain opacity. I'm gonna paste that in. And we're going to leave a duration 0, but we're gonna delay this by 0.2 because we want this to happen last. So effectively what we're doing here is we're going to fade the chain image back out. Actually it is tending to 0 right at the last, at the last minute. So most of that is, so this is, this is kind of a reverse animation complacent MOSFET is pretty much the same. We're just reversing the values. And like I said, the move is the, is where we were adding the dynamic value. Okay, so that's give that test to see if that works. So, so I've still got it on a cool term, speeds so we can put our scroll in a position so we can see that this is working or not. So I'm going to tap into this and we've got our open animation, which we haven't changed that, that already works, but this is the one that we change. So when we hit Close, we can now see that the animation to reversing N is actually animates him back into the correct scroll position of our Scroll coat. So this brings us to the end of our first look at formulas and how we can use formulas to track positions. In the next video, we're going to be pursuing some more examples of formulas. So I'll see you there. 35. Creating a notification counter: Hi there. In this video, we're going to use formulas to create a notification counter. So that's first have a look what we are going to build. So the first thing we're gonna do is we're going to import this new design for our Updates screen. And this update screen's going to show us three places. So three potential pi enthusiasts that we might want to follow. And we're going to add this notification badge on updates icon on the top bar, which is going to tell us that we've got three items we need to check out. We're going to use variables to kind of control that, that number. And then if we skip over to the home screen, we're going to see this little animation popping, showing us the badge as we login. So that's what we're going to be built in in this video. So let's get to it. So here I am back him my plates rest app. If you've been following along, you can just be used you can just use the same, the same file that you've been, you've been creating or following along with me. If not, you can download a starter file. So you can follow from this, from this section. So the first thing I'm gonna do is I'm gonna go to the update scene. And I'm going to group all the layers together apart from the flow things happen. So these layers represent the empty state. So we just want to highlight that wave now. So we're going to call it empty stain. And that's just hire that. Next up we're going to import how new screen from our from the Section nine assets, which is also attached to the, to this section, to this video section. And I'm going to use figure as I've been, I have been doing all through. And just to give you a look, this is the design that we're going to be bringing in from our particular file. But of course, if you're following along with sketch or you can just use the graphics from those apps. And what I'm gonna do is I'm gonna go to our scene and I'm just going to delete if there's anything on that just leads off. So it's completely clear. And we're going to import our graphics. Except the two full-stack coastal cloud design impulse it. So the next thing we're gonna do is we're just going to group our three notifications are three prices together. I'm actually going to call that group Paestum. How play aficionados. And we're just going to even out some of the spacing and the size in. So we're going to, for each pice subgroup. So if you just Herzl down to get back to those three free individual groups and we're just going to make them 200. Hi, this is a little bit setup for somebody or they later on. And I also just want to make the gap that distance between each one. So you can just, if you want to get this little graphic where it kind of shows you the space in the distances. If you just select one objects, hover over the object you want to measure between. And then just hold down the button. Your gad that you'll get a little bit will help. So we can see we just need to adjust this by one pixel. And this one by two. Cos I now should be all in between. That's looking good. Okay, so we're going to now copy out places group and its title. It's going to command C or control C on Windows. And we're going to go back to our updates. And we're just going to paste those graphics in. Ok, so that's let our Appliances Group and we want to turn a into a scroll view. So we leave Will the thoughts, their pricing a vertical scroll. And we're just going to change the scroll area to roughly so they sits inside of our, inside of our scene that so as we've learned previously, to make a group scroll, you need set the viewable scroll area, which is what we've just done. And it doesn't have to be super accurate. It's just roughly is always about the tab bar, then it's going to be fine. And then finally we're going to just move our photon's hat bar to the very top. We want that. We want our scroll view to effectively scroll underneath it's hot bar there. That's the thinker. So that's how view sets up. We just want to just think I'm just going to group all these triggers together too so we can focus on our new or new trick is we're going to add some as going to group these together. And I'm going to call these navigation. So that's just some stuff that we did in a previous video. Just hide that out of the way coat, and that's our update screen set up. Next up we're going to be causing our attention back to creating the cancer. Okay, so we're gonna create the accounts now and functionally, we want now counts to Robert representing the number of friend requests which are outstanding. So basically the friends, the recommendations of the friends that we've got here in our view. So the first thing we're gonna do is I'm gonna go back to the impulse seeing. And we want to get our badge graphic. That's still little graphic that centers on the bell icon here. So we're going to copy that. And we're gonna go back to the home screen. I'm going to paste it. Okay, so we're going to move the badge in, the badge into OWL, into his hat bar. Let me just close some of these groups up about how tap our group, we're going to move the badges or they're just at the top there is fine. And we're gonna reposition it. So let's go over to our properties panel and change these values to 225. And we can see there we've just got a sitting just to the top right hand corner of our Bel Air. Ok. So going back to our badge with The last panel, we just want to open up that badge group and you want to find the text layer, which is this one, the little icon, the loads here and S. So that's currently got how number one, we want to select that. We want to be able to edit that text. We want to pass a real value into that. So we need to turn that into a real native probe height text objects. So if you select it in the layers panel and then go all the way over to the Properties panel and just tap this convert texts Vaseline, CO. And now you can see that it's, the icons change is it's changed this TI concise now an editable text field. We're gonna rename this counter. And so the next thing we wanna do is we want to create a variable to hold the value of our council. So we're going to come down to the Variables panel here. And we're gonna create a variable for all scenes. And we're going to rename this counter. And we're going to set the initial value 23 says we got three notifications in our design. Ok, so next up we're going to stop working on some triggers such as concentrated around some of our older triggers so we can recall some space to work with. And we're gonna add a stark trigger. And we're just going to leave it at its defaults for now. And then within this stock trigger, we're going to, we're going to add some, some responses, but before we do that, we're just going to rename it to counter stone. And next up we're going to add our first response, which is gonna be a text response. And we're gonna select how council tax lab. And we're gonna change the content from texts, the formula. So we want to use a formula in here and we won't see pass the value of our variable. So we're gonna hit the fx button and then the plus button. And you've got to want to choose your counter, the counter variable, which just says at the bottom of the list here. We're gonna click OK. Okay, so that's test that to see and make sure that our variable is being passed through to our council successfully. Okay, cool. So you can see it's got a number three in our, in our batch here you can see in our file it's got a number one. So at runtime, we can see that our variable is actually indeed being passed into our counter. Ok, so next up, we want to create the notification pop-up animation. So we want this animation to just draw the user's eye as they login and they can tell him there's notifications and need their attention. So let's do that now. Close off how crazy would know. And we're going to select the batch group. And we're going to change its opacity to 0. Okay, we're gonna go back to the counter stock trigger and we're going to add an capacity here. And we're going to select our bank as the target. And we're gonna set the opacity to 100. I'm gonna change the duration to a slightly shorter Speedo 0 dot one. And we're going to the land by 0.22. Okay, so next up we're going to add a move response. And again, you want to make sure that the badge is selected as the target. And we're going to credit that we'll do animation system the first half actually go animation. So we're going to change our physicians who move by because we just want to move it by a few pixels. Sometimes it's easy to use MOOC by a move to depending on what you're doing. Because I'm moving the badge up a little bit and down a little bit. It's easier to him to use me by rather than find out the absolute value. And I'm going to set the value in the Y field T minus ten. I'm going to leave the duration as it is, and we're just going to delay this as well by 0.2. Okay, so we're now going to duplicate the move to Apple Command or Control D on Windows. And we're just going to edit this. We may remove the minus, so we're gonna move it by ten to effectively move it back into the position that it started at. This time, we just kinda play around the eating a little bit. We're going to choose an ease out. And we're going to change the interpolate from cubic to elastic. Okay? And then finally we're going to up the duration to 0.5. And we're gonna make the delays or 0.3. Okay, so that's good. That's our little animation. Okay, so let me just run that a few times so you can see a little jiggle of our loan application bad. It's just coming in as we load the homeschooling codes. So that brings us to the end of this video. In the next video, we're going to explore how we dynamically can change the counter as we accept friend requests. 36. Creating a feature to accept friend requests: So in this video, we're going to continue working on our notification counter. And we're now going to add functionality so that the counter dynamically changes when we accept to follow the recommendations and the recommendations that the update screen is given to us. So that's get cracking into. So the first thing we're gonna do is we're going to start back our home seen here. Of course, if you want to follow along, carry on using the file that you've been using. Otherwise you can download a file. And to follow along with this video case, we're going to, we're gonna, we're gonna start on the home screen. And the first thing we're gonna do is we're going to go to our placements have bar, and we're going to copy the badge group. And we're going to go with our updates. And we're gonna paste that in here. And we're just going to put it inside of the places. Have Bill here. Okay. Next up we're going to copy, go back to the home screen and we're going to copy the counter star trigger. And we're also going to paste that over in our update c, k. So we're going to work a little bit on this counter star. So we're gonna change the option to start with jump. And we're just going to remove the last three responses. We just want to keep the tax response. And we're just going to reconnect up the tax response to the tax trigger. So we're just going to search for our counter texts. And we're gonna select that. Ok, so next time we want the counter to only show if it has a value other than 0. So we want to dynamically hide the counter in this situation. So the way to do that is we're going to add a condition to our counter style trigger. And we're gonna set the condition to look at our counter variable. And we're gonna look to see if that variable, the value of that variable is greater than 0. So we're going to use the greater than symbol, which is this here. And we're going to look for the value being greater than 0. Okay, so we're going to add an capacity to this condition again to set the target as the batch group. And the search for batch here. And we're gonna set the opacity to a 100. And we're just going to reduce the duration to 0. So what we're basically doing here, this condition is going to see if the counter variable is more than 0. And if it is more than 0, it's going to show the batch. Ok. So next up we want the counter to decrease as we accept each follower. So let's do that. So the first thing we're gonna do is we're going to go into our pastors and we're going to select the first one. And we're going to add a tab trigger. We're going to then add an assign response. And we're going to select our counter variable that's just here. And we're gonna do a formula here. So we're going to tap FX and then the plus. And we're going to choose our counter variable. And we're going to do about maths here. We're going to just remove one from it. So we're gonna take the counts are variable value and we get a minus one from it. And we're going to click okay. So we need to apply this to the other two pipes, this, so we're just going to duplicate this tactic or a couple of times. And we're just gonna go into the tap trigger and change the target to the other two. So we want pie hole and we want Jack Horner. Good old Jack, got stuck in his corner there. Ok. So next up we're going to add a detect trigger us because we need to detect when the counter value changes. And to choose a target as counter variable again. And to this we are going to add a text response. And we're going to choose the counter text field. And we're going to add another formula again here. So we're going to switch concept from text or formula. And again, we're going to hit the effects parts in, and we're going to select the counselor, the variable. Ok, so this Detect is going to detect when the counter value changes i0. When we tap these follow buttons decrease by one as we did in SSI and trigger here. And when it detects a change, it's going to basically update the text field. So that's the little bash where it's got the number is going to update it to the value. So as we except the followers, the value will come in. Okay, so next up, we want to remove the follows from the list as they are followed. So we want these to disappear and the whole lesson needs to move to take up the space. So that's what we're going to do now. So first thing we're gonna do is we're going to select our first tap here. And we're going to add an opacity response. And we're going to, We've got the, make sure that the pie 3-1 for group is selected. And we're going to change their past T2 0. And we're going to make the duration 0.01. next up we're going to add a move response. And basically we want to, we want these other two followers to move up, to take up the space as we accept this first one. So in our move response, we're going to choose the pi whole group. And we're going to choose, We're gonna make it move by. And we're gonna change the y value two minus 213. And we're just gonna delay it by 0.1. And this just allows time for the opacity to happen on the first object, for its completely disappear before the rest of the less scrolls up to take its place. So next up we're going to duplicate this move trigger and we're just going to change its targets. Who? Jack Horner. And this is because we want to, we need to also move the Jack Horner item as well. So both these needs to move up together. Okay, so we're going to copy the capacity and the first move response. And we're gonna paste it into our next tap here. It's going to put it under there. And we're gonna change the target of the opacity to Python. And we're gonna change the move to Jack Horner. So this is often taken to account when we had this item is going to affect these. Finally, we're going to copy our opacity. I'm gonna paste it into our last area. And we're going to change the target to Jack Horner. Ok, so finally, we want to remove the badge if the value of the counter equals 0. So let's do that now. So we're gonna go to our detect trigger. And we're gonna add a condition to this. And we're going to set it to look at the counter variable. And we're going to see when the counter variable equals 0 to this condition. And we're going to add an opacity. We're going to set the badge as the target. And we're going to set the opacity to 0, k. So this condition is going to look for when the counter equals 0. And therefore when there is no notifications left, we're going to hide the batch. Okay, so we're gonna add another condition. And this time we're going to set the counter variable and we're going to look for when it's greater than 0, IE, when it still has some notifications. And we're going to move this text response that we created out. I'm gonna move that into this condition. So this condition is going to execute when the value is greater than 0. And that's when it's going to allow the value in the batch to decorate. So we're still going to see that, that badge there and the value counting down. Okay, so next up we're gonna go back to our empty states. If you remember, in the previous video, we created this empty state groups or the end-state graphics together we just, we just hit the layer. So we actually want to turn on this layer. But we now want to reduce this opacities are zeros. We just want to set it up to be able to fade in when we've gotten them all notifications left. We're gonna go back to that detect trigger. And in the first condition, we're going to add another opacity. And we want to fade out our title here. So that's just rename this to title to make it easier to find. And we're going to select that time. So how are we going to set the opacity to 0? Finally going to add one more capacity here. And this time we're going to look for the empty state. And we want to show the empty state when we've got no more notifications that so gray increase here, pass T2 100. Okay, so we've done a lot, so that's test that, see how that's working. So we, if we run our preview, it says with this out of the way. So you can see here I've got a badge of three notifications. So when I tap the first Follow button, the first item disappears, the other two items move up. And you can see that our batches that currency to two. If I then it's happened next follow button, hit that currents to one, and if I hit the final Follow button, it disappears, the badge disappears and it loads in how previous empty state. Okay, so that's looking good, that's all working. Ok, so we've now completed our dynamic notification counter. We've explored quite extensively how we can use the power of formulas that help us create some really rich functionality in our prototype's. Hopefully this brief intro into formulas gives you enough information to help you explore them further. We've only really scratched the surface here is a lot more to learn. In the next section, we're going to move on and we're gonna take our first look at components. You don't want to miss this one. So see you there. 37. Creating components: Hi there and welcome back. In this first video in which we're looking at components, we're going to build a component from our tab bar file floating tab bar that we've got here. Inside of our pinterest app. Components are really a really useful things to have. It's a really big feature within pro pi. Components allow you to reuse pieces of UI across your prototypes, but still have a central source of truth. So you can go into the master component and you can make changes, and that's going to proliferate through all of the, all of the instances that you use. So we're gonna turn our tab bar into a component. So the first thing we're gonna do is we're going to select our Tab Bar group. And we're going to turn this into a component. And there are a couple of different ways you can do that. I can either tap on the component button here in the top of the interface, or I can right-click over the group and I can choose converts a component from the flyout menu. So I'm just gonna choose Convert to component from here. Okay, so we can see now that our group has been turned into a component. X icon is change has got this little lightning bolt inside of there. And if we go over to the Components panel, which is just on the side of the interface here, we can see that we've got a new component inside of our local components for our floating tab bar. So any objects that you turn into components inside your pile file will automatically be added to your local components list inside of your components panel. And just to spend a few seconds in the Components panel, just have a look around. So what we've got, so you can the ability here to search components or see we've already got one component of the moment. But when you start to build a long list of components at a really useful feature search, we can turn our view from this grid view into a ListView. And finally, the final thing I want to draw your attention to in this particular point in time is this pin. So you can effectively pin your Components panel to the side of the interface. And it's just going to stay there for the duration. We're going to turn it off because we need a little bit more screen space. Okay, so I've now created my component. I want to edit my component. And I can edit my component by Eva double-clicking on air within the Components panel. Or I can select a component instance, which is this guy here. And I can again use the right click menu and I can choose Goto master component. I'm going to do that. Okay, so we're now inside of the components. So this is the master component. So the power of components, as I said previously, is that you have this one central source of truth. When you drag out components from the Components panel here. You're effectively dried out copies of your component, which we call component instances. All of those component instances are connected to your master components. So it's exactly the same as how components are full told within apps like sigma and sketch. It. We've got that same relationship. Okay, so what we're going to do is we're going to go to our triggers plateau. And you can see that when I, when I created this component, is actually brought in all of my triggers, my responses which are attached to that component. So it's going to, it's going to bundle those inside of the component. So that's really useful. I've now got this area inside of my master component, which is completely self-contained. I have the ability to add triggers responses. I can add all my interactions inside of this component. And whenever I use this component is going to have all that built-in sweat. So as I said previously, is a really good way of compartmentalizing pieces of UI. In a way helps you to simplify the amount of trigger responses you have in your scenes as well. Okay, so we're going to start building this thing. So I'm going to duplicate That's hat jump group. So that's his clothes off. So one of these, let's Duplicate one of these. And I'm going to call it tap Home. And I'm going to change the target to Home Selected. Sorry, home unselected. And I'm gonna go to the jump trigger and I'm gonna change it to home. So we just need is create this extra tap inside of our component because now OWL, OWL tab buys effectively knotting any particular same because it seems either component previously we only added to capture because for the other three, because we always started on the, on the home screen. And now we need to fill that gap. So that's what you've just done. Okay, so next we need to change the way we switch between states. And to do this, we need to use something Pulled messages. Okay, so messages is something very specific to components. Messages are what we use to communicate to objects and interactions inside of our component. And it's also how we communicate with our protest high up from inside of our component two outside. So where we want to talk to something in a scene, we would, we're gonna be using messages to do that. And there's two parts to messages. There's send and receive, and it's a mix of triggers and responses. So we're going to go through the news messages to make how tab bar work and that's gonna really help you understand what ashes are. So that's, that's, that's continue on and do that. So we're going to add a received trigger. And we're going to cool at home. And we're going to look into the property details here. And we're going to go to this channel, fly out. And we can see there's a few different options we have got here. So first off, just, just ignore anything under the bridge section that's completely different functionality. So just ignore that and just focus on the options which are under the inside pi category. We're going to, we're going to choose receive from current scene, which is what is defaulted to. And what that basically means is that we're going to look for a message that's going to be broadcast from a particular scene. We've got some other options here which allow us to receive messages from other locations so we can receive messages from the parents. So any objects that this particular component is in would be its parent. Now in this instance actually the parent is also the scene. But because you can nest components, we could also have this component inside of another component. And in that case, we might want to talk to the parent component and not the same. So you can choose to hear messages from the param. We can also receive messages from child components, that's any components that are inside of this component. And we can also finally receive messages from the current component, which is actually that's half power component that we're currently in. So there's lots of different places we can receive messages from. In this video, we're just going to focus on talking to the scene and talking to our single components. So we're going to leave our app receive from current scene. And the final part we need to do is we need to create the message that where we're looking for, we're going to make our message home. And I'm going to do it in cattle camps. And this is something I do. I always create my messages in all caps, mainly because messages are case sensitive. So I don't have to remember what the case is. You could obviously or when lowercase, but I tend to do it in caps just to differentiate messages from other things inside of credit. Okay, so what this trigger is going to do is going to, it's going to receive a message from the current scene. And the message is going to be looking for is home. Okay, so the first thing we need to do is we need to add a reset for all of us have just in case they have already been selected. We don't know when we were on the Home tab where we'd been to previously. So to do that, we're going to add a reset. And we're going to select home. Select it. And we're going to duplicate this three times. And we're going to set a reset target for all of our upper tamped. So that's work through those. So we're going to choose half selected. And we can just type selected. And we're gonna choose file selected. And we're finally going to choose, user selected. Okay, so now we need to recreate our bounce animation. So we're going to add an opacity. And we're gonna set the target as home unselected. And we're going to set the opacity to 0. We're going to add another opacity. And this time we're gonna choose Home. Selected. And we're going to say its opacity to a 100. Okay, so we're setting the opacity of home unselected to 0. Because when our bounce animation happens, because it is scaling, you can effectively still see the other icon underneath. So that's why we need to, we need to hide that. Okay, so next we want to copy the scale from the star trigger. So let's go down to our star trigger here. And we're going to copy the scale response. And we're gonna paste it into here. Ok, so we can't use reset for our animation this time as it will reset our pastizzi 0. So instead we're going to use another scale. So that's HapMap. And make sure that you've got Home selected as the target. And we're going to set scaled by two a factor. And that's going to give us a scale x and y of a 100, which is what we want. If we look at our previous scale, we can see we've scaled it up to a 120, so we wanted to scale it back to a 100. Next, we want to change our easing curves. We have a look at the reset. We can see we use this spring animation. So we want to copy these values into our scale. So we're gonna choose spring seven tends to 500. The frictions as hen. And we're going to add 0.2 as the delay. The final thing that we need to do is you just need to make sure that our home selected groups origin is set to center, center. Otherwise, the animation will animate off from the top left as its pivot points I set out to center, center. So you can see that that's now That's our animating nicely. Okay, so that's all we need to do for the first the first scene. So we've just basically set up the received trigger for the home scene. We're now going to duplicate this and we're going to increase it for how favorite scene. So we can, we can effectively navigate between these two and you can see this working. Okay, so let's duplicate our home receive trigger block. And we just need to kind of go through this and change all the home targets to the favorites target. So let's do that now. So I want to choose heart unselected heart selected for this capacity. For scales. Again, we want to change to heart selected. We can leave all the resets as they are because they work no matter what the tab is. And finally, we want to rename this to Favorites. And we want to set the message to be favorites as well. In caps. That's just, again, my, my preference. So next thing we need to do is we need to reset our Home Selected icon to not be selected because we're inside of a component. We don't want any of our icons to be selected. At the beginning, we got our resets and our received triggers to how to handle all of that. So let us go to the Home Selected group and we're just going to reduce its opacity to 0. And we're gonna go to the unselected version of homestay Today. We're going to bring that up to a 100. So now we've got four icons and everything's looking good there. One final thing we need to do before we're finished inside of the components, we need to remove our original Star trigger. This was originally instigating the balance animation when it was in our scene. But again, we've now got our received trigger and all of the responses inside of heads or handle that. So we can just safely remove that. Okay, so now we have our two tab set up. We now need to add some things to the scene to make this all work. So that's navigate back to our home screen. And we're going to add a start trigger. And we're going to make sure that that sensor restart every time. And to the start trigger, we're gonna add a send response. And send is the other half of the meshing system. So we've already says high-power receive inside of our component. We now need to send that message inside of our scene so that that component can react to it. So we're going to, again, we're going to leave the channel to sense currency because that's where we're picking up the message from. Within San responses, you've got two options in the scene. You've got the option to send to a component or sensor current seems so we're going to use sends a currency. And we're going to go to the message input. And when we click on it, we can see we've already got how-to messages and probe height. Od knows what these semesters are, because we've got an instance of our tab bar component in the scene. And within that component that we've already set out to receive, to receive these messages. So this is a really handy thing to have. It saves you having to type your questions in again. And it also is a bit of validation that we've hooked things up correctly. Okay, so we're going to choose the home message because we're on the whole scene. And that's now all we need to do to make our component work in this scene. So we're going to copy this stop block. And we're going to skip over to our favorite scene. First, we're going to add our component. So we're gonna grab a float. Things happen component in distance out into our scene. And we're just going to position that in the crab position. You could also copy the other instance from the other scene. That's absolutely fine. I'm just going to remove my original places, have Bao group and I'm going to paste my my trigger that I copied from the previous home scene. And I'm going to open this up. And I just need to change the send message to favorites instead because we're now on the favorites. Okay, so we can now give that a test. So that's just navigate back to our home seeing. Okay, so if we look over in preview here, if I just refresh, you can see we GAO first bounce animation on the home screen. And then when we navigate to favorites, we also get the bounce animation there as well. So we can now switch between these two things. And that's all being handled inside of the component. And it's using those triggers and responses, issues in the messaging, the sending or receiving to handle all of that code. We've now created our first reusable component for our piscivorous stand. For some homework. I'll leave you to hook up the other two seems. Okay, so at the moment how component is only really useful in this app project. So in the next video, we're going to continue exploring how we can make how component even more reusable so that you can use any other app projects as well. So see you there. 38. Making component icons hot swappable: Hey there, welcome back. In this video, we're going to be refactoring our tab icon graphics so that we can easily swap them for other icons. This is a really key part of making your components more reusable. Ok, so the first thing we're gonna do is we're going to go into our component panel and we're going to go into our flow sins have component. And we're going to tap the Image menu item. And what we wanna do is you want to bring it in our graphic. So I've already saved out these SVG icons, each one for the selection and the unselected state of our four is helped by it. So, so this is going to shift select those and I'm going to employ, employed in one, in one go. Ok. And again, because we've got this, this bug in probe height at the moment where it doesn't size up the SVGs. Based on the pixel density we just need to go through and multiply each one by 34. She's a bit laborious task. You have to do it individually, but that's just go through and do that now. Okay, so now we've sized up all of our icons to their correct size. What we're gonna do is we're going to open up the selected and the unselected groups. And what we're gonna do is we're just going to drag each icon into its respective group. So for the first icons, we're just going to drop them into our, into our unselected. So we've got the Home icon, favorites, updates and profile. And then for selected, we've got these homes selected. Favorites, updates and profile. And I'm just gonna quickly just rename these containers so they, they match the names, favorites and they'll will change to updates and usable change to profile. I would still say that the other selected. So next I just want to reposition the newly added graphics into, into the centre so they line up in the correct position. So slit one at a time. And we're gonna go over to this alignment paddle here, and we're just going to align them. So that's just going to get rid of our original I called grapes as well. Okay, so that's our new graphics replaced and sets up so we can come out of our Tab Bar and come back to our sings. Let's go to the home seeing. And what you can do now is we can now swap out these graphics for other graphics that we've got on our file system. So as an example, I'm gonna change this high contour star icon. So you can do it at the instance level or you can do it at the component level. So we're just going to show you how you do it at the instance level. So I've got my component here. I'm just going to open this up. And you can see the, when you work with components, you can still see all the internal workings of them in the Layers panel. And I can access all of these groups and text layers and such an icon change a whole bunch of properties in the Properties panel. What I'm gonna do is I'm going to go into my unselected and I'm looking for the favorites. So here's my favorites icon I've just added, so I'm gonna select that. And if we go over to the Properties panel, you can see there's the Replace command. So I'm just going to hit replace. And I'm gonna go into my favorite star folder and I'm going to choose the unselected SVG. And you can see now that's changed to a star. I'm going to also do it to the selected one. And come into here. Who's my Selected icon? And you can see here I've got the star. So that's how easy it is to replace GraphX. Once you've got an image, I've used an SVG, you can use a PNG image as well, and it will work in exactly the same way you can. You can still use that ability to replace images from the file system for images that are inside of a component. Okay, great, so now we can swap graphics and compare their level and at the instance level. And this gives us more modularity within our component. So this brings us to the end of this video. And in the next video, we're going to be looking at how we might further decouple how tab bar from our Pinterest app so that we can use in other projects. So see you there. 39. Making the tab bar reusable in other projects: Hi there and welcome back. Okay, so we've still got, we've got another problem with our tab bar, and that is that it's only really usable in our Pinterest app currently. And that's because we have all of the navigation jump response in hard coded into inside of the component. So in this video, we're going to refactor our components so that we can connect the tab bar sectors to any scene without needing to make changes to the component itself. Okay, so the first thing we're gonna do is we're going to go into our tab bar component. And we're going to just reorganize some of our responses just to make sure that allow tap and triggers all kinda sit together at the top of the Triggers panel. And we're going to open how taps. And we're gonna delete with the jumps. Okay, so that's good to our tap Home trigger. And we're gonna add ascend response. And we're going to, this time we're going to set the channel as center parents. And we're going to make the message home. Underscore tapped. And we're going to copy that and paste it into the other three triggers. And prospectively we're going to change the front of the message to represent the actual section. So this will be Favorites, updates, and profile. Okay, so we've now set up how four sections inside of our components. And now we can go back to our scene. And what we're gonna do is we're going to add a receive trigger. And we're going to choose this time receive from component. And when you choose receive from component, you get this extra drop-down. Where is asking you? Asking you, okay, so what component you want me to receive a message from? So if we open this up, we can see that the Yemeni compound we've got, here's our frozen tab bar, so we're going to choose that. And then as soon as you've chosen your, your component and you tap into the message field, you can see that we can now see all of the messages that are coming from that specific component. So this is different to the waves the scene receive and send messages work that we did in the previous video. So now I can see exactly what meshes are coming from the component. Whereas when you're using the same route, you don't know what component. The meshes are come, coming from. And that's probably a good way of thinking about when you should use 11 type of messaging system over the other. If you don't need to know specifically where the message is coming from, you can set it to the scene. But if you do want to know whether the message is coming from, the component is coming from, then you want to choose the parent root. Ok, so for this particular one, we are going to look for favorites because we're already on the home screen so we don't need to set the Holmes hat one. And when we received the message favorites tax, we're going to add our jump response, and we're going to choose to the favorite scene. So we're now going to duplicate that again for our other two sayings. And we're going to change the message and we're gonna change the same on holidays. And that's just rename these favorite updates profile. Okay, so we're going to now just group the course navigation. And we're just going to copy here. And we're gonna go over to how favorite scene. And we're gonna paste. And we just need to reconnects these, these things are, obviously we're now on the favorites seems so we don't need the favorites job. We need to always just do the other three. So we're gonna change their favorites to now home. And they're going to receive product license halfway home tapped message. And we're going to forget that we're going to jump to the home screen. And we're just going to reconnects up these others. Okay, so let's go back to the home screen and just give that test. So I'm on the home scene. I'm gonna tap on to favorites. And you can see I have navigated to my favorite scene. So we've now taken the navigation logic, outsold the component, and we've puts it in our scene. And we've now South L components so that it does essentially broadcast messages of when the buses It's hat. This means we can now pick up this tab bar component. We can put it in a different app. We could change the icons, and we could also set up the different scenes in our new prototype and connect that to how tab bar. Okay, so this brings us to the end of this video. Until the end of the look of our first look at the components in prettify him. So I hope this has been useful for you, and I'll see you in the next video. 40. Making Favouriting work with components: Hi there and welcome back. In this video, we're going to be fixing the favoriting feature that we did in a previous video. Because when we turned our tab bar into a component, we broke the way that particular functionality works. I'm gonna show you how to increments here, ensue the tab bar component in this video. So let's get cracking. Okay, so the first thing we're gonna do is we're going to get to grab the double-tap trigger. That's the original piece of oxides which enabled the safe favorites feature. We grabbed that from another file and you can, you can grab this from the file is attached to this particular section is going to be a lot easier to copy here from another file. Whereas for crept up because if we go into our photons, happy here, we can see, let me just open this up. We can see that double-tap trigger here and it's orange and all of the responses orange. And effectively when we made outs Harbor into a component. And because within this trigger, there were a couple of responses that were connected to an object inside that's happening. The whole trigger got pulled into the component. Now unfortunately because that happened, all of these other responses which rats are connected to different things, they effectively all got broken because the objects they were connect to one part of the component that we that we that we made and that they still got pulled him because they were part of the same trigger. And it's going to take an age to reconnect these up. So it's much easier for us to just grab one of these triggers already done in the previous, previous file. So I'm just going to grab that now. So in a graph is doubled tracks, double-tap trigger. I'm just going to copy that. And I'm going to come back to our home screen. And we're just going to paste this in. And we can see that we've kinda got the reverse now. We've got all of the, what was oranges now y. But what was Y is now orange. So we can see the actual responses that we do need in the component or now disconnect from hair. So that's fine. We got those in the component already. So we can just delete these two orange responses from this sorry, this district and we don't need them. Okay, so that's brought in all of our functionality, reinstated it. So one final thing we're going to add to this trigger because we need to tell our component when the favorites feature has actually happened. And if you remember back, actually we can run it here in our, in our preview window. So our safe to favorites was this pi here. So if I double that was happening, you can see that when the thumbnail drops into the tab bar, what we actually had previously was that the icon just illogical alone. Jump up and down when that, when ends, we've now lost that because the component and the scene and are not connected to each other. So we need to reconnect this, this little animation backup. So that's what we're gonna do next. Okay, so what we're gonna do to do that, we need to send a message into the component to tell a component that we've actually saved a favorite. So to do that, we're going to add a send response. And we're going to choose to talk to, to send the message to a component. And the component we're going to send the message to is of course the flow seem tab bar. And the message we're going to send is at favorably. And as per our previous videos, please, uh, went up uppercase, you don't have to, but this is just the way I write my messages. So we're going to send the message at favorite. And that's effectively all we need to do in this particular trigger. And what we're gonna do now is we're gonna go over to our component them again to double-click to editor. And it's going to close off this double-tap trigger for them in and we're going to add a new trigger. And that's going to be a receive. Once you receive that message, we've just set up. So we want to receive that from the parent. So if you remember that when you're sending messages, if I send a message to our components, then I have to do inside the component, I have to choose receive from parents. So that's just the way that particular communication work. So if you're sending to a component, your receiver from the param, if you're sending to the scene, then you're receiving from the same so that there's two very explicitly different lines of communication that you can use within, within your receive and send channels. Okay, so we're going to choose receive from parents. And we're going to look for that message that we, that we just added, which was add favorites. So we're going to choose that. Okay, we're now going to go to our orange doubles trigger that's inside of our company and we're gonna grab the white responses and we're going to just select the White responses. And we're going to copy those. And we're going to add them into our received trigger score. We can now do is we can now completely remove this double tap trigger. Don't need that anymore. And this should hopefully a fixed how favorites in. So that's just go back to our Home scene. And then that's the from name preview. So we'll go down to our pilot wants to favorite gonna double tap on that. And we can see now we've got our little animation happening when the thumbnail drops into the, into the section tab bar item. Okay, cool. So that's, that wraps up this video. The first part of reconnect him some of the functionality that we broke when we made outside borrow a component. In the next video, we're gonna look at fix in the cancer that we, that we created in an earlier video that there's another item that inadvertently got broken when we turn our tab bar into the component. So see you there. 41. Passing data into components: Hi there. So in this video we're going to reconnect our badge counselor, which we've got on our update scene, which is now inside of our component. We're gonna connect that back to the interactions that are happening in this particular same. Again, something that innovatively got disconnected when we made our tab bar into a component that's gone and reconnect that backup. Okay, so the first thing we're going to do is just make sure you're on the update seen here. And we're going to add a tab bar component because at the moment, in this particular file we've still got the pre-computed highs tab bar, so we can add an instance of our tab bar component into the scene. And we're gonna put it into place. Just make sure I've got the right. And that's cool. We can now remove the threatens half our group. Ok, so we're going to go to the first tab trigger here. Let's ignore these orange writes. The minute. We're gonna go into the first tap trigger here, and we're going to add a send response. And we're going to inside of our cell response, we're going to choose Send to component. And we're going to choose our targets are floating. And this time we're going to create a message which is going to be cooled update counter. And what we want to do is we want to send the counter value which is inside of this variable. We want to send it into the component. And we can do that with messages by checking this send value together option. And this will allow us to piggyback the value with the message into our component. So inside this field we're going to choose our counter variable. And that's effectively the sand response sets harps. So we're going to copy this and we're just gonna paste it into the other to tap triggers because the three, the three messages that we want to, except and every time we accept what we want to send that message into the components so that our counsel or update, okay, and we need to also remember that we've got multiple scenes here. So we need to also make sure that we're updates in the counter for the other Tampa instances in other scenes. So we're just going to go to the home screen. And we're going to find the star trick where we send the message into our tab bar, which tells us how, well we've seen your own. Here, and we're going to paste that same sent trigger into here. And we just need to reconnect, haplotype that the target to the floats ints handler. And we're also gonna do it on our favorite scene twice. Now start trigger. And we're going to paste our send in and we're going to connect up to this scene is flattens HEPA component. Okay, so next we need to update the counter inside of our component. So let's go to how component panel and double-click to edit our tap our component. And the first thing we're gonna do is going to add a variable inside of here. And we're going to call it counter, making sure as a numeric variable. And we're going to set the initial value three like we did before. Okay, so we're going to add a received trigger. And we're going to set the channel to receive from parent. And we're going to choose our update counter message. Okay, we're gonna check this assigned to variable box. So remember we're, we're sending the value from the other counter variable outside of our campaign, it was sending it into this component, piggybacking it with the message. So we now need to assign that value to another variable inside of our components so we can access it. And we're going to choose our counter variable. Fun thing we're gonna do is we're just getting going into our counter star trigger. And we're gonna copy this text response. And we're gonna paste it into our newly created received trigger. So this is going to make sure that the text value, which is basically this label inside of our counter UI graphic, it's going to update. Ok, so that's come out of that. So we need to do here. Okay, so next we're going to copy our navigation trigger block and we're going to navigate to the updates. And we're gonna paste it in. And we're going to move it to the top. And we're going to remove this old navigation block. This is now irrelevant. And we can open up this navigation block and we're just going to reconnect up these, these items. So nav home. So just gonna connect up the case out to the floating tab bar here. And then for updates, we're going to change to Favorites. And we're gonna select the tapper. I'm gonna change the message to the favorites taps. And then we're going to go to the jump response and we're going to select the favorites. Okay, and then finally we're just going to reconnect hub, the target on the profile trigger to the flattens HEPA. Okay, so now we should be able to see that we're tapping successfully. Ok, so thats except some of these places to follow. And if we now tap across these others have, we can see that we have persisted the lumber. But what you can also see is that we've still got this jumping animation. Because originally the jumping animation only happened on the Home scene. And because it wasn't in a component, we could just allow that that jumpin mesh to happened in one's hair, done it once, then it wouldn't repeat set. But now, because it's inside of the component, it's going to do it every time an instance of the component gets loaded. How, if you remember that on each of these scenes now we've got a separate indices of the components. So all of those triggers responses inside of the component are gonna run from brand new. So in the next video, we're going to fix the components so that animation only runs on the hunting scene to see you there. 42. Componentising the app load animation: Hi there and welcome back. In this video, we're gonna continue fix in the pieces of functionality that we inadvertently broke when we turned outs happen into a component. In this video, we're going to fix our app load animation at the moment. As you can see, when we run the prototype, we get this little bounce animation on the nitrification batch that we actually get, say, every sane week out too. And this is because each one of these scenes has gone instance of a tab bar component and that instance is going to run for the very first time. So these, these three instances on connected in, into one component. Even though there's one component, there still separate instances and they are like children of the component. And they've, each one of them has their own lifecycle. So for every time that initially you go to the first scene, you're going to trigger that component instance to do whatever it needs to do. And currently inside about, we've got this animation running. So we need to fix it. So they only happens when we, when we land on the home tab and only on when we land on the homes have for the first time. As you can see, if I now go back to these other sections, this is animation isn't running anymore because we've already visited the sections and it's already run for that very first time. Ok, so what we're gonna do is we're going to come over to our file and we're going to go into our floating have component. And we're going to add another variable. And we're going to call this invariable app load. And we leave it as a number and with its default value. And we're going to go to the tap Home trigger. And we're going to add an assign. And we're going to choose our Apollos variable and we're gonna set, set to a value of one. Okay, so we're now going to add a detect sanded down at the bottom here. And we're going to look for that app load variables. So remember, detect, detects is when, when something changes and we're looking for when the at low variable changes. Okay, we're going to grab our counter animation. So this is currently in our counters start trigger. So we're gonna grab all of these four responses, which is going to copy those. And we're going to add it into our detects trigger. And let's just turn this, this start trigger off for a second. And we're gonna go back to our go-to out batch layer. We're actually going to assess opacity to a 100 by default and then factor out its hat. We're going to add an apostasy response. And we're going to choose our batch. And we're going to set its opacity to 0. And we're going to set the duration to 0. So what we're doing here is we want to initially set the opacity of our badge to 0 so we can then run our animation. But for all the other scenes, we want the batch just be there by default. So this is why in the layers we're actually setting its opacity to a 100. So we're going to add another trigger. We're going to add our start. And we're going to set that to width jump. And we want to grab our text counter response so we can grab it from here, says Copy this and add it into our star trigger. So finally we want to trigger the app load on the Home scene. So we need to come out of our component back to our Home scene. And we're going to add another star trigger. And that's just move it underneath his other ones so you can keep them all together. And we're going to add a send response. And we leave that to send to currency. And we're going to add the home message. But this time we're going to pass a value. And so we're going to tap our send values together and we're going to pass in a value of one. So this trigger is effectively mimicking the first, the first load of home. So only on the first time is it going to send this value because on the staff trigger we have set it to we haven't set it to restart every time. Whereas on this other stock trigger, which is the one that loads every time we tap the tab bar and go to home. This is restarting every time, so he's going to keep doing it every time we come back. Okay, so there's one final thing we need to do to make all of this work, and we need to go back into our component. And we need to find the received message for home. So here is here, and we need to receive that value. So we send in that value of one into, into the component when we tap on home. So if we come to the message area and we just tap to select a science of variable. And we want to choose this app load variable here. Okay, so that should be at that. Back out this component, bats are home scene and that's run that. Ok. So when it first loads, we get out or jumping animation that now when I navigate to the different tabs, we don't get the repeating of the jumping animation. So that fixes that problem. Okay, so if we just come back over to the to the update scene, and we're going to do this except the following of these, these three posters. And you can see that when we get to 0, we should be hiding this badge, but we're still gets in that value. If we go back over to our updates scene, we can see that we've gotten this orange Dom under this detects, and this is the place where we were effectively hiding the badge. So let's go and fix that now. Ok, so the first thing that's just remove these orange elements and we can remove this whole condition. Okay, so let's go into our component. And we're going to go down and find the trigger where we receive the counter value. So that's way down here. So we've got this update counter and we're just going to add a conditional to this. And we're going to choose the counter variable. And we're going to look for when air reaches 0. And when the counter variable reaches 0, we're going to add an opacity. And we're going to choose our badge. And we're just going to tell you pasty down to 0. And we can probably set the duration to 0 as well. Okay, let's see if that fixes our problem and says back out of that. Ok, so thats goes with our preview window. So we're going to start following our posters. And amen, we finally get to the 0. We can see that our batch has disappeared completely. Cool. So this about wraps up all of our fixes for our tab bar component. And hopefully you've seen lots of different ways that we're using components and we're using meshes and where and how we're kind of architecting these features when we using components. And it's hopefully given you a little bit more practice. In this first look at components to this about wraps up the components section. And in the next video, we're going to be turning our attention to the library functionality within, within credit pions. So we're gonna turn OWL, OWL tab bar component into the beginnings of a component library. And we're going to be asked to use that library in lots of other.py files. So I'm going to show you how that all works in the next video. So see you there. 43. ProtoPie libraries: Hi there and welcome back. So in this video we're going to be taking a look at protocol libraries. Libraries are separate files which exists within pressed by cloud and libraries and they were used to create and reuse common components across all of your pile files. The way libraries work is very similar to other apps such as Figaro and sketch. So they should look familiar. And to explore how libraries work, let's create a library from outbreaks rest API. Okay, so I've already created a couple of more components. So I've turned our follow button into our component and also our primary CCA into a composed. We've got these three components, which are currently local components. So they're only inside of our higher file. Okay, so we're going to convert this pi file into a library now. So if we go to the File menu and choose X4 is new library. Kay, so we're gonna get this dialog popup where we can give our library a name and give it a description. You can see here. Depending on law, license type, you have, you can choose whether you want this to be a library, your personal account, or if you're working within a team or you're using the enterprise account, then you can choose your team. Here. We're going to keep it personal. And I'm just gonna tap creates. Okay, so it's gonna take a few minutes for the file to be converted and uploaded as a library to the cloud. Okay, so we now have a new file that was opened and this is our library. At first, it may look like it's the same file, but you can see that there's this purple strip at the top of the file. So that tells you instantly that you're now in a library and you can see more in library edit mode. We're going to, we're going to publish. So even though we've created the library, we haven't actually published a library, so we can't use it in our file and we hit the Publish button, so that's do that now. And when we, when we tap published library, we're going to be presented with this dialogue. So within libraries, you have version control. So we can add a version comments every time we make a change. So this is just going to be our initial upload. So I'm just gonna put that in this description field here. And we're going to tap publish. Ok, so you can see now we've successfully published our library file. So we're gonna go back to our page stress. And if we open the Components panel and we look down here, let's just close off these other ones. So you can see down here inside of my personal libraries, I've now got this high Express library. Okay, so we're going to tap on the library and then that navigate to our library. And we can see our three components sitting in our library here. Okay, so what we're gonna do now is we're just gonna go to one of our scenes and we're going to swap the tab bars. This tap, our component is still the local component inside our py file. So we're going to swap it with the tab bar from our library. So if you select the tab bar item and we're going to come over here into the Properties panel where it says component and we're going to just tap on the thread. Sons have our competitor. And we're going to go down two. You can see there's this section for libraries and we're going to choose our Pinterest app library. And we're going to go over and choose our float scenes have been OK. So we've now successfully replaced our local component with the component from our library. Okay, so next up I'm gonna show you how to make updates to the library. So we're gonna go back to our library file. Just stand behind our py file here. And we're going to, we're going to update you remember in a previous video, we changed our heart icon to a star icon, but we only changed it on the instance level. So we're now going to update it inside of the component so it will be available and updated in all of our tab bar components across our app. Obviously, we've already swapped one, tap our component. In outfile fossil, We'll have to swap the others, but this will have to be updated the component. So I'm just going to go into my unselected group and find my favorite cycle. And I'm going to hit replace. See my star icon. So this is the unselected modes are going to choose my unselected SVG. That's now stop. And I'm going to do the same thing for the selected group. Update my icon. Selected May 1, see I've got my Selected icon in place and you can see my style icon is now updates him my components. So with the update done, I'm going to tap public and private pilot's going to prompt me to save the file. And the file needs to be saved before it can be published on this kind of hexane. And you can see now here we're gets in our new changes, saves, there'd be an upload in the, synchronized through the Cloud. Okay, so when it's ready to publish is going to give me this prompt again to save a version. So I'm just kinda description here inside of this, updated my company and I'm going to hit Publish. So that's now successfully published. I'm going to switch back to my Pinterest app. And you can then if you just notice this little blue dots disappeared on the Components panel. So that's telling me that there's been an update. So I'm going to tap on my Components panel icon. And you can now see a flashing red dot, which is just pulsating on this icon. So this is the library updates icon. And it's going to highlight whenever you update library item, it will only show if you've actually, you're actually using the component that's been updated inside your profile. So if you're updating a component and you haven't used it, it's going to silently. Update inside the library is still going to update, but it's not going to prompt you to do anything unless you've actually got an instance of air inside your insight on it, you'll see, okay, so we've got a tap on this. And we can see in the update my Aubrey dialogue, the protoplasts tetanus, the component that's been updated. And we've got a couple of buttons here. So we've already updated one components. So we've got an update button here and an update all if you'd made multiple changes, you're gonna get a whole list of components that have been updated. And you can either individually update them or you can just tap the update all button at the bottom. So we're just going to tap update. Okay, so all of our updates have been run, so that's tap close. And you can now see inside of my component, it's now been changed to the star. Okay, so that's how easy it is to make updates to library files and then use them inside of your.py files. So one final thing I want to just take you through, I want to just take you through and have a look at the library in cloud. So we're just going to go over to our browser. And let's bring this over. So this is, let me just refresh that. Okay, so I've got into Cloud. You can see I've got two libraries here. So this is our pious teres library that we created. So we can tap into that. And you can see we've got our three components here. And there's a few things we can do here. We can open up the library in Proquest studio from the cloud. We can tap this to see our version history. So if we go into a particular version, you can see the Common that we've made. And we can do things like we can open up a particular version in studio. So if we need to roll back to a different version, so restore and a previous version to be the current version as well. So there's a few options there to help us to manage our library files. So as you can see, protocol makes it really easy to create and manage competitive libraries. If you have a personal account, then you can create libraries for your own personal use. If you want to share libraries with other people in your team, then you're going to need either a team or an enterprise license. And if you've got one of those, then you can then manage roles. For libraries. You can have certain people in your team managing the libraries. You can have other people with just access to libraries where they can't actually edit them. So there's, there's a whole host of features around, around that. And again, very, very similar to the way you feel and manages and how Fichman libraries work. Okay, so that about wraps up our quick look at libraries. It should be enough for you to get started with them. Hopefully you'll have some fun with him. Some crates and cool stuff that you can reuse in all of your different.py files. In the next video, we're going to have a little bit more of a look around what else pro pi cloud has to offer. So I'll see you there. 44. ProtoPie Cloud & sharing: Hi there and welcome back. So in this video, I just want to talk a little bit about sharing files and probe iCloud some of the other features that pro pi cloud has to offer. So we've now, we've now effectively completed our Pintrest app and we want to now share with other, other team members. So what I'm gonna do is I'm going to upload my Python. I'm gonna make sure I'm on the start screen. And I'm going to tap upload. And I've obviously up and uploaded this before, so but I've made changes. So I have this option. So either this update, my existing py file, or upload is a brand new Python. So I'm just going to choose upload is a brand new pipe. And that's gonna upload. And it's gonna give you, if you've got multiple accounts like I have, it's going to give you access to to choose which which account you want to want to upload it. Susan's got related to my personal space here. And that's going to upload. Okay, cool. So that's finished uploading and it's given me this URL which I can just, I can just copy straight here and I could email that to a colleague or to a team member who I wanted to share my, my prototype with. When they get that, they're going to click on that and it's going to upload, sorry, it's going to open the file in the clouds and that's just tap on this URL. So I'll open that up. Okay, so that's just God, we're now in a web browser. So that's just going to open my mind prototype up in cloud. And you can see, because we've used a vibrate response, which is a hardware specific features just telling us that this particular feature isn't gonna be supported inside of, inside of a web browser on our desktop computer. Any of the sensors that you use, like camera and what have you, they're not going to work when you're viewing your prototype in cloud itself. So we're just gonna close that off and we're gonna take a look around. So I've got some controls on the bottom here. I can, basically I can go and tap this and can go into like a complete full screen mode. So I'm just gonna get rid of all the clutter. And I used my multiplier file directly. And I can just press Escape to come out of this. I can also go into this other mode where I can still see my, my frame. So if you do choose some of the, some of the presets in pro pi, you will get a device frame. We don't get them for all of them, but you will get them for the more popular ones. I can just hover over the bottom of the screen to get back to my normal, normal view, we've got the ability to change the speed at which the prototype will run. So if you want to slow things down or speed them up, you can do. And then on these, on these overflow menu, we've got the better. Change our cursor if he wanted to be an arrow cursor instead of the touch point cursor. Okay, so over on the left-hand side here we've got this description panel. Again, I can hit three dots. I can edit any information here. I can say it. Any description I want inside of this description field would go up to a thousand carats that you can use. I've also got access settings. So when I'm sharing my prototype with others, I can change what access they have. So at the moment, anyone with this link can view the prototype and anyone with the link can also download the pipeline. I can change that. I can say, I only want me to have access to that. So what that means is that people would be able to view it in cloud, but they wouldn't be able to download it. Normally you'd want to have this on because people will be able to download the Python onto their device and actually run the prototype on their device with the three that are free pro, pro pie plan that you can get in the iOS store and the Android Play Store. So there's a few features there. We've also got some display options. So this is effectively what I was doing down here. So if you want to hide all of this clutter, if you want to control whether they see touch hints or not, the device mockup, all these sorts of things. You can choose your options here and then copy the link in your Garr link with all of these settings applied. So that's quite useful as well. And then finally, if you want to get rid of this pie, you can just delete this pi from the cloud and then they'll deletes from your account. Finally down here we've got version history for.py files as well. So as you're making changes and you're uploading your profile to the cloud. It's gonna create new version in the same way we saw with libraries in the previous video. And you have some options here. You can get access to a QR code. So if you scan this from within pro pi player, then is going to download the Python file into the player. You can also just downloaded to your computer maybe or another designer working on the pile file and you want to edit it so you can just download the Python opens up in Studio. And then finally, as we saw previously, you can access your share options. So if we just kinda back out from my Polish pi, as you can see, I'm back in my personal space and this is where my library's live. So my.py files are in one section. And as we previously saw, my libraries are in this other section. Okay, so this is all the features that come with Pro iCloud. If you've got a personal account. In the next video, we're gonna take a look at a very specific feature which is built into Cloud, which is only available for team accounts or enterprise account. So you don't have access to this if you've only got a personal account. And that feature is called interaction recipes. So That's going to be what we are going to be looking at. Interaction recipes allow you to see all of the, all of the values in your animations in, in your, in your, in your prototype. This is a really cool feature if you're handing off your premise higher to a developer and you want that, you want to give them access to power to break down your animations and see all the values of the animation curves and all that sort of stuff. So that's what interaction recipes are full. And we're going to look at that in the next video. So see you there. 45. Cooking Interaction Recipes: Hi there, welcome back. In this video, I'm going to show you the feature within pi cloud for teams and for enterprise, which is called interaction recipes. So interaction recipes, a way of hand off your prototypes to developers so you can showcase very specific micro-interactions animations. And you can share this with your team and they can then see what are the values and then use that as a reference point to build the real thing. So we're going to create an insurrection rest now. So I've uploaded the Pinterest app into cloud and I'm going to go over to this interaction recipes handles. So again, you see this if you've got a team's run enterprise account and I'm going to hit the record button. Ok, so I'm gonna go into a recording mode. I'm just gonna hide this menu here. And I'm just going to log in to the app. And I'm just going to put in some wrong information. So we Gao error handling states and I hit Continue handling state. Okay, I'm going to now stop the recording. That's gonna process the recording. And it's going to bring me into this very specific view. And you can see here that we've got this timeline view at the bottom of the screen. I've got this play head here, which I can scrub through the timeline so you can see it's now playing back what I just recorded. And I can actually drill down into all of the responses and the triggers that I've sat. And I can actually select all of these, but we've got to move logo here. And you can see in this panel here, I've got the delays are called the duration or the easing curves. And I've got all the prophecies that have changed this panel. So this is a way that you can showcase to build development team what you've done and they can use this and interpret this. And then from this tray, the real, the real thing. So it's a pretty cool feature. You've got this little, little timeline thing here where you can just climb this crop from my longest shortstop. And yet you can just, you can just go through and introspect all of the values. And then you can use this. What's really cool about this also that is clearly ability to cloud. Your development team won't need probe my studio, I need access to that. And you can just share this. And actually if we, if we actually just go back to the main screen, you can actually record lots and lots of interaction recipes. So you can see here the recipe that I've just recorded. I can edit this. I can change this to login or whatever I'm going to call it. And I can have a whole bunch of recipes here for all of the different interactions and micro-interactions in my app. And then the development team development, whoever I'm working with can go through the specific one that we're working on and they can go and get all of those values. Okay, so this is a quick look at interaction recipes is a really cool feature. I'm sure it's, It's a really interesting take on how you can actually hand off your designs to development team from an interaction perspective. I haven't seen anybody else do it quite like this. Okay, so this wraps up our look at interaction recipes inside of cloud. And I'll see you in the next video. 46. It’s a wrap! Where to go from here.: Hey, it looks like you made it to the end of the course. Well done. So we've got quite a few pies together over this course. I hope you've enjoyed the course. I've certainly enjoyed making it. And hopefully you've managed to level up those Propylaia design skills. And you feel a lot more confident using the software and you've created some cool stuff. I'm actually quite amazed. I've taught a lot of designers pro supplier. And it always amazes me how quickly those people get to very advanced interactions, very, very quickly. So hopefully you've also managed to do that. So, and if you have them kudos to you, Well done. So I just want to touch on a few next steps, a few things that you could consider doing to continue your exploration of proto pi. So first off, definitely check out his website. There's a good documentation section and it goes into a lot more depth in terms of the triggers that you can use and all the responses that you can use. It's also got documentation on formulas, has a lot more to learn in terms of formulas and also components as well. There's definitely other things on the website as well. So there's a section where other uses have had their.py files uploaded, curated by a pro supplier. So you can download those, you can reverse engineer those. And that's actually a really great way to learn how to use the software. That's something that I have definitely done in the past. Other things you can do is you, I've run a YouTube channel called proto pilot. So I'm uploading videos on a more or less on a weekly basis across a broad range of subjects. Everything from mobile designed to deep dives into certain price by features to new features that are coming out to. Some of the things I'm going to be looking at doing is TV interfaces and games as well. So yeah, a whole range of stuff there for you to go and have a look at. So if that's something you feel would be useful for you, then go and subscribe to that channel and you'll get notifications when new videos are loaded up. You can also follow me on Twitter. There should be some links on the screen right now. And also you feel free to follow me on LinkedIn. Feel free to reach out on those channels. And I'm always happy to answer questions and help you guys out. So yep, don't be showing feel free to reach out. Also, you might want to follow protoplanet app and that's at protoplanet app. There also posting stuff on Twitter on a regular basis. And other things you can do is you can follow, sorry, you could join the Facebook group. So there's approach apply Facebook group. And I helped to moderate that along with a whole bunch of other pro supplier enthusiasts and pro supply professionals, including guys from process Pi as well. So that's a very active group and that's definitely worth checking out. Other than that, keep on exploring, keep on experiments in. And there's so much more to learn. I'm going to be doing more courses on processor Pi in the near future. Just going to be thinking about what I'm going to be working on next. So probably something, maybe around components or an advanced course on formulas. Again, feel free to reach out on the social channels if you've got any ideas about stuff you think you would like to see me do a course on and are happy to be happy to take that into consideration. Okay, so this is me, barren Bennett signing off. Hope you've had a great time doing the course. And I'll hopefully see you next time.