ProtoPie: Design Interactive Prototypes | from Zero to Hero | Stevdza - San | Skillshare

ProtoPie: Design Interactive Prototypes | from Zero to Hero

Stevdza - San, Android Developer & UX/UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
60 Lessons (5h 2m)
    • 1. Introduction

      2:10
    • 2. 50% Discount for My Students

      1:37
    • 3. Protopie Interface

      13:10
    • 4. Status Bar (From v4.3.0)

      0:37
    • 5. Shortcuts

      1:27
    • 6. SVG Layer

      5:34
    • 7. Background Blur (From v4.3.0)

      1:11
    • 8. Video Layer

      3:19
    • 9. Audio Layer

      6:21
    • 10. Camera Layer

      4:30
    • 11. Lottie Layer

      4:13
    • 12. Text and Input Layer

      8:59
    • 13. Constraints

      3:56
    • 14. Scroll/Paging Container

      7:27
    • 15. Touch Triggers

      7:26
    • 16. Chain Trigger

      4:51
    • 17. Range Trigger

      7:30
    • 18. Start Trigger

      3:19
    • 19. Detect Trigger

      4:11
    • 20. Mouse Trigger

      4:21
    • 21. Key Trigger

      5:13
    • 22. Input Trigger

      2:58
    • 23. Tilt Sensor Trigger

      3:06
    • 24. Sound Sensor Trigger

      1:32
    • 25. Compass Sensor Trigger

      1:29
    • 26. Proximity Sensor Trigger

      2:30
    • 27. Receive Trigger

      6:21
    • 28. Reorder Response

      4:09
    • 29. Scroll Response

      2:23
    • 30. Jump Response

      3:21
    • 31. Link Response

      5:40
    • 32. Reset Response

      1:51
    • 33. Stop Response

      2:49
    • 34. Assign Response

      3:06
    • 35. Condition Response

      5:36
    • 36. Scene

      2:47
    • 37. Components

      6:01
    • 38. Variable and Formula

      9:55
    • 39. Upload and Share your Project

      2:34
    • 40. Record your Prototype

      0:57
    • 41. Mobile App - About the Project

      0:54
    • 42. Mobile App - Prototype Preview

      0:53
    • 43. Mobile App - First Screen

      12:48
    • 44. Mobile App - Second Screen

      6:15
    • 45. Mobile App - Second Screen - Enter Transition Animation

      6:07
    • 46. Mobile App - Second Screen - Gallery Slide Animation

      9:05
    • 47. Mobile App - Second Screen - Fix Layer Overlap

      6:18
    • 48. Mobile App - Second Screen - Back Arrow

      2:01
    • 49. Mobile App - Second Screen - Heart Animation

      7:31
    • 50. Mobile App - Second Screen - Add to Cart Button - Part 1

      11:01
    • 51. Mobile App - Second Screen - Add to Cart Button - Part 2

      11:05
    • 52. Mobile App - Second Screen - Add to Cart Button - Part 3

      9:40
    • 53. Mobile App - Second Screen - Add to Cart Button - Part 4

      7:38
    • 54. Mobile App - Upload on Cloud

      1:22
    • 55. Web App - About the Project

      0:53
    • 56. Web App - Prototype Preview

      0:31
    • 57. Web App - First Screen

      12:57
    • 58. Web App - Second Screen

      12:16
    • 59. Web App - Third Screen

      11:47
    • 60. Web App - Upload on Cloud

      0:56
18 students are watching this class

About This Class

Hello there and welcome to my course,
Would you like to learn how to create highly interactive and complex prototypes for Mobile, Web and Desktop Applications. And Would you like to see how your static design could look like when you give it a life using motion animations?
Well then, in this course you'll learn everything about Protopie, from basics to advanced stuff like creating serious prototype projects.

NOTE: This course will constantly be updated. Whenever a new ProtoPie version come out, videos about all new features will be created and uploaded.


If you are already using Adobe XD, Figma or Sketch for UI/UX Design, then I have a good news for you, because ProtoPie is compatible with those softwares. With just one click you can import your project design in ProtoPie and start creating prototypes immediately! Yes, It's that easy! And that's one of many reasons why ProtoPie has a word Pie in it's title. Because it's never been this easy!

The philosophy behind ProtoPie is that high-fidelity prototyping should be done easily and quickly. Many designers out there still believe that advanced prototyping without coding is not possible. And with this course I'm going to prove them wrong!

This is a COMPLETE course, where you will learn everything about ProtoPie. We are going to start from very basics, like introducing with Protopie and it's interface, tools, triggers and responses. Then After that we are going to cover up some more advanced topics, like variables, formulas, scenes and components. For every tool, response and trigger I'm going to show you practical examples.

And at the end of this course, when you learn everything, we are going to create two prototypes from scratch. One for Mobile and the other for Web Application. These prototypes will be advanced projects, and with the knowledge you gathered throught this course, even those complex prototypes will be as easy as pie to you.

And that's not the end, when we finish creating our prototype we want to share it with our friends and family, or even a client. Because we don't want that our work pass as unnoticed. We want to share our work with the rest of the world! And again that's possible with just one click away from us, because from Protopie you can upload your work to a cloud and share the URL of your prototype with everyone. And everyone would be able to interact with your prototype from a simple web browser! Isn't that amazing? I know it is.

Transcripts

1. Introduction: Ah, hello there. And welcome to my course. Would you like to learn how to create the hiding directive and complex prototypes for a mobile Web and desktop applications? And would you like to see how your static design could look like when you give it the life using a motion animations? Well, then, in this course you will learn everything about Prada pie from basics toe advanced stuff, like creating a serious prototype products. If you are already using adobe eggs, the stigma or a sketch for you X and your Y design, then I have a good news for you because apart a pie is a compatible with those Softwares. With just one click, you can import your project design in Prada Pie and start creating prototypes immediately. Yes, it's, that is, and that that's one off many reasons why Porta Pike has a world pie in its title because it's never been this easy. The philosophy behind the prototype I is that the high fidelity prototyping girls should be done easily and quickly. Many designers out there still believe that advanced prototyping without coding is not possible, and with this course, I'm going to prove them wrong. So this is a complete course where you will learn everything about Prada pie. We're going to start from very basics, like introducing with the Porta Pie, and it's interface schools triggers and responses. Then after that, we're going to cover up some more advanced topics like variables, formulas, scenes and components for every tool, response and trigger. I'm going to show you a practical examples and the at the end of the scores. When you learn everything, we're going to create two per types from scratch, one for mobile and the other for Web application. These prototypes will be advanced projects and that with the nowhere together throughout this course, even those complex prototypes will be easy as buy to you. And that's not the end. When we finished creating our prototype, we want to share it with our friends and family or even a client, because we don't want that our work best as unnoticed. We want to share our work with the rest off the world, and again, that's possible with just one click away from us. Because from Prada pie, you can upload your work to a cloud and share the u R L off your prototype with everyone, and everyone would be able to interact with your prototype from a simple Web browser. Isn't that amazing? I know it is. 2. 50% Discount for My Students: Ah, hello there. And welcome back. I have a great news for you. So I just got an amazing deal from Pro TEM Pie team for my students. And yes, I am talking about you who are watching this video. So now you can get a 50% discount on Prada pie one year subscription, and now I'm going to show you how to get one. So first you need to navigate toe a prototype i dot io slash support slash share stake form . Okay. And after that, we need to scroll down. Ah, below. And they will see this form, which we need toe. Feel out. So the first field is our prototype I email address. So if you haven't created account on a product by, you need toe head over to this cloud menu, and then you will see a form and down below Create account. So once you created the account, you need to copy the email address you used to sign up and based in the first field next week era, full name and the third field, you need to select their pricing and plans next for the company. Just say I don't have a company you need to type your city you live in and the for the issue, you need to select the in other ways to receive a discount. And here, in the description you need to write, I am a Step Johnson student and down below, where it says the linked to article you need toe copy and paste the U. R L off this exact course, and once your and once you're done, just click Submit button and you will send the message toe a person by support team. Then they will answer you within 24 hours or 48 hours. Depends on how they are busy, and then you will receive your a discount coupon. 3. Protopie Interface: Ah, hello there and welcome back. So in this video, I want to introduce you toe Prada pie interface. So when you're on a prototype, I This is what you will see at the beginning. So this is just a small intro screen, And behind this part a pie. We have Adobe X'd. If you don't know Adobe exit is ah two for creating Ah, you. I designs mostly for mobile and the web applications so other biggest is a compatible with the Prada pie. So basically, we can create the summer design inside that Ah, because the end important that design in prototype I to create the US design, of course. So, in order to start a new project, you just click this new pie button all right. And ah, to windows will appear. So the first window is our prata pie, and the screen on the right is, ah, purview off our application. So in this case, we have our device or iPhone acts in this case. So this is iPhone X template, but we can change that in the future toe summer Web application or different screen for different phones. So it starts with the menu so at the beginning. On the left side, we care of file menu. Here we have some basic options. Toe open, create new screen or create new project Safe project Close project. Ah, upload to cloud and so on. So you should remember those shortcuts because they are very important. When you work, they can save you a lot of time. So, for example, save Ah, shortcut Is control asked. They are pretty basic. All right, So you care also option to upload to cloud. And I'm going to talk about that option in the future. It's a very powerful and useful when you want to share your the design with the client. Also, we can import options so we can import out design from Adobe Giggsy or figure as you can see. Ah, product. I recognize that I have a dog begs the running in the background, and basically I can select the art board, which I want to import here. Of course, we're not going to do that now. This is just for the deloria purpose. So next we can edit menu here. We just have some basic options to copy Paste duplicate in the elite. Of course you should remember the shortcuts because we're not going toe. Choose those options from the menu next week. Ever insert menu? Of course, we're not going through with this insert menu as well, because we have our toolbar below. All right, so next we can object menu again, we can hear a group on groups, so you should Ah, try and remember those shortcuts Controlled re and control Shivji. They are very useful when working with a design. Okay, next week have a view. So we're zoom in and zoom out for zoom in and zoom out. I mostly was a shortcut which is basically holding control and using a mouse wheel. Here we have our weaken to ah toga, lower layer layer panel or interaction panel. So basically a layer panel is Ah, this on the left side, you will see. So here, when you click connect device, we can basically, um uh basically install a prototype I player inside our when our smartphone on ah, IOS or Android. And when we stole that, we can just scan this QR code and the prototype. I will show this exact project inside our smartphone, which is an amazing option. I'm going to talk about that later as well. And the Here on the left side of this interface, we have a layer panel. So when we create some layer, for example, this vector rectangle, as you can see, it appeared on the left side so we can add one more. For example, this over. Of course, you should remember those shortcuts as well. As you can see, This is our layer section, and it is very important. So next here is you see, we have import button so we can import our design from Adobe's E or figure MMA easily. Here we have a scene option. So basically seen is ah, screen. So if our design application design you have more screens, we can add the more scenes here, and, uh, we can connect them afterwards, You will see. Okay, So just below our scene, we have a company adoption. So ah, basically competent. His summary was about objects. So, for example, if we create some a gallery here, we can add that gallery toe are component three here and then we can reuse that gallery in the next scene. So it's a very useful option as well. All right, s o I already show you that this import option it's very useful. So next we care image. So basically, when you click that it will prompt us to add a some image from our PC like JPEG, PNG or G I f next week have a media. I'm goingto create a separate videos about all of those options here from our toolbar. Next we have our shapes, so basically those are vectors. Next we have a text and text input. So text input basically is a field where we enter a our text and let me show you how that looks Just the second, all right. As you can see, it is just the basic input. And on the right side of this interface, we have a property panel. And when we select some off our elements, we can change its ah properties easily. And of course, we have our interaction panel here just beside our property. Pound. Okay, so next we have a container here. I'm going to talk about that later, of course, but it lets you scroll. And there was some of those animations I want to show you later. Eso here when you select this device frame and you can remove or deliver that. So when I click devices, we can set the template for our project. In this case, current temperatures. IPhone X. So we can sect the iPad, for example. And ah, when we create a design for iPad inside Adobe's there, for example, we can import that design here, and it will fit perfectly. Um, all right, so basically there are more templates to truth. For example, IOS, we can android, we have a desktop. So those desktop templates are mostly was for our web applications, and we can also add a custom size in width and height. Okay, so when we select some off the elements from our layer panel, we can creek click this preview button and it will show us this preview window. So, as you can see when we click when our input feel, it will automatically show us this keyboard. And that's ah ah, the fourth function in a Prada pie. Next week of this auto reload options changed. We can change speed. We can record our UX design and savers, and before also we can't some options scare. So we control this arrow instead of this. Ah, circle. So at Michigan, let's switch toe this touch point and let's enable these stop shaking. So basically ah, this static, it will enable us to see where we can Ah hit. For example, when we click somewhere on the screen, it will show us this yellow indicator that our input field is clickable. All right, so this device option, I I already talked about that. We're going toe. Explore that further, more later in the videos. Also, we have this cloud options. Eso this cloud lets us toe see our projects which were uploaded in the cloud. Currently, I don't share anyone any project. Ah, also, we have this upload project which we can upload this product and share our UX with friends and families or clients. It's very useful option. I'm going to show you that later in this course, of course. All right, so, uh, also in this layer panel on the left side, we can use that in change our names off our objects, for example, at bringing this to circle and this lock button enable us toe lock our circle, so we cannot select that. So let's unlock that and this eye icon lets us set the visibility for our object as well. Okay, so those are options are pretty straightforward on DA here on the right side, in our properties panel, we can modify some of the properties off our elements so we can rotate our circle, for example. And as you can see, our circle is rotating from our top left corner. And when we change this original center, our element will rotate from the center of them. So, uh, it's very nice option as well. We can change origin to fit our needs. Of course, we cannot position options size options. And so one constraints time would talk about constraints more deeper later. Also, we have a passage. The option toe said the different values so we can change the collar off our elements. Ah, feel color or aboard border color, of course. So you can set the field toe 20% or 100%. So we have a bunch of options to choose from here from our properties panel case waking increase the size of RM and by holding often shift so it will increase from the center. All right, so let's change the angle to zero. This is the fourth value. Okay, so when we select our element again, we can then sec this border caller so we can change the with, for example, and this is how it should look like. So let's remove that for now. We can also add a shadow, and we can modify X Y and blower options as well. And we have a touch area. So touchy area, for example. It said toe 20. And as you can see on our screen, we share this yellow in the Gators. So that means even if we click outside, the circle of this circle will trigger. If if we have some triggers inside our interactions panel, All right, so we can set the one or tour each of those directions. All right, so let's delete this one, for example. And let's add the just for example, purposes one. Ah, trigger. So as you can see, this is, ah, our trigger. So we have touched conditional mouse key input and sensor triggers and would talk about them and more deeper later in the videos. But for now, let's do this tap trigger, and here on the Properties panel, we need to select the element on which we want to add this tap trigger, so in this case is automatically added on our circle. So, for example, if we select this element and then click at the trigger and the quick tap so it will automatically add to our selected object. So it's a pretty nice ah ah, tip to know. And, of course, on the right side, we concede preview off our object. And here on the plus sign, we can add some responses to our trigger. So as you can see, there are a bunch off options here and let's choose this caller, for example, and let's set color toe. Ah, let's use this purple, for example. But you could set your ah color court, for example. And that said the field court, 100% of course, And you can choose. Easing here is well, so that's on you. You can set an experiment by yourself to see which one will feed the most, the better in your application. On this case, let's choose that this quint and aeration for our animation it's true is 1.2 seconds. We don't need any delay for now, and you can also see like this to repeat check box, but we don't need that now. So a click run and click per view. So when we tap on this red circle, it will slowly change the color to purple in the duration off 1.2 seconds. As you can see, the animation looks the animation looks are very small and nice. Okay, so, um, basically, we can also add a move. Ah, a response. Care if one so we could move our element as well. Um so basically, that's it for this video. I just wanted to show you and introduce you to Ah, this Ah, part a pie interface. It's a very well organized and it looks very nice. So ah, basically showed you Ah, everything you know. So we forgot toe. I forgot to mention the variables here so we can also create the variables for our UX design. And then we'll talk about the variables. Ah, a little bit later. But you should know that variables are very powerful. Tour inside our Prada pie, and you will see what we can do with that. It's pretty amazing. And that will be all for this video 4. Status Bar (From v4.3.0): Ah, Hilder and the welcome back. So ah, from a prototype I version 4.3 point. Oh, there is a one thing which was added, and that is a status bar. So when we select our seen on the properties panel, we can check this system status bar option and that we can see this status bar on our application. And of course, we have a few options to change the color off our contents and end. Of course, our background. So we can do that as well. We can modify this, but also if you don't want to use a set us about, that's OK, and you can just enable and disable that with one click. 5. Shortcuts: Ah, hello there and welcome back. So in this video, I just want to show you problem by shortcuts. So I have designed this document all by myself and this document will be available for you to down or that in a pdf format. So as you can see, there are many of those air shortcuts. But I don't use them all. Of course, and your shouldn't use them all. Anyway, there are a couple off shortcuts which I use all the time, and they are very important. They will save your time a lot. When you're working hard, the most important one is for zooming and zoom out. If you're using windows like I am, then the shortcut is control and the mouse wheel, which is a very nice shortcut, then a for the layers we have, those are short shortcuts. Just the one letter off on your keyboard, OK? And next week have ah shortcuts for undo redo, copy and paste. And the scorpions based shortcuts are mostly using approach apply and you will see ah throughout this course that I use them a lot when I'm coping. Ah, a trigger, some responses and basically layers. And so on eso next week. Ever this dilate shortcut, Then we have this group player. Which container? This is a control, agree and toe on group players from a container control shift DRI and so on. So there are many of those short cuts. But again, I'm repeating. You don't have to use them all. Just a couple of those workers will be very useful to insufficient. This document will be available for download on the visual to check it out. 6. SVG Layer: Ah, hello there. And welcome back. So Ah, In the previous video, I have introduced the prototype I interface to you and then this video. We're going to start by talking about the vectors. So there are two main vector files inside our Prada pie. So that is the rectangle. And over, um So the main ah extension for a vector files is svg, which is ah, short for scalable vector graphics. So we can a scale our vectors here up and down by holding old. Or we can hold old plus shift to create a perfect circle or perfect square. All right. So, as you can see, when we zoom in our object, our vector is ah, sharp and clear. So we don't have ah, pixelated object. And that's the main difference between between ah, images and the vectors. Okay, so here I have added one Maura circle, and also we can add some color sense so on we can customize the properties along the properties we can hear. OK, so I'm going to delete now. And I went toe open up Adobe X'd. So, um, the biggest is basically tool for creating you. I designs for mobile on the Web. And I have just created that this iPhone X template and the added one button which is consist off one text and one a rectangle. So I want to show you how we can import that design from Adobe's they so justly this import button. So select the art board Import size for iPhone X template is three X and we can leave those options as they are and just like import so basically put up, I really poor that design in a matter of seconds or merely second. Sorry. And here on the layers panel, we can see our button. So our button text is convertible so we can cover detto text. And as you can see, our icon change toe t, which is basically as any other text inside our prototype, I and we can customize our text. Aziz, we want So for example, let's say continue here and we can increase the with so we can see the whole texting one line. Okay, now it looks good and the for our rectangle or blue button, we can see that the one hour layers panel it shows, as is it shows that its image so basically when we port Some of the elements from our adobe's the to our prototype I they will not be converted toe Ah, vectors automatically eso for example. We can create the different animations for this rectangle. Don't worry. We can add the rotation scaling, moving and so on. But we cannot add, for example, ah, color and so on because we don't see feel cooler here for our rectangle and we don't see option to convert this to ah, to shape or to some vector file So and we can show you how we can how we can Ah, at this Ah vector file. So from our adobe's d, we're going to export this Ah, as svg which is ah, vector file. And then we're going to open up our prototype I and ah, we're basically going toe drag and drop our our rectangle spg file. And as you can see here, it's successfully imported and in our layers panel we can see a little different icon, which means that we can convert this ah toe surgery. So let's check that out how that can be done. So that's the right click. And ah, this convert to shape option will appear now. So now our shape is Ah, just is a regular victor is directing or over. Okay, so now Ah, for example, in our tap trigger, we're going to select our erecting a one and for the cooler. As you can see now we have our field caller option appeared. And now we can change our field quarter as well. Okay, so let's just adoration here and let's run and preview when you click that the Kuala real change. So? So, as you can see, it looks very nice. So, uh, basically, ah, on image files, you cannot change color and, for example, radios in something. But on vector fires, you can, and sometimes a prototype. I will not import all your ah, um all your design toe Ah, vector file. So you might want to export some of those objects toe ah svg and then import that as we re here in part a pie in the future, they might ah added that option as well to do that automatically, but for now, it can stay as it is all right. And basically, for example, let's check it out one more time so you can see we're importing our design from Adobe's D, And as you can see, we have a rectangle. It's an image, and we don't have that convert to shape option because our product by sees this object is the image and not as a vector file. So we must export this from our adobe's the toe a vector and then import that factor from our PC to port a pie in order to change the color if you want to change color and few more options. But if you just wanted to change rotation properties and scaling and moving, you don't need toe. It was a scale bar vector graphics instead that you can just use the image object. 7. Background Blur (From v4.3.0): Ah, held there and the welcome back. So ah, from a prototype I version 4.3 point. Oh! Ah, I US background Blore Ah, Layer has been added. So let me show you how this will work. And first, let's say that just a simple rectangle here and let's set the color toe green, for example. And now it's at, ah, big around blower layer on the top off our rectangle and as you can see, well, our layers below our background blower, our Lord, And also, when we select our background blower layer in the properties spell, we can modify Ah, some of those options. So, as you can see, ah, we can add the radios, for example, and we can select the blower effect. So there are many blower effects which you can choose from. You can, ah choose the light dark and there are some alternative material, tin material and so on. So you can customize by yourself and see which blower background will feel the most to your ah application, and you can change them whenever you want. 8. Video Layer: Ah, hello there and welcome back. So in this video, I want to show you how you can use Ah, video layer so you can find the video layer by clicking here. Ah, on the media icon. So, uh, you can use your own video, which your ah recorded earlier. Or you can download the video sample from the Internet. So in this case, I'm going down on the ah toe different drone for the just from the entrance. So on these pixels, not com, you can find many beautiful recordings. So I have already downloaded the two of them, and I'm going to show you how you can use them in your prototype. All right. So as you can see Ah, they are very beautiful And the high quality videos. So now I'm going toe. Ah, Add one video so we can dragon drop or we can use the media. Ah, Icahn. So here I'm going toe make this video fit in within height. Ah, to our screen. So I went to increase that And let's center this video vertically and horizontally as well . So when we ran our purview, our video is not playing. So in order to play this video automatically. We need to click and select our video and click this play automatically. And we can also check this a loop option as well. So Ah, now it's run our review. And as you can see, the video is ah, running smoothly. Okay, So, for example, you can use videos in your, uh, mobile applications, for example, on logging screens. And, ah, something like that. So now we're going to add the one a rectangle vector, and this rectangle will fit the screen. So in within height, and we were to set this, um ah, overlay color toe blow, for example. Okay. And we will set the opacity toe 60%. So basically, this will be overlay on top off our video. All right? So you can increase or decrease the opacity as you want. And here, for example, you can add the summer or getting inputs like user name and password and the log in button and so on. So that's on you. You you need to use your own imagination. And now it's at the different video. So I'm going to select this one, okay. And in the layers panel, I'm going to put this forest video below this overlay. OK, so I'm going to do the same to recite this video. And I'm going toe center that afterwards, Okay. And let's change the overlay color toe green this time. Okay? And now it's running application to see how this video should look like. So, as you can see, this is ah, video from the forest. And it looks very amazing with this. Ah, with this agreeing overlay color as well. So there are many cases in which you can use this video layer in your mobile or a web application. 9. Audio Layer: Ah, hell there and they're welcome back. So in this video, I want to show you how you can use the old the old layer inside the Prada pie. So here, saying this media icon and click audio So it will prompt you a window toe. Open up your song or any other audio file. So in this case, I have already downloaded one ah song named Would I like to buy a David Get up and I'm going to set this size in within height for this song to zero. So basically, it will disappear from the screen. Or you can just use this eye icon when the layers panel and just disable visibility. But that's on your So next we went with one text here and we're going to copy the author's name here. They were going toe pace Those names here in this text books. So let's increase the width of this text a little bit and we can set the size to 14. Okay, let's ah, decrease the with. And we can also said the field called, for example, for the percent. So, um okay, let's rename this text toe something like description. So here we're going to make something like, um, music player. You will see. So this first text will be the title or the name of this song. So it's type the name of the song. Okay. And we're going toe Ah, Change. Few parameters. Ah, in ah on this text. So we would decrease the font size and we can set our ways toe bold. Also, you can use ah, custom phone, but this is a system that forefront. So it doesn't matter at this moment, so let's decrease this with just a little bit. So our text can be centered on the screen perfectly okay. And next. So we're going to It was now ah, shape. And we're going to create Ah, two buttons. So from this directing or we're going to create a button. So hold down old and the drag one side. So basically, you will increase height and with the involved directions. Okay, so it's ah, also, I used a shortcut to copy this, erecting a one more time. Just use the control C and control veto pace that again. And this first play button will be blue collar and the pause button will be orange color. So I'm not going toe. Add the text on top of this play and the pause buttons. So we're going to remember those calls to know which one is which. Okay, so this text will represent the time stamp off our song. So when we play our song, it will increase automatically. So here I'm going to create the width and height of this text a little bit, and I'm going to center that just bill just above our play button. Okay, so next we're going toe adder some triggers and let's remove this. We don't need any text at the beginning, so I'm going to rename this text timestamp. Okay. Ah, and here I'm going to add the tap trigger. So Well, it's select our play button here. So when we step on our play button, we want to do some animations and I'm going to display back response. So I'm going to select Ah, our only song from here and as actually said, the display and there's basically so now I want to wear the one more thing. So here it said, One more step trigger. And this time we're going to attack trigger on our post button. So we're going to select this ah song as well. And for action, we're going to set the pose instead of play. Next, we're going to add the one Maura Trigger, which is the tech trigger. So we're going to select our song. And basically our detector trigger will detect when we play our song And when we pause our song Okay, so here we're goingto add the text response so we will set the soul this formula instead of the text. So I'm going to talk about formulas in the later videos. But for now, just watch. It's not a big deal. So here from the formula, I'm going to click this button and I'm going to click this ad circle. Then I'm going to select this song, and it will automatically appear this current time something to select that and click. Ok, all right. So we can also increase the size and a few other properties here, but that doesn't matter at this moment. All right? So basically, these detect trigger will detect when we play and pause our song, and it will accordingly update our text. Timestamp. So let's check it out. But Okay, so the song is playing now. Okay, lets Because And as you can see, the timestamp is all supposed. Let's play again. Okay, pulls again. Play again on Basically, that's how you can create something like Media player or music players. Something like that. And this is just one example. Use your imagination. And in the future video I'm going toe show you. Ah, more in detail, this formula thing. So don't worry about that. It's a pretty powerful thing in pro TEM pie. And also you can use this playback response toe Ah, at this sick. So basically, this seek means that you need. You can keep some part of the song and play, for example, from 30 seconds of the song and something like that. But we're not going toe add seek. For now, we just had the pause and play. So that's it for this video 10. Camera Layer: Ah, hello there and welcome back. So in this video, I want to show you how you can use a camera layer. So select the skimmer from the media icons here. Okay, so when you add that you will see this blank and black screen on the on your IOS template in this case. So here we can ah, check this box which says, auto start and we can select the rear own front or front camera. So when we around this on our purview, as you can see, there is nothing. And if you want to see the real camera, you need toe. Ah, use that review on your real smart phone device. So we're going to do that, of course. And basically unit to install this prototype I player in your ah, on your device whether it is ah, android or IOS. So there is an application for that. And as you can see, that's the name off our application on Google play. And it's open up this application on APP store as well. So there it is. So first you need to install a Donald and installed this application in order to use Ah, this preview from our prototype I And basically, when you open that application, you will need to scan this QR code on and it will automatically around this preview. And of course, you need to be on the same WiFi network in, you know, in order this to work. So remember that. And now before we do that, I'm going toe modify this design a little bit. So I have added this vector icon and let's convert that to shape. So now we can change the color. So let's change the colors white so we can see that on our screen here, okay? And we're going to place this icon on the bottom of a scream. So this ah little switch icon will basically switch from our front to rear camera and from our rear camera to our front camera. So you will see how will that look? And now let's change the original center and basically we're going toe. Ah, now at the top trigger. So when we tap on our switch icon were going toe Ah, add some animations and ah, you will see. So it's at this touch area 10 So we don't miss our icon. All right, so next it's at this tap trigger and let's like this. Ah ah, switch. So when we tap on our switch, we want toe rotate first. So let's rotate our switch. I quinto Ah, 360 degree and we can set the direction so that the four direction is right when the right side and we can also said the duration for our animation. So let's set to 0.6, maybe. Okay, and let's run our purview to see how will that look like? Okay, So as you can see, our icon is rotating. Fine. So next here, we're going to add one more response. So this time we're going to have a camera response. So we're going to select our camera, which is camera one layer, and ah, we're going to select from this drop down a switch. So basically that means whenever we click this ah, switch icon, it will switch from front to rear camera and from Maria camera to front camera so we can see that Onley on our real smart phone device. Eso we're going toe. Um we're going to run. Ah, our pro tip I player inside our application and we're going to scan this QR code. Okay, so I'm running a prototype player here and I'm going to click scan QR code. So this is my desktop and my monitor. So I'm going to scan this QR code and remember, you need to be on the same WiFi nordeste work or you need to be connected with you was being so click OK. And as you can see eso my camera is not that good but that's not important at this moment. You can see that everything works fine. And when we click this switch like, oh, it will switch to my front camera. So I'm pointing toe war. Um and let's switch back again to our rear camera. And as you can see, it works perfectly fine. So Ah, this ah camera layer is ah, very powerful tool when you are a prototyping, some applications that needs to use the camera. So also you can stop this and you can save this. Ah, as well. That's on you and thats well built for this video 11. Lottie Layer: Ah, hello there, and welcome back. So in this video, I want to introduce you to a Lottie layer. So basically, ah, lot is a Jason based animation that enables designers tow ship animations on any platform as easily as a shipping static assets. So Jason files Ah, off the slutty, our very small and the lot. The animations are available for Web, IOS, android windows and other platforms. Eso a lot animation can play urination and web or mobile devices while still maintaining a nice and high quality. So, uh, as you can see there ah, more positive stuff about Lottie. So this a lot The website Basically Ah, here on this lot a website. You can find the different free or premium animations for your application. So we will explore those animations later in this video. And if you're wondering, ah, why is it called Lottie? Well ah, it got name from this Charlotte ringer, a German film director. And of course, if you're wondering how this lot in emissions are created while mostly using adobe after effects, um but ah, let's now check or ah, animations. So here, let's use some popular ah animation. So as you can see those animations look buttery, smooth and are very beautiful. So when we select that, we're going to download eyes a lot of Jason. So you might need to log in first on this website toe download, but don't worry. Okay, so we have downloaded this adjacent file for this animation, and now we're going to import that same Ah, a lot. The animation inside our prototype I So let's true this Lottie Layer and let's select our Jason file from our PC. Okay, so this fire is a little bigger, so we need to decrease the size toe fit our with off our screen. OK, so let's ah, set it on the center here, and let's Ah, okay, So your CD dismisses that says pro TEM Pie does not support bit map assets. Infancy was in this Lawtey. So, uh, that's my Chapman. But in this case, it will work. So check those play automatically and loping options. And as you can see, this animation works. So if you're wondering, then why we saw that error message? Well, there are some cases in which you are not going to be able to play those lot animations is a Jason So off, for example, it's down with this. A check mark information and its import. Ah, this new animation. Okay, so we see the same error saying that the Porta pie does not support this big map assets. And when we play this, we don't see anything, so Ah, some of those animations will work. Some of those will not. I'm hoping that product, I will fix this error. But don't worry. There is another way off importing that animation into our prototype I So you can just download the This animation is an MP four file, and we can import that animation as, ah, regular video air. So just like this video layer, So, like this one? Okay, let's increase the size of that animation. Ah, let's select display automatically and the hope option as well. So let's hit review and there it is. So this is another way off using this animation in ah, pro tip I also you can disable this slope option if you want to see this animation on Lee one more time. For example, when you click a button or something so you can doll Oh, the many other animations. So they are free a lot animations. As you can see, this is a page where you can download or animations for free. And there is a marketplace here on this website where you can pay to get the more, Ah more better and the ah toe get the better in the more beautiful animations, of course, and those paid the animations arm or complex as well. So that's on you, and that will be all for this video. 12. Text and Input Layer: Ah, hello there and welcome back. So in this video, I want to show you Ah, text and the input layer. So Well, let's start first with the text layer. So we're going to add a simple text here. Okay. So as you can see on the right side off our prototype, I we see all the properties which we can modifying for our text. So we have a position. So we have a current position. We have the size off our text. We have ah also rotation front. Ah, away toe the phone size of the phone caller and more so by holding the old, we can increase the with in both directions. And if we just hold alter, we can see the margins in this red boxes. So let's ah, change the with toe 335 for example. And now our margins on the left and right are 20. So, as you can see, when we rotate our element, it's rotating from the top left corner. And now we're going to change the original center. So you should always set your Origen tow center. If you want toe, do a proper rotation also, we can't. We can change the opacity. Here we contribute the fund the way to the fund, The size, the color. Ah, so here I'm using a system therefore fun. But you can change that as well. Okay, so next week of the color, we can alignment, weaken, sent out text on the center or left or right. And we can set our text within center top or the bottom of the off this box as well. There is also option for letter spacing. So as you can see, our letters are now separated a little bit and it's type just the welcome. So you can see here. Okay. Also, we have a line height below that eso the fourth value is 1.2 and for example, it's type three and let's use ah, two lines of Texans. You can see those lines are a bit more separated. So let's increase the height of this box by holding old. Okay? And now it's increasingly sliding height. So as you can see, this is the effect will which will produce. Okay. Ah, next. Let's Ah, really those unnecessary letters and let's just leave this so welcome text. Okay, hold all 10 degrees. The height. Next, we have a feel cooler and basically feel color will set the background color for our textbooks. Okay, I'm going toe untracked this option because we don't need at the moment. Also, there is a border option and there is a shadow option, of course. Ah, also there is a petting so we can add a petting inside our textbooks. For example, if I say 50 we cannot see these texts unless we increases the width and height. Okay, so let's decrease to 20 for example, and is concede e. This is how our text with show okay. Also, we can increase the petting for ah, each of the direction I have to write top or bottom. All right, so? Well, it's center our text on the screen vertically and horizontally. And we're going to add a tap trigger here. Or maybe start. Let's at the start treaty. So eso started Trigger Will ah, um, use this response. Ah, immediately when that our purview is ah running. So we're going to add the move or response here, and basically, we're going to select our text and copy its X and Y position inside our move response. So let's copy this y position and let's pay that here. So those are the X and Y positions, the current positions off our text, and we're going to set duration toe 1.2. And of course, easing could be, for example, quart. And now we're going to move these texts on the left by holding shift so we can move that strike on the left side. And as you can see, when we run our purview, um, our text is coming from the left side to the center. Okay, So now we can also change the size for this text, of course. And we can change the easing so our animation could be ah, even better. So let's selected small trigger move response or it And, um also, we can select, for example, in this case explosion. And this can see this is how it should look like also, we can Ah, it is always a good choice toe experiment with easing by yourself to see ah, which easing will be appropriate. Ah, in your specific case. Okay, so that's pretty much it for our text. Lay our layer here and the next we're going to add the input layer here, so Ah, as our text that we also have ah similar properties. So we have position, size, rotation origin. Ah, and the for our input. We also have a text options so we can set the text for our input. Hell, for our input field. Also, we can change change the front like we have on our text. And here we get a placeholder, so ah, we can remove the test and we can only set the placeholder. But in this case, we can set the the place where there. Ah, little bit. Ah, less visible, for example. Okay. All right. And we can change this background color off our input. So we're going toe set our input background color, toe white so it can match the background. Okay, Next, down below. We should have ah, more options. Like so Let's see. Okay, we can add the radius to it. So let's zoom in a little bit and it's set to 10. Okay? 10 is a little bit much for my taste. I went to separators toe fire, for example. Okay. And I can increase the height by holding old. Okay. All right. So down below. Also, we have a batting Options. So as you can see, there are ah, left and right bedding in this case. So when we set zero hour email address placeholder will be, um, on the edge off the left side. Okay, so this is a keypad options. So we can set the type. For example, email. This is a return button. So we can said that, for example, toe next or send and the theme. We have two things light and dark. So when we click on our input, we get this default keypad, and it will automatically appear once we focus in our input field. So let's change this too dark. So you can see how will that look like? Okay, so this is the dark option, and I will return button. Ah, say go. Okay. So it's ah, for example, type change the type to number. And when we press the seam put, we get this number keypad. Okay? We're going to change that to email for now. Okay? As you can see, the looks very nice and you can customize this keypad. Ah, as you wish. Eso let's add the one trigger here. So in this case, we're going to have the focus trigger. So this focus trigger is used with the input layer, and we have two options. Focus in and focus out. So let's first it was a focus in, and it's at the Border caller here. 100% feel and aeration can stay as it is. So it's quick run in preview and as you can see when we click that we get this blue border . But when we click on the background, nothing happens. So we need to add one more focus trigger. And here we're going to select focus out. And as a response, we're going to also at the border. So here we're going to select our input layer, and we're goingto copy its border caller. So the border color in this case is Ah, this one. So we're going to copy this code and pays that here, of course, feel 100%. And when we focus saying this is a blow color and when we focus out by clicking on the background, it changed. Ah, the border color back to its original color. And that's basically it for this sir video. So you saw already how you can customize text in this input layer. So there are many options which you can use with them. You can customize them, Aziz. You want? There are so many options in so many ways to do that, just use your own imagination. 13. Constraints: Ah, hello there and welcome back. So in this video, I'm going to talk about constraints. So you might already saw our constraints. For example, when we create some way or you're going to see in the properties layer constraints. So this container is basically something like a group. And inside this container, we can place ah, multiple different ah, layers like shapes, media's images, text and so on. So, for example, when I click and drag our rectangle inside group, it will basically stay there. And when I select for example, this container and try to move this right angle will move along. So it is important toe Ah, for example, group of a few other elements. Ah, if you want toe any meat, then ah, with the one trigger and one response a while Speaking of that, for example, it's select our rectangle and the properties panel. You're going to see our constraints. And now I want to show you how our container and the rectangle will will behave when ah, we, for example, disabled this fixed height or fixed with eso you're going to see how will that look? So let's disable this fixed with and now when I said this container and ah, try toe resize this container you're going to see Ah, how will this react? So here on the properties panel, we see that our rectangle is constraint on the left and top. So let's try toe Ah, increase the with. And as you can see, our rectangle is Ah, basically ah, scaling on the left because it is constraint on the left side and ah, that's why so it's constraint on the left and a top, as you can see So those two constraints are active. Okay, I and ah, we can set to those constraints on the left or on the right or any other directions. So, as you can see when we increase the with off our container Ah, the left side and the top side, the state fixed. And that's because we have set constraints to our left side in our top direction. And as you can see, this is the kind of behavior which will this which this will produce. So you need to experiment by yourself to see how well this group container work with your constraints. Okay, so it's changed constraints just a little bit. For example, so you can see the the difference when we, for example, are disabled. Fixed height now So Ah, Now, for example, when we move our when we decrease the with, our rectangle will not shrink. But when we ah increase or decrease the height of faro container, our rectangle will shrink. So that's why because we have disabled the fixed height and our element is not fixed anymore and it will shrink with the size of our container. So now it's resized like that. As you can see, nothing happens because we have our fixed with and fixed size and our element inside will not shrink. Okay, so let's elect a rectangle again And let's ah, set constraints to ah, for example ah, right side only. And let's now increase the width and height. As you can see now our rectangle is ah, constraint toe a right side off our container. Okay, so now let's ah set, for example, bottom constraint. And as you can see when we increase the width and height of faro container, our rectangle is, ah constraints to a bottom off this container, so you don't need to keep in mind those constraints and you need to experiment by yourself in order to learn how to properly use them. When you're working on your prototype 14. Scroll/Paging Container: Ah, hell there. And they're welcome back. So in this video, I want to show you how to. It was, Ah, regular container page container, paging container and the scroll container. So you already seeing this? Ah, regular container. But I forgot to mention one. Ah, useful option. So Ah, that option is Ah, on the bottom. But first, a Zaken see, we can on directly here, select if we want to use a regulars container of scroll or paging container. We don't need to choose from our from our tools. Ah, uh, I'm Bob. Okay, so that's kind of short. Get here, and let's increase the size of this. Ah, regular container. So hold fault and shift to increase the waiting fighting every day in every direction. And now we're going to read the one, um, circle oval, and we're goingto, um, set that over inside our container. So I forgot to show you this function in the previous video. So select this clip sub layers. And as you can see, you will only see those parts of which are ah placed inside this container and nothing else . So that's a good the option. You can ah choose that as well. So now that we have seen that let's at this scroll container. So the scroll container with and height should match this device template and ah, here from our properties panel, we can select the direction for our a scroll container. In this case, it will be top and bottom and over a school will stay bounce so you will see what this balance means. And now it's at this rectangular inside our container scroll container. And let's copy this one more time by ah ah, you was in a shortcut. Control C and Control V. That's next. Let's increase the height of this rectangle and we're going to copy once more this rectangle. Okay, so let's copy this one again. And the start copy will be placed at the bottom of this. Ah, so it's dragged at around here. Okay. And as you see, those elements that are outside our device frame are not visible. And if we want to see them and we can increase this container height and as you can see, they are visible now, so this should not stay like that. And the stroll container should be in size off this device template otherwise well, we will not have the proper function. As you can see, we cannot scroll down as we wanted. So to fix that, we need to decrease the height off our scroll container to match the device height. So let's decrease that. Okay? And now it's a run our purview again. And see how well that will look like. And as you can see, when we dragged that when we scroll down and up, it works fine. And we can get the bounce effect, you see. Ah, and that bounce affect is ah, and is a regular part off UX on smartphones. But if we disable this and settle non, we will not see this bounce effect, and it will not look that smooth. But who knows? Maybe there are. There is some function which you want to use with this disabled option. Okay, so this was the vertical scrolling. And now I'm going to show you the horizontal strolling. So sometimes is ah better choice to it was a paging container. Eyes. Instead of using this ah, horizontal scrolling, you will see why. Okay, so let's change the direction for our scrolling here Toe a left and right And now let's run our purview. And when you scroll left and right, as you can see, we cannot see this left rectangle because of this horizontal scroll is kinda limited. And it is ah, better practice to use Ah, paging container instead of this horizontal scroll. But let's just see you cover this Look if we ah, place those rectangles a little bit closer so we can see just the 50% of this left rectangle. So it's close. Ah, okay, so let's remove all of those rectangles. And now I'm going to switch to paging container and the direction should stay left and right in this case and I'm going toe. Add the first this one rectangle. It will match the within height for our device template. And let's set the color for the this first rectangle toe orange. And we're going to copy this erecting a one more time. But it's time to set a different color. Okay? And ah, okay, let's move that just on the top. And let's rename our all right thing us here. So this one is purple and this one is orange and we're going to add one more rectangle and this time it will. It was this blue color. Let's time this blow. And now when we run our application, our preview, you will see how well that function so it will not work as you might expect it, so you can see nothing happens. We cannot see different colors because this is not the right implementation to do that. And also you can say this a custom container, all right. So instead, off setting all those rectangles on top of each other, you need toe. You need to move them on the side. So let's a select this blow, for example, and let's move that on the right and this purple on the left. So let's run our preview again. And as you can see, we cannot see this Ah, purple rectangle in a full screen. And that's because all our rectangles should stay on the right side. So we have a blue and let's move this purple along the blue. And now when we run purview, as you can see on the last week, out of nothing and we can see all off our rectangles properly now, Okay, so that works better. And now let's ah, let me show you how you can use Ah, top and bottom paging. So instead of setting those right angles on the side, you need toe set this bloke container first on the bottom. So let's change the reaction to top and bottom. And, uh, now it's ah, it's like this blue and it's place that just below are orange and this purple just below our blue. Okay. And let's run our preview. So as you can see, it works fine. And we can see this. Ah, white. But at the end, I don't know why is that? And ah, it's not working properly. But I think they will fix this little bag. So don't worry about it. I will send them. Ah, feedback about this and that that will build for this video. 15. Touch Triggers: Ah, hello there and welcome back. So in this video, we're going to start by explaining the triggers. So in this video, we're going to cover up all touch triggers. So we have a 10 off them and ah, they are already a self explanatory. But still, I'm going to show you Ah, each one of those. So first, we're going to add a simple erecting a vector here, and we're going to change the color of this rectangle and that we can maybe decrease the size later, but its first at the step trigger. So select this rectangle and ah, for the response we're going to choose, for example, a rotation, and we're going to rotate our rectangle in the duration off 0.4 seconds. We can also customize this easing and we can set our rotate by toe 360 degree. So let's run our for you. And when we ah, step on our rectangle, our rectangle rotates from top left corner. And now we're going to change the origin and wrote it again. And as you can see, our rectangle is rotating in ah, 360 degree, like we wanted. Okay, so Ah, that works fine. Also, you can customize easing by yourself in the duration. Of course. Next, let's said a double tap trigger and we're going toe. Just drag and drop this first rotation inside our double tap trigger. So just double tap in. You will see the same response, but this time using a double tap trigger. So it works. Fine. Um all right, so next one is Ah, Touchdown. So what? This touchdown trigger? Ah, actually, does it basically detects our tap trigger? It's basically tapped trigger, but ah, only when we touch a tower at the top of our finger. So we don't need to use a full touch on Ah, when I was smart device, we just ah ah use ah, finger top off our finger toe. Trigger this action. Okay, so next one is a touch up. So that basically means that when we tap or ah click And when we release our our click than ah, this rotate will trigger. So as you can see, I can also click there and ah, when I really is the click, it will activate. Okay, so that's Ah, also nice one. So ah, next we go, we have a long press and ah, you already know Long press. When you tap and the whole down your finger or mouse it will activate. Okay, so ah, let's get toe the next ah, touch trigger. So ah, next week you have a fling. So fling might be similar as a swipe, but it's not exactly the same. So we can choose the direction for our finger trigger left, right, top or bottom. So in this case, it will be right. And when we step and the basically like swept swipe on the right, it will trigger the rotation. Okay, So ah, as you can see, if we tried toe, use this thing. Ah, finger trigger on the right, on the left side, top or bottom. It won't work because we need to set the proper direction here. So if we set the top direction and then it will only trigger a rotation when we fling on the top, next one is pull. Okay, so let's transfer this rotation here as well. Let's selected the rectangle. And here we can set the distance the distance which we can pull our elements. So I went to set 30 pixels and you will see now. So let's decrease the size off our right thing a little bit so we can see how it is moving . Okay, so we can also see, like, this fellow or pulling. You will see that later. And here the racial, it'd be 0.3 seconds. So, as you can see, we can move that just a 30 picks off on the on the right side, and it will activate only when we, uh, pulled that on the right side. As you can see now we have a 60 big cells moving. And, uh, also, it is good practice to choose this with the resistance. Follow war pulling and basically you will see, like balance effect, you know. So with this pool, you can also create something like refresh function. So when you swiped from when you pull from above off your device, you can create something like refresh our animation and so on. So ah, from the top. Let's see. Let's see this preview. As you can see, it works fine. So the polling is also good triggered. It was inside your application. You will use that often. Okay, so Ah, the next touch trigger is a drag, so Ah, Okay, let's remove this rotate and let's at the new one here. So we can also here inside our drag trigger weaken set the three responses move, scale and rotate. So in this case, I'm going to set the move a response. I'm going to set a limit to screen. And as you can see, when we click and drag this element, we can ah, dragged this directing Go in each direction. Top bottom, left and right. Okay, so now we can, ah even set our direction on Lee to left and right. Or top and bottom. So let's check it out. So you can see we can only move this. Ah, your drag. Our element left and right and not topping bottom. And now, when we select direction for top and bottom now and only then we will be able to do that. Okay, so the next one is a pinch. So in order to show you this pinch, I will have toe around this preview on my smartphone. So there is only one response available for pinch trigger, and that is a scale. So Ah, here. You should have a limit. So I'm going to copy this within height off our rectangle, which is 104 And I'm going to set those values to minimum heightened with. And the maximum Crichton wind should be, for example, 150. And now I'm going to run that on my device. So here, let me just scan the QR code and ah, for this pincher, we're going to use the two fingers. So basically, it's a similar toe, a zoom function. So as you can see and using two fingers to zoom in or scale in the scale up and down. Okay, so you cannot. He was one of finger, only two of them. And that's the response. All right, so, uh, the last one is a rotate. So we have a rotate trigger and rotate response. And inside our rotate trigger, we can only use the rotator response. And, of course, in order to show you this rotate trigger, I'm I'm going toe run this preview on my device again. So in this rotate trigger, we're going to use the two fingers as well. So, as you can see, we're using two fingers to rotate our vector, and that's pretty much it 16. Chain Trigger: Ah, hello there and welcome back. So in the previous video, you seeing, ah, all the touch triggers. And in this video, we're going to start with the conditional triggers. And the first conditional trigger is chain. So Ah, we're going to use a chain and you will see how you can combine chain ah into your project . So first, let's add one over or one circle of actor, and the size off our circle will be, for example, 40 or 54 in width and height. And let's change the color to red. So this is just an example. And, of course, Ah, the name for our circle. Will we'll say button. So let's said one. The rectangle and this rectangle will have the full radius. So just said that the 100 we're going to crease the with off our rectangle. But first to set this button on the top of the layers. So ah, next let's increase the with and decrease the height a little bit. So what we're going to do, we're going to create just a basic and the simple swipe to unlock function, so this will not be in advanced swipe to unlock because I don't want to bother you in creating a video or more than 20 minutes explaining you all the details and how you can improve user experience. So this will be just the basic thing. So you can understand how this chain works. So as you can see, the left margin from our ah, read a circle is 12. And you need to remember that. So well, you will see why. Okay, so next we're going to add one more text. Okay. So ah, this text will say or something like swiped to unlock. And ah, this text will be centered here on on top of this rectangle. Okay, so, um, now we're going to decrease this Ah text box a little bit, so we can ah, center this properly. All right. So let's set the opacity of this text toe. Ah, 12%. No, sorry. 20%. And Ah, Okay. So this is just a simple and basic swipe function. And ah, you should not bother yourself about that. Okay? So now we're going to add a pull trigger, and we will select our red button and here for the direction we're going toe, choose the right direction and for the distance. So we need to calculate our distance and first select this red button and check it out. We have a 30 exposition. So when we move Ah, our red button are on the red on the right side, we're going toe seek. Ah, how Ah, our exposition, How much is our exposition? And it's Ah, 291. So we're going to select our poor trigger and for the distance, we need to type 291 minus 30 and it will automatically calculate our distance. So that's the maximum distance in which we can, ah, swipe our button. So as you can see, nothing lasts nothing more. And ah, it's perfect for our case. So we can also now started by adding our chain trigger. But also, you can add this follow our polling, but I don't recommend for this case. So now it's at this train trigger and here we can select our layer. In this case, it's a button and we can cite the property which we want to chain. And in this case, we're going to change our exposition. So let's leave that. And for the response inside our train trigger. We're going to add the simple color response. So we want to change the color off our red button. Okay, so feel cooler. And as you can see down below, we have a range. So the 30 is the X, the current exposition off our button, and we will set the range from 30 to 291. And for the colors from red to green. So basically, when we pull our red button, it will change the caller slowly as we proceed to our final exposition, which is Ah, 291. And when we beck our ah, move back our, um button, it will change the Kuala again to read. So Ah, now I can't change the place for our text. So it's below our button and as you can see Ah, this is how trained trigger Ah, basically works. So of course, that there is still a lot off lots of space to improve here. But this is just a basic example. And you can improve this wife function basically as much as you want. So there is no limit. You just use your imagination and that's it for this video 17. Range Trigger: Ah, hello there and welcome back. So in this video, we're going to explore a conditional triggers. Furthermore, in this case, range trigger. So ah, rain trigger will trigger when ah, certain value reaches ah or falls under a certain value and so one. So there are four different options to choose, and I'm going to explain what each of those means. Okay, So ah, here we can enter the value and as you can see, so with the 1st 1 is ah, arrow pointing on the right. It means when Italian players value reaches a certain value, 2nd 1 is a row. Pointing on the left means that when a target layers falls under a certain value, the 3rd 1 means when a target layers of value allies between two certain values. And the last one is ah, arrow pointing on the left and right. And it means that when a target layers value is outside the range between two sort of values. Okay, so here we're going to create Ah, we're going to add one rectangle and that this application off hours will be for increasing and decreasing the temperature in our house. So this is just a prototype simple and basic prototype. So Ah, let's change the color off our rectangle to green and ah, we're going to set the height multiple by two. Okay, so you will see why we, uh, at that. And ah, we're going to move this rating on the bottom so we can see that just a little bit. And the Y position should be 770. So this is the start position off our rectangle, so we never arrange. We're going to select our rectangle and let's say let's change the name to temperature. Okay? And here, as you can see, we can select the different properties for our rectangle. So we true value we should track. And we should track hawaii value because we're going to move this rectangle from the bottom to top. So let's select the why. Okay. And here, as you can see Ah, let's type or first lesser check it out. So we would select our rectangle and ah, we're going to move our rectangle. Ah, a little bit. Ah, on the top. So that means we're going to decrease the Y position. As you can see, it is decreasing. Okay. And ah, now I think I will add the I will set the 4/100 in the 40 y position and that that would be the position when our rectangle should change color from green to ah to yellow. And that would ah mean that Ah, we are increasing the temperature. So here I'm going to set this second option. So if our Y position falls under ah, certain value which is 440 why position? And basically, when we reach 440 or unless it will change the color So we're going to add the cholera response and the start position switch would be 770 of course. So let's say the color so color should be ah yellow. We can had ah feel toe 50% opacity, okay. And I'm going toe rename this trigger to range yellow. OK, so when we run, preview is conceit e. This is the start position off our a rectangle and we need to add the drag trigger so we can drag this ah rectangle. So we're going to select the move response direction, top and bottom and limit we're going to is a custom limit. So the minimum why position should be zero in the maximum shall be 770 which is our start position off our rectangle. Okay, you can see we can now drag this and when Ah, our rectangle reach 400 for the y position or less. It will change the color to yellow, but we need to add one more Arrange trigger, which will basically change the core from yellow to green. So we're going to do that. And as you can see, when we increase the temperature, it changed to yellow. But we when we decrease, it does not change the color to green. So we need to add one more drag. One more arrange trigger. And Ah, Okay. So ah, now we need to set the same values here. So it's ah, type here. 440. Okay, So when 440 is less or equals to the Y, position off our rectangle and the let's copy and paste this squalor and just changed to green. Okay. And you can see changes toe yellow, and when decrease, it doesn't change. So I think I know why. So we need to select why, Why? Instead of the X Okay, and now it should work. Okay, so it's increase. And when we decrease, it changed back toe, green color. So Ah, that's a good thing. And we want to add one more caller. So, for example, when we reach, why positional for, let's say one. Ah, 1 80 or 1 70 We want to change from yellow to red color. So let's add one more. Ah, range trigger. Okay. And let's ah, rename that to read. So let's select our ah, temperature rectangle. Why position and let's set this second option. So if our why position falls under a certain value, we're going to change to red car. Okay, Okay, that looks fine. So let's around our purview and it's concede changed toe Ah, yellow and from yellow to red. And that we need to add the just one more trigger, which will switch from the red, the to yellow and not directly from red to green. So let's select this temperature. Why position and, ah, we're going to say this first option. Let's say 1 70 So when 1 70 is less than or equals toe y position off our rectangle, we're going to change to yellow color and Ah, Okay, so our initial color changed, so we need to switch to move our range above. And now, as you can see, our start color is green, so Ah, that might happen sometimes. And ah, you need to keep in mind how you arrange your layers If you said this layer Ah, bottom. It will be a yellow color on the start. And, uh, okay, let's rename this down to yellow And this one down toe green so down to yellow should be above down to green and that's ah, it's higher he So let's round Prevue again And now it should the work perfectly fine. So from green to yellow, from yellow the green again and from yellow to red and from red to yellow As you can see it ah works exactly as we wanted. So, uh, I encourage you to experiment with the rain triggered a little bit. It's a very powerful trigger and you can do ah, a lot of stuffs. Here you can create a different kind of animations with the range and combining with the different triggers, especially conditional triggers. You can do ah, many great stuff. So that will be it for this video 18. Start Trigger: Ah, hello there and welcome back. So in this video, we're going toe. Continue exploring conditional triggers. Furthermore, and the next one is a star trigger. So ah, start trigger basically will be activated when the scene starts and there are a couple of options weaken truce. So the 1st 1 is a start after Trump. It means that start trigger will be activated after a jump response has been completed. Next one is to start with the jump, so start sugar will be actuated during the jump response. And also there is a tear adoptions option which you can check or uncheck restart every time . It means that each time when jumping was seen, the start treaty will be activated. Okay, so, ah, let's start by implementing the start trigger. So a steady trigger can be very useful for creating intro screens. For your application, for example, you can combine them many different responses to create a beautiful interest rings for your application, and that's exactly what we're going to do in this video. Okay, so, uh, here we aren't wear the one rectangle and let's decrease the size of this directing or just a little bit. Okay, so Ah ah, We need to change. The color, for example, is set the call to green and we want to copy Ah, the X and Y positions off that rectangle and of course, moved Trigger move. Response will be added here and let's change the region to center. So let's copy X in the Y position, and we're goingto set those values in the move response here. And the Y position is four or six, and let's base it here. Okay, duration should be, for example, 0.8 seconds. And now let's move this rectangle on the bottom outside of the stream. Okay, So when we start our purview and when our scene starts, our rectangle will move from the bottom. Okay, so let's add the one more response this time we'll use the rotation, and the duration for this response should be 1.2 seconds. Rotation should be, for example, three country in 60 times three. So our ah rectangle will ah rotate three times. Okay. And let's run our purview. So as you can see this ah rectangle is coming from the bottom. It it could be very nice and play for interest rate. So it said one more Ah response, which is a scale response. Duration should be your 0.4 and start delay toe one. So the size of this ratings should be. Let's see. So let's move this direct rectangle in the center, and it's increased the size. So ah, OK, The width and height should be 812 and copy that value in our control. Z control z again toe undo, and it's based those values in the scale response. So it's going to see Ah, this is how our start seen. Ah, start trigger will function when we run our purview, and this can be very useful. For example, you can also add here on the top of this rectangle on a message saying Welcome to our application and so on. So there are many different things which you can do. You just need to use your imagination. So that will be all for this video 19. Detect Trigger: held there and the welcome back. So in this video, we're going toe explora detector trigger, which is the last conditional trigger in this case. And ah, now we're going to have the one rectangle. So basically what the tech trigger does it the texts different kind of properties for our layers and we can select our layer here. For example, I selected this rectangle which is a vector, and I can detect basically every property change. For example, I can change. I can detect the X and Y positions. So that means when ah directing ah moves. We can detect x or y position and ah, at some responses to it. And as you can see, you can add the many different ah properties here in the detect trigger. All right, so also, we can ah, at the those media layers inside attack trigger and, for example, for the audio and video layers we can detect Ah, video or or the length and so on. Ah, but in this case, let's try using this input layer, okay? And desiccant ce In our detector response, we went to select that and also we can choose the many different properties plus three more text, text, color and texture opacity. So in this video, I want to show you how we can use detector trigger with text property. So let's like that text. And before we start, let's modify this input field just a little bit. So we will change the background and the this text opacity maybe, and so on. So first, let's said this place holder caller feel 20%. I think the 10 is Ah, a little bit less So 20. Okay. And the for the background color. We will select the white and it will only leave this Ah ah gray border color. So let's change this input layer name, toe email input and let's change the import tax toe. Ah, email. Or maybe let's let's set the user name, for example. It's a little bit simpler. And let's change this again to use the name. All right, so ah, next thing Ah, here. As you can see, what you're selected, our user name, input layer and the text property. So this is the text property which we want to track and the next we're going to add conditional response. So here, we're going to set if our user name and we were just like the text property. So if you're the name text and we can select different operators here on greater than less than less than or equal is greater than or equals equals or not equals. So in this first condition, I want to set, not equals operator. And so ah, for the value and went to live, that is a value. For example, in here, I'm going to set the stage. Your son. So this is my YouTube channel name. And basically, if the user name text is not equal toe Ah, this value I want whether certain the response here. Okay, so let's add a response here inside the conditional trigger or conditional response. Sorry. And let's select the red color on 100%. Okay? And I will, Let's check it out. I will network. So before we check, let's say the one more conditional trigger and ah, it set again this text. But this time in our second the conditioned response, we're goingto set equal operator. Okay? And just copy this Border control C and Control V here. And just change the caller from red to green. Okay? And now we can run our purview. So when we start typing, as you can see, it automatically detects our characters or our text. And it changed the caller toe red. And only when we type our name correctly it will change the border caller to green and the only if our conditioner is satisfied, it will be activated. And as you can see, when we delete even one character, it will detect this text. So ah, there are many great stuff which you can do with the detect trigger. You can detect basically each and every layers property, and this is just one example. 20. Mouse Trigger: Ah, hello there, and welcome back. So in this video, we're going to explore a two mouse triggers. So we have a mouse or ever and the mouse out. So those two triggers are mostly was when you are prototyping Web applications because we cannot use mouse on our smartphone. And, ah, now we're going to change our device template. So instead of using this iPhone X temp it we're going to choose a customer desktop template for a web. Okay, click. OK, and now it's Zoom out this a little bit and ah, our preview s. So let's decrease the size of our purview as well. Okay, okay, maybe just a little bit more. So you can increase or decrease the size of this preview as you want. And ah, now let's add the one text here. First, let's move this text on the right side. So it's changed the phone, for example, Toe 25. And let's increase the size of this box about it. Let's change the name of this text to home, and maybe we can set this text style toe bold. Okay, So, um, now let's place this here and we're going toe Adam Mouse trigger. But before that, let's create one more text. So just control C and control Veto pays that, and the second text will be named. Contact us. Okay. All right. So let's change the name of this layer as well. Ah, As you could see, we have ah, toe text here in our purview. And let's change the name of the slayer toe. Contact us or just contact and let's say the mouse over trigger. So it's like the first text, which is a home. And we're going to have the two response. The first is ah, caller and a second scale. So when we, uh, hover over our text, we want to increase the size and we want to change the color off our text. So ah, it's modified this just a little bit. So you can see when we place our mouse here. Okay, Junior, the caller and ah, we can also said the size so the size should be ah, scaled by and that we can scale this text by 10%. Okay. For the duration off 0.4 and ah, let's run our purview Hopes. Sorry. We forgot to set the size toe from scale to toe scale by so scared by real, increase in scale two will decrease. And I think we should also change the origin tow center. So our scale animations. So should the run from the center of this text. All right. And now it looks better. So you can see when we have our over it will increase by 10% every time. So we know two things that we need. 12 mouse outrigger. And this mouse outrigger will contain basically to same responses. So let's copy them and pay them here by control seeing control V shortcut and ah, here. We're going to just ah, change from this blue color to its ah original colors. So let's copy this original color hex code. Okay? And I space that here inside our response and for the scale, we're going to select this time scale toe or we can ah said the scale by but with the minus , you know, And when we move our mouths from our text, it will decrease the size and change color back to its original core. So of course, if you want a smooth animations for ah, those you should the change their easing so I recommend you using a linear easing for, ah, for Web applications and for this Ah, mouse over trigger. So, as you can see, let's at the same trigger and same responses to our contact us eso. We're going to select those two by holding shift and control C and control the shortcut toe copy and paste those two triggers and responses. So we're going to just change the layer here from home toe contact text, okay. And basically toe do the same thing. So let's run our purview. Okay, as conceit works very well. So we just need to change the origin from our contact text. And now it should Looks perfectly fine. All right, so Ah, of course, I already mentioned earlier. If you want a smoother animation, you should ah, experiment by yourself with different easings. I recommend using Galina easing for Web applications 21. Key Trigger: Ah, hello there. And welcome back. So ah, in this video, we're going to explore a key trigger. So there is only one key trigger and that it's like that. So here in the properties panel, we can see that we can choose keyboard or android device. So, for example, if we choose ah, this keyboard, we can see that we can choose a different letters, numbers and arrows and, of course, escape entering. So one and the patrols Android device we can, Ah, true the back of Backe volume up and volume down. So let's first check their with this android device. So we're going to add the one text here in the center of the screen. So let's increase this Ah box a little bit. Let's send her the text here, all right? And maybe we can Ah, okay, we can leave. That is, it is. And let's change this text or nothing. So let's remove everything and just leave these textbooks that this text will be named my text, all right, and it's at the one response here, so color it's like it's text and let's change the colors toe green. Okay, so 100% adoration toe zero. We don't need any durations here, so Ah, we're going to wear the tax here. One text response as well. So the text will say volume up. So basically, those two responses will trigger when we press the volume up volume upper button on our smartphone. Okay. So Ah, I want to add one more key trigger. So this time we went to select Android device, but volume down this time, and we're going to copy those two responses. So control C and control V inside his second kid risk perky trigger. And we're going to set our caller this time toe. Ah, maybe green or a story orange. And for the text, we're going to say volume down. Okay, s. So now I'm going to run a this ah, pro tip I on my smartphone. And let's first scan the QR code. Okay, Just, uh, a second. Okay? And now when we press our volume up, it will say a volume up text and will repress the volume down. It will say volume down. So I'm pressing a volume up and down button on my smartphone as you and as you can see, the text and the text calories. They're changing as well. So this is Ah kee Trigger, which works perfectly fine on our smartphone. And I will dilate now. I really now those two triggers and I will add the new triggers, but this time for ah, for a keyboard. So we're going to select different templates were just like this desktop template. Because this will be ah, keyboard trigger will be for our web application, for example. And ah, OK, I'm going to leave just this text and I want to change the size Fun size. Okay, Well, text style, toe bold. And let's ah, and some texts here. So this first text will say left. So we want to add the key trigger when we press Ah ah! Left or right? Ah, keep on our keyboard. So let's select first. Ah, this left. Okay, First, we're going to do the left thing. And when we press our left on left arrow key on your keyboard, we want to change the color off our text. So this text will say ah left Okay. And let's change the text here to left. Of course, the text box for being a bit okay. And the text should be center Now I'm going to add one more text. So just control. Seeing control via shortcut. This will be text, which will say All right. Okay. And now Ah, let's get back to our key trigger above. So Ah, first we want to add the blue collar for our left text. I feel 100%. Ah, OK, we're going to leave that as it is. And we want to add one more caller a response, Because when we press our left Ah, arrow key. We want to change the color off our left text toe blue. And our write the text should be It's the fourth quarter, which is a great color. Okay? And, ah, the reason why we are adding that because we're going to add one more press key trigger. And this time keep trigger will be for our right arrow. So let's like this, right? And we're going to copy those two ah colors. So just control C and control the inside our second key trigger. And ah, we want to just change the values here. So ah, for our right Ah text wanted to set the blue collar. And for our left text we're gonna set this gray color. So let's run our purview and ah, you cannot see. But now I really Ah real press left and right key arrows on my keyboard. And as you can see, the color off, those texts are changing and it works perfectly fine. So that will be all for this video. 22. Input Trigger: Ah, hello there. And welcome back. Somewhere in this video, I'm going to show you how to. It was input triggers. So there are two import triggers. Focus and return. So in this video, I'm not going to show you how to use the return trigger because it is a self explanatory. Basically, it is activated when the user presses the return key on ah, native keyboard on a smart device or on a physical keyboard. So we're going to skip that for now, and we're going to focus on our focus trigger. So let's add, wanna focus trigger? And it's at the 11 input layer. Of course. Okay, so the let's modify our input layer just a little bit. So let's change the placeholder, uh, opacity toe, maybe 20%. Okay. And let's change the placeholder text toe email address. Okay. And now let's customize this input just a little bit so willing to change the background color, toe white. And maybe we can add some radios to it, for example, with set the the radius to our input layer 10. Maybe so you will see its increased the size of this input layer as well. Okay, Just a scroll down below. So we confined our radius. Okay, let's say that it took 10. Okay? And now in our focus trigger, we're going to add some responses. So let's rename this Slayer and ah, now it's select our layer and we have two options. Focus in and focus out. So we're going to is the both of them. And now 1st 1 you to is a focus in. So let's say the two responses the first response will be born will be border. So we're going to change the border off our off our input layer toe, bro color and we're between the size or a scale response. But first, let's change the origin tow center for our input layer. And now it's a scale our input layer by 10%. Okay, so ah, now it's increased the duration for a 0.3. It will be 0.3 and ah, okay lets around our purview. So when we focus in as you can see the scales by 10% and it's change, change the border caller toe blue. So we're going to add one more focus trigger. We're going to copy those two responses here so control C and Control V. And we're going to just change that. This aboard record to its original border coil, which is Ah, this one down below. So it's a copy. This hex code, and it's pays that instead of this blue color, okay. And for the scale, we're going to change the values willing to set the minus 10. Okay, so let's around a preview, and as you can see when we focus, Okay, So something was wrong. And I think I know what s O for the second focus trigger. We need to select focus out. And now it's around our purview. Okay, as you can see, a fluke that works perfectly fine. So when we press on our background, it will focus out, and the animation looks beautiful. So that will be all for this video. 23. Tilt Sensor Trigger: Ah, hello there. And welcome back so well. With this video, we're going to start with the sensor triggers. So most of those are sensor triggers are used with the rial smartphone device. And we're going to start by using a tilt sensor at first. So Ah, let's like this still sensor and in the property spending, we can select three options. So X, why is that so basically, that means we can feel our device. Ah, x axis. Why and that? So you'll see now how a network. So let's said the just a simple rectangle. And for the response, I went to choose a maybe Ah, the perfect response in this case will be three d rotate. So let's add that and ah, here in the properties panel we can choose, for example, people Ah, it will be toe origen in the region will be set toe center. So let's ah said it original center, okay. And ah, next week, ever perspective that we're going to leave that as it is for smoothness. I recommend you to through this middle option instead of this one, but never mind and next week ever mapping. So as you can see in the first we have ah, degree from a minor story toe 30 degree and the angle from a zero toe 1 80 So Ah, And for the down below options we control this which pointing on the left arrow, pointing on the left. So let's ah, run our device our purview in our device. So let's scan the QR code here, and I recommend you to try this on your own because I cannot record my own device while I'm tilting. So now I'm building my device a left and right, and this conceit is rotating. So now I'm going to choose this one and, uh, has been See this This is basically how the y feel should look like so top and bottom, you know, And ah, for the last one, we should have ah zed tilting. And I want to show you that just in a sec. So select this field from above and you can see we should ah, use the why for our up in bottom rotating. But it doesn't matter, so they decide. Just an example of me showing you how to do that. And basically, I'm not tilting my device up and down top and bottom of the This is moving left and right. So Ah, it is not as I wanted, but it doesn't matter. And now it's Ah, let's use this said. And ah, if you're wondering what does that means, I'm going to show you one image. So basically Ah, we're going to tilt our device something like that with this Ah said and ah, as you can see now I'm feel thing. Ah, that that excess and ah, this is our rotation moving. And again I recommend you toe Try that on your own. It will make more sense to and that will be it for this video. 24. Sound Sensor Trigger: Hello there and welcome back. So in this video, we're going to explore a sensor triggers Furthermore, And in this video, we're going toe klik This sound the trigger So Ah, the sound trigger is used the on your smartphone device and the first let's said the two. Um let's copy another circle. Okay, So basically sound trigger will let us ah add some responses when ah, small phone device detects Ah, some sound or ah, vegetable strength. So ah, As you can see, we have one small circle and one bigger circle. So this bigger circle will have ah size of 330 in width and height, for example. And the color should be green as well. But with the opacity off 10%. So I'm not going to be ableto ah show you this on my smartphone device because I have received some error while recording this video. However ah, I encourage you toe wet, do that on your own. So basically, this is how our property step should look like so in the range off from 40 to 100 decibels , we want to increase the width and height off our circle from size 240 toe 330 for our big circle. And basically, when our smartphone device detects sound, our big circle will increase and decrease its size. So remember toe set this original center so our circle can scale properly. 25. Compass Sensor Trigger: held there and the welcome back. So in this video, I'm going to show you how to use a compass trigger. So a compass trigger is used on ah, smartphone devices. And here as the responses, I can choose the only few of them and in this case, I'm going to choose the rotation. First, let's create the one rectangle here, and we're going to decrease in the with and increase the height of this vector. So the with that should be maybe around 15 and the height can be a randomly increased. This is just an example. Of course, we're going to increase the radius on the change the color. Okay, so now you know, rotation response. We're going toe select our rectangle. And here, as you can see in the range off zero toe, 359 degree, we will rotate our element from 0 to 359 degree or angle. Sorry. And now I'm going toe said the original center, so we can rotate our rectangle properly. And now I'm going to scan the QR code. And around this preview on my smartphone, the rice. So I'm holding my phone. Ah ah in my hands and I'm moving around. And as you can see, this compass sensor is working perfectly fine. And, uh, in this rectangle is moving along. So that's basically how this compass trigger works. So I encourage you to every time, start to your own project and tried by yourself. 26. Proximity Sensor Trigger: Hello there and welcome back. So in this video, I'm going to show you how a proximity sensor works. But before we continue using proximity sensor in practical examples, I want to show you and tell you something in theory, what the proximity sensor is, and it's basically sensor that is able to detect the presence off nearby objects without any physical contact. A proximity sensor often emits an electromagnetic field or being fulfilling tonic magnet radiation, even read, for example, and the looks for changes in the field or return signal. The object being sense is often referred to as the proximity sensor target. Okay, so now we're back it with a prototype I and let's add a proximity sensor trigger here. All right. Okay. So, uh, as you can see, we can select two options far too near or near to far. So we're going to leave the fourth option and the as can see we're going to add one scale response. And of course, let's add the one Ah, circle here. And let's change the color of this circle toe green. Maybe so. Ah, origin, tow center. So we can scale that properly and basically okay, the original size in 100 by 100. And we're going to scale our circle toe 500 in width and height in the duration off 0.4 seconds. So Ah, basically, Ah, the proximity sensor will work when we run that on our device. And as you can see, we need to add the one Maura proximity trigger and this time near to farm. And we're going toe scale. We're going to copy this scale and pays that here Just control C and Control V, and we're going to scale to 100 deep in within height. So when we run this ah review on our smartphone device, I'm going to show you how will that work? So basically, when Whenever I move my hand on top of this proximity sensor, this circle will increase its size in within height. You cannot see my gender right now, but as you can see, it's Ah, this circle is growing. So that means my hand is over or on top of this, a proximity sensor. And when I move, my hand away on this circle will decrease its size toe 100 pixels in width and height. So that's pretty much it how this proximity sensor works encourage you to try that on your own. Ah, you will see it will be much better user experience for you. 27. Receive Trigger: Ah, hello there and welcome back. So in this video, I want to introduce you with the received trigger. And before we get into a practical examples, I want toe telling theory what they receive the trigger is and how it works. So basically received trigger cannot be used or alone, and it must be used with the Senate response received. Trigger could be used to receive messages from a different devices or a message from a component as well. So there are a few channels through which we can send a message and the 1st 1 is a component channel and that we can basically send a message from our component to our scene outside the component. And basically, if we implement our component into our for example, first scene, then we can send our message from our component to our first scene or any other scene which has our component Next week ever prototype. I stood your child and this channel is used to making directions with multiple devices. And I'm not going to show you in this current video how to use that. But basically you can use ah multiple devices. Ah, and the part applies to do installed on them toe communicate and next week ever enjoyed broadcast channel. So this challenge is used mostly by enjoy developers toe communicate with the other applications in the device and the external hardware. And then final One. We have a current seen channels of these channels basically used in the same scene so we can send in the receive message from the same scene. Okay, so now it's getting toe practical examples. So we're going to add to receive trigger here. So click on that and ah, okay. So I can see here we can select the channel. So in this case, I'm going to select the received from a component because we're going to is a component in this current video to send a message. So select that and for the target. As you can see, we don't have any target because we don't have any component yet. So let's create one component. The name of this component should be a box. And as you can see inside this component view, we want to add a simple rectangle named the Box one. Yeah, let's select our box component and let's decrease the with toe match our rectangle Okay, so now select our box and let's add the tap trigger. So we went toe at the Kuala response, and we want to change the quality off our rectangle when we tap on that. So this is just a simple example, and I'm going to show you how you can use that. So it's considered step trigger works fine. And we're going to add the one more variable here. Okay, so this is a variable name variable one, and that the fourth very will be zero. Okay, so let's set the conditions say, if variable one equal to zero, then we want to trigger this color response. Okay. And next, we want toe at a sign response and a sign our variable a different value only when we ah, trigger over first condition. And in the second condition, we want to set if our variable one is equals to one. And then we went to copy this scholar in the Sinai response. But we're going to change the values just so here. Let's select this a great color. Okay? And for the sign willing to set the number zero this time, So basically, this will act is on and off switch so you can see we can type to activate and deactivate this erecting a call. And now we want to add a center response. So the center responses used along with the received trigger. Okay, so here, select the channel, and I'm going to say the channel sent to a parent and the parent is basically a scene in which we have our component located. So for the message, we're going to say a message one. And basically, this is a key off our message, and I want to check this option. Send value together and the value will be activated. We need toe type this. Ah, text inside the double quotes. Okay, so basically, this is Ah kee and value pair. So the key is the message one in the value is de activated in our second condition. Okay, So when we activate our cholera response, we want to send the message activated. And otherwise, we want to send the message. The activated. Okay, so that's pretty straightforward. And now I'm going to show you how toe Ah, you was that in our ah seen one. So let's add the two components. Box one in box two Okay, so it's allowing them a horizontally and let's align vertically. OK, so let's add the tomb or text layers here. So control Seeing control. Vato, copy this layer and let's rename this text. So text number two. Let's move that here. Okay, let's center the text of this off those two layers. Okay, so inside it's to receive a trigger. We need to say that ah received from a component and therefore the target. We need to select our components. So first, let's like this Box one. And when I click this message input, we automatically get this message One. So we're going to check this option. A scientist, variable and sheer. We're going to create the new variable number one in the second variable number two. OK, so those variables will be text variables. And here, you know, we received trigger. We want to set aside our value to our variable number one and we want to send a text one text toe, our variable number one. Okay, So sad like that Click OK, and we want to copy this received trigger once more against. So were to do that. So just first around this preview. So we can check it out so you can see this text off. This first box component is working fine. And let's Ah, now it was a shortcut. Control C and control Veto copy our received trigger. Okay, so now in this second receiver, we went toe received trigger. Went to just change this toe box to and assign variable toe number two variable in the text toe text. Oh, okay. And here we want to change this from one toe to okay. And now everything should look and work just fine. It is. As you can see, those two components work separately, and every component is working perfectly fine. And I think it's a straightforward here. So basically, we're sending a message from our component to our parent scene, and we're assigning that those values to our variables and we're displaying the values to our text layers. So what? That will be all for this video 28. Reorder Response: Ah, hello there. And welcome back. So, uh, in this video, we're going to start by exploring different responses. So we have already covered the lots off responses already. So, as you can see, I have already show you how toe move scale rotate three D, rotate opacity, caller radios, border and the shadows. So you kind of know what those responses are actually doing. And ah, there are some of the responses which are not self explanatory, like those which recovered already. And the 1st 1 is a reorder. So we're going to start this video by exploring. Ah, what this reorder response does. So let's select that. And ah, to show you that we need to create three different direct angles. So this is kind of a test which I prepared for you to understand better so the first the one rectangle should be named the back. Okay, this back rectangle, for example, will have a yellow color. And ah, this meal will have Ah, maybe blue collar. So let's have the blue color to our middle rectangle and this one yellow. Okay. So, as you can see, our back or yellow rectangle is behind our blue rectangle. and the 3rd 1 will have the name off top, and it will be on top off those two rectangles, and it will have a color off purple. So you can see now you cannot see this brew rectangle because it is on the top of that. So we're going to move this top or purple rectangle on the right side just a little bit so you can see this. Um, this ah blew right ankle from behind. Okay, so those layers are standing that way and here on our tep trigger, we're going toe first at one text. So this text will basically trigger this step trigger and figure our responses, So ah, let's name this saree order. Okay? Lets said they just the background color so we can see that the it looks kind off a button . Okay, Just a lighter grey. That's fine. And the on the tap trigger, you just allergies text layer. And when we type of this text layer, it will trigger reorder response. Okay, So now So, like, this three or the response, and as you can see ah, we can select the layer which we want toe reorder, and we have four different options. So the first option means that between two are layers that one will be on top in the layers . Hire him. So we have three of them, and in the reorder we're going to select the top. So when we click Harry order, nothing happens because our top rectangle is already on the top of the layers. When we selected this one the second, it means that between two layers, our selected layer will be on the back. So when you click that as you can see now, our top rectangle is behind our blue rectangle, which is in the middle. Okay, so the title options means that our selected rectangle or aware, will be on top off all other layers. As you can see, nothing happens because our top layer is already on the top and the the last option means that our layer will be on the back off all other layers. As you can see, we cannot see this Ah, purple atop a rectangle because it is ah all Ah, on the bottom of this layers hierarchy. So when it's like this, a middle and click this one, as you can see now, our middle layer is on the top off all our layers. Okay. So you can get it how it works. So basically this saree order response is a doing or rearranging our layers in our layers panel here and it can be very useful even though now might not look like that way. But there are plenty off animations which you can arrange with this with this reorder response. So that will be all for this video. 29. Scroll Response: Ah, hello there. And welcome back. So in the previous video, we started exploring different responses, and we already started with the reorder response. And in this video, we're going to explore a scroll response. So first, let's add the one container, a simple basic container, okay. And ah, here. We're going toe at the one rectangle for now. And we're toe place that inside our container scrolling container. So it's copies by control C and Control V. And this second rectangle will have the height at which is outside off our our device template and women toe copy once more again, this right angle. And we're going to place that down on the bottom as well. Okay, so next we're going toe, add the one Ah, circle. But this circle will be outside off our scrolling container and that this circle will be ah , located it down, knowing the right corner. Okay. And ah, now we're going to add the scroll response in our tap trigger. So basically, our tap trigger will be for our button, which is blue button or circle. Okay. And let's first add the stroll response. So here, we're going to select our screw our container one and for the tap trigger willing to select our circle. Okay, so here women toe scroll by. We're going to select the scroll to Sorry. And here, instead of typing some values I'm going to it was, ah, formula. And I'm going to select the container one. Why position? So basically, when I click this, it will. I never get me to the top of this container, So let's check it out. How? Well, network. So let's scroll down below. And as you can see, when I click this circle, it will never get me back to the top of this scrolling container. Okay, Okay. So that looks fine. And that's basically just one smaller thing, which you can do with this scroll response. There are many stuff which you can do with that, but this is just an example. So I encourage you to try that out by ourselves and that Phil Bill for this video 30. Jump Response: Ah, hello there, and welcome back. So in this video, we're going toe Continue exploring different responses and in this really were going toe explore jump response. So basically, what this response does it basically redirect us toe a different scene? So as you can see here, we can see our first scene. So this is the fault name for our scene Scene one. And we're going to create another scene by clicking this button. But before that, let's add the one shape rectangle. Okay, so it's increased the size in with height, toe match, the device template. Okay. And, uh, we're going toe set the tap trigger for our rectangle. It's a rename that toe a background. Okay. And here, let's like that and ah, here. We're going to select the scene to But before let's create another scene. Okay, So as you can see, this is the default name for the next scene. And here let's select that now, As you can see now, it appears in the in the drop down. Many here for the transition. We can choose whatever you want for this case. Slight in ah, right to left. And let's add one more trigger one more response. Color response. Select the background rectangle and the change color to green. Um, feel 100% the racial 0.4. And for the jump within toe added delay toe one second. Okay, so now when we tap when our ah, um rectangle it will change the color and then it will slide toe a new scene. So let's double click on the second scene and here we're going to add the one text. So let's increase the front, and this text will just say, Ah, one for now. We might change that later, okay? And let's add a tap trigger here as well. We're going to add the jump response. We decide the scene one so we can get back from our second scene tools. The first scene transition sliding left to right in this case. Okay, let's first choose our first scene and then around a preview. So now wouldn't we click on our when we tapping our rectangle? It would change the color and then which will never get back toe. It will never get us to a second murder scene. Okay, so I just changed the number here, and, ah, for example, when I click this okay? And when I click the number, it will never get us back to the first scene. But as you can see, when we get back to on our scene, we already see this green quality, you know? So if you want to reset everything, you need to select this. Reset the selected scene and you could see the selected scene is seen one. So when we never get to our seen one, it will reset that scene. So let's ah, around that. Let's elect scene one and let's around the preview so we can check that out. OK, now click number two. And as you can see, our first scene is Ah, reset it. Okay, so we no longer see a green collar when we get back to our sin. And that's optional choice. You can reset where you don't need. No, that's your choice. So that will be all for the jump response 31. Link Response: Ah, hello there and welcome back. So in this video, I want to show you Ah, link response. So before we Ah, getting toe a practical examples I want to assure you in theory, options off a link response. So there are two options. You are l in the u R l A scheme. So Ah, you are all means that basically you can enter website you are well and visit the website in the browser or in the application browser on IOS or Android Ah, and the u R l schema means that ah, you can open a system application in third party application on IOS and android devices, for example, you can enter Ah, your l scheme us like male to hello with Prada pie dot io and basically this will problem to toe open up some of mailing application or, for example, when you write the U. R L schema With this phone number, it will prompt you to open summer a dialing application and for example, if you type of what's up like that, it will basically grabbed the text and open up your what's up application and share summer data. So there are plenty of options which you can choose with this link response. And also ah, link response is often used with the formulas so you can enter a formulas and use the link response for more. Ah, dynamically searches. For example, We can a type some your l like a Google and we can enter a search query by con Captain ating with some dynamic input from our input layer. So I'm going to show you now, all of that, and ah, let's get started, OK? Eso first in our product pie, we will add the one text and we're going to add a tap trigger for that text. Okay, so, uh okay, let's add the one step trigger and we're going to add the link response here so you can see in the properties panel here we have a u r l and formula. So those are two options and ah, you also has this option toe check open in a browser and ah, you will see how will that look? So first, let's add this text on the center of our screen. Now it's increased the width and height, and I'm going to change the name or the text off this text layer. It will say something like Go for example And it's at a background color for this so it can look something like a bottom and what we want to do. Ah, when we click these go button, we want our preview or our prototype to navigate us to a website. So here on our tab trigger, we're going to select this go text and inside this link response in the u r l we want to say Ah, we will dot com. Okay, And now it's around our purview on the desktop and a see How will that look? Okay, As you can see, it opened up. Ah, this ah exact website inside our browser. So there is also option toe check this opening air browser And when we ran ah, run our application inside our smartphone device I West or Android. It will open up a regular browser on smartphone. So it's first scan this okay, and as you can see, when we click that it opened up Google Chrome browser and it works perfectly fine. So also, there is option to use that this u r l schemers. So, for example, I wrote this a male tour schema and let's run on our smartphone device to check. How will that look? So basically, when we click our step when we tap on our go button, it will prompt us toe open summer mailing applications so it can, As you can see, it asked us toe, open a Gmail and we will around that and ah, to field it will be automatically populated with our pretty fine text, which is hello at Prada pie dot io. Okay, so let's continue. And next week, Minto said, this formula and for the formula we're going to add in the quotes https www dot google dot com slash search And the only sorry, not like that would search and equal Q equals okay and that we're going to close the quotes . So plus and we're going toe It was dynamically text here, so let's add a text input first, okay? And this text input will basically let us all right, some text year and we're going to query a search on Google, so you will see how will that look? So first, let's change this text toe something like search okay, and we contribute a quality so it could be a little more. A little less visible. Okay, this is just an example. So in the link here, we're going toe. Now aside, this formula button, which is on the right side, which says ethics. Okay. And here Ah, we're going to clear this ad the button. And we're going to select input one, which is our input layer. And we're going to select text from this Drop down many. So Fleek. Okay. And now we're going to run this, and you will see how will that look? So hearing the search, we're going to type, for example, Facebook. Okay. And when we click go, it will open up a browser and search for Facebook on Google. And you can do this as well on your smartphone device. You're just need to check that option to run on ah, in APP browser. And that's basically so this link responses are very powerful, and I encourage you toe tried out 32. Reset Response: Ah, hell. There and the Welcome back. So we're in this video. I want to show you how to. It was Ah, reset the response. So you might already guess what this Ah response will do. Ah, we had already checked buffs which resets the scene. But this time we do not hear toe go from one nothingto the second scene in order to reset the currency. So we're going toe reset, our current seen basically with one tap trigger. So, uh, let's first edit our ah, our application here a little bit. So we want to add a one button which will say apply color. And it said the background cholera. So it could be Ah, something like a button. Okay. And the second text, we will say reset. So when we click this apply call button, it will change the color off our rectangle toe blue, and the one we click Reset. It will reset all the animation from the current scene, so Ah, we're going to check. How will that work? Okay. All right. So let's center that And ah, when our first step trigger, I'm going to select the reset text and this Ah reset First our our first step trigger contains the reset response and in our second tap trigger ah, well, basically, change the cholera off our rectangle. So let's ah, debt and let's around our purview. So let's click this apply color and you could see it changed the color Tebow. And when I click reset, it basically resets Aled the animations from the currency. And that's basically it for this. Ah, reset. Ah response. It's basically straightforward and already self explanatory, but still I just wanted to show you in the practical example, so you can check that out, and that's what we'll for this video. 33. Stop Response: Ah, hello there and welcome back. So in this video, I want to show you how to use Ah, stop response. So we went white This stop response inside our tap trigger. And we need to sect away or soul. It's add some layers inside our prototype. So we went with the 1st 1 a circle, and we're going to decrease the size of this circle. Okay, let's increase just a little bit more. And let's place that here on the left side. And we're going to add one more layer in this time. Ah, rectangle. Okay. This rectangle will be below our circle in the layer spell, and we're going to decrease the height of this rectangle. And I want to do that manually because I cannot do this up precisely. So I'm going to set the height to 10 or maybe five and the Okay, So we went toe. I want to set this rectangle on the center of the screen, and I want to hold this old and increase the with in both in the boat directions. All right. So I'm going to decrease the opacity off our rectangle just a little bit. So Tory capacity 20% and our circle will have a book are Okay, so next women to add one more circle and his circle will basically represent the pause button or stop button. It doesn't matter. So, uh, and this step, sugar, I want to select this poza button and on stop response, I wanna add Ah, this first blue circle. So I'm going to rename this blue circle to something like movement. And in our stop response, I want to select that the layer now. Okay, so now I'm going to add one more tap trigger and that this step trigger will contain a move response. So Ah, when I tap on our blue circle, I want to move this circle on the right side. So let's move this. Ah, circle on the right side so we can copy its exposition. Okay, So, control, see? To copy. And we can now move that on the left side. So let's pace that value here in our move response. And let's said the duration for a zero point Ah, or maybe six seconds. Okay. And when I when we click this as you can see, this circle is moving on the right side and when we press this yellow button, it will stop our animation. So that's basically the purpose in the whole purpose. Off this stop response, it will basically stop the animation, the animation, which we specify in our prototype, and that will be all for this video. 34. Assign Response: Ah, hello there and welcome back. So in this video, I want to show you how to use a sign response. So first we're going to add a tap trigger and then let's add a sign response. So in the property spell, we need to select a variable. So first, let's create one variable, because our sign response is always used the alongside with the variable so down below. Here we need took us like this. Add button and there are two options. So we can ah create vary before all scenes or for this scene on Lee. So basically, that means that this variable will be visible in all since or ah, only in this currency. So we need the this local variable, it's it and the properties panel. We can select whether our variable should be ah, number, text or color. So I'm going to say this text and here we can specify a default value for our variable or we don't need toe that's optional. So I'm going to remove this text, okay. And, ah, now. Ah, in our step trigger, we need to add the layer. So first, let's add the one rectangle. So this rectangle will basically represent a button. So when we click this button, we want to assign some value to our variable. Okay, so it said one more layer this time a text layer and that this text wheeler basically show our value from our variable. Now it's center, this text and on the step trigger on our top trigger. We want to add a rectangle. Okay, so let's select our right angle layer. We can also change the name and the layers panel. Of course, that's always a good practice. And ah, in our assigned response, we want to select our variable and down below where it says formula where we want to add some text. So when you were adding a text, it's always a common practice. To it was a double quotes inside double quotes. We want to add just a simple text. Something like my name is Ah, Stage Hassan. That's my YouTube channel name. And they're also we can use formulas toe make this variable a little bit. Ah, more dynamic. But I'm going to show that later in the scores in this current video, I want to show you just a basic basic assign a response so Ah, here we want to add one more text The response. So this text, we want to basically now a sign our text with the value off our variable. So it's like this were variable click OK. And basically, when we tap in our button assigned the response will assign some value to our variable and then we want to use it variable to set the text on our text layer. Okay, so it's simple as that And now we want to run our purview so you can see how will that look ? Of course, more complex stuff will be ah later in the scores. But for now, as you can see, it works perfectly fine. So when you click that button, it will sign the value toe are variable and then that variable text will be displayed in our text layer. So what? That will be all for this video 35. Condition Response: hell there and the welcome back. So in this video, we're going to explore a conditional trigger eso here select this condition and in the properties panel here, on the right side, we can select the layer and ah, down below Weaken psych the properties off that specific player. So ah, depending on the layer which re true's, we can select a different kind off properties here and ah, down below. We have a six different operators like greater than greater than Ah, and equals less than less than and equals equals and not equals. And ah, down below At the bottom, we can enter the value, so Ah, this conditional trigger allows us toe compare Osama values. So before we add some values here, we want toe create one over and here. Let's said the original center, okay, and the Y position should be 1 50 for example. And now in our tep trigger, we're going to select our over where and inside conditional response we need to select our oval and from the properties we will select the Y position and from the operators we will set equals. So if our over why position is equals to 1 50 Then we're going to add the move response and we're going to move our circle on the Y position off 400. So let's run that review and as you can see, it moved down. But when we click again, nothing happens. So what we need to do to make that move again? So we need to add one more condition, of course. But this time we're going toe set a different value here. So we're going to set 400 and we select why property? And of course, we're going toe set the move response here toe 1 50 Why position and let's run our preview again. So as you can see, it goes back and forth as we wanted. Okay? So also, we can have the ah bunch off responses here in the condition and you can add the as many conditions you want. Also, there is a way to compare multiple conditions inside one condition response. I want to show that the later and here let's just ah scale by our circle. Ah, toe 80% by 80%. So it's going to see this is kind of the effect which will produce now. So you can create amazing animations with this condition response. Kurdish traditional response is a very powerful tool and you can create many interesting stuff. You just need to use your own imagination, that's all. OK, so we're going to remove this now, and I want to show you one more example. So it said one text and let's increase the font size. Okay, let's increase this text books a little bit and the fourth value will be zero. So let's add a tap sugar, okay. And we're going to use the variable. So I'm going to show you how to use their variables along with the conditioned response. So our variable will have, ah value off zero. It will be a number, and in our tap trigger, we're going to set conditions. So we're going to set the variable as our layer, and we're going to say if our variable is equal to zero and only then we're going to change the text here. So we're going to set the text toe one okay, And now we're going to add the one more condition we're going toe, select our variable one, and we're going to set the value toe one and the text to zero. So we're not going to use a variable here yet. As you can see, nothing happens. Okay, so what we're going to do now, we're going to add the one more response inside our conditional response. And that is a sign. So a sign response is used to assign value to our variable, and we're going to select our variable and assign a value. So here we can type number one, for example. And in our second condition were went toe also sign our variable. But this time, 20 and basically we're going to create something like on an off switch. Okay, so, uh, now let's get back to our product by project and ah ah, instead off using the hard coded values in our text response, we're going to do with our variables dynamically. Okay, so select the text here, and ah, we can remove this number. So here, select the formula, and, ah, from the formula, we're going to select our variable and instead off a hard coating. The number we're just going toe was our variable as a value. Okay, so, in our condition response, we basically first our sign The number to our variable and then we said the text and as you can see, we get the same result. So variables are also big part off prototyping and they are also powerful. You can use them with the conditional triggers, and basically it's a similar toe programming. You can create many different conditions here for, for example, if you set the two conditioners in ah one condition response, only those are signing text responses will be triggered when those two ah conditions are satisfied and that's it for condition triggers. 36. Scene: Ah, held there and the welcome back. So in this video, I'm going to show you how to use the scenes. So basically, Sina can represent each screen in your application. And when you click this scene icon, you will see this scene Ah, panel And we can rename our seen scare. And we can add the multiple scenes by clicking this red button so we can add the as many things as we want and we can delete them just by clicking Ah ah, delete button on the keyboard. Okay, So if we want toe switch to different seeing weaken just a double click on that and ah, we will be automatically redirected on our second scene. So let's create Ah, one rectangle here Or maybe text. Sorry. Well, was a text here instead. So let's increase with height of this text box a little bit, OK, text should be centered and we can also add the background color the white gray and let's change the text for this text. So we're currently at our first scene and the text should say first screen and we went toe had the tap trigger which will trigger ah jump response. So Let's select our text one. And let's add the jump response here. Okay? And for the scene, we're going to select our second screen and we controls the transition animation. If want, there are different transition animations. You can experiment by yourself or you can just use ah na na transition animation. And in our second scene, we're going to create another tax here. But this text will say, Ah, second screen and let's also center or text here and let's ah, at a background color as well. Ok, let's change the text here, toe. Ah, something like second screen. Okay. And now we want wet here. Ah, step, trigger and the jump response as well. So in our jump response, willing to select our first screen or first scene okay. Or we can ah choose this from above. So for the musician, let's select Ah, this time left to right. And it is very important to notice that if you run your purview from your ah seeing toe, your purview will run us in tow. It start. Ah, And if you want toe run the scene the one So you need to never get first to a scene one in order to do that. So as you can see, our function works perfectly fine. And that's basically for this. For the scenes, you can use the variables along with the scenes topaz. The data between ah, those. Ah, those scenes as well. 37. Components: Ah, held there and the welcome back. So in this video, I want to show you how to use the components so we can access components panel here on the left side. And we can just like this add button toe, add one component here. So if you're wondering what the components are and basically the component is ah you element which we can reuse multiple times. So for example Ah, in this video, we want to create components for US settings. And basically, if we have a multiple settings for our applications, we don't need to create ah for each settings different the response in different triggers. Basically, we can just reuse this same one a component. So now I'm going to design one component here and ah, our first component will be named setting swan. So I have also added the background for this and I'm going toe also add a text here so the text should be centered. And on the left side of this component Ah, the title should be setting swan. So this addressing example we can change the title later in the video and on the right side , I'm going to place ah toggle button. So this is basically on and off switch for our settings. So first, let's create a background for our total and, ah, I'm going to add the full rate. Yes. Here. And I'm going to just modify this. Ah, a little bit sore and change the height and the width. Maybe. Okay, so I'm with those decreased the the with in the height as well. Okay. So we can decrease the with here. And before we continue, we want with one circle layer. Okay, so the background for this one could be white. Let's name this. Ah, total background. Okay, so let's said the one over elector here and let's rename this to, ah, total button. Okay, so now it's at this button here that let's hold down shift and old to decrease the size both in width and height. You know, it's said the height manually. Ah, and with 2 34 So let's center this here. Okay, just a little bit. And ah, we can also copy this. Ah, total button once more against, So we can decide the the size off our total background. So just control C and control Veto. Copy this object This layer and, ah, As you can see, we need to decrease the with off our total background just a little bit. So, uh, we're going to do that now. Okay, so now it looks better. And then we to remove this a second total. We don't need that anymore. Okay? And, ah, that's basically something how our settings should look like. And now, of course, we're into other tap trigger and ah, some responses. Okay, so we're going to have the condition response. We have already seen this video, and you know what the condition trigger is? So basically, women toe copy this exposition off our current total button. And as you can see, you need to remember the position off this total button on the left and on the right side. So we're going to say in our condition trigger if our total button exposition is equal, toe 200 in 80. Okay. And if that's true, we want to add the move response, and we want to move our total button on the right side, and we want to have another conditioner trigger. But before that, let's set the color off our total button. So something like a green maybe. OK, so this is just an example. Of course. And the women to copy this condition just by according control C and control V. And let's just change the values here for 280 here calling her toe gray. All right, so now when we run Ah, our preview. Okay. And, ah, here when we run our purview, as you can see Ah, it works perfectly fine. And for example, if our applications have, for example, 45 or even 10 those settings we don't need to create ah ah, step triggers in the responses. For each of those, we can just create a component tree. And as you can see, our component is located here someone to copy one more component. And this time, this component, the second component will be named the setting store. And, ah, let's go to the scene here first. Okay. And let's Ah, dragon dropped this. Sorry. Let's get back to our Okay. So first I'm going to select this second component, and I'm just going to change the background color off our settings. Toe white. Okay, so I need to see, like, this background and now change the court white, okay. And our total background should be now Ah, little bit gray. So we can distinguish from our background. Okay. And the text would say setting store. So now let's get back to our scene, and we're goingto import those components. So click this component on the left side and just drag this settings One here and the setting store okay, and just plays that down below. And let's add one more settings here and now. We don't need to create the trigger center responses for each of those. We have already created that inside our component, and basically everything works fine. So let's run our purview toe. Check it out. As you can see, our taps and triggers works perfectly fine. So we don't need that to handle inside our screen. Seen one. We can just do that inside our component tree. And that's the beauty off off components 38. Variable and Formula: Ah, held there and the welcome back. So in this video, I want to show you ah, more in detail how you can use the variables and ah, formulas. So you have already seen the variables in formulas? Ah, you know, we're of course, so far. So where they are to variable switcher can create a global and local variables. So the 1st 1 are for all scenes. So that means you can access them their values in each and every scene in the second, you can only access Ah, in the one C. So let's name this Ah, variable name. And we can choose a three options text number or caller. So you can right here the fourth value for your variable or you don't have to. It's optional, but we will say just anonymous, Is that the fourth value? So next, let's create one input and the one text. Okay, so this text will be basically a button. So let's ah, modify this look a little bit. So let's type continue. And let's add the background, the caller toe gray. Okay. All right. So, uh, that should be fine, I think Maybe change the background color toe white and the text should say, for example, enter your name. Okay. All right. So Ah, we're going to create another scene so you can see how we can pass. Ah, different variables between the multiple scenes. Okay, so in the second scene, we want to add a, um this rectangle and it will be basically a background. Okay. Oh, it's said that white collar for now. And we went toe head. Ah, simple text here. Okay, Okay. And the text should say nothing. So we want to delete the text and let's rename our layers here. Okay, so for the scene, let's let's first never get back to our first scene. And we want whether tap trigger. So for the layer, let's select our text one. Okay. And we can also rename our layers here, So this one should be button. And let's add the response. It said, Ah, sign response. So we went to a sign our variable value. So here in our formula input, we can type text but text numbers and ah, some different values. So if you want to type text, you need to type that text inside, double quotes, some something like that. And for example, if you will type a number, you don't need a double quotes and we can use a plus. Tokcan, Captain eight those Ah, those texts numbers in different values. So from this ad button, we can select our layers and access their properties. So, for example, if I chose the input one text, I can access the text from our input layer. Or, for example, if I chose X and y value, I could access those values as well. So we have a signed our very about the input text text. So next we want to jump to our second scene, okay? And we want to read that data or that text which we passed in our variable. So we're going to add a start trigger and inside our style trigger, let's add one text response. And here we're going to choose the formula and from formula, we will select our variable. Okay, so, uh, just like that and click, OK? Or we can just add a text in front of that. There's something like, welcome back and just at the plus here. Okay, so now that's properly for mated. And the next thing we want to switch back to our first scene and let's run our purview. So, for example, if I click a button and I don't type anything inside our import type, then in the second scene we were going to just sit this text, which will say, Welcome back and nothing else. But if we ah, around this application again and the for example this time, let's add some name, for example, my YouTube channel Lame. And when we click continue, we're going to see a message. Welcome back And that name which we assigned to our variable. Okay, so you might wondering why we don't Why don't we see the the fourth value off our off our variable? Well, that's because we have a signed that nothing to it, you know, and tow figures that we want to add the condition. So we're going to select our input and from the property room into selected thanks property and from the operators willing to choose. Ah, not equal. Okay, so basically it if our text from the input one is not equal toe Ah, empty or no. Then we want toe assigned the value and jump to our second scene. And in the second condition we want to say if our input one. So let's direct input one. And from the properties we went to select the text. Of course. Okay, so, like this text property and, ah, for the operator, we're going to say equal. So if our ah, he put one text is equal to now, then we just want toe toe jumped or second scene without assigning any value. So now we can see the fourth value off our variable. Okay, so you need to be careful when you are assigning a value to your variable. Sometimes it might get confused, but you need to check each and every your step before you continue for their more. Okay, so, uh, as you can see now, it works perfectly fine. If we don't type anything, we're going to see these anonymous text. And when we type the name, we're going to see that exact name in our second scene. But so variables in formulas are one of the most powerful tools inside apart a pie, and you should always use them. So now let's delete everything and ah, let's Ah, let let me shoot. And the let me show you one more example So let's greet the variable with name off my ex and the other with name off my Why So Those variables are local variables because we are not going to create another scene. And here we're going to create the to text layers. Okay, so it's increased the things textbooks a little bit. And the second text. So the first text layer will be named the exposition, and the second will be named. Ah, for example, why position OK, so let's center the text off those toe text layers and the phone size to 20. OK, and now let's remove ah, every text from them. Okay, so now we want to add the one over a layer and here. Well, let's select a green collar for that. Let's center the origin. All right? And now ah, we should add the detect trigger. Okay, so now for the layer, let's select our oval and for the property ah x property. So exposition and let's rename our trigger to detect X, and the here is a response that we want to add a text. So let's select our text layer, our exposition and for the content, let's choose formula. So here it's Ah, let's at first x and colon and plus, and it's select our Ah, our my ex. Ah, variable. Okay, so next we went to had a sign, but a sign should be on the top. So we went toe a sign our variable at the exposition off our over layer So let's elect our over layer and let's like this x So click Ok, All right. And I think that Ah, everything should be fine now. So Ah, let's around our purview to see what kind of effect this will produce. So OK, so we need to add the drag trigger as well. So we can drank our ah, over layer. Okay. And here we want to have the move response and we can add Move. Ah, in each direction will have to right top and bottom. And we should leave me that to screen. So as you can see when we are moving now, this object this layer Ah, we are in real time getting the exposition off our layer. And that's the beauty off this detector. Really? So next we want to detect Why position? So we want toe assign the Y position off our over to our a second the variable, which is named my why and let's choose this y position. Okay? And for a text here. Now, let's say why instead of the X and let's choose different variable. Okay? My wife this time Okay. And now it's around that again. Okay, so I forgot. Toe said this text toe y position text. And now we should be able to see the X and Y position. Ah, in real time off our layer. When we are moving that swears can see, we can see the all the positions off. We can see the position off our layer properly. So when we set our layer on the top left corner, we can see that we're not getting zero. And that's because we need to set our origin toe left up corners so we can see the x and y to zero. Okay. And that's basically for this video. I hope to enjoy you Should this practice your by yourself with variables in the formulas. Formulas are very powerful tool and that you will use them in your daily workflow 39. Upload and Share your Project: Ah, held there and the welcome back. So in this video, I want to show you how you can upload your prototype in the cloud. And, ah, that where you can share your project with your clients, friends and family. So this is just an example off one simple prototype. So, for example, when we click this button, as you can see, it will navigate us to the second scene where we should get this a welcome message. Okay, so let's just type some random name. Frankly, goings can see. This is just a simple prototype. So now I'm going to show how you can upload that. So clear this cloud button and that you might see this message that your project he has not been saved. If that's the case, then you should first save your project on your PC. So let's ah, save that. Okay? And after that, you will see these measures that you haven't uploaded this project yet. So click this upload button first, okay? And you will see this personal space. So that's my account. And I'm going to select that and it will upload toe my clout. So when I click this copy, I'm going to copy this link and the open up a Web browser where I'm going toe pays that and , ah, just wait a little bit until it loads our prototype. So, as you can see on the left side, we have a bunch off options where we can see the author of this prototype. Also, we can see the date where when this file was uploaded and on the center of the screen, we have our application. So the beauty of this is that we can also interact with our prototype from the Web browser and that, and that's a good thing where you can share your project with your client and, ah, your clan can interact with your prototype of very easily. So let's ah, click go. And as you can see, it works basically the same as in our purview. Also, we have a few options here. We where we can restart our prototype and we can ah, said the lower speed off our animations here. As you can see, it is ah, running smoothly and slowly so you can check each and every animation. Also, you will have a full screen option and ah, you can also use that. So this is a great thing. You don't think toe worry about where your story or project you can just upload them when you're a cloud. And when we clean this back button, it will navigate us to our cloud, the repository. And here we can see all our projects, Which shall we have uploaded so far on our account. And, ah, that will be all for this video. Be sure to upload every your project on the cloud just to make sure you're safe. 40. Record your Prototype: Ah, held there and the welcome back. So in this video, I want to show you how you can record your prototype. So basically, when you open up a preview of Indo, you can just like this record button and it will start recording your prototype, so interact with your prototype and it will record that. So the maximum time off recording is a five minutes. Okay, so when you're done with ah recording, you can just click this and it will stop recording and you'll cities window where you can save your ah recording. So let's type the name off our recording click save and just wait a little bit until ah, fingers that Okay, so it's finished now, and ah, let's open up our according toe. Check it out. Okay. And as you can see it basically ah, it works fine. And ah, and that's it 41. Mobile App - About the Project: hello there and the welcome back. So with this video, we're going to start prototyping mobile application. I have already chosen in inspirational design from a dribble dot com and the author of this beautiful design and the motion animation is Ah, Carol Karabtchevsky. So all credit goes to him. Our prototype will be very similar to this one with they're just few modifications and the adoptions. So I have already designed this application in Adobe Xdm and most of the time, when you are prototyping, you first want to design your application. Using some of you I tools like Adobe X'd sketch or fig MMA and the designing mobile applications is not a topic off this course. So Ah, if you wish to learn more about Adobe's D and you design, I highly recommend you to watch my other course on that specific topic. And in the next video, we're going to start prototyping by importing the first screen in Prada pie 42. Mobile App - Prototype Preview: Hello there and welcome back. So this will be just a short review where I'm going to show you at the final version off our prototype. So this is our application, and we can select our item from the store, for example. And here we have a slight and we can see different images off our product. Down below we have this heart icon and this heart an image looks very nice. Then from the bottom, we can move up this Ah, details on the top. And as you can see, when we move that on top, this heart is moving. And also we can get back to our first screen and open that again. Also, we can add to cart this pair of shoes and when we select more than one pairs of shoes than the price is increasing and increasing and and it works very nice. And of course, when I click this metal cart, we have this nice and beautiful animation 43. Mobile App - First Screen: Ah, hello there and welcome back. So with this video, we're going to start by importing the first screen in a Prada pie. So our application should ah, look, something like that thing. The previously there I have already talked about this specific design, so Ah, our design will basically have ah two screens and in Adobe X'd I have already designed those two screens. As you can see, they are pretty similar to that previous design from dribble dot com. And we're going toe to deport those two screens in our prototype I and in this really willing to started by importing the first screen so I can see our first screen. He has, ah, two items and bottom bar and Heather and our second screen have ah, some more details about this specific product. Ah, and we can slide this gallery off those shows and we can also like and put this specific air Max 270 in our favorite bucket, for example, and the most important thing, which you should remember when you are designing Ah, application is toe name your ah, layers properly. So as you can see in our first screen, I have ah named my layers properly. So Ah, when we select that, we can see the header. So the heather is a group off two elements. So let's open up. And as you can see, we have a logo image and a header background bottom bar. Also, we can see different icons here in the background from our bottom bar as well. So we have Ah, four different icons and ah, bottom bar background. Okay. And the next week ever want to win three. So, basically, those are the products in our application. So inside our product, we have ah, card. I can heart icon, original part price discount price, the title image, this number behind in the background. So, uh, second and third items contained those items exactly the same. Okay, So ah, why is important to name those layers, Um, properly. Well, because, ah, when you're prototyping and pro TEM pie, it will make your job a lot easier. And you will see that later. Okay, So the size off our application is a 375 in with and in height. Ah, a little bit more. So basically, this is a template for Andrew. For iPhone. Ah x So as you can see, 375 with 800 12 so willing to select the template because our application and basically has the same size. So now it's import that first screen, so select the art board. So in which side screen one and import side should be three X because that's the import size for ah iPhone X device. So click import. And as you can see ah, basically, it looks the same as in our other big city design. And in our layers section, we can see the same layers as we saw back in Adobe's Day. So let's ah, run the purview. And as you can see, we cannot scroll or anything yet, but we're going to fix that. So, um, our heather and, um, bottom bar should be on the top of the layers. So I'm going to add one scroll container here, and that's crow container should be on the top, and inside were going toe. Place this all our layers here inside our a scroll bar scroll container, and let's increase the size of this scroll container to match our device template. So here we're going to select Heather and bottom bar by holding control and we're going to place them outside the scroll container. Okay, so now when we scroll, we will only scrolled those three items and not our header and bottom bar. So this is the effect which will produce. And, um, it is very important to keep your layers in. Ah ah, in a proper hierarchy. So next we want to add a tap trigger. Okay, so we want to add step trigger on our item. But before that, let's rename our scroll a container toe straw container so we can distinguish our layers better. We're going toe add attempt trigger only on our second item. We're not going to do that on all items, because that would be, ah, very time consuming job. And this is ah for the tutorial purposes. So, uh, let's select our second the item, or you can just type in, search the name off your layer, and that's why it is important to properly name your layers because you can easily find them inside the problem pie. So ah, first we need to start with the move responses, and we're going to sec this first item, which is the top item in our scroll container. And we want to move that on the top outside off our device. Temperate. So we want to move that in the white position off minus 500. So when we tap, that is conceit e This first item disappeared on the top. Okay, so we cannot see that anymore. And we want to do that the same for our third item. But this time we want to move our turn item on the bottom. Okay, so we're going toe, choose a linear Ah, um, easing. And we want to choose a linear easing for ah, mostly off our layers. So the second move response will be for our third item here, So let's like that, and we're going to move our third item down below. So Ah, when we try to select that and move down below Ah, we can see that we get position off 1200 but let's controls that toe and do this and we're going toe. Move our item toe 1000 and 50 in white position so we can be sure that it will disappear from the screen. As you can see now, when we screw up and down. We cannot see any off those two items. We can just see this second item, and that's great. That's the exact thing which we wanted to do. All right, so the next what we want to do, we want toe. All right, So, uh, next what we want to do. As you can see, our background in our second item is ah, image layer. And we need the rectangle vector layer and instead, So we want to add the rectangle and we want to increase the width and height to match our background from our second item. Okay. And then now we need to change the color of this Ah, background as well. Okay, so let's copy. This scholar called from our adult bags day. Okay, so it's ah, and that's color here and now we can remove this other background, which is image layer. Okay, so what? We needed this. Ah, this background layer. Well, because So we're with the vector. Ah, layers. We can animate. Ah, more properties. And that's why we can remove the our image layer. So next we're what we want to do in our prototype. We want to select all those items here and we want to group them in tow. Group named the details because we want to add the capacity response. And instead of your using five or six different responses for opacity weaken, just store them, store those items into one group and just animate the whole group. So that's a shortcut for that. Okay, so what want to do? We want toe Also move our second item on the top where the first item waas. So we need to ah, move by holding. Ah, by pressing a Rocchi's so we can ah see the exact position where to place this. So the white position is a 79 and we need toe. Remember that position And of course now press controls that so we can undo the move. Okay. And ah, now what we want to do we want to add Ah, capacity or sorry. Move. So let's select our second item and let's set. Why position to 79? Okay, so now when we run our purview Ah, those two first and third item will move from our screen and the opacity responses used for our details from our second item. And of course, move the responses use to move our second item on the top. And now we want to scale our background here. So let's said the original center so we can scale that properly. So the with should be the same as our device template. Okay, So, uh, let's select our background OK, Which we created earlier, and for the height, off this background off our second item, we want to copy the height from our adobe exit. So the height is 408. And when we select our background, as you can see, those are the same values for width and height. So we want to increase our background so that size. So when we click that as you can see, it grows and basically the background there looks the same as in our second screen. So Ah, don't mind this scrolling women toe figures that and you'll see later eso there is one more thing when we scroll down and pressed that when I write him our item escaped our view. So we need to scroll back and we need to fix that. So how can we fix that? Well, it's very easy. And with me it was a school response for that. So now add a scroll response here and the select our scroll container here. And ah, we're going to use a formula here. So now search for Ah, scroll container. Sorry, not bottom bar, but scroll container. Okay. Scroll Catania and women to select. Why position? So click Ok, okay. And run that. So now when we click that as you can see Ah, our ah second item. Ah didn't disappear from our view. And basically, when we press our our second item, no matter where we are located at the bottom of the scroll, it will navigate us back to our top. Ah, stroke container. So that's how we got this effect. And, um here we want to add a scale. So let's select or sorry, not scared, but moves so well. We want to move our bottom bar as well. So we forgot to do that. And let's remove scaling. Let's have the move response. It's like the bottom bar here. So just time the name off your layer, it's easier to find and that we want to move our bottom bar in the same white position as our third item. Of course. Ah, a linear easing will be a linear. So it is very important. So set your easing for your layers to be pretty much the same. So it will have ah, better animation. Okay. And now, as you can see, our bottom bar and disappeared as well. So when we, um, said the speed to 0.1, we see that our bottom bar disappeared very fast. So it's because our bottom bar is Ah ah is ah, lowing height. And that's why disappeared very fast. So to fix that, we can increase the duration for our move response for our bottom bar. And we were to do that now. So it's like to move response for our bottom bar and increased duration for a 0.5 seconds. So now when we run a and click that our bottom by will disappear a little slower and that's fine. Okay. So basically, we have ah finished everything we need for our first screen for now. So when we click So when we click when our second item on the first and the third item will disappear. And of course, bottom bar is well and our second item will grow. And those details from our from our second night and will decrease the opacity to zero as well. And in the next three D, we're going to create another scene with our second screen. So in the next video you will see how we will merge those two things, the first screen in the second screen to look just like animation on one screen. 44. Mobile App - Second Screen: Ah, hello there and welcome back. So in previous video, I should imported the first screen in Prada pie. And as you can see, I have already added this scroll container inside scroll container. We have three items. And when we tap on the second item, the first thing 1/3 item are out of the screen as well as the bottom bar. Okay, so now when we tap on our second item, we can see that we got the pretty similar look is in our second screen. And in this video, we're going toe important the second screen and ah, we're going toe. Combine those screens. Ah, in tow. Basically one animation and you will see how we will achieve that. So in the second screen, as you can see, we have a three images for our shores and those two other shoes Ah, image. And those two other images will be used in our sliding gallery. Okay, so Ah, now first, let's start by importing this second screen in a Prada pie. OK, so now let's first create new same. OK, and now let's import our second screen. Okay, click import. And there it is. Okay, so what we need to do now. We will go back to our first screen or first scene, and we're going to add the jump response. Okay, So Ah, we're going to set the delay for our jump response to a 0.2 seconds when all our other animations are completed. And then we're going to jump to our second seen so far for the transition we're going to set non because we don't need any transition. And this will be basically Ah, you will get the field just like this is Ah, one screen. As you can see, when we tap on our second item, everything looks fine, you know? And that we're going to improve this. Ah, motion. Ah, animation. Furthermore, OK, but for now, it will stay that way. Okay, so now Ah, head over to ah, second scene. And here you can see all the layers which we have. So we have together a slide by button, hard button, and ah, many though many other items here. So we're going to put a header and buy button on the top off our layer higher here because when we add the scroll container, we don't want to scroll either Heather or Ah, this by button. Okay, so now we're going to select the background toe 270 image to slide and hard button. And we're going to move them outside of this second layer. Okay? And that's because we're going to add a scroll container now, and the inside is scroll container. We're going to place those items. So now it's Ah, select the second layer and place that inside our stroll container. So the scroll container height should be just below our shudder. Because we don't want to scroll our items on top of the heather, that's why. Okay. All right. So Ah, on the right side, there are those two other images, and you cannot see them now. But don't worry, we don't need that at the moment. So So, like this second layer and place that a little bit higher. And now when we scroll, as you can see Ah, it looks fine. We just need to add a background Ah, white background behind all our text here. So ah, to do that, let's create one rectangle and let's place that rectangle on the bottom off the layer. Or maybe no. In the bottom because it should be, ah, in the background. So all our text description size price should be on top of that background. Okay, Let's Ah said the height of that background just above our title and ah, down below. We're going to crease this height toe be basically the same length and as our text. So let's increase the scroll container height so we can see our items and then select his background and increase the height. Justin more just a little bit more. Okay, so we covered all our details here and now We will set the white collar for our background . And let's change the layer name here as well. Okay. All right. So it's Ah ah Set this stroke a tenner height to match our device template now. So we don't need that anymore. Don't forget to do that. And now let's run our purview. So as you can see now it looks away better. We just need toe increase the height of this background just a little bit so it can cover this. Ah, hola screen. Ok, And now when we ah, scroll up. As you can see now it looks fine. We just need toe um, a lower this. Ah, second layer. So select this number two layer container, and we need to place that just a little bit on the bottom. So increase the background on the top for a little bit and house like this second container and move that second container on the bottom. Okay, So that so Now our second layer does not overlap with our heart icon. Okay? And as you can see now, it looks fine. And, ah, the next we do, we're going to improve our motion animations. Furthermore, but for now, this looks fine. And we're going to also create animation for our heart button and for our slide gallery. Of course, So we can play this. Ah, second layer just a little bit down. Okay. Looks perfect. And that will be all for this video. And in the next video, we're going to create ah, start triggering on our second screen, and we're going to add some emotion and emissions 45. Mobile App - Second Screen - Enter Transition Animation: Ah, hello there. And the welcome back. So in the previous video, we have imported our second screen. So let's run our purview to see how our application looks so far. So here our first scene, When we tap on our second item, we will open our ah, second scene. Okay. And now in this video, I want toe create emotion animations for our second scene. Okay, so Ah, first we want to switch to our second scene so we can start prototyping. Okay, So select the second scene, and the first we want to add the own start trigger. So when our second scene starts, we want to add that some motion animations. Okay, so so likely start trigger. And first we're going toe. Start with moving our this image shoes image and this number 270 behind. So when our second scene starts, we want to move those two layers on the center, off our pink background or orange background. Whatever. So well, it's like those titans, and let's move them on the center so we can copy there. Why? Positions. Okay, so now select this image to and ah, we need to copy its Ah, Why position so control? See toe. Copy that. And now Well, it's like this other layer. And we're going to remember this Y position toe 175. And now let's click controls that so we can undo this position. And now let's add the move trigger. So we haven't toe add the move trigger first for this image, Tulare. And we're goingto based our position Why we just earlier copied. OK, and next we're going to add one more move response with the white position off 175. So duration for those to move response will be a 0.2 seconds, and easing will be a linear for both of them. So let's run our preview. And as you can see, this is ah, the motion animation which we want to add when we around our second screen. Okay, so that looks fine. And the next thing we need toe ah, select this available sizes, layer description, original price, discount price and the title. And we're going to group that in one container. So click control G and let's rename this toe all details. So instead of adding a trigger for each of those ah layers. I'm going to have just one trigger. So let's copy the exposition off this container and let's move that container on the right side. Okay, there. And now we're going toe. Add the move. Ah, response here as well. And women toe paste our exposition, which is the initial exposition off our player. And as you can see, this is the effect which we want to produce. So we have saved our time a lot by grouping those ah few elements. Those fuel airs. And now we're going to add opacity here for this exact same layer as well. So let's said the initial value off capacity for this layer 20 Okay, so Ah, that's how Ah, now Ah, this animation should look like and it looks fine, you know? So ah, next what we need to do. We need to add the motion animation for our two buttons heart button and ah, this by button. So those two buttons will have a delay off. One was off 0.1 2nd So let's copy the Y position off our A buy button. And it's at the move response here. So it's paste that y position durations. 0.2 and delay to 0.1. Okay, and for the heart, women to do the same. This time we're going to copy the exposition and let's move the fat on the left side. So it's at the move response. Okay, let's paste the exposition here. Delayed to 0.1 as well. Okay, so now let's surround our purview. And as you can see, our motion looks very nice, okay? And the now we need to enemy to more. Ah, layers. So we have this slide layer and the back arrow, so we're going to add opacity Responses for those two wears. Okay, so, Well, it's first select our back era, which is inside a heather container. And let's add the Let's set the opacity initial value to zero, and it's at the opacity response. So let's select our Baquero set the opacity toe 100% and aeration should be increased to 0.3 seconds. Of course, easing should be a linear and, um, and we're going to add the one more capacity response for our slider. So said the initial value of slider to 0% opacity, and it's at the opacity toe, 100% for our response adoration to 0.3 seconds as well. So it's like those toe opacity and said the easing to linear Okay, and now it's run our preview to see how will that look? So when our a second scene is started, this is the animation which we will see so it looks nice. So well, let's switch back to our first scene so we can see how those two things will work together . And as you can see, we have pretty much of the smoother animation and let's decrease the speed of this prototype. And as you can see, those two things that work together perfectly fine and we're going to improve our motion animation for the second scene. Furthermore, in the later videos, but for now it looks very nice. 46. Mobile App - Second Screen - Gallery Slide Animation: Ah, hello there and the welcome back. So in the previous video, we should ever created the enter a transition animation for our second screen. And it works. Ah, very nice. And in this video, we're going to create this ah, slight gallery animation with our images off shoes. So we have three different images for our shoes. And as you can see our slider, he has three circles. So we're going to animate those three circles as well. So a so you can see those three circles are image layer and ah, instead, off using image layer were going toe add the vector layers and in this case, oval shape. So let's create Ah three different over shapes. For now, it's Ah, First move this first over, down below and let's a decrease its size by holding off and shift. Okay, let's zoom me and let's change the width and height. Toe eight sighs. Okay. And now let's move this over inside this slide container on the top of this first circle. So let's ah, hit control C and control these so we can copy one more and one more again. Okay, so we can replace those three image layers. And now it's renamed those layers properly. So this 1st 1 should be named the over one second over two and over three. Okay, so now we can remove those three image layers. We don't need them anymore. And for the first button, let's add this. Ah, gray, black color. Okay. Okay. So now we are going toe. Add the paging container. And inside that paging container, we're going to store three images off our shoes. OK, so let's name this container. Paging container. Okay, those are two images, but you cannot see them right now, so let's first cities container down below. Let's increase the width and height with should the match the with off our device and the height should be just above this slide container. Okay, so now let's select. Ah, those two images and we're going to place them with our ah second image in our page. Include dinner. Okay, so now that we have those three images placed inside our pages with General, it's increased the with off our page in containers so we can actually see those two images on the right side, so Ah, what we need to do, we're going to place those ah toe images on the right toe center horizontally with our pinker background on the left. So let's ah okay, So select the second and third image and ah, center them horizontally with our pink background on the left side. That looks fine for now. And we can start the preview to see how would that? Locals you can see we cannot scroll or slide through our gallery because we need to decrease this paging container with and now we should be able to do that. Okay, So don't worry. If the third images not centered properly, were to do that now so selected image and moved them. Move that image on the left just a little bit. So when we scroll now, it's pretty much center, okay? And there is one more thing which we need to add, and that's ah, size off our first image. So the size off our first image should be increased a little bit to match the second and third image. So first, let's change the origin off our first image to center so we can scale that image properly. And ah, we're going to add the scale response in our studies trigger. So let's first said this image of the center here and now we're going to copy its A Y position, and we're going toe pays that y position in our already existing move response. Because the white position he has been changed because we have changed the origin. And now our origin is on the center. Okay, so now that we have fixed that, we're going to add a scale response. Okay, so let's ah, at a scale here, select our image one and choose a factor. So we need to scale our ah image by 20%. So it will be size off 120%. Okay, so let's run our preview to see how Let look. As you can see, when we ran our second screen, the image will grow in size for 20%. And now Ah, allow those three images are ah has of the same size so that it looks good. And now let's around the purview from our first screen. So you could see when we moved to our second screen. Our ah first image is growing its size. Okay. And that looks fine. So the next thing what we need to animate is that slide container below our images. So let's switch back to our second scene first. Okay, so here we need to add the chain trigger, and we need to select our paging container, so search for that Beijing container. Okay, Now, what we need to do when we basically scroll horizontally our images, we want to change the opacity off those three circles in our slide. The container. Okay, so first, let's at this. Ah, caller. And, ah, we're going to copy this a great color off our second oval and here in the range for our caller. We would say we will set zero from from 0 to 100 for the color going to select this first over one. So we need to train the color off over one and from black to grey. So when we scroll from our first image to the second image, we want to change the field caller from our first item from black to grey. And we need to change our color off our second oval from grey to black. So I think you understand how this will work. And the range, of course, will be from 0 to 100 this time. Okay. So Ah, we can run our purview to see How will that look? OK, nothing is happening. Ah, and I think I know why. So, Ah, let's get back to our chain trigger. And here, instead of the exposition, we need to choose the scroll property. Okay, so now when we scroll, it will change. And as you can see, the opacity of those circles in our slide container is working properly. It's changing from great black and reverse, so we might change this range from, for example, 50 to 100. So this animation ah, could be a little slower. But you can experiment with the values by yourself later. We might change that value as well. So let's continue and ah, let's add the another color response here. And this time we will set range from 200 to 300 for example, so we can see how well that works. So select over two and change from this black color to gray color and another cholera response this time for our our 2nd 3rd overall. So from the range exactly the same from 200 to 300 from the color great to color black. So when we scroll from our second toe, third image were to change the third overall. Ah, boot black. So, as you can see, the commission is not working properly. It's because our range is too small. So I need to increase the range of value, for example, for 405 100 throwing 405 100. Okay. And now it's tried out. Okay, now it works, but still, it's a little bit fast, so we need toe increase a little bit more. So from 500 to 600. And now I think it should work perfectly. Okay, so now, now our animation works. Very nice. Of course, we could change arrange in our 1st 2 caller responses from 100 to 1 50 And I think now we will get the perfect animation, as we imagine. Okay, so now this transition between those three circles is very nice, and I think it is well combined with our gallery, so Ah, that's pretty much it for our slide gallery animation and the in the next video, we will fix one error. As you can see when we move or scroll this from bottom. Those two layers are overlapping in our image. One is on top of all layers and we need to change that. As you can see, those images are on the top off our scroll container. So we need to change that. And we're going to do that in the next video. 47. Mobile App - Second Screen - Fix Layer Overlap: Ah, held there and the welcome back. So in the previous video, we have created Ah, slide gallery animation when that were a second scene. And as you can see, it works perfectly fine. But we have ah, one issue. So when we try to scroll this scroll container, those images are on the top off our layers. Because when we added our paging container on our second scene, um, our paging container is on the top off our scroll container. Okay, so we need to fix that somehow. And I'm going to have just one text here just for experiment purpose. And don't worry, we're going to really that text later. So we're going to add the detect trigger and select a stroke container scroll property. And here I want to set the text to our new text and from the quantity willing to select the formula and from the formula. We're going to select our scroll container, so search for scroll container and select property off school offset. Okay, click. OK. And now let's run the produce so you can see Havel Network. So when we scroll this scroll container, we're going to see those values in our new text. So the maximum top stroll is about 750. And when we scroll on the bottom, the maximum value which we should get is a minus 110. And why we need to remember those values and you will see because we're going to use arrange trigger this time to fix this overlap issue. So ah, we need to also remember position off for 1 130 you will see on 130 is the position just below our image. So in the range, we're going to select our scroll container, okay. And the hero intersect Scroll property. So ah, option show should be the 3rd 1 So if the value ah, off our scroll is between 1 30 and 800 then we need to execute some response here and we're going to add reorder response and ah, here. We're going to select a scroll container and women to chose the third option, which is basically setting our school container on the top of the other layers. So it's going to see when we scroll. Now, this crow container is on top off every layer. But when we tried to scroll. Now our gallery it doesn't work because our school container is on the top off our gallery and we cannot touch and the trigger our slide animation. So we're next women who had one more range. And this time we're going to select varies from minus 200 toe 1 25 for example. Okay, so this time we're going to add another reorder response. About this time, we're going to select the paging container and going to set the page in container on the top off other layers. So ah, how will this work? And you will see just in just a moment. So basically, when we scroll our scroll container from the value 1 30 to 800 our escrow but any will be on the top of other layers. And when we scroll, continue down from 1 25 to minus 200 our sliding gallery will be on the top. So let's try it out. So you can see now a scroll container is on the top of the other layers and will me scroll down our paging? Our slide gather is on the top off other layers and we can interact and see our starting animation, so that's pretty much it. So that's how this works. And the next we're going to set our button on the top off layer says Well, so when we scroll, this button will not disappear as before so we can see that. But now, okay. And everything works perfectly fine. So there is only one more thing which we should modify here, and that is Ah, heart icon. So when we scroll this scroll container, a scroll container covers this heart. And because our heart has a shadow, that means for the user experience, that means that Carty's on the top off all other wares and we need to fix that. So again, we're going to arrange trigger for our heart this time. So let's rename our range to range heart. Okay. And here we went to select ah, scroll container. So, as you can see, when we move our scroll container just below our heart, we get value off to so here in truth, escrow container. And we need to close this first option and said the value toe to number two. And now let's copy this position on the left side for our heart and that space that in the new range trigger. Okay, so let's select this file button and let's based this position. Okay? So it can see when we move this on the top on the position from the position to toe above. Then this cart I couldn't will move on the left side of the screen or outside of the screen . And now we are going toe. Add the one more arrange for our heart. Okay? And this time we're going toe ad basically the same response. But we want to move back our heart when our stroller, um container riches value below number two. Okay, so now it's based This Let's first select our heart button from our move response and said the position for 25 And here we went to select to set this second option and now said to number two. So that means that when a scroll falls bellow to and as you can see now, when we screw up, we cannot see heart. And when you scroll down, we can see the card appearing on the screen. So that's again. I go the u X. And with this, we have fixed most off our errors in our user experience here on our second scene. Okay, so that will be all for this video. And in the next video, I'm going to show you how toe animate our heart button for their more. 48. Mobile App - Second Screen - Back Arrow: Ah, hello there. And welcome back. So Ah, In the previous video, we have a fixed ah, layer overlapping inside our second scene. So let's never get to a second scene. And when we try to scroll our ah scroll container As you can see, this card icon is moving on the left side, and our scroll container is not overlapping with our paging container now. And in this video, we need to add a tap trigger for our back arrow so we can get back from our second scene to our first scene. Okay, so here it's select our back arrow here, and let's at the top trigger. Okay, Okay. And the is a response. We need to select the jump response. Okay, So now let's select our transition to slide out right to left, and you need to check this. Reset the selected see and so, like the screen seen one. So it's very important to select this option to reset the first scene. And now when we run our preview from the first scene, when we never get to our second scene And when we get back to our first scene, as you can see, our first scene is now re setted, and that's, Ah, very important to do so. Ah, now will we never get to our second scene? As you can see, we cannot see the enter animation for our second see and the reason why Let's click again. As you can see, we don't see this transition animation anymore, and that's why we need to add Ah, we toe check this a reset option for our second scene as well. So to do that, let's navigate to our first see now and here. Select the jump response and check this option. Reset the selected scene and now the second scene will be re setted. And let's ah, run our approve you'll so you can see it looks nice. So let's get back to our first scene, and now it's never get against or second scene. And again we can see this transition animation, which looks very nice, and that's how we fix those little arrows 49. Mobile App - Second Screen - Heart Animation: Ah, hello there and welcome back. So in the previous video, we have a fixed everything we needed for our second scene. So you can see our gallery is working fine with our scrolling container, and that's fine. So in this video, we need toe animate our heart button. Okay, so it's head over to our second scene, and here we need to add a tap trigger for our hot button. So let's add that, okay? And let's open our heart button containers. So, as you can see, this heart icon is actually an image layer. But we need to change this heart caller property. And to do that, we need the vector layer instead. So I'm going to go back to my adobe X'd and I'm going toe export. This heart icon is a vector file or as a s surgery. And now I'm going toe hit over back to my proto bite and ah, right click on our heart icon and click replace with And now I'm going to select that same vector file, which I just exported. So as you can see ah, it's a pretty much the same. But instead ah, now when we could click right click. We can click this converter shape and now our heart is ah basically the same as any other vector as a rectangle or over. So let's change the origin for our heart toe Ah, center. And now we can access our color property off our heart icon. So here, select feel cooler and selling this red color feel 100%. And when we ran our preview, When we try to click, nothing happens. And ah, why is that? Well, because our hard button is not on top off our scroll container, so we cannot tap on that and we can change that easily just by placing our heart button container on the top off our score container. So let's select our hot button and let's place that right on the top of our stroller container layer. And now when we run our purview, we should be able to access this trigger. And now click on that. As you can see now, we have ah accessed our trigger. So now that ah, it works Women to add another response. This time, border so changed the border color to red again from a green from black toe red so the next . We can also add a scale response. So what we need to do, we're going to scale our heart icon to 50% in adoration of 0.2 seconds. And we're going to increase our, um, value our size off our heart icon Ah, by 60%. So that means our total of size will be 110. So, as you can see, basically it the decreasing the size and increase the size toe 110. Okay, so what you need to do, we need toe and the function. When we click our button the second time, it will return to its original state, which is empty state. And to do that, we need to add the variable. So let's rename this variable toe something like a heart variable. And the fourth value for this variable should be the text off empty. So the empty is the state is the fourth state off our heart. Okay, so now that we've ever added that we want to have the condition trigger and here we're going to select our variable. And if our variable is equal toe empty type this empty, then we're going to execute all those responses in our tab trigger. So let's place them inside our condition, trigger condition response and the it's around our purview again. So ah, we'll get the same result. Everything works fine. So now we need to add one more condition. And now we dissect our heart of hearts variable again and before we add the value we need to assign our variable a new value. So let's add a sign response on the bottom off all other responses here and said the our heart variable toe filled when it with a double quotes for this text. So at that tinkly cantor and now inside our condition, we're going to check if our heart variable is equal to field. And it will be true after we tap one the first time when our heart icon. So let's copy those responses in our second condition. So control C and control V and change this field color field toe 120%. So that means ah ah feel cooler will be transparent and the border color set toe 100 percent off black color and ah assigned a different value this time. So instead, off the signing field were a sign and empty. So now it's around our purview. And as you can see, it works very nice. Okay, so this is Ah, basically like an on off switch, so Ah, we need to drain just small things. So in our second condition, in our second scale, we need to set the scale by value to 50%. So So that means when we like our shoes, our heart cycles should be ah, bigger for 10%. Okay, so there is one more thing when we back to our first scene and never get back to our second seen our heart icon will not remember it. State so, toe fix that in our start. Respond in our starts trigger. We need to add the conditioned response. And we need toe say, if our heart valuable is equals toe feel, then I will need to add the color response here. And we need to change, of course, the color off our hearts to read. So select our heart. Uh, Icahn and feel called to read, of course. And ah, I feel 100% and next we need to add the also a border color. So said the border color to red as well. And the need to read the maybe, um, size scale Ah, response. So we need to add the scale by 10% because when our heart is a field, it will have the size off 110%. OK, so now let's Ah runnerup review to see if our second scene will remember It's hard state. So when we get back and when we never get again as you can see, our second seen our remembers our choice and that works perfectly fine. OK, so there is one more Ah, think we need to fix and that is Ah, a reorder. So when we tap in our heart icon and when we scroll this scroll container now and scroll back down Now when we tap in our hearts and nothing happens And that's because when we scroll this scroll container our heart became down below our scroll container in layers hierarchy. So what you need to do in our first arrange? Ah, trigger, We need to have another response. Ah, reorder response and we need to sect heart icon and put our heart icon on the top of four other layers. So now when we try that again. As you can see, two works perfectly fine. We can access now our tep trigger for our hot button. Even when we scroll up and down our scroll container. And when you're working on the complex, more complex prototypes like this, then layers might give you a headache and that that's why you need to be very careful. 50. Mobile App - Second Screen - Add to Cart Button - Part 1: Ah, held there and the welcome back. So in the previous video, we have ah, implemented the heart animation for our hard button. And as you can see, it works very nice. All with our scroll container as well. Okay, so everything works fine, even Ah, our hearts state is remembered inside our second scene even though when we never get to our second toe, our first scene and never get back to our second scene. So we're next in this video. We're going to implement animation for our buy button or add to cart button. So this is our third scene or third screen. So this is basically a pop up which will let our user choose the size off shoe and ah, add to cart this exact item. Okay, So Ah, As you can see, I have arranged those layers properly. So we have five different buttons for our sizes and we have one button for at a card. So we're going to import this exact design into our second scene instead of creating a new scene. So in the second scene, click this import button and we're going toe import our third ah screen to our second scene . OK, so as you can see, this is our layer number three. And it contains all our elements from this pop up. Okay, so we need to add a tap trigger for our buy button, okay? And, ah, what we want to do, we need to select our ah, this pop up. And remember, it's why. Position. Okay, so copy that. Why? Position and move that on the bottom. And now inside our tep trigger, we went with the move response, because when we tap on our buy button, we want to move our pop up from the bottom toe our screen. Let's click this. Okay, So ah, we forgot toe. Select our, ah, layer number three, which is our third and pop up screen. So now it works, and we have, ah, little error here. So our image here is overlapping with our pop up, so we need to fix that. So simply at the reorder response and put that on the top of our tap trigger. Select our layer number three. Okay. And now it should work. Fine. Okay. So we can fix that, and it works. Very nice. Next, we need to add a pool response because we want toe enable user toe pull down our pop up. So let's had a pull the response and pull a trigger. And here for the direction to the bottom in the distance, let's try a 300 for now, using a linear. And let's run that to see how will that work. Okay, so it works Nice. We can pull that down and we should increase the distance. Maybe toe 500. So let's try. How will that work? Okay, now we can pull our pop up all to the bottom, and that's where and it works. Fine. So I think we should increase the duration side duration time for our poor ah, animation. Okay, so now our animation is a little bit slower and that's fine. So here Ah, we have, ah, five different buttons for our size. And, ah, instead off using those exact ah layers here, I'm going to create a component, and we're going to re use that same component for our for each off our buttons here. Okay, so in our in our sizes continue, we have five different size buttons and now we're going to contain one component which will be reused for those buttons. So let's rename our component toe size button. And here, in our component ah view. We're going to add one text layer, okay, and, ah, let's see what? Let's copy the width and height off our size button. So 74 by 40 Let's say 44 and let's send the width and height off our text layer. The same size is ah in our design. Okay, so let's center the origin and let's change the text. The full text should be, for example, us six. And let's elect our text and the center the text on the center. Okay, let's rename our text layer something like sized text. OK, and next what we need to the way we need toe. We need to set the radios, for example toe 12 and it said the border color to gray. Okay, and now it looks pretty much the same. Is ah in our design, I think we should just increase or change the foreign style. So instead of using this irregular, let's set toe bold and now it looks it looks very nice. Next thing we need to select our component here and decrease the width and height so it can match the width and height off our text. Ah, layer here. So let's said the high to 44. Okay? And now it looks better. So now we're going to head over to our second scene, and we're going toe. Ah, just import this component here, so Ah, select component here and just drag and drop that on the screen here, okay? And we need to place those ah size buttons addressed in the top off our layers below. Okay. All right. So, well, it's ah, at our size button inside our sizes container. Okay. And now I have a line that very well, and I'm going to put this ah, component on the top. And the after that I'm going to delete this ah, size one because we don't need that anymore. And I'm going to copy this component one more time. Just change the name, toe. Let's say size, number size, but number two and I'm going toe. Move that on the right side and I'm going to remove this second the button. And I want to do that the same for our all five buttons here. So just changed the names and relate those buttons in the background because we don't need them. We're going to use a component instead. Okay, Remove that. And one more control C and control veto pays that Change the name to number five. And let's place that down below on the left side. And let's remove the final button. Okay, so we can easily change the text off those buttons, so just double click on them. And the number seven, their number nine number 9.5 would say okay. And the final one to number 10. Okay. So, ah, if you're wondering where should be handled, the triggers for our buttons and the answer is inside our component view. So instead of crowding our second scene with a bunch of triggers for each off those buttons , we're going to create just one trigger for all of those Ah, components. Okay, so here, inside a component for you, we're going to add a tap trigger and select our size button, which is a component. So here what we want to add. Basically, we want to change the color off our button. Um, when we tap on that, So let's said the not the text, but the text color. Okay, Next caller should be white and the big round off our ah texts should be black. And using could be linear adoration a 0.2 seconds, for example. And let's around our purview. So when we tap on that, as you can see, it's changed the background color and the text color. But we need to add the ah condition here so we can handle the on and off switch. And let's create the variable name, the active button, and that they fought value will be false. Okay, so here inside our tap trigger, we want to add ah condition and let's select our variable. So if our active button value is equals to force, which is the fourth value, then we're going to change the background color and the text color, and we're going to reassign the value off our variable toe. True. And of course, put this value inside the, um quotes. And the second condition will say if our active variable ah, actually button variable is equals toe. Ah, true. And then we're going to change the color back to its original and reassigned the variable toe false, which is that the fourth value so that this will act is on and off switch okay. And let let's just modify this the second cholera response. So let's run our purview. And as you can see, when we tap that on the second time, it will return back to its original state and that works nice. So now that we have created a lower tap triggers and everything we're going to import and see, how will that work inside our second scene? So as you can see, all our buttons or all our components are working fine. Okay, so we have basically created a just one tap trigger for all our components instead of creating, you know, five or six different taps, so that's a lot easier. So now we run toe, add the background blower. Okay. Just said that Bill o our third layer and let's increase the weight and height to measure the device template. And let's run our period to see how will that work? As you can see, even though our IOS background is on the top off our image, our image feel is on the top of our background layer, so we need to change that. So first, like you chose a different background for our background blower and now toe fix that we need toe at the reorder response inside our tap trigger. So when we tap in our buy button, we need toe create one more reorder response. So let's add that. And the here are going to choose our blower blower layer and said that the third option So our background blower will be on the top off all other layers, and it should be on the top here on our tap trigger. Okay, so let's ah said the initial opacity valley for our background, lower to zero. So hearing our step trigger weaken said the A positive to 100. Okay, and now let's check it out. So I can see when we tap on our button, we can see that our blower background appear. So it looks very nice and inside our pull trigger Win it with the opacity response as well . But this time we're going to decrease the opacity toe zero for our background blower. Okay, just ah, set, select our IRAs background. Okay. And let's run that to see how old network Okay, it's concede now, our background that disappeared when we pulled down our pop up. Okay, so it works very nice. And then the next media, we're going to continue. Ah, working with our add to cart button animation. 51. Mobile App - Second Screen - Add to Cart Button - Part 2: Ah, held there and the welcome back. So Ah, In the previous video, we have started by implementing the animation for our add to cart button. And we have added this third scene third screen, which is a pop up. Okay. And we have also added the components here for our size buttons. OK, so that works fine. And in this video, I want to make a function where when user select each off those buttons, the price will change. So, for example, if the non button is ah selected, then the price should say $0. And if it was ah, just select one size, it will say 1 99 If the user select two pairs or two sizes, then the price would will go double and so on. So ah, let's get started. Okay, First, let's a navigato a second scene, okay? And ah, here selected this. Ah, this count price and the convert to text. Okay, so we're in the text layer instead. And let's center the text. Also, we're going to create this text box a little bit on the left, okay? And that the fourth value for ah, the price will be zero and y zero. Well, because when I use the first time opens this pop up then, ah, known off those component buttons will be activated and that's why the price will be zero. So in our component view here, we need to add the send response. So basically, we want to send a key and a value player from our component to our a second scene. So here click descent. And for the channel we went to select center parent. And the parent is basically the scene in which the component is located. In this case, the second scene. So the message should say clicked. And women to check this option send the value together. So basically, this is a key and value pair in key off. This message is clicked and the value is number one. So when the user taps on this button the first time, we're going to send a number one value to our second scene. And in the second condition, we're going to send a value of zero, but with the same key as a message and ah, so ah, next we're going to go back to our second scene and here first we want to create five different variables. And those variables will hold those, ah, values from our send the response for each of those buttons or for each of those components . So we have five different sizes, and we're going to create five different variables. Okay, so the size one variable will hold the value which our component one ah sense to our second seem Okay, so here we need to add receive trigger and from the channel we need to select received from component. And we need to set the target component. Okay. Let just me rename our size. Ah, components here so we can remove this. Ah, copy text. Okay. Lets just type size button to let's remove this copy word. We don't need that. Okay. All right. So now hearing received three. Okay, We forgot to rename our first size button. OK, now, now it looks fine. And here for a target willing to select the this time size button one. So basically, when we tap on our button one, which is us six, then this component will ascend the value to our second scene. Okay, so when you click this message input, it will automatically display this message key and we need to check this option assigned to variable and assigned the value to our variable size one. Okay, so we have created a received trigger for our component one, and we need to had received trigger for each of those ah components. So inside our received trigger, we need to read the text and a Let's say a select a formula. And here we're going toe type. Ah, dollar sign or symbol. Insider quotes there. Plus then in the brackets, we need toe type our variables. So size one variable plus sign, side size to variable plus sized, three variable and also the size five variable. So Ah, we need to set the text off our discount price and now multiple by 1 99 So don't be discouraged. I'm going to show you How will this work in practice and you will see eso next. Let's set the condition here, so this condition will have ah, five more conditions inside. So basically, when we click our first US six button or a component, it will send us the value and we're going toe store that value inside that were variable size one. So inside the condition here I want to select a size one variable. And I will say if size one is equal to zero and I'm going to add one more condition size two equal to zero and three more for each of those are variables size three equal to zero. Okay, Size ah for equal to zero. So only if all those ah variables are equal to zero. Then we're going toe execute summer response and the response should be ah, background color for our this add to cart button and now we want to add the rectangle eso this directing it will be, ah button background but we're going to remove this button background image layer because image layer cannot change the color property and that's why we can remove that and instead we're going to use this vector layer. Okay, so now that's fine. And here, inside the condition, we're going to add the color response. So when all our ah variable size once I suicides to resize for in size five are equal to zero, then the color off our air to cart button will be great core, okay? And ah, if size one is equal to one, then the color should be black. So let's a search for ah, button background here and select the black or okay, feel 100%. Okay. And it's ah said the same easing here. Linear. Okay, So, um and we're going to copy this to receive trigger four more times. So first, let's around the preview, so you can see. Okay, So when we select this Ah, first component US six. As you can see, the price changed from 0 to 1 99 and our ah button background changed from great to black. OK, and that's only when we click on our component. So next I can't copy the control with control seeing control videos to receive trigger. And I'm going to just change this. Ah, a few ah elements. So the first condition should stay the same on all received triggers. But the second condition will say a size number of size to variable. So the 3rd 1 with it was just It was the size three button and size to re variable and the second condition ah, size three. So let's copy again. And this time, select size button four, then size for variable. And in a condition he was a size for variable and one more time now. Truth size button. Ah, five, then a size five variable. Okay, All right. And sheer. Select size five. Ah, variable. And now let's run our purview. So as you can see, when we click on one of those components, our button got this background off black and our prices changing. Ah, when we are selecting mawr ah, sizes. As you can see, when we said select two sizes, our price will double and so on. So basically, we can select how many sizes we want to order. If we order just one, we're going to get the regular price. And when we add the one more, the price will change and so on. And when we de select all our buttons, this add to cart button will change the color toe gray so it will be a disabled button. Okay, so that works. Ah, very nice. Okay, So if you're wondering ah, how all this works And if you are confused, let's a recap once more So basically, in our component view, we have a simple tap trigger. So the first time when we tap trigger Ah, the color off this um, text is a change to black, and we are reassigning the value the variable toe for toe True. Okay, As you can see, the cholera is activated in the we're reassigning the variable. Then we're sending this message to our second seen the value of number one because our button is activated and it has a back, a black background. And in the second condition, we are changing back our background color to gray, and we are reassigning our variable to It's the fourth value, which is false. Okay, as you can see and we are sending a different value inside this second condition. Ah, and the value is zero. Okay. And in our second scene, we are assigning those values toe the variables off each of those ah, component buttons. Okay, so that's why we have a five different received triggers because we're getting the value from each of those component buttons and were assigned that value toe our five different variables inside our ciento in our second scene. Okay. And inside every off those ah received triggers, we are checking if all those variables from a size 12 size five are equal to zero. And if they are. We're setting the background color off our add to cart button toe gray, and it kind of looks like it is disabled button. And only when we select the one off those component buttons, then our add to cart button will change the color to black. And it will mean that our button is, ah, enabled. And, of course, when we click Ah, our buttons, the price is, ah, changing. And here we are, adding size one size two sides to resize foreign size five variables and their values and were then multiplying that number with 1 99 So basically, that's how we can ah, count the price off our cart. And if user select multiple sizes, then that means that user wants to buy multiple shoes. And ah, that's how the logic actually works. So if this looks ah, a little bit complicated for you, don't worry. I recommend you to watch this one more time if it's confusing, and if you have any question, I encourage you to send me a message, and I will clear the air about everything you need. So that will be all for this video 52. Mobile App - Second Screen - Add to Cart Button - Part 3: Ah, hell there and the welcome back. So in the previous video, we have ah, started implementing animation for our add to cart button. And as you can see, when we select more than one size, our prices changing. And, of course, our ETA Carl button is ah enabled only when we select at least one size. All right, so women to continue. Ah, with animating our add to cart button. So first that we need to add a tap trigger for our button here. So let's add that. Okay, So what we want to do we want to check if our add to cart background button is equals toe black color. So that means that our button is ah enabled. And let's select our, um but in the background here, okay. And for the property, let's choose a field color and, ah, if our background, the field color is equal toe black. So let's select black color. And it means that our ah at local button is actually enabled and only one hour button is enabled. We're going toe, proceed to heading next animations. So let's like this sizes container and let's ah said the opacity for death to zero when we tap on our button. And now let's run our purview. OK? So when you try to tap the button when it's gray color, as you can see, nothing happens. And when you select one size and when you click on that, as you can see now, our opacity a response is working. So ah, that's great. And now we're going to add capacity for a few more elements here, so select size than the divider. Okay, said the opacity to zero again. Discount price capacity to zero. Okay, next title Capacitive zero. And ah, I think that's fine for now. Ah, let's Ah, run our purview to check if that works, fine. And of course, let's change the easing to a linear for all of those opacity responses. And when you click this at a call button, as you can see, those items disappeared and that's fine. So next, But we want to do we want to move our shoes on the center of this pop up. So let's set first in the origin off this image to center. OK, and now let's try moving this image Toto, a center so we can copy its exposition and once we copy that position, a clicker controls that so we could move back our shows in original position. So let's add the move response now. And it's ah, based the exposition we just copied for the duration. We're going to set 0.3. Maybe for now. Okay. And the easing. Ah, maybe toe is in back. Okay. Lets around our purview. And as you can see our image, move the on the center of the screen. Okay? And that looks fine. Ah, I just think we should add Ah, maybe DeLay for our move response to a 0.1 so it can start. Ah, with a little of delay. Okay, So the next thing what we need to do, we need to add Ah, one rectangle. Where? And it will be a replacement for our pop background because our pop background is an image layer and we cannot change. Ah ah. Radios property off our image layer. So let's set the color for our new rectangle toe white and it's rename our rectangle toe pop background and we will remove this spot background image from the background. Ah, Okay. We just need to add Ah, some response here inside our condition trigger. So let's select this ball background and ah, we're going toe add ah scale response because we want to scale our pop up and we want to move that pop up Toby in the background off our image. So you will see how will that look? OK, so first, let's say the scale and the we will scale our pop background toe 1 20 in within height in adoration off 0.3 star DeLay 0.1 and the easing could be Maybe is in back. Okay, so let's run operated to see Carol. That look. Okay, so we cannot see the actual poor background scaling down because we haven't deleted our public ground image layer. So let's daily that first. OK? And now let's run our purview again. So it should work. Fine. Okay, so our pop up background scaled successfully, but we forgot to change the origin tow center. So let's do that now. Okay, now it should work. Fine. Okay, So the next thing we want to add the radius Ah, response. And we want to set the four radios for our public around this time. So we want to make it look like a circle started A 0.1 in duration, 0.3 as well. And now more response. So for the move, we're going to set the white position toe 100 so we can see if that works. Fine. DeLay 0.1. Duration. 0.3. Okay. And I strike it out, and now that looks fine. So we got that white position perfectly. So what we need to do, And now we need to scale down our shoes image. Okay, so and now we're going to add the one more scale response, but this time for our image to and it's moved that on the top off our more response for our shoes. Okay. And let's select that 0.1 delay, duration 0.3. Ah, and we're going to scale ah, down our, um, image to 70% off its size. Or Kayla. And now let's run on our purview again. Okay? And now, as you can see, our ah shoes image is actually inside our public ground circle, and that works fine. Okay, Just change the easing. Toby Ah is in back. So the animation will Ah, look did the same as ah as Ah we imagined. Okay, let's run that now. Okay, now it looks better, but we haven't finished the all that. So let's first slow down this animation so you can see in the slow motion how this words. So as you can see, our images moving with the center in our pop up is scaling in the circle. And now what we need to do We need to animate this attack. Our button. So first, what we need to do now? Ah, we need to basically said the capacity for our ad tocar text to zero and we need to scale down our button background. So first, let's said the original for our button background to center, so we can scale that properly. And let's add a scale response here. Okay? Our button background is selected and we're going toe. Ah, set the width and height for our baton background to 66. Okay. Daily to 0.1. Integration 0.3 Ah, and using easy in the back. And let's check it out. Okay. So you can see our add to cart button scaled in a circle as well. And now we need to add the opacity response as well and they supposedly response will be for our add to cart text. OK, but first said the origin for our cart icon to center. So we're going to need that later. And the okay said the opacity zero for our at a car text and is in could be a leaner in the duration of 0.2 seconds. And let's try that again. Okay, so that text disappeared, and now we only need to move our carte icon to the center of this Ah, black button. So first, let's copy the exposition off our car tycoon when we move that on the center. So let's move that here. And that's copied the exposition one or four and it's a cyclic controls. That's we can move that back and it's set our move response toe expedition off 104 Ah, using ah is in back duration 0.2 for now and let's check it out. Okay, so that looks nice. But we could also set a delay for our mover response for our car tycoon and increased the duration 20.3 so it can match with all other scale and more responses. Okay, and now that looks fine. So ah, in the next video, we're going to continue. Ah, improving this animation. But for now, I'm going to stop this reader because it's already about 10 minutes, and ah, we covered the great topic here. So if you are confused, I recommend you to watch again this video again. If you have any questions, feel free to send me a message and I will clear the air about everything you need. 53. Mobile App - Second Screen - Add to Cart Button - Part 4: Ah, hell there and the welcome back. So in the previous video, we have started implementing this add to cart animation. But we have a stop in the video. And now we're going to continue working on that same animation Eso first. What we need to do, We need to increase the duration for some of those responses because I think that our current animation is too fast. So I went to Greece adoration to 0.5 on some of those responses. Okay. And let's see the preview now. Okay, Now our animation is a little bit slower and it looks even better. OK, eso next what we need to do, we need to wear the summer responses so well, it's at the more response. And here we're going to select a pope background, which is our white circle, and we want to move our public ground toe y position off 450. Okay. And that's ah, basically behind our black button. So delay will be 0.6 and aeration 0.5 and the Okay, let's change the easing to is in back because all our other responses kept the same easing . So let's check it out. Okay. So as you can see, our white Popma ground is basically now moved behind our anto carte the button. And we want also to move this ah shoe image as well. Okay, so now we have a problem. Those elements are overlapping. So we need to change that. And we're going to change that by adding reorder response. And let's check our layer panel here so you can see our image to is on the top off other layers. And our ETA card is ah below. So we need to select our add to cart inside our reorder response, and we need to set our add to cart layer on top off all other layers. Okay. And let's run for you now. Okay, so now we have figures that problem and ah, this image and popping background, the are behind our add to cart button. Okay, so next we can proceed, and we can, ah decrease the size off this image and pop background, so they should look like they are Ah, disappeared. So let's add a scale response. And here we're going to scale it down toe 20% our our image and of course Ah, our pop may ground our case like that, and they want to scale down to 30% off its original size. Okay. And the delay will be 0.6 duration 0.2 for now. Okay. And women to increase that. Just a little bit to 0.5. Using should be is in back. Okay. And now Okay, I forgot to add Ah, affect er to set the factor for our scale response. And now I'm going to set the 20% and 30% for ah, for our public ground. Okay, so now it should work. Fine. Okay. And as you can see, basically we have scaled down. Ah, this poor background and the image when they are Scalea, when they are moving down behind our button. So that's the exact thing which we want to do. Okay, so next we want to add the mover response for our at two card button and I were add to cart icon, of course. So it's first move. Ah, our cart I quinto minus 50 in why position duration should be 0.4 or five and delay to zero point. Ah, nine or one. Let's say one and here. Just control seeing control. Veto Copy the same. Move, response and just change the layer toe, toe button background. And of course, easing should be is in back. And now it's running out for you to see. How will that look? Okay, so Ah, now we want to move back this those two layers. So I'm going to copy those to move responses again just to increase the start delay and change the Y value to 50. Ah, position in Why? Okay, And now what I want to add, I want to add the opacity, of course. But first, let's run our purview to see how will that look? Okay, so that looks fine. We just need toe set the capacity to zero for those ah, two layers behind our add to cart button. So let's add to a passive responses. And first, let's elect a pope. May Ground said, Oh, persisted zero and ah, next It's like this image tool and the for both of those layer responses. Set the duration to 0.2 and delay toe one or 1.1. Okay, and we can decrease declaration to zero. So we want to execute this opacity immediately. So let's check it out. Okay. So now when our ETA call button is moving up and down, we do not see those two wears, and that's fine. So the next thing I want to set this button background capacity toe zero. So study l a 0.9. Okay, integration could be Maybe how is your point too? Okay. And it said one more rapacity. And now for our cart icon and let's around the preview. Okay, so this is the animation which we wanted to create, and that looks fine. We can just modify that little bit. We can just change the Y position off those two last to move responses instead, off 50 we can set toe 40 and now it's try again. Okay. And I think that even looks better. So we're going to leave that, and we also need to add one more opacity. And that's for our blower background. So select our blower background and set in the late 20.8 and the capacity to zero. Of course. Okay. And that's it. So we should have completed this side at Jakarta animation, and it works perfectly fine. So with this animation and we're going toe finish our mobile application prototype. And of course, there are many more things which can be done inside this you I design and I think that should be your homework. So there are a few options and you animations which you can create now. So, for example, when user adds this shows in the cart, you can you can a jump to other scene and show the show to the user, his shop card and so on. So there are many options and I think it will be wise for you to continue working on this prototype. So here in our first scene, also, there is a cart icon and here you can add a tap trigger on that cart and you can create a new scene where you can show your users which items user casting its card. It's a shop card and that basically, there are many more things which can be done in doing this current prototype design. But I will leave the rest to you so that will be all for this prototype. I hope you enjoyed watching this and I hope that you learned a lot by watching me and ah and the most thing is that you need to practice a lot because without the practice you cannot learn anything. 54. Mobile App - Upload on Cloud: 55. Web App - About the Project: Hello there, and welcome back. So ah, in this video, I just want to show you where I got design inspiration from. And I got that from a website called the dribble dot com from a account named the Out Crowd . So when I first saw this design in this emotion animation, I got very interested and I decided toe use this design into our product by product. So I can already designed this this web landing patriot inside our adult big city. And we want to use this same design inside our pro TEM pie. Okay, so all credits for this Ah design goes toe out crowd account from a dribble dot com. So I have created this Ah, designing Adobe X'd and like, you have a properly formatted and named all our layers from this design properly so we can have our job a lot easier inside a Prada pie 56. Web App - Prototype Preview: Ah, hello there. And welcome back. So this is just a short preview where I'm to show you a final version off our prototype. So this is a web application or a landing page. And when we start our animation, this will. This is how it will look like and we cover over our brand. A logo on the men or a manual item is ah, the animation Which will see So when we scroll down, as you can see, the animation are coming from every each and every side, and it looks just amazing. 57. Web App - First Screen: Ah, shoulder and the welcome back. So with this video, we're going to start prototyping our web application or ah, Web a landing page. So our landing page is the consists off four screens and we're going toe merge them into one in our pro Tobi. Okay, So as you can see, our first screen is properly for mated and our layers are renamed. Ah, very well. So, as you can see, our Heather is ah consist off different menu items and we have down below this title than this line. Then we have this filter button. Then we have the start button than details. And inside these details glow group whichever arrows and three texts. OK, then we share this a background image. And on the below we have our brands and we have four different brands and of course, the background image. Okay, so now you saw that we have, ah named our layers properly. So next in our prototype, I we want to select the device template and in this case, desktop, As you can see, this import size in one is a one X. So you need to remember that when you are importing the from Ah, no big city. So let's resize this preview window just a little bit, okay? I think that's fine. And now it's import our first screen from Adobe Accident. So here, just like this Number one art board and for the import size this time set toe one x and click import. Okay, so Ah, everything is fine. Only we can Ah, we will ah, modify a few things. So select all those of four brands and decrease the opacity toe 10. And also for this arrow, select this details group and select this arrows group and then this back arrow and we want to change the opacity of this back a row two or 50%. Okay, so that was the original style, like in our design. Okay, so now we're going to add a start trigger. So basically, we want to add the motion animations when we start our purview. So first we want to animate the header. So said the initial value off Heather rapacity 20 and add opacity response and said to 100 using shall be linear adoration 0.6 and the lake would be zero. So let's run our for you to see, how will that look? OK, as can see it's fading in slowly, and that's fine. So next we want to set this a background image and we want to copy its exposition. So select this background image and control. See, that's a shortcut toe copy exposition. And now let's move this background image on the right And let's said the move, response and paste this original exposition. Okay, so that the rations should be 0.4 seconds. Okay. And let's around this for you to see How will that work? Okay, as you can see, these background images entering our screen slowly and that looks fine. Next, we want to set this identical title, okay? And we want to move that on the right side. But first copy, it's Ah, Exposition. And now let's move that on the right side. And after that, we're going to add the move response as well. So let's based the exposition here. Adoration set to 0.6. And the easing could be a linear. Okay. And a started late toe One second. Let's run the purview. Our case is concede this identical battle is moving, but we forgot to add the opacity. So let's said the opacity response to 100 for our identity text and aeration could be 0.62 as well and delay toe one second, OK? And easing linear. And of course said the initial value for our identical capacity to zero. And now let's run our purview again. As you can see now it looks even better. Ok, so other that select this. I didn't decline layer. And here we want to set the origin on the right side because we want toe at the scale response and run to scale up this. Ah, a line from right side to left side. So said the duration to 0.6 and certainly in the started Lato one second. And these include building or maybe? Okay, so, uh, so, like this, I don't decline, are layer and copy. It's with okay and said the with 20 and now inside our scale response based that with and when we run purview. As you can see, this line is scaling from the right side to the left side. Okay, so it looks very nice. And next week you have this text below. Ah, so we need to select the text and decrease the capacity to zero because we're going toe. Add the opacity response. And they said the A positive toe, 50% easing could be a linear on duration. Could be maybe 0.4 or 0.6 and started late toe one. So you can see this text is a fading in slowly, and that's fine. So next we're to proceed by adding some more motion animations. So select this details. Ah, group or container. And let's at the more response adoration of this move response should be 0.8 and delay 0.8 as well. Okay, so easing could be linear. And now let's see this. Okay, so we need to select this the details container, and we need to move that container on the right side because we want to add the move response, and that's how it works. Okay, But before that, we need to copy its original exposition. So control said toe Ando and ah Corp its original position, and then move that on the right side. Okay. And now Ah, here based that original initial exposition. And as you can see, it's moving very nice. So I think we should Ah, and move these details container A little bit more on the right. OK, and now it will look even better. And, of course, we need to have the capacity for this same layer. And let's set the initial opacity to zero. Okay. And the rations for the easing for the opacity could be maybe 0.8 and delay to 0.8 as well . Using linear, of course. And let's run the preview again to see how will this look? Okay, this details. Ah, group container is coming from the right side with the capacity as well, and it looks fine. Okay, so next we need to select this filter button. And inside this filter button container, we care, filter, background and filter icon. So for the filter background said the origin to right side. So we can scale this from right side to the left side, and it's at the scale response. So we need to say this filter background where and copy it's with and of course, pays the with inside our scale response. Okay. And said the with initial value off with zero. Okay, so we can actually see this scaling animation And, of course, let's change the relation to 0.6 and started late toe 1.6 seconds. Okay, so easing it could be a quint. Okay, let's run that again to see, all right, so that looks very nice. And next, we need toe animate our start now button. But before that, let's said this filter icona capacity to zero. And let's say the opacity response and the duration of this past the response could be 0.4 seconds and delay 0.8 seconds. And of course, easing told Senior. So as you can see, Okay, now it looks even better. So now that we have added the motion innovation for our filter button, we need to set the start now, button. And basically, we're going to do the same thing. So let's ah ah! Okay. Let's ah said this scale response for our start now. Ah, button background generation to 0.8 and started 8 to 0.6. Okay, said the easing toe Quint. And as you can see, this is how our start now button background is scaling. So Ah, that looks nice. And we need also to have the opacity for our start now text. So let's said liberation toe 0.6, maybe or a 0.4 for now in the late to 1.8 seconds. So let's see, How will that work? Okay, so I think we should increase the delay for our capacity for our start now text just a little bit. So as you can see, I am now running the animation slowly. And as you can see, everything works. Fine. But when the start now button background is increasing, is cassie start now? Text is ah appearing before it. Ah reaches the final scaling. And that's why we should change the delay for our capacity a little bit more so Ah, first change the duration to 0.6. Okay, lets just increased the speed police animation. Okay. And also, let's add the delay toe two seconds. And now I think it should work very well and it is Okay, so that's fine. And now we should ah animate our brands. So what we want to do we want to copy its Y position and run toe, move that on the bottom just a little bit and we want to add the more response and now paste this Ah Y position inside. Move response And the duration to 0.8 seconds. And the late 212 seconds easing it could be we could leave. That is the default. And let's run the prio. Okay, so this brands will come from the bottom, but also we need to have the capacity so it can look even better. So let's have the capacity. Okay? The Russian toe 0.8 and started late. Two seconds is include bologna, and let's try it out. Okay, so now it looks Ah, way better. We can also increase ah, delay even more. But that's on you, of course. So our first screen looks very nice and all our motion animations are a smooth so ah, there are few things which we could adhere. So ah, instead, off this starts trigger. We could add a mouse over and mouse outrigger for our elements. So, for example, I'm going to add the move mouse over a mouse out for our first brand, and I'm going to set the opacity in both of those triggers. So in the mouse out, I'm going to set the opacity toe 10 and the mouse over capacity to 100%. Okay? And it's going to see now when I have over mouse over this brand, it will increase the capacity 100. And when I move the mouse away, it will decrease the opacity toe 10%. And that's again Ah, one nice animation, which you could add. So I'm not going to add for all those brands. But you could Ah, that's on you. So I'm going to show you just one more thing. Ah, to see how we can ah animate our menu items. So I'm going toe chose this home manual and this home line. So I'm going to also add the mouse over and mouse out triggers. And this time I'm going to set the scale. Scale will be for our home line, and that's the little line below our home menu. Okay, And then we said the duration toe 0.3. I'm goingto copy the scale of response and paste inside our mouse out response trigger and the here I'm just going to change the value of the with 20 So it's going to see when I cover over this line increase with a scale response And when I cover out or away from that this scale line, this line will scale down OK, so also we could added the caller for our house Ah, for our home, many writing and that we can said the cooler for our home to read. Okay. And we can copy this caller response inside our mouths out trigger and weaken. Just we can just change the color toe black So when we cover out off our menu item, then it will change back. So it's original caller. So as you can see, this is the effect which will produce. And of course, it looks very nice. You can apply this animation toe all your menu items and that's on you. I just wanted to show you What can you do with those triggers and responses? And that's it for this first screen. We're going to continue in the next video 58. Web App - Second Screen: Hello there and welcome back. So in previous video, we have started the creating prototype for our web application landing page. So, as you can see, this is our first screen, and it looks very nice. So in this video, we're going to start by implementing the second screen. Okay, so we have already ah, designed or our screens. This project will be available for you to download. Of course. So this is the second screen. It looks very nice. And I have a properly named those layers, so it will be easier for us toe. Recognize those layers and use them afterwards in a Prada pie. So we have a three those boxes and inside the each of those boxes, we care toe texts. Okay. And, ah, we have this. Ah, best title. Then we have this text below that and the more button than we have those two lines. And of course, a background. Okay, so now we're going toe import this second screen in our prototype I project. OK, so just like import. And let's select this A second art board report side should be one X and click import, so Ah, now we're going to add a scroll container and the inside scroll container. We're going to add those two screens. Okay? So just drag and drop them inside and select container one or scroll container and increase its width and height to match our template. And now let's rename our scope retainer Toe scroll container. Okay. And, ah, let's move down this second screen just below our first screen, select this crow container and for the over a school set unknown because we don't want bounce effect. And now it's ah, around our purview. OK, so as concede, that looks fine. And when we scroll down, as consider, this is our a second screen and ah, what we want to do now. Basically, when we scroll down a little bit, we want toe start our motion nomination for our second scene. So how can we do that? Well, I'm going to show you now. First, let's add attack trigger here and let's select a scroll Container property scroll. Okay. And here we want to add a text trigger. So we want to set the text for our newly created the text layer. And let's at our school container and it select a scroll. Ah, offset property. Okay? Willing to say the text layer. And now it's Ah, let's run the preview first. Okay, So as you consider this, the number is increasing. So that means that our detective trigger is detecting our scroll over container value. So when we scroll down is conceit e we can see the value off our scroll container. So basically, when we reach value off our scroll containers So something like a 470 then we want toe start our motion animation. So in order to do that, we're going to add add arrange trigger. So let's remove this attack trigger and it's at the rain trigger. So here, let's select our scrum container and for the property selector scroll in here type of 470. Okay, so everything we add inside our rain trigger, it will be activated when we reach that stroke within your value. So let's increase stroke Elena hight So we can actually see our second screen and selected first box number one. And inside we get this first square image layer, which is actually a background. So set the origin to right side and copy it's with and said the original with or original with toe zero. So in our skill response, we're goingto pays that with and we're going to increase the duration toe 0.8 seconds and the lake would be to 0.2 seconds and the easing could be set toe sign. So we're next. Select this details one layer and said the opacity to zero. And now its added the opacity response and said capacity to 100. The Russian could be 0.8 and the delay could be 0.8 as well. Okay, is in could be linear. And now it's Ah ah set our height off our scroll container to measure the device template so we can actually scroll our container So you can see only when we reach that scroll. Ah, value of 470 only that our animation will start and that looks fine. So now let's increase this crooked in your height again so we can see our second screen and let's continue adding motion animation. So the next one is our second box. So select this second square and copy It's ah with and set the with on original value to zero. And let's said the scale response. Let's based the with Let's increase the duration to 0.8 and the delay could be a little higher. So we will see. Okay, let's ah said the capacity for our details. Two. And let's set the opacity response. It's basically the same as our first box. So let's increase the duration to 0.8. Or maybe a 0.4 and delay could be one. Okay, we're going to leave that as the one, all right? So Ah, let's scaled down our stroke within her again so we can run our purview and scroll down. Okay, So as conceived, this is the animation which will produce, and it looks fine. So you can see those two square squares are moving from their sides and those texts are appearing. So next we need to enemy this third box. So it's increased the scroll container height and set the origin off this third square to right side and carpets with and said the with 20 So we can actually said the scale response and pays that value. Okay. For the easing weaken, select. The sign is in an outside on duration. Could be maybe your 0.8 again and delay. Uh, maybe we can leave the layers. Zero. So next to like this details three layer and said the capacity toe zero and let's add opacity response at 100% duration 0.4 and the lake would be again 1.2 seconds. So now let's decrease the height off our scroll container again so we can run our purview and check it out. Okay, so that looks nice, is conceived. So now we're going to continue Ah, implementing our motion animation for our second screen and the next one is our past text. So this is a title of this second screen and let's move this on the left side. But first, let's copy. It's ah, current exposition. And now let's move that on the left side. Hold shift when you are moving that on the left side. OK, and let's said Ah ah Move a response or not scale but move and I spaced the exposition. And for the duration, let's set a 0.8 and delay could be Maybe we will see so easy could be signed the A 0.2. Okay, so we Ah, it was the different text. So we need to say the proper text layer and ah, I need to trust this. Okay, so now we have a proper ah player selected. And next we want to set the opacity for our best title said that the capacity to 100 duration 0.8 and started late was there a point to using could be a linear for the capacity . And let's said the initial value of our past title capacity toe zero. Okay, so we have this brand project branding projects text, and this so first. But in it we want to copy the exposition of this text and let's move the attacks on the left side. And let's said the move. Ah, response here. Okay, lets said that sign. Ah, duration 0.8 the delays, you know, point ah three maybe and said the original or original opacity value to zero and said the opacity response toe 50% and the duration to 0.8 and they'll a 0.2. Okay, All right, so next one is this branding project text so said the capacity to zero and the opacity response said the capacity now toe for toe, 40% duration 0.6 and the late toe, one second. OK, he's in cleaner. Of course, for the capacity. And now let's decrease the height of the scroll container. So So we can run our purview and see how well this or look scroll down below. Okay. And as you can see Ah, it's all moving. So we just need to set the opacity response for our texts on the right side for our past title. Okay, so we forgot to Ah, we forgot to set the ah initial value opacity valley for our past text. So said the capacity to zero. And now Ah, we will have Ah, good motion animation. So let's run it again. And as you can see now, it looks even better. Okay, so next one, is this more button? Okay, so it's increased the height of our scroll container so we can see our layers. And here, let's select for us this button background, okay? And let's copy the with off our button background and said the with zero and let's have the scale response and paste our with here and for the easing, we can ah choose. Ah, quiet. Okay, integration could be one second. And the lake would be 0.4. Maybe we'll see. Ok, so now let's ah, like this, um, or text. And we want to set the opacity response. So said the initial capacity value to zero. And for the opacity response, select a linear easing and set the opacity toe 100% duration. Could be maybe 0.4 seconds and delay toe one second soul now. Ah, Okay. So before we run our preview when we need to decrease the height off our spoke container so we can actually scroll down and it's Ah, run it again. Okay, So now let's go down. And as you can see, our button sizes Skilling on the right side, from the left to the right, and our more text is appearing. So next we need to animate those two lines. Line one and line two layers. And basically, when we select our line one, we need to change the origin toe the right side because we want to set the our scale response from the right side to the left side. So let's say the origin toe right side for our line one and copy the with and said the with 20 Okay, so let's add a scale response. That space that with here for the easy, we could just It was we could use it. This sign and duration could be a 0.6 maybe. And the late toe, 1.4 seconds. Okay, so for the line to we're going to copy the scale response and just select the line to Okay , this is lying to layer and just Ah, we can just change the delay toe. Ah, 1.6 seconds this time. Okay, so it's ah, scroll. Decrease the height of our Scocco data so we can honor Prevue. And now it's scroll down so we could see our motion animation. Okay, so everything works fine. We just forgot to set the initial value for our line 2 to 0. So copy the width of this line. Toe zero said the region on the right side and said the initial value to zero. Of course. Okay, so so like this lying to and said the initial with zero. And now everything should look fine. So let's scroll down now. And it's see, Carol, that all work. So as you can see each and every layer here. Ah is working perfectly fine. And our motion animation looks very nice. So let's try that again with the normal speed, okay? And that looks nice. So that'll be all for this second screen. And in the next video, we're going toe import our terrorist screen and four screen. I will leave it to U. S so you can do a homework and you can continue working on the same project and, ah, all by yourself. 59. Web App - Third Screen: Ah, hello there and welcome back. So in the previous videos we have started Ah, prototyping our web application or landing page. And we have implemented the two screens. Okay, so in this video, we're going to implement the third screen. And these, as you can see now, Adobe X'd we have our design ready. So our total screen he has all layers named properly. As you can see, we have this starts group and inside this group, we have those to read the rectangles. Then we have those toe texts, mean and Max and we have the rest of those rectangles in the gray color. And, of course, the details on the top. Below that, we kept this stats background, which is a white collar background. Then we have this line, and then we have this a side panel. So if you're wondering, why do we need this side panel? So it's because we want to hide Ah, some part off this background image when we are moving from the left to the right side and you will see. And of course we have the same ill panel is well, it will have the similar purpose. Okay, so now that we have seen all our layers. Let's head over to our apart a pie project and let's import this third screen. So select this are born named three and deport size one X, of course. And now we're going toe drag and drop this start screen inside our score container. Okay? And let's increase the scroll container height so we can ah, actually see our screens here, and we're going to move our third screen down below. So select the screen three and whole trip shift while you are moving that on the bottom. So Ah, now we want toe add the text trigger so we can see the actual value off our scroll container when we're scrolling down because we need to decide which value should we take in our arranged trigger. So ah, it will be basically the same thing which we done in the previous video when we are a print at the second scene or the second screen. So here, I just want where the text response inside our detect trigger and I want to select our school container and it's ah, property scroll offset. Okay, so now when we run our preview and okay, So first we need to decrease the height off our scroll container so we can actually scroll down our screens. And now, as concede, this value is a changing. So we need to decide which value should be. Ah ah! Enter inside our new range trigger. And let's move this text. Ah ah layer just below Ah, so we can actually see that where we are moving our scrolling. Okay. And now, as you can see ah, we're going toe Remember a position off something like 1000 and 50. So I think it's better that value. So 101,570 maybe. OK, so that's the value which we're going to us for our third Ranger trigger. And now it's a select our scroll container scroll property. And let's type here 1570. So when we reached that scroll value, then we're went toe at the motion animation for second toe, Arthur the screen. OK, so let's increase the scroll container height so we can actually see our third screen. And ah, let's start with motion animations. Okay, so here we're going toe first at the move, treat, mover response and Let's copy the exposition off our background image. And let's move that image on the left side behind our side panel. Okay? And let's paste the exposition here and the for the easing. Let's choose quad adoration. Could be, Ah, 0.6. Okay, all right. I think that's fine. So you will see what the effect it will produce. It's a very nice eso next here, inside our details Ah, group which have ah many layers and we're going to animate them as well. But first, select this stats background, which is a white background, and they're willing to copy. It's a height value. So let's copy the flight value and said the height value to zero because we want to scale our stats background from the top to the bottom. And in this scale response, just paste this value height value. Okay, the Russians will be 0.6 and ah, the lake would be 0.4. OK, so now we're going toe start our purview. But before that, let's decrease the height off the off our scroll container so we can actually scroll down and let's check it out. Okay, so I can see when we scroll down this big around images coming from the left side and this steps background is, ah, scaling from the top of the bottom. Okay? And that's the exact thing which we wanted. So let's ah, decrease back. Our spoke with dinner height. Next, what we want to do. We want to animate this a new text or a title. So let's copy the exposition of this new ah layer. And let's move that on the left side. So now we're going to add the move response, of course, and it's paste the exposition off that layer, and the Russians will be 0.6 and the lake would be 0.6 as well. Using quad. OK, and now let's copy the exposition of this text down below. And let's move that on the left side as well. So again, we're going to add the another move Response for that pays the exposition at duration 0.6 and the lay 0.7 or eight. 0.8 and easing quote okay and one more. I wanted to sect our button, and we need to move that on the left side. But first copy the exposition of that button. And now move that on the left side. Okay. And now it said the move response as well. Okay, is in quad. The Russians at the 0.6 and the like would be a little bit more. So instead, off using 0.8, we can use a 0.9, all right? And the now we can decrease the height off our scroll container so we can check our purview . All right, let's let's scroll down. And as you can see, our layers from the left side, those texts and more button works perfectly fine. And that's okay. And, ah, now we need toe enemy. This statistics stets Ah, group player. Okay, So first women to said the initial value of this step slayer to zero, and we're going to add capacity response to 100. So easing should be linear. Adoration should be a 0.4 or 6.6 and the like would be zero point toe a one point. Oh, sorry. Okay. And ah, that's fine. So next I want toe create the motion animation for those to red rectangles. Okay. So first, what time you want to do I want to set the origin to the bottom. And I want to copy the fight off off this little Ah, read the rectangle and I want to set the ah, unusual very 20 for the height. But first, let's add the scale response. Okay. In here, paste this height value for the easy will choose the quad. Adoration could be 0.6 and l A. Maybe 1.8 seconds. Okay. All right. So that should work. Fine. So now we need toe at the opacity for our men text. And here what said the opposite? Ito 100 duration zero point six more four. And the lake would be Ah. Ah, little bit more like 2.4 seconds and is in Galina for the capacity. So let's ah, decrease the height of our scroll container and let's run our purview. OK, so I scrolled down. Says you can see this. Ah, little circle rectangle eyes, not the increasing. So that's why we need Toe said the initial value to zero and now it will scale from the bottom. Okay, so that looks fine. And our ah text mean text is not working properly. And that's because we forgot to set the initial value for the A pass it Ito zero. So let's now select our text here, and we're going to change the capacity to zero. OK? And now everything should work. Fine. And they were going toe. Repeat this motion animation for our second the bigger right red rectangle. So now select our this max right layer and copy the high position and said the origin toe Ah, bottom. And it said the scale response based on the height value using could be quad adoration 0.6 and the lake would be maybe 2.2 seconds. Okay. And now I wanted to say this Max text said the opacity to zero. And let's add a positive response to 100 now. So, duration 0.6 is in linear. And the Lakewood busy. Ah, 2.8 seconds. Okay, so now we're going to run this preview toe, see if everything works fine. Okay. So again, we forgot. Toe said the initial height value to zero for our max red layer. And now everything should work. Fine. Okay. So you can see those to red rectangles. Our increasing are scaling, and the next thing I think we should move this more button on the left side just a little bit because we can see that before we see the emotion. Imagine. And now you can see it looks it looks way better. Okay, so next to what's left. OK, its first. Let's increase the scroll container. Ah, height so we can actually see our layers. And now what we need to do We need toe create emotional nation for our line three layer said the original the right side copy with and pays the with in our scale response for the using Select Ward Adoration 0.6 and they maybe 3.2 seconds. Okay, So select our line three layer and said the with 20 And for the line four layer we need toe said the region on the right side because we want to scale it from the right to the left and copied with position and said with value to zero and hearing the scale response at that value off the with duration zero point sixth and delay again 3.2 seconds. Okay, so now let's around our purview again. And see, uh, how well all that look. Okay, Let's run that so scrolled down and more. Okay, so now it looks away. Better. Okay, let's run that preview again so I can see that again. And as you can see, our animations are very nice. Okay, So that will be all for the our third screen and the for the fourth screen. I want to give you homework. And, ah, I'm not going to record the video where I implement the fourth screen. Instead, I want you to download the all the project files like a Web application design and, ah, our approach a by product. And I want you toe implement the fourth screen instead. 60. Web App - Upload on Cloud: