Username:
Password:
FileMaker Pro 10: Intermediate Tutorials

Interface Design / Tabs/Bars & Buttons pt. 2

Subtitles of the Movie

Let's continue on with our interface and add our tabs and also a row of buttons right along here. So we're going to show the status toolbar again, go into Layout Mode and then we'll show our FileMaker Reference again. And as you can see on the same row as the bar that we put in before right here, we have the tabs. We have the end of the tab, the right side of the tab and the middle. There's actually two middle pieces, so we have either side and so we're going to explain why there's pieces of this, why they're in pieces like this. First we'll drag them in there and so let's say you don't want your tab to be this size. Let's say you want it to be longer. If it was all one piece, this is what would happen. I'm going to resize this end piece right here and you'll see how it distorts. So I'll undo that. If I resize the middle, we don't have the same problem. That's because all the pixels are horizontal. So we'll undo that as well because actually this is exactly the size I want it to be but that's the reason why there's pieces here. All you have to do is match them up, get it right in there, take a look at it. That looks perfect. Then move this piece right into the same spot and I got it right there. Once you're done, select them all and group them. Then we can move it into place, get it right where you want it. That looks pretty good. Move it down a little bit. We want that little edge to meet up so we'll mov it down one more and that looks perfect. It looks like it's a continuous. It looks like it's all one graphic here and it looks like this is coming out at you. And now what we need is an unselected tab. So we're going to drag this one, this one and that one. And again, if you're wondering, you can get these graphics from the end file or the finished file for this chapter. Just go to your work files, open up the contacts right here and you'll see all this finished stuff and you can grab all these pieces and put it into your version. So these may not be available for you in the FileMaker Reference, but they are available in the finished file. So don't worry about that you have access to all this stuff and one other thing we want to look at is you see how there's this red border here. Well, the reason for that is because we need to have a white area in here and if we zoom in on that, this is actually going to be, if we select it with a selection that would select just this part, this is actually not white here and so in order for me to select it, I had to draw this red line here so I could get white all the way through here so I had a border on it. If it was white, then it wouldn't have selected correctly and this, actually this part right down here would have been see-through. But it's not big deal. Once we go back down here and move this over, that covers it entirely and then we'll move this one into place and all we have to do is send it to back. And then that covers that one and then move it and then you don't see those red lines anymore. So even if you don't understand, the idea behind that was to make sure that we could get the right, so we didn't have anything see-through right here. So we'll go ahead and group that and move it into place, get it right there. I like to make sure it's in the right spot by moving it one there. OK. That's right. And then I also like to draw a little line here. They should be the same height. OK. And we'll move that one up. And then that looks perfect now and we don't want this black line so we're going to send that backward. And you see how it's behind one piece right here. We got to keep going. And one more piece backward. Now you can see how that blue line shows through and it's much nicer looking that way. Then we'll take this and we'll duplicate it and we'll move it over to the right spot, get it right in there, make sure it's lined up. So I'll draw this little selection square and just, that's my quick way of seeing if they're lined up. Then we'll send it to back. You can actually just go all the way to back if you want and there you go. Now we have these three tabs here; one that's selected and two that are deselected. So this is a good starting point for any layout you're going to do.

Tutorial Information

Course: FileMaker Pro 10: Intermediate
Author: John Mark Osborne
SKU: 33926
ISBN: 1-935320-19-X
Release Date: 2009-01-05
Duration: 15 hrs / 177 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 81,350 Video Tutorials (20,800 free)
  • Video Available as Flash or QuickTime
  • Over 782 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available