Introduction to Prototyping in Axure 9

1. Introduction: Hey there. My name is Fred Beecher, and I want to welcome you to my class introduction to prototyping and actor night A bit about me to get started. I've actually been training people how to use actual since 2007 but this is my first opportunity to do a video course and to do an online course as well, so I really couldn't be more excited. Now. This course is primarily aimed at people who are new to, actually. But if you're an experienced user and you'd like to see some of the features and functionality from version nine in action, this is the place to do it. We won't be going over everything, but a lot of the really important stuff will cover here. So the way that will start is by working together to build the world's simplest prototype. This will help you get a sense of actors basic workflow, and then we'll quickly go over actions. You, I and these two things together will give you the basis that you need for the rest of the course. The rest of the course is split up into five different sections. The first section will learn about how to wire frame and fracture the second section, which is my favorite. We'll learn about how to do interactions, which is my favorite part of prototyping. The third section will learn about masters which help us reuse design and functionality components throughout the prototype. And then we will focus on how to prototype responsibly. And then we'll wrap up talking about documentation and collaboration in actors. New service, actual cloud. So I'm really excited to get started. I hope you are, too. Let's go ahead and again. 2. The World's Simplest Prototype: All right, let's get started by learning about actors. Basic workflow. Fortunately, it's pretty straightforward. All you do is you add objects to a page. You make them interactive. Then you preview your prototype in the browser. And if you make any changes, you just refresh the browser window with your prototype in it, and those changes will show up right there. Now the way that we're going to learn about this is by building what is literally the world's simplest prototype. To get the most out of this, I highly encourage you to follow along with me. So go ahead and squish my window up and then bring actual up in another window next to it and follow along as I go. This will help you get the feel of actors basic workflow. All right, let's go ahead and get started. Hello, everyone. We're going to begin this actual class by building the world's quickest, simplest prototype. So let's start by opening actor. When we open actor, it's going to present us with this intro dialogue. Let's just go ahead and click on new file and then actual will show us its default. You, why we're only going to focus on the parts of the U. I in this lesson that we need to create this simple prototype. Well, look at the U. I and detail in a subsequent lesson. So what we want to do with this quick, simple prototype is tohave one page with a button on it, where you click that button and it takes you to another page. So let's first focus on making sure that we have pages that we need. So the way that we do that an actress go over here in this pages pain, and we can see that actor has already created the first page for us. So let's go ahead and create that second page by clicking on the ad page button. There we go. Now you can choose to rename it if you want. I'm going to leave it named Page two. Now what we need to do is to put a button on page one. You can see that we're still on page one through here and here. Now, the most common way that you add objects to a page. An actor is through the library. A library is a collection of what actual calls widgets that you can put on a page. I'm going to choose this simple one here and simply drag it to the page. So dragging widgets from the library Very, very simple way of adding stuff to the page for actually, I'm going to actually DoubleClick fists that change the text to go to page to. All right, so now we've got a page with a button on it and another page that we can go to, but we still can't actually do anything with this. So what we need to do is to select the button and add what actual calls an interaction. Now, in version nine, they have greatly simplified how you create interactions and actor. So, for example, it presents us with common interactions for this type of object. So when I click this button, I want to open a link to another page. So I'm going to go ahead and choose this common interaction. It's now telling me to select the page, so obviously I want to go to page two, so I'm just going to click on that, and then that's all I need to do. So I'm gonna hit. Okay. All right, So now we've got the two pages. We've got the button. The button is interactive. Now what we need to do is to put this into a browser and the way that we do that an actor is simply by hitting this preview button here so it will open up in a new browser tab and we have our button. And if we click on this button, it appears to disappear. But what's actually happening? If we click over here, we can see the page hierarchy were actually on page two. And if we click back to Page one, click this button again, we go to page two. That's it. You've created your first prototype Congratulations. 3. Axure UI Tour: the actual user interface is composed of a whole bunch of different areas, tool bars and pains. Now, this is just a quick tour, so I'm just going toe orient you to what you confined in each of these areas. As we continue through, the exercise will get into some of the detailed functionality that is present in each and every one of these little areas. So let's start with the wire frame area. This is the main area that you're going to be working in an actor, as you are dragging widgets over here to make your wire frame. Now, over here and the pages pain. This is where you have a list of all of your pages and you can actually double click on these. And that opens up all of your pages that you click on in tabs, which is very convenient. Now. We've already seen how we can add a page in here. We can also add folders, which helps you keep things clean. I'm going to call this folder fastest prototype and then dragged these two pages in there just to keep everything all neat and tidy. Now, the other thing that we have going on over here is the outline pain. In this pain, you have a list of every single object on your current page, which is very, very, uh, helpful. And if you're a sketch user, this is something that will make you feel very, very comfortable. So I'm gonna go back here to pages. And then let's take a look at the libraries pain as well. The library's pain allows you to choose between three different libraries. Flow are the default library flow and then an extensive icon set, which is new. I believe for nine. There's a lot more here than that has been in the past. Ah, I Austin, keep it on all libraries and then just use the search functionality, which we'll see later. But let's just pop it into default. So let's switch over here to the right hand side. Over here you have the style, pain, the interactions, pain and the notes pain. So with the style pain, this controls all of the different aspects of formatting for whatever you have selected. Now it's highly contextual. So right now this is the formatting that you can do it to a button object. But I can also click on what appears to be empty space but is actually the page, and that gives me formatting options for the page itself, which is pretty interesting for interactions. This pain is where we can specify how the prototype interacts with our behaviors. Now, if you are new to nine, you're in luck because this is much more streamlined than how it was before. But if you have been using actor for a while, this is going to take some getting used to. However, it is actually more efficient in the long run. Finally, this notes pain allows you to communicate specific information about each and every object on your screen as well as the the page itself. So this is a very helpful communication tool to make it so that you don't have to prototype every single interaction you can document Ah, whole bunch of them as well. So looking at these pains, there's something that's very new in Action nine, which is this ability to pull the pains out, which is pretty interesting. So if you have a multi monitor set up, a good way to use this would be to put all of the pains on your smaller monitor, so you have all of them visible at all times, and then you can dedicate your larger monitor to the wire frame area. Now to get this back, I just go to view and hit reset view. Now, finally, what we have here is ah, toolbar up here. There's not a lot here that you wouldn't normally do with Ah, right, Click or, um, a keyboard shortcut. But you do have control over how you select things, and if you're building a flow, you can connect your objects together. Now, you also see this down here, which appears to duplicate the style pain. And you're absolutely right. It does. However, that shows up all the time. So it doesn't matter if you're in the interactions pain, the notes pain. You always have the ability to format your objects. And that is the quick tour of the actual you. I I look forward to getting into all the details of these areas as we progress with the exercise 4. Class Project Introduction: When I teach actor, I usually like to have people try and recreate something that already exists. The reason I do this is because it really helps if you understand what your prototype should be like at the end. Now for this course, the site that will be recreating is the Sunita athletics website. Please go ahead and see the course description for a link to the website. The reason I chose this website is because it has a balance of simple and complex interactions and it's responsive. Layouts are fairly straightforward now. In subsequent classes, we will continue on recreating the Sunita site just with higher levels of fidelity. Now, don't worry if you can't get your prototype exactly right. To be honest, it could be hard for me sometimes too. So what I've done to help you out in that situation is in your course materials. I have included an actual file that has the end state of all of the different extra exercises that I'm asking you to do now. I encourage you to give it your best shot before you open up that file. But if you're stumped and you just can't move forward, that file will have the answers that you need. The website will be recreating for this actor Class is thesis Anita Athletics website Sunita Athletics is a company that makes fitness apparel for women. And the reason that I love using this particular website teach actor is because it's a great mix of simple layout and intricate interactions so we can start up here at the top. You see that we have this top functionality bar up here and then we have ah pretty standard navigation bar down here with some search functionality as well as, ah mega menu which is another common type of interaction. And we will be prototyping this type of interaction in this class on. Then you can see this large image here a lot of really rich visual content which we can also do an actor. And as we scroll down here, there is ah ah section here that has the product categories and we see some interesting mouse over interactions. We will be prototyping simplified versions of these interactions in this class. As we continue to scroll down, you'll see more big blocky visual content. As we get down here, you will see a ah product grid, which is a common thing in any e commerce website. And we will be prototyping this type of interaction as part of this class but actually also has a special object specifically for this type of use case. Now, using this object is fairly complicated, so we'll be saving that for another class as we continue to scroll we Seymour big image content. Um and that's the website. More or less. Now, the other great thing about this site is that it is responsive so we can use this website to help us shoot for something. When we are working with adaptive use, an actor and that's the website will be recreating for this actual class. I'm really excited to get started with this and dig into this with you. 5. Intro to Wireframing: all right. In this first section, we're going to learn how to build a wire frame in action. We'll start off by defining page dimensions. Continue on by placing shapes, text images and icons on the page. And then we'll wrap up by learning how to navigate layers in after nine, which has actually been updated from previous versions. Now, since the Sunita site is so image heavy, I have included a whole bunch of pre cropped images in your course materials. Include encourage you to use those in your wire framing just cause. That'll speed things along really quickly. And don't worry about using those images. I have sourced them from a number of different stock photo sites, so you are all set to use those. All right, let's go ahead and get started. 6. Working With Pages: In this short lesson, we'll learn the very basics of how you start building a prototype in action. Those basics are creating pages and specifying their size so we can see over here that we already have the fastest prototype screens all tucked away in their folder. So I'm gonna create another folder for the Sinead A prototype, All right. And then I need to click on add page to create another page, which I'm just gonna call home. And now you can see that this isn't actually in that folder. So I have to grab it and then drag it into that folder, and there we go. Now, this page is completely raw. I have not specified any information about this at all. So when I open it up, it's just it keeps going and going and going. Now, what I want to do is I want to make this a very specific size. So the way that you can do that is you can go to the page dimensions drop down, and you can actually choose from any of a number of different templates, depending on what you're doing. Now I happen to be on a Mac book pro, which I don't really see here. Um, So I'm gonna go ahead and create custom device, and I happen to know that the width of my screen is 1440 pixels. So I'll specify that here and then I'll choose not to specify a with. So now, if we scroll over here and then zoom down a little bit, we can see that we have a defined boundary for our design. And there you have it. This is the page that will use to start building our prototype of the Sunita website in the next lesson. 7. Placing Shapes and Text: in this lesson will be learning the basics of placing shapes and text on an actual wire frame. Now there's three ways to do this. I'm gonna start with the most common, which is to drag something from the library before we get too deep into this. Let's take a look at Thesis Anita site and make some decisions about what will focus on. So let's focus on this top bar up here and then notice that there's a ah ah, background to this cart over here that's slightly different. And then we'll also focus on this knave bar, and we've got this big image here with some hatter text. So let's switch back over to actually now here is Thebe Ox that I dragged from the library . As you can see, once I come up against borders of the page there, these red lines that show up this is new in nine. Those of you who are big sketch fans will appreciate this, I'm sure. And there we go. This is our top are OK the second way that you can add something in actually is through this insert menu. This, too, is brand new in version nine and also should be something fairly familiar for a sketch users. So I'm going to click on rectangle here, and I'm going to just draw a rectangle. Um, that is roughly going to correspond to the shape of the background of the car thing. So you can see here when I move up against something I can actually snap to that thing, which is pretty convenient. So, uh, that's probably not coined the right shape, but close enough. I don't want a border, so I'm going to go here and change the border to zero and make the fill a little bit darker , so that looks good. OK, now, I know I need to move this over here, and I'm actually going to go and specifically make this 40 pixels because I know that that's the height of the, uh, bar and also make this 70 pixels wide. That's very convenient to be able to do this in the style, uh, paying over here. But you can also do it up here in the in the style quick bar to a bar. All right, now we have those two things in the third way is again something that will be very familiar to sketch users. It's related to this. Insert men. You know, if you see something that looks like this, um, you don't have this property that I'm about to talk about turned on. But if you just see something here that says P or R or O or L, you have something turned on that's new in version nine code single key shortcuts. No, I specifically turned that off because that's not how I like to work. But if you want to make sure you turn it on, you can go to preferences or the equivalent in windows and go ahead and go to the canvas section and choose enable single key shortcuts. So what I can do now is if I want to draw a rectangle, I just press the R key and then I can snap up against those borders and we'll ah, there's my nab our again I'm going to from the border to zero and the fill to something not quite so dark. All right. And then this, I know needs to be, uh, 70 pixels. So hit that. And there we go. There's are now bar. Now, one thing I want to do quick is to switch over here to the outline. Now we've got three rectangles on the page and all it says over here is rectangle, rectangle rectangle. One of the things that's absolutely critical in action is to make sure that you are naming all of the widgets that you place. Because if you fail to do this once you get into working with interactions, you'll lose track of the objects that you're trying to force to do some sort of action. So it's a habit that I recommend you get into that when you play something, you name it. I'm going to call this cart BG. I'm going to call this one top bar, BG. And you can actually also do this right from the outline itself by doing too slow taps on the name. So this one I'm going to call never bar BG. All right, so now I have those bars. The next thing I want to do is Teoh Put that big image in now. Most of the time when I'm doing ah, prototype. I don't have any sort of photography, so I use an object called a placeholder. Now, one of the fun things you can do over here in this library is you can actually search for things by typing in their names. So I know that this is called Placeholder song in a type play ace. There we go. And there's my placeholder. The reason I like this is because it allows me to rather it prevents me from, um, trying Teoh scroll through a list of things visually and missing things. All right. This, I know, needs to be as wide as the page, and it also needs to be 14 20 pixels tall. All right, so this is a placeholder that stands in place for the image, but it's going to be behind some text. So one of the things that I want to do is I want to lock it. So I'm going to right, click and choose lock, location and size. This means that if I drag on this area, nothing's gonna happen. It's not going to move, which is going to be very helpful once I start moving text around on it. All right, so let's go over here and find some text. One of the main text text elements you'll be using is called label, so I'm going to search for a label. There we go. And I'm just gonna drag it up here because I want to put at least one knave item up there, So I'm gonna zoom in. That's not a big enough. Fought. So it's called that 20 points. Here we go. And, uh, moving it so that it's snapped to the center there, and I'm going to call this wish list, all right? And then one of the other things that also comes from Ah, the inspiration behind sketch is when you have an object selected and hold down the option key, um, for Mac, Then you can actually see how far away the selected object is from other objects on the screen. So this I actually want to be, Ah, 40 pixels away. So I'm going toe hold down. Shift moving in a straight line over here. Hold on. Option C 34. Ok, now I'm going to use my arrow keys and just move over six pixels. So 123456 And if I press option again? Yep, 40 pixels. That's what I want. Okay, zoom out. And the label is too small for something that we need to put in here. So we're going to work with the other type of text object in actual, which is the heading. There's also a, um ah, paragraph type. But we will talk about that one a little bit later. All right, So I'm gonna drop this in there. That's not big enough. I call that 80 points and say that we don't really need bold for that. Okay, so I'm gonna center that up, and this is the name of the company. All right, so now I have that locked so I can move this around with impunity. Let's get that centered up with these guys. There we go. We don't have time to wire frame this whole thing, but if you open up the class file interaction completed exercises and go to this page L. Owen be home shapes. You can see what it looks like if you were to wear frame out this whole page. And that's what I have for you. The next lesson will show you how to work with images in your actual prototype. 8. Working With Icons & Images: in this lesson, we're going to learn about how to work with images and icons. An actor. First, let's go over to the Sunita sight to see how they're working with these types of objects. So it looks like there is a, ah, magnifying glass icon here. There's huge, beautiful images all across the site. Ah, and there's also these stars here as part of the ratings and reviews functionality. So let's go back to actual here and focus on Icahn's first Let's scroll down to our products. Ah, and I'm going to zoom in here to make this easier to do some layout. And I'm gonna scooch this over, holding down the shift key to make room for the stars. Okay, Now, where do you get these stars? Well, actor actually comes with ah whole icon library full of good stuff. Now, there's so much stuff here that it's sort of difficult to navigate, So I almost always, uh, type in here what I'm looking for. So I'm gonna do star, and there we go. That's exactly what I'm looking for. So I'm going to drag this in here, and I'm gonna want this to be about 20 pixels so I'm gonna hold down shift and resize it to be about 20 pixels. There we go. Then I'm going to make sure it's aligned horizontally with the review text and then hold down my Ault option key. Teoh Uh uh, make multiple copies and they're about four pixels apart right now, which is fine. There's one more I need to add in here, and I can choose star half empty or star half full to start half full, since I'm tend to be more of an optimist and I'm going to change that down Teoh the same size. There we go, well, downshift to move in straight lines. And that looks good enough for now. So those are the basics of dealing with icons. And after now, let's take a look at images, gonna scroll out and move appear to this main image on a website. Typically, this is called the hero image. So I'm going Teoh, delete this placeholder that we had before and go back over to the library. But this time I'm looking for an image, not an icon. So I'm going to go back to the default library and I'm going to drag in this image widget on a line it to the bar and the edge of the page here. Now this is one of many different ways to get images in tow. Actor. So I'm just going to double click on this, and that's going to bring up a file browser dialogue, and I'm going to click on Hero here now in your Class Materials folder. You do have both of these folders Sunita Color and Cindy in a gray scale. All of the images have been cut toothy appropriate, ah specifications for you to easily be able to bring these in for your exercise. So I'm just going to double click on this, and there it shows up in the perfect size, so you'll notice that the text that was there seems to have disappeared. All we need to do is head back, and then the text comes back. Now let's go down here to these categories. Zoom in a little bit and I'm going to show you another way to get a new image in tow. Actor. You can simply drag it and drop it from your file browser. So there we go, and I'm going to online it here and just get rid of this place holder and move it over so it's nice and aligned that looks pretty good and just send it to the back. It's not quite aligned as it needs to be. That's probably better. All right now, another way to get images in tow actor is simply to double click on any existing image because you can actually replace it with any other image. So if I just had open there we go now. Caveat. Here is that if the image that you're replacing is not the same height and width as the image that is being replaced with, the image that it's being replaced with is going to squish into those original dimensions. All right, so now you know how to work with icons and images and actor. So go ahead and complete all of this so that it ends up looking like this particular page. The home images in your completed exercises file and we'll see you in the next lesson. 9. Grouping & Layers: in this lesson, we'll learn about grouping objects. An actor now. This might not seem like it's that important of a thing to know about, but it is especially important in actor, and that's because of what actually is known for, which is the ability to create really rich interactions. Now the amazing thing about groups and actually is that you can assign interactions to a group of objects. So with that excitement in mind, let's go ahead and look at what we should have at the end of our last exercise. So this is the completed version of the last exercise. So all of these images air in here. All of the icons and things like that are there. But if we were to tap over here and get to our outline, weaken, see every single object on the pages in this list so it makes it first off fairly difficult to navigate. So let's just focus on ah, this area right here. So this is, uh, obvious content block. Typically, this is called a hero in Web design lingo, so let's select the background image, the headline, the subhead and this little button you can actually see here in the outline. These things they're selected, uh, the selection is reflected here. You can also select things directly from the outline if you want, and you just hit right Click for PC or control. Click for Mac on you, Congar ahead and group that or just hit Command or control G and there's our group. Now all we have to do is name the group. I'm going to call this hero. There we go, and we can see over here this group is thought of as an an object. So if I click on interactions, I have the ability to create a new interaction based on this group, which is pretty fantastic. Now, switching over to the completed file, I want to show you what it looks like when you have, uh, everything organized into groups. So if we look at this, we can see that all the blawg posts, all individual products, all the different sections of the page. All of these different things are represented as individual groups here on. If we expand them there, we can see all of that there. And each of these groups essentially reflects a content block on the main site. So Here's the hero here, the categories. Here's the functional block, etcetera, etcetera. So that is grouping objects and actor. The next lesson I'm really excited about because we finally get to get into creating interactions, see, then. 10. Intro to Interactions: all right, Interactions, interactions air my favorite part of prototyping. That's cause that's what you used to make your prototype do stuff. And action has comprehensive functionality around building interactions. That's one of the reasons I love it so much. Now, if you're an experienced actual user, I encourage you to wash this lesson because interactions are where they made some of the biggest changes. The bad news is, is that if you're experienced, this is going to take some getting used to. But the good news is, if you're new to actually er, it's a lot easier to learn than it used to be. So in action nine and Interaction is composed of three things. An event, actions and targets. An event is something that can happen to a prototype or something within a prototype. So you click a page, Are you click a link? Eso. The click is the event. The action is what happens when the event occurs. So on click go to a new page, going to the new pages theatrics in now you need to specify which page you want to go to, and that's the target. So click is the event open new page is the action, and the category page is the target. Now, in this lesson, you are going to be learning how to do simple interactions like that, including links and basic mouse overs. But you'll also get to learn how to build rich mouse overs as well as mega menus. So this is gonna be really fun. Let's go ahead and get started. 11. Linking to Another Page: in this lesson, we'll learn the basics of creating interactions in actual interactions are what make your prototype interactive. So before we start, we should make sure that your prototype looks something like this. So far, you've pulled in all the content and, ah, you've made the layouts like this. Um, and then, ah, once you've got that all set up, then we can continue on with this. So in this lesson, what we're going to do is we're going to take this shop link here and make that take us to another page. So first we have to create that second page, so I'm gonna it add page up here. I'm gonna call it shop. There we go. And now I'm gonna double click on that. Teoh, open it up in the wear from area here, Page dimensions. I am going to hit custom device again and do 14. 40 and no. With here we go. All right. So now all I need to do here is just to put something you can put anything here. I'm just gonna put a gray box. Ah, that communicates to me that this is in fact, the shop page. So I'm going to double click on this and just very clearly articulate what this is. All right, so we've got this page. I'm going to click on this X to close that out. Now, there's a number of ways that we could actually get to this object. What I want to do is I wanna create this link right on the word shop itself so I can click on here, which is the knave bar group. Then I can click on it again, which is the shop link group. And then I can click on and again. And now I have the thing that's at the very bottom of this group, which is the shop link. But what I'm actually going to do is I'm going to go over here to the outline to show you how you navigate it, navigate to it from there. So I know that this is the nab our even if I didn't when I click at its selected here. So I'm gonna expand that and the sea. There's the shop knave link. So that's the whole group. And there is the shop text itself. So what I'm gonna going to do is go over here and click on interactions. So one of the things that's new and actor nine is ah, streamlined way to create interactions. Oh, the way that it's streamlining this is by collecting some of the common interactions right here. So what I want to do is when I click on this, so on click, I want to go to another page. So that means I want to open a link. So all I have to do is click on that. And now the page that I want to go to. I just select that right here, hit, okay, and I'm done. Let's see how that works. You go ahead and hit preview to generate the prototype. And if I you can tell that shop is now interactive. So if I click on that there we go. I'm at the shop page. Now, one thing I want to show you is that you can actually create links on Mawr than just individual objects. So what I'm gonna do is I'm actually going to select this interaction here by clicking on it and I'm going to hit delete, and that gets rid of the interaction so you can delete interactions as well. Now I'm going to, uh, to select the shop knave link. So this is a whole group, and I'm going to create a new interaction. Now. It's not giving me any common interactions because this is a whole group. So if I hit new interaction, I need to choose which interaction to use. Now there's a lot of what are called events, so events are things that can be done to a prototype. Usually it's things that a person can do, like click DoubleClick. Oh, our press the mouse down. But there's a number of other things, too. We won't be able to look at all of those right now, so I'm just gonna choose on Click. So on click is my event. And now I want to at an action toe happen during that event, and the one that I want is open link. So these actions are the most common for on click. So I'm gonna hit open link, and then it should start looking familiar from now. So there we go. And if I go back over to my prototype and refresh, actually, let's go through here and navigate to this home page. All right. If I hit shop There we go. It still works. And the fun thing is, so if I go back, that even works. If I'm over here on top of this little carrot thing, there we go. And those are the basic rules for creating at an interaction an actor. 12. Making a Mega Menu: in this lesson, we'll learn how to manage the visibility of objects, an actor and how to control that visibility within the prototype using the on mouse enter interaction. So before we get started, let's go ahead and take a look at the Sunita site and what we're going to be trying to prototype here. So in this site, um, in this top bar, when you mouse over shop or fax, you get this big sub menu here. Typically, that's called a mega menu and you can see how, when you're up here, that doesn't go away. But if you go up here, it does go away. Ah, and also, if you scroll off of it like this, then it goes away. We're going to do something fairly similar in actor and what it will look like is this. It will be more simple than it is actually on the Sunita site. So you would mouse over shop like this and then if you go up, it will go away. And then if you go down there, it will go away as well. All right, let's go ahead and get started. So switching back that actually here, the first thing that we need to do is we need to actually create a bigger venue so we can do that by just dragging a box to the page. Um, I'm just gonna drag a big gray box here. And since the sun Ito one is somewhat transparent, I'm actually going to make this one a little bit transparent to let's call this 60. Hey, that looks reasonable. All right, now. Ah, we also want to make sure that it's labels. I'm going to call it Mega Menu here and also over here. No. Let's also add a button to it so that we can go to the shop page, double click on that and hit Go to shop. All right, now we need to make all of this invisible at the same time. And the easiest way to do that is like we learned before to group things. So I'm going to select both of these objects. Hit command G on PC. It would be controlled, g. And now we have a group. We can see it up here, and I'm gonna tap on that and name it right away. Okay, so now we have this as its own object. Now we can think about its visibility. So by default we want this to be invisible. So the way that we would do that is weaken. Set this an actor. There's several different ways. Wherever you see this eye icon, you'll see it here in the style pain and up here in the style bar. You can use that to set whatever you have selected to hidden. I typically do are right, click and do set hidden. And once you've hidden something, you can see that it will look yellow. And that's actually telling you that there's something there. It's just hidden by default. So when we go ahead and go to our prototype and refresh it, let's see what this looks like So you can see we can't see anything here at all. So we know that it's working as intended. So going back to actor, um, so in order to keep things simple, I'm going to select this shop link here and get rid of the existing interaction. So I'm gonna select the interaction over here by clicking on it and then hit delete to get rid of it. All right? And so now I want to make it so that this becomes visible once I mouse over this group here . So I'm going to hit new interaction and the action that I want to. Er, sorry, the event that I want to use his on mouse enter because when a mouse enters this area, that's when this needs toe happen. So the action that I want to have happen is around visibility. And so what that is, is that show and hide. So if I click, show and hide here, it's gonna ask me what I want to show and hide. I'm going to select the mega menu group here, and no, I can choose to show hide or toggle visibility. Right now. Show is selected by default, and that will be fine. So I'm going to hit. Okay, All right. Now, let's go back to our prototype and refresh and see what this looks like. All right, so mousing around here, everything's fine. My mouse over shop. Then the mega menu shows up, but I can't really get it to go away, and that's because we haven't specified that particular interaction yet. So let's go back to action and see how he would do that. All right, So I'm gonna go up here and click on mega menu so that I'm in this area here and what I'm going to do is, ah, I'm going to add an object called a hot spot. And this will seem unusual as to why I would do that, because you would think that you would just be able to use the interaction on mouse out to make this go away. But the problem is, is that on mouse out will fire even if I go up into the bar like this. And if I want to go into the bar like this on and have that menu remain, I can't use on mouse out. So I'm going to use this hot spot object. Typically, I like it to be about 40 pixels tall. That's usually big enough, and what this object is going to do is it's totally invisible, so you won't be ableto see anything with this here, so it's just going to catch the mouse enter, so when the mouse enters this, then it's going to hide the mega menu. But we want this to be part of the mega menu, so I'm looking over here in the outline, and right now it's very separate, so we don't want to have it like that. So I'm going to drag it into the mega mega menu here, right on top, and I'm going to name it because we name everything. An actor me to call it. Ah, mega menu trader. All right, and now that's still selected. So I want to add my interaction. I'm going to choose on mouse enter and again I want to show or hide. And again I want to show or hide mega menu. But in this case, I don't want to show it. I want toe hide it. So I click on hide and hit. Okay, And now if I go to the prototype and refresh it, I bring over that shows the menu and then going out of there makes it go away. And then when I go up here, still nothing happens. So we're almost there. Let's go back to actually now what we need to do is we need to make it so that when the mouse enters this top bar area again, this is ah, big group. When the mouse enters this area, then we want the mega menu to go away. So I'm gonna go ahead and click on new interaction again and again. I'm going to use on mouse, enter and show and hide, and I want to show and hide mega menu again. And in this case again, I want to hide. So I select hide and then hit. Okay. And let's go back to our prototype refresh. And if I hover over shop and go up, then it goes away. If I hover over shop and go down, then it goes away, which is exactly what we want to have happen. And that is how you use the mouse, enter interaction or in actual ER to control visibility of objects within the prototype. 13. Making a Rich Mouseover: in this lesson, we're going to learn how to do a richly interactive mouse over interaction in actor. So if we scroll down on the Sunita site here and look at thes category blocks, we can see that there's a lot of stuff happening when you mouse over the background image dims. This title moves up and these things appear, and this even extends in. Now you can do all of this in actor, but to accomplish this requires a little bit more advanced techniques that are out of the scope of this introductory class. So let's take a look at what we're going to do instead, it's pretty close, but it's not all the way there. So when we mouse over this, we have the category title that moves up, and the image in the background is great out a little bit. And then we have these items here that appear. So let's go ahead and look at how to do that. An actor. I'm going to switch over here to our prototype, and the first thing that I want to do is create that that ah blackening effect. The way that I'm going to accomplish that is by adding another box here, and I am going to make it exactly the same size. I'm going to name it before I do anything else. Name it mask. And then the way that they actually get that effect is there essentially overlaying something on top of that image s I'm gonna make this black and 40% opaque, and you should see something that looks pretty close. All right, there we go. Now, we need to actually get it inside this group s I'm going to just sort of drag it down here , and it'll take a little while. Toe, Get in there. Uh, okay. So there we are. Theirs are first category right now. We've got it in the category group, but it needs to be above that mask are excuse me above the image. So now it looks right. But what we want to do is we want to make sure that it is hidden by default. So I'm going to right click on it. It set hidden. There we go. And no, I am going to cheat a little bit and come over here in my completed file on. I'm just going to copy some of this overlaying material over into here, all right, and it's already been grouped, and I've managed to paste it directly into that group, so I think we're good. But again, this the category name here needs to be above the overlay. All right, so now what we want to do is we want to create the interaction on the group itself. So if I select the group here, click on interactions and new interaction. The first thing that we need to work on is making that background image dim. So let's go ahead and use on mouse Enter again and on Mao Center. We want to show this object, Um, and because there's a lot of stuff in here, I'm actually going to search for this all right mask and I find it pretty quickly, and I do want to show it. But now let's add a little bit of flavor. If we remember from the site, it is actually animated. A little bits. Let's faded in 250 milliseconds. Seems right. All right, so now when we mouse into it, it will show. But we also need to add another interaction on this same group. It's the on mouse out interaction. Because what we're going to do is essentially the opposite of what we just did. So I'm going to come over here and hit show and again search for mask. Uh, and this time I want to hide it. So I'm gonna hit hide and fade 250 again and then hit. Okay. All right, let's check out our prototype in the browser and see what it looks like and refresh. Here. Scroll down. Yeah. Yes. Okay. That is working. Excellent. All right, let's go back to actor. And now we'll work on making this category. Image move here is kind of a category title move. One of the things that I do, uh it is to make a copy of it because you'll see, one of the things that we need to do is we need to identify exactly where we want to move it to. So this copy helps me figure that out. So no, because I'm searching for stuff. I'm going to make sure that I don't get this one confused and just call it dummy. Okay. So, to 19 by 16. 73. That's where I want this to move to Okay, so I've selected the group again. No. You can see we already have interactions here. So we can We have multiple interactions on the same object, but we can also have multiple actions on the same event. So if I click here Ah, and I hit this other type of action called Move. This is a new one for us. I'm gonna hit category type category here. All right. Category name is what I want to move. Um, and you can move by, which is a relative number of pixels or two, which is defined location on the screen. And two is generally a lot more reliable. So it was 2 19 16. 73. Okay. And yes, I want to animate it. Uh, I'm going to use this ease in out curve, because this tends to look the most natural. It's fairly gentle on. You hit. Okay. All right. And now we need to do the same thing on mouse out, but opposite. So what I'm going to do is go go over here and see where it is. Starting. That's 2 1917 18 I'm gonna go back to my, uh, my group. Add in action on again. I want to add Move here, and I'm gonna search for the category title category name here. I want to switch to move to. I want to move it directly to to 19 by, uh, 17. 18 and then we'll animate it. He's in and out again. 250 milliseconds. All right, let's take a look at what this looks like. But actually, it's first get rid of that dummy there. All right? In a refresh. All right. That's looking like we want it to look. All right, No, going into actual again here. And the last thing that we need to make happen is we need to make this overlay appear eso I'm going to click on the group again here and then add another action show. And then I'm gonna hit cattle overlay, actually, because that's what the group is called, and I want to show it, and I wanna fade it in 250 milliseconds again. And then guess what I have to do down here. Same thing, but in reverse. So, uh, I'm going to show the overlay. But this time I want to hide it and yeah, I wanna animated out in this case as well. All right, let's go back to our prototype here and refresh. And we've got it working. Now, go ahead and do that for these other two. So you get used to using multiple actions and interactions in, actually, because that is how you're going to achieve all of your rich interactivity with your rich prototypes. 14. Using Interaction Styles: in this lesson, we're going to learn about something called interaction. Styles of interaction. Styles are similar to interactions, but they're also slightly different. Essentially, what they are is a set of formatting parameters that are assigned to in object in the user interface of your prototype when certain actions occur. So let's take a look at the Senate a site for an example. So when we hover over these things, we can see that they turn pink. That would be an example of the mouse over interaction style. Now there's four others that will get to in a little bit that actually supports. So let's figure out how we can do this in actual. So I'm actually just going to navigate right to the wish list. We're gonna do this for the wish list, and then you guys can do the rest on your own. So there's a number of ways to get to the interaction styles in actual, but the one that is the most easy for me to remember is right clicking or control clicking on the object that I want to apply the interaction style two. And then I'll click on style effects. And then this window will come up here. Now you can see here the other four interaction styles mouse over is the one that we're going to focus on today. Some of these others we will discuss in a further, more advanced class. So one of the things that we wanted to do is we want to make the funt pink. So I'm gonna check font color because this means it's going to change. The font color is part of this interaction and then that looks to be a close enough pink to me. Then I'm gonna hit OK, and we're gonna go back to the prototype regenerate. And if we hover over that, there we go. But if we want it to work like this where it actually makes the heart pink to, we're gonna have to do a little bit more work. So going back to actor, the first thing that we need to do is we need to add an interaction style to this thing. So the icon itself, So I'm gonna right click hit style effects. And for a Nikon, you would think it would be the line, but actually it's the fill color that you need to change and I'm gonna change it to that pink hit. Okay, Go back to the prototype and refresh. And there we go. Now, both of these things were turning pink. The only problem is they're not turning pink together. I'll show you how to address that. So let's go back to actual here, and we can see that these things are actually a group. Um, and what we can do is we can actually select the group, then right click and choose this option called fire mouse style effects. What that will do is it will send any mouse interactions directly to all of the objects within the group at the same time. So if I click that and we go back to the prototype and refresh and I go over wish list, there we go. I can go over any area of the group, and it all turns pink Now with the rest of what you guys need to do to finish. This is to do this for the rest of these navigation options here. Now, if that sounds pretty tedious to you, you're exactly correct. That is very tedious. I'll show you a quick tip that you can dio So if you just If you have something that has interaction styles selected and you copy it, I'm gonna hit command, See our control. See, What I can do is I can actually select another object and right click it or control. Click it actually have to zoom in here a little bit and go ahead and go Teoh paste special . And then, um I'm going to paste style and let's go ahead and refresh the prototype because it looks like nothing happened. But now if I go over here, there we go. So you can actually copy and paste interaction styles as well, looking forward to the next lesson where we start talking about dynamic panels. 15. Using Dynamic Panels - Basic: this less and we're going to learn the basics of dynamic panels. Now, what a dynamic panel is is it's an area on your prototype age that can change content dynamically. Let me show you an example of what this looks like on the Sunita site. So if we scroll all the way down here to the product images, if we hover over this, what happens is that the image in the background there switches. Now we're gonna prototype this an actor, you know, weaken, do the, uh, overlay as used as we did above. But for right now, we're just going to focus on making that product image switch. You guys can do the overlay on your own because you already know how to do that. So our let's take a look at how we would actually do this. An actor. I'm going to scroll down here to the product images that we have and ah, I'm just gonna work with this particular one. So there's actually a number of different ways to get a dynamic panel into your prototype. One is to drag it from the library, but I almost never do that. I just don't find it's super useful, because when I create a wire frame, what I'm doing is I am usually laying out content first. So there's this nice little thing that I can dio where I can select some content. In this case, I'm going to go here to the outlined to make sure that I have everything selected that I need to have selected. You need to look at the products. Okay, so here we are, his product, BG Image one. This is going to be, ah, where my dynamic panel exists now. A dynamic panel in and of itself is absolutely nothing. It's just a boundary in order to make it look like something you need to create states and assigned content to those states. And it's the switching of those states that gives the behavior that we just saw on the Sunita site. So the way that I prefer to create a dynamic panel is to right, click or control. Click on the selected content, uh, and hit create dynamic panel is what this is going to do is it's going to create a dynamic panel with one state, and that state has on it all the stuff that I have selected. So I hit. Create dynamic panel and you can see here we have a a generic name. It's his dynamic panel state one, and then the content that I had selected. So the very first thing I'm going to do is, of course, rename this so product image one. And I'm also going to rename the state because that is something that is also very important. I'm gonna call this default helps me keep track of what's supposed to be where, all right. And now you'll notice that there is this blue area around here. Now, this is very new in action. Nine. A new way to deal with dynamic panels. Actor has had dynamic panels for some time, but they've really overhauled how you work with, um So by default, it will probably actually look like this. Um, so you'll still see all of the content around you on there could be a little bit confusing because, you know, you think that you're working with the content, but you're actually not. That's why I like this isolate feature which is also knew an actor nine. So I can look just at at the content that I am wanting to create. Now there's a number of different ways to create different states because we're going to need to do that in order to be able to switch between them. I can come up here and hit add state because this little you I will allow me to navigate between states again. This is new in actual nine, um, or I can go over here on right or control click on a state or the dynamic panel itself and hit Add state. But what I'm actually going to do is I'm going to duplicate this state because the next state is going to have exactly the same type of content, an image, and it's going to be exactly the same dimensions. So I'm going to call this state mouse over there. We go on, I've isolated it. I can see that I'm in the mouse over state, so I'm just going to double click on this image because I want to replace it with a new image I'm going to hit product to. All right, so here's my state, my mouse over state. And here is my default state most over state. All right, let's close this. And so now we get back to the wire frame page itself instead of a dynamic panel state. And let's go to our prototype here and refresh this and see what that looks like. Now you notice nothing happens. And the reason that nothing happens is because we have to specify a particular action called set panel state in order to make the dynamic panel behave like this. So let's go and see how to do that in action. Okay, so I'm going to select the dynamic panel and, ah, as with any other object in actual, you can have interactions associated with this type of object. So what we want to do is when the mouse goes on, we want it to switch toothy mouse over state. And when it goes off, we wanted to switch back to the default state. So we're gonna hit new interaction and then go to our old friend on mouse enter. And this is where things get new because we're going to use this new type of action called set panel state. And what we're going to do is we can choose a particular dynamic panel. So, for example, if I had multiple dynamic panels, I could change the state of another dynamic panel. But I'm gonna keep it simple and say this widget because that is always self referential. And on mouse enter, I want it to stay, to change, to mouse over. So I select that state here. I don't want to do any animation, although there's all sorts of fun stuff that you can do there gonna hit. Okay, And then, of course, I have to add the corresponding on mouse out interaction. So again, set panel state on this widget to the default state. That's what I want. And again, no animation. OK, and now let's check on our prototype again. Refresh and mousing over and there we go. That's what we expect. So those are the basics of working with dynamic panels and actor. In the next lesson, we will look at some of the more unique properties and interactions associated with dynamic panels 16. Using Dynamic Panels - Intermediate: in this lesson will be learning about some additional properties that are unique to dynamic panels. So let me switch over to the Sunita site and show you what I'm talking about. So pay attention to these two bars up here, so the top one goes away, and then the bottom one shows up again and then sticks to the top of the window after you scroll down to a certain point now, getting things to stick anywhere in the window. That's something that's very easy to do with dynamic panels. When, while you can do this interaction where it only appears after you scroll down to a certain point, it does require more advanced techniques. So I'll show you what we're going to do instead. So if we look at these two, top ours, we're just going to stick these to the top of the window and keep them there for the entire with of the squirrel. So the way that we do this is going into actor. Ah, As I said on Lee, dynamic panels have this property of being ableto stay somewhere on the window while you're scroll scrolling. So what I'm going to do is I'm going to create these. The NAB are on the top bar as dynamic panels. So I'm going to right, click or control, click it, create dynamic panel, then name it. Top bar panel. I like Teoh. Have my panels actually have the name panel in them? It just helps me keep track of things as I am prototyping. So I'm going to do the same thing here, except I'm going to call it nab our panel. And now, in order to get it to stick up at the top, what we need to do is to click on this link over here. Now, this is a section that Onley dynamic panels will have. It allows you to control scrolling as well as a couple other properties. But the one that we're going to talk about right now is pinning to the browser. So pinning is how you make things sticky. So in order to do that, you click on Pinto browser, select this check box and because we want this to be in the center of the screen, we're going to arrange this in the center and we want it to be pinned to the top and we want to keep it in the front. So we're gonna hit, OK, And now that's not going to have any change for us here in the actual you why? But when we go to to actually preview this, what we're going to see is that this does look a little different. So that one is stuck up there at the top. And we're going to do that with this one, too. So click on that pin to browser pin to browser window and hit center again. Now, here you'll notice that there's a margin. That margin just means that this is essentially 40 pixels down from the top of the page. I'm gonna hit that and then go here and refresh. And there we go. That's what we're looking for. So that is all you need to do to stick things to the top of the window. I do want to show you some other interesting properties of dynamic panels. So one of the things that you can do is you can actually assign ah background color to a dynamic panel. Uh, and why that is interesting is because you can make a dynamic panel 100% with wide in any browser window. So what I'm gonna do here is go to color and I'm going to type in d seven d seven because I happen to know that that is the hex value of the background of that particular bar. And what you're going to see is that you're not going to see anything here right now. But when I go to the, uh the the browser and refresh and if I shrink it down a little bit so you can see how everything stays in the middle there and then this one, uh, extends all the way over. Now, this is a very common pattern that Ah, you see a lot in modern websites. So this is a good way, Teoh to recreate that an actor. Now the other interesting thing about dynamic panels is that they have unique interactions associated with, um so I've selected on this panel, and if I hit new interaction, you'll see a bunch of things that you normally don't see such as on panel state change. So when a dynamic panel changes to display different content or a different state, you can do stuff. When that happens, you can actually use dynamic panels to do dragon drop interactions. And if you're prototyping native mobile experiences, you can use dynamic panels to to do swipe type interactions. Um, and you can also do scroll interactions with when you're scrolling within the dynamic panel . Normally, you can only do this when you're scrolling on the page, and that's what I have to show you about some additional special properties and interactions associated with dynamic panels. I hope to get to a more advanced, dynamic panel tutorial in the future because there's a lot of really interesting things that you can do with these widgets. 17. Intro to Masters: Masters are one of the most powerful features and action. They allow you to reuse content and functionality across your prototype while maintaining it in only one place. Now in version nine, they've actually made this even better by adding sketch style overrides. What this means is that I can create a complex component, use it across my prototype, change the content for each instance of that component and then still maintain the interactions and basic layout in one place. It's super awesome. All right, let's go ahead and get started learning about masters. 18. Creating Masters: in this lesson, we'll learn how to work with masters, which are objects in actually that allow us to reuse style, content and functionality. Throughout the prototype, you can find masters over here next to your libraries. By default. It will be empty because you actually have to create a master first. So I'm going to call this test master and you'll notice that nothing has happened over here , which is totally fine because a master is in and of itself, its own wire frame. So what you need to do is to actually assign things to the master. I'll put this box up here, and then I will put an image in the box that looks good on us. And when I come back to home again, nothing has changed. If I go over to masters here, I can drag this object. It's actually compound object at this point to the page. Now there's multiple instances of it. The cool thing about masters, though, is that if I change something on the master such as um, adding ah, heading, adding some text here and go back to the home page that changes automatically made across all of the instances of the master. So let's look at a real example where we would use this because what we just described is something that is not how I would normally work. Normally. What I like to do is tow wire frame in place and then right, click or control, click and hit. Create Master. This works just like creating dynamic panels. This way. I'm going to call this one product listing, all right? And now I have this master, So there's a lot of, uh, functionality and interactivity that's happening here. But now I could eat, copy that all throughout the rest of these things and not have to redo that. But one of the interesting things, though, is that, um, for products like this, you would wanna have different content. And although we have this product listing master here, one of the things that's new in version nine is this idea of over overrides. This is very much like symbol overrides and sketch if you're a sketch user, but you can actually change out this content. Eso, for example, let me actually actually delete this and create another instance of the product listing because when you're doing these overrides, you're actually not changing the content of the master. You're only changed your only changing the content of the instance of the master. So here, on product listing one, this is actually, um uh, something like this. So I'm gonna call. I'm gonna change the price too. 1 99 and call the product products one. And now you can see those changes reflect over here I can even if I want to choose the images. So the default image I'm going to go for Ah, let's say I'm gonna go for color images this time. And then the mouse over image. I'm going to do this image. And now when we go to the prototype and regenerate, you can see down here, it still retains all the interactions. This they're both the same. Um, they still move the same way. Now you're probably wondering, OK, well, what's the use of this If I can change all of that content? The use is if you want to change something about this interaction. So, for example, I'm going to go in here, and the interaction is saying that it's going to show the overlay a 2 250 milliseconds. So Let's actually increase that to 500. Same thing with the hide. And now when we go over here and refresh the prototype again, you'll notice that both of these work. Similarly, it both has the same fade. And that's the advantage. Because if you want to change the nature of an interaction for a master like this, if you're overriding the content, then you really only have to change it in one place. Personally, I think that's, ah, fantastic new addition to after nine. Now, I would encourage you to go ahead and do that for all of these. Feel free to add whatever images in there you want to. 19. Master Behaviors: this lesson learnt about a few different kinds of behaviors that masters can exhibit when you drop them on the page. We'll also talk a little bit about planning and strategy when it comes to building your prototype, because using masters can either really speed things up or potentially slow things down. So what we've seen so far is just a master that you assigned to a page and it goes where you put it. And when you change something in that master that change updates and other masters, unless, of course, it has been overridden. But if you actually right click on these masters in the list, you will get to something that says Drop behavior, the default behavior. What we just described is place anywhere. There's two other behaviors lock to master location, which is interesting. You can see the icon changes here. Now if we go into the product listing master itself, its location is 00 So what is going to happen is when I drag this master over here, I'm gonna sort of put it right here. But it's not going to go there. It's gonna pop all the way up to 00 now This is not one that I use a whole lot anymore because we've got dynamic panels that we can pin to the top of the page. Normally, I use this a lot for, um for navigation. Now there's another behavior to called breakaway on. What this does is this means it's ah, master that isn't necessarily tied to our rather an instance of the master that isn't tied to the master itself. So I can, you know, go in here and delete things individually, etcetera, etcetera. Um, but again, this is not one that I first see myself using very much anymore. Because of master overrides, I can accomplish the same thing in a much more efficient way with those overrides. When I first started prototyping with actor, I would just go straight into the tool and start prototyping. And then halfway through, I'd figure out a more efficient way to do something, and then I'd go back and do it the efficient way, and then I'd end up taking a lot more time. So what I now recommend to people is that you don't think an actor think in a sketchbook, sketch things out, think everything through, and then represent your design. And actually, when the time is ready and then also think through what is going to be a master, think through what's going to be a dynamic panel. Think through how things are going to interact and that will help you be a lot more efficient when you come to prototyping. An actor actor is a very complicated and fund program to use, so if you don't go into it, plan Feli you can go down some pretty deep rabbit holes. 20. Intro to Adaptive Views: Responsive technologies have been around for some time now. Websites in Native Mobile APS expand and contract to fit whatever devices accessing them. Unfortunately, not a lot of design tools make it easy to wear frame or prototype systems like that. Actually, though, does it's adaptive use. Feature makes it quite easy to prototype a responsive system now, although adaptive views are fixed view port sizes and not truly responsive, that's usually good enough for usability testing or for communicating with stakeholders like product managers and engineers or anyone else and also inversion nine. These have become even more useful with the addition of the adaptive you sets feature. What this does, basically is. I can now have different view port sizes for different pages, which greatly increases the flexibility of my prototype. So let's go ahead and figure out how to use adaptive use and actor 21. Setting Up Adaptive Views: in this lesson, we'll learn how to set actor up to accommodate prototyping for responsive systems while actually can't prototype full response of itself. It can get close with something called adaptive. Use the easiest way to set up adaptive uses to go ahead and click somewhere outside of your wire frame and click on this style panel over here on the right. And then there will be something here that says, Add adaptive use. Go ahead and click on that. Now this dialogue will come up and it will show you a base view. This is the view that's as wide as your wire frame currently is, Um, so I'm going to actually name this view. Call it large display just to help me understand what's what. And what I'm going to do is I'm going to create additional views to accommodate situations in which the view port is smaller than 14 40 pixels. So I'm going to add another one, and I'm going to use this handy preset function, which is super slick, and I'm going to hit landscape tablet and then one more for portrait tablet. Now what's happening here is that these views will show at different times so large display will display Are will be shown any time. The view port is 14 40 pixels or wider Landscape tablet will be shown any time. The View port is 10 between 10 24 and 14 40 pixels and then portrait tablet will be displayed when the View port is between 7 68 and 10 24. But then also since it's the lowest view any smaller with as well. So when I hit OK, what you'll see happen up here is that these views sort of show up above the wire frame. I'm gonna uncheck this. We'll talk about this in the next lesson. But what this allows us to do is to actually assigned different things to different wear frames. Now it's difficult to tell anything has happened right now. But if we scroll all the way to the bottom and we see sort of the width of the page, if I click landscape tablet and portrait tablet, you can see that these that the page size essentially gets much smaller. And in the next lesson we will learn about actually how to wear frame in that situation. Ah, one of the things that's new in action. Nine. Is this idea of adaptive you sets in previous versions, the only way that you could accomplish adaptive use was prototype wide, so every single page would have the same adaptive use. Now, if I double click on shop here, you'll notice that there aren't any adaptive use set up. Um, you'll think you'll probably be concerned that okay, do I have to set these up for every single page? And yes and no, uh, you have to set them up, but it's pretty easy. So if you've created one adaptive set of adaptive views on a page, if you click on add adaptive views on a page that doesn't have them, you can actually select one of the sets that you've already created. So I'm going to do that right now, and we can see that it's exactly the same as we did before. And we can see the things getting smaller, just like it does on the home page. In the next lesson, we will talk about how to actually wear frame in this situation, looking forward to it 22. Adaptive Wireframing: Now that we've got our adaptive you set up, we can go ahead and make sure our wire frame looks right at all of the different report sizes. And before we begin, make sure you uncheck affect all views. We'll talk about what that does and a little bit so because adaptive wire framing can be a little bit time consuming. I'm only going to focus on one object here. So ah, it's this hero image here. So right now on large display, it looks just like it has in the past. Now, if I click on landscape Tablet, it still looks the same. But I'm actually going to change its size here. So if I make it that with of of the page and then I go back to a large display, you see large display things remain unchanged. But on portrait tablet, that change has filtered down. That's the inheritance that we were talking about in the previous lesson. So now we have these three sizes for these three view ports. Let's take a look at what that looks like in the browser. So if I scroll down here, um, we can see that the image is all the way wide in this. And no, because this is at 14 40 that's the size of my monitor. It's going to pop immediately. So this is the landscape tablet view and pretty soon will be in the portrait tablet view. There we go and you can see how everything else remains the same. And that is basically how aware framing, uh, in these different views works. Now there's a couple of other interesting things. One is that if we are in a lower view, normally, um, the stuff that we do here does not affect any of these higher views, and you can tell because these air sort of great out. But if I hit effect all views, these things turn green, and what I can actually do is adds something I'm gonna add, heading one here and then when I tab over toe landscape tablet and large display, that's still there. So that is what effect all views does. I tend not to use that because it can really mess things up if you're not really on the ball. Now there's another thing that is interesting about adept of prototyping versus wire framing, and by interesting I mean really rather annoying. Um, but that's dealing with interactions. So let's take a look at this interaction we had prototype earlier. Ah, and let's see if we can change it between views. So this mask fade is at 250 milliseconds for a large display. Let's switch over to landscape tablet and change it to 500. Now, what do you think is gonna happen here? Ah, portrait tablet. Yep, 500. That's what you would expect. However, in large display, it also changes, so you can't actually have different interactions for different view ports. Personally, I think that's kind of a miss, but that's what we have to deal with. So fortunately, there is a way to deal with it, and that's with this wonderful magical widget called the hot spot. Ah, hot spot is essentially an invisible area on the page to which you can apply interactions on. I'm going to do a shortcut here and select this object because these are the interactions that I want and I'm going to click and control Click a rather shift click on this and, uh, copy these with command, see or control, See? And then I'm going to just select the hot spot and hit command V to paste or control V, and you can see that these actually show up right there. And I'm going to name this. I'm gonna call this landscape tablet trigger. And then what I'm gonna do is I'm gonna move it on top of this, so it's going to actually absorb the interactions and not fire the ones on the bottom. And if I go to part tablet, you can see that it's there too. But it is not there in large display. So in here, what I'm gonna do is I can actually change the interaction here on this rather than having to do it on the object itself. And when I get down to portrait tablet Ah, I'm actually going to, uh, do the same thing. But I am going to delete this one. Um, you'll see that it's still there in landscape tablet and create another one and do this similar sort of a thing as I did last time, a copy these interactions and paste them. But this time I'm going to make it 1000. So essentially just a second. All right, and then I'm going to put that down here just where the other ones were, and I'm going to call this one portrait tablet trigger. Okay, so now it's 1000 on portrait tablet. It is 500 milliseconds on landscape and the regular to 50 on the large display, and that's pretty much how we have to handle this. Know the other thing that I want to show you associated with this is this. You'll notice that these are listed in red because this means that these air on the page but they're not visible in this view. So if I goto landscape tablet, you can see that lt Trigger is now visible. And for portrait tablet, PT Trek Trigger is now visible. Now the red means something very weird to say. It means that this has been unplayed est from the view, which means that it's just not in the view now. If I right click or control, click on it, I can place it back in the view, Um, and also, if I have P t trigger, I can remove something just from this view by control or right clicking and clicking on UNP lace from view. Um, but yeah, that is how you handle interactions and wear framing for adaptive prototypes. In the next lesson, we'll talk about how masters impact this and the short short version. It's really cool. 23. Adaptive Masters: It's not just pages that can have adaptive use. Masters can have adaptive use to and combined with the ability to override bastard content . It can be a really powerful timesaver for you. So it's scroll down here and take a look at the master that I created earlier. So this product product listing Master Ah, now you can see on each of these views it's the same. And if I double click on this toe, open it. We can see that there aren't actually any adaptive use for this master again because adaptive views are associated with pages and you can add sets as you want. So what I'm actually going to do is I'm going to add master views. So master views is slightly different from adaptive use, and you'll see, why is this base? You'll see it doesn't have a measurement. I'm going to call this large of you and add one more, um, and just call that small view, and now we can see that we have these different views here. So in small view, I'm actually going to click on that and make it obviously look different. There's a large view. There's small view and Now let's go back to our home page. And as we go through the different views here again, nothing has changed. Um, but let's do this on the landscape tablet view. I'm going to select one of these instances and you can see that there's this additional field over here by the overrides. This is where I can choose which of you of the master I want. And so on this one, I'm actually gonna have these two views at the same time. And on this one, I'm going to have both of these in small view and we can see how this plays out in the prototype. So let's refresh this and come down here. And so it's normal here. And then it's gonna change when I pop into that view. So there we go, and then one more. And now we can both see them there now, since adaptive wear framing can be fairly finicky, there's a lot of stuff to dio um, I want to encourage you to look over at the completed exercises file because I have gone through and done all of the views for this. Now I have taken my own advice and only prototype enough to get my point across, which is this top bit here. Now one of the things they specifically want to show you is this particular master, because what's happening here is each of these masters is being overridden with content, but it's the exact same master. So if I go here to category, we can see that there's the landscape tablet view, the portrait tablet view and what I've also done is where you guys actually had this set up to use this move action you were using move to rather than move by. I've changed this to move by and then I didn't need to change the interaction between large display on the landscape tablet. But for portrait tablet, I'd still did need toe. Add the hot spot there with a different interactions because I was actually moving by a different number of pixels. To get the most out of this class, go ahead and completely wire frame out the entire adaptive use for this whole system. No, we haven't done this a lot in the class, but that's because it can be pretty time consuming. But you'll learn a lot if you do that and make sure to check the completed exercises file. If you get stuck, there's a lot of good stuff in there, So next we'll be talking about documentation and I'm looking forward to that. 24. Intro to Documentation: its not efficient to prototype. Every last thing you want your system to do. And that's where actors documentation functionality comes in things like page notes and widget notes. I used these things two to communicate things that it doesn't make sense to. Prototype air messages are a really good example is great to prototype one example of an error. That way, people conceive the behavior of the message where the message appears and the animation associated with it. But it doesn't make sense to prototype every single last air condition and message associated with it. So what I do is I document those things instead in a note that makes it way more efficient to work with Actor now in version nine, not a lot has changed about documentation is to new things. One of those is that you can now move a note from one widget to another widget. You can also have multiple notes on a single widget. But the thing that's really different is how actual share has evolved. It's now called actual cloud, and it's a very envision like collaboration platform. So let's go ahead and begin to documenting stuff and actually 25. Documenting Pages & Widgets: in this lesson, we're going to learn about how to use actors documentation functionality to communicate more information about your prototype, how it's supposed to behave or anything else to your collaborators, such as product managers, engineers or any other sort of stakeholder. So let's go ahead and get started. Now, when we're doing documentation and actor, there's essentially to levels that we can do it at at the wire frame level, which is where we're communicating information about ah pages Ah, hole and then at the individual widget level, where we're communicating information about individual widgets. So if we want to communicate information about the page of the whole, just go ahead and click outside of any of the widgets and then go ahead and click here unnoticed and you'll see the name of the page. And then this thing here that says page overview. This is actually where you are able to type your notes, so I'm just going to type I. I am a page note, and then when we go to the generated prototype up here, refresh this. If we we won't be able to see notes unless we click on this icon up here, this shows the documentation. So you see the name of the page as well as the note itself. So this is where I would communicate information about conditions under which this page appears. Ah, special behaviors and special situations, that sort of thing. So let's go ahead and look at documenting widgets. I'm actually going to go down here and, ah, normally what you would do when you're documenting a widget is you would click on the widget and then click into notes. Now you'll notice that there's nothing here. This is something that I'm actually not super happy about because an actor nine at least you can't actually document a group. So I actually have to click into, ah, an object in order to be able to put notes on this. So in this case, I'm just going to put this note on Category two background image. Um, so you can see here where it says note, I'm going Teoh, enter In some information, I am a note, and you'll see here that as soon as you create one note, uh, another one appears. And also, when you create that first note, that little tag appears here and you can also create multiple notes per object, which is really cool. I am another note, and if you have content associated with a widget or any sort of interactions, you can click on this ah, attachment icon, and you can include both of these. In this case, there is no text or interaction associated with this, but if there was, it would pull that in. And the reason that you would want to do that is because if you're using this prototype to communicate to engineers, sometimes grabbing text out of a prototype is difficult so that the engineers can then just grab it out of your note. So let's see what this looks like on the prototype and refresh. Click my notes here and here. My page note is there, and my individual notes are there on you. I can very clearly see what the individual note is on, and I can click on it. It goes right down there. So this is actually and if I click on the actual number that I get the note here, so basically it's really, really difficult to miss the notes Now. You can also do this type of documentation in masters. I find that to be super helpful when communicating about the behavior of objects like this . On the next lesson, we'll talk a little bit about publishing your prototype to actual cloud, which is what will allow you to really get that collaboration going. 26. Publishing to Axure Share: to get the most out of actor as a collaboration tool, you really need to publish your prototypes to actual Cloud. If you're going to do that, the first thing that you need to do is to go to actor dot cloud and create a new account. I already have accounts, so I'm just gonna go ahead and ah, log in here. Um, so this is all of my actor stuff, but that isn't important right now. What's important is going back into actual and making sure that you're logged in through here. So if you go to account and hit, log into your actual account, just enter the Crittenden credentials you just created for your actual cloud account, and you should be good to go, man. Then, once you have done that, you can hit this share button. Now, when I hit this, this is going to look a little bit different because I actually need to publish this to a new year, Earl, um, because I've created and deleted this prototype a number of times. So when I do, this is what it will look for you by default. I'm actually going to choose a different place toe put this because I have lots of folders in my on my actual cloud account. I can password protected if I don't if I want, but I don't want to do that right now. Uh, this is important. Make sure you have allow comments checked. Otherwise, other people will not be able to comment on your prototype. So I'm gonna hit Publish on this does take a little bit of time, even with a relatively small prototype like this. So I'm just going to slowly hit Copy you are l And in no hurry wonder back over here to my browser, get it in there and were there. So let me go to the home Sunita home page. All right, So what we're looking at in order to do commenting on actor share is you use this little note thing over here. Um, for the most part, what you want to do is hit. Add comment on screen. Now, the important thing is is that you have to scroll to where you want to add the comment. Because once you click this, you will no longer be able to scroll. So I'm gonna add a comment here when I click on that. It's numbered. And it's telling me who I am so that it captures my name. Ah, here is my comet. Then I'm gonna post that, and I can keep doing that. Um, but I need to hit exit in order to get out of that. So that shows up here you can reply to it and, you know, you can edit it. Market is resolved. One of the other interesting things is at another comment here, Um, you can also click on this. And what that will do is that will allow me to take a particular picture of what it is I'm talking about. I'm going to say I want to reshoot this photograph. Ah, and then I can also change the color for whatever reason and then exit. And this shows out shows shows up here. Um, And when you do the email notifications, I warn you, there will be a great many of them. Um, but all of this information, including these pictures, show up there. So it's really easy to keep track of what's going on. So that wraps up our lesson on publishing to actual cloud 27. Conclusion: congratulations. You've completed intro to prototyping, and after nine, we've talked about wire framing interactions, masters, responsive design and documentation. And believe it or not, those are just the basics. So I hope to cover some more advanced topics in upcoming classes. Things like advanced interactions, animation form based interactions and dynamic applications also things like conditional logic and detailed visual design. So keep an eye out for those. In the meantime, I want to thank you so very much for your attention, your interest in your time. And I sure hope you've learned a lot. Take care.