By the end of this video, the student will know how to create fixed-position content like a menu bar in a prototype.
- [Instructor] As you begin working with prototyping you're going to find that there are certain situations where you wish the prototype would do something that you want it to do and one of those features is going to be keeping content in a static position. In other words, fixing content in the art board so that if it scrolls, like let's say you've got a really tall art board you could have the footer content, or the header content, or the menu object stay in place and the other content either scroll underneath it or scroll over the top. However you want it to work.
So we're going to talk about working with what's called Fixed Position Content. I've got the final here and if you want to you can open this file up and the whole idea here is that we have in this case, a couple really tall art boards. They're art boards that are taller than the view port or the size of the device. What they're going to see essentially on the device. And we actually have a menu down at the bottom, down here, really simple. Just a couple social icons and I want to make it to where these stay in place as the art board scrolls or as the screen scrolls on the device.
So to preview this, we're going to open up the desktop preview. Come to the upper right corner and you click on the Play button up there. You can also press Command + Return to open that up, or Control + Return on Windows. Now you'll notice that as I scroll through here look what happens. You'll see that the menu at the bottom down there stays in place because I fixed its position. If I go to another screen, like on the middle screen here, same thing. You're going to see that it stays in place and it's on top of everything else.
We'll go through how to do that. So, I'm going to open up another file that is the start file. O2_Fixed Position_Start. Now you can close the preview window if you want to and we can open it up in a little while here. So go ahead and open up this file from the Exercise Files folder. What we need to do first is we need to make sure that these art boards are taller. So click on the Home art board name and you should select it. Now what you're going to do is resize it. So you're going to drag the bottom down here. So come down to the bottom and drag to make it taller.
We're going to go kind of big here. And you'll see in a second how big we need to make it. So drag about that tall, don't worry about it. And once you drag past a certain point, in other words past the initial size of the art board, it's really hard to see, but there is if I scroll in here, a dashed line at the bottom down here. Let me move this. There we go. So you can actually see there's a dashed line. This is the initial view port height. So in other words, this from here up, is what's going to fit in the view port for this size device or this size phone.
So I'll drag that back down. Alright, I'll zoom back out. I'm using Command + Zero or Control + Zero to zoom out. Now we're going to add a little bit of content. So I've got some content off on the right here so you can simply just drag this content out here. Maybe this text box too. And what we're going to try to do is we're going to try and leave enough space down here, enough white space, so that that menu down at the bottom will clear this content. In other words, there'll be enough space for it. But first, let's take this picture and this text box and put it behind the menu. So drag across both objects to select them.
Then you're going to right click to be able to choose the arrangement, or however you want it if you know. Right click out here and you're going to see that we have, on Windows it's going to be underneath an Arrange menu, I believe, but choose Send to Back to put it behind this menu. Alright now we'll make the art board a little bit shorter. Just so we have enough distance down here so that this will clear the content. So come back up and click on the name of the art board again and drag the height. So make it, eh, something like that. We can always test it out and try and see what we want to do.
Now you can, if you want to, do this to the other art boards as well. I've got a text box down here if you want to add it to this art board, but the last step here is to make sure that this content is actually fixed position. So click on the Menu. We click on the content or select it that we want to keep in place. You're going to find that we also have this group of objects. What we want to do is group these two together. So with this object selected, press the Shift key and click to select the other object. You should see that they're both selected over in the Layers panel, if you have the Layers panel showing down here.
And now we're going to make a symbol out of them. So right click and choose Make Symbol. It'll make it a little easier for us to edit this and work with it. Now the only thing we need to do now is we need to make sure that it is fixed position. So come over to the right and select Fixed Position When Scrolling. Now what you can do is you can actually copy this and put it on the rest of the art boards. So right click, copy it, select both these art boards by dragging all the way across or selecting them in the Layers panel if you want to do that.
I'll just drag across here all the way and you should be able to select them and then press Command + V or Control + V on Windows to paste. There we go. Let's test it out. So click back in the Home art board here. That ensures that that's the one we're going to preview. You can come up to the upper right corner and open up that Preview window again if you want to and now if you scroll down, you're going to see it's fixed position. So there's a lot of great things we can do with Fixed Position Content. You can use it in conjunction with other types of prototyping, different things you do.
It's just a great way to be able to have content the way we want it and it's also going to be really beneficial when you introduce prototyping to your project.