Interface Design / Field Outlines pt. 1
Subtitles of the Movie
Let's continue the creation of our interface by adding fields with the custom 3-D interface on it. So we're going to go to layout mode, show the status area and we'll drag a field. And we're going to choose company as the first field. Now, you may be getting a larger-size font on here and you possibly could even have a different font type. You know, you could have Verdana or some other type. It all depends on what you've been doing in your system and whether the default has been set. So if you don't like something, you can always drag that on, choose some field, make it bigger let's say, let's make it 36 point to prove a point, and then on the windows, hold the control key down, on Macintosh the Apple or command key, and click on it. And now you've set the default so that every field will come out with that size. But that really doesn't matter because what we want to do is set up a field once and duplicate it. So regardless of what font you have, what size you have, we want to set this up as 12 point. And when you're at 12 point, you'll see that your label, which changes independently of this, doesn't look very good. It's kind of jagged and that's because we're using a font called Helvetica here. And a lot of other fonts are good cross-platform fonts, but aren't necessarily the best ones for displaying on the screen. If we go up and change this font from Helvetica, as you can see, or whatever else you have set, to Verdana, you instantly see the difference. You can actually tell that this label is bold right now. I suggest using Verdana for the best cross-platform results for display. In fact, I'm going to come up here and turn off the bolding and we'll double click in there, change that to a capital C and I really want this to be wider. Now, I could resize it manually like this, but I know what size I want it to be. I'm going to use my object info. Now, if you're using earlier versions of FileMaker, you won't have all this stuff in here. You might not have object name and you might not have auto-resize. You might just have this area in here. It all depends on what version you have. But all we're working with right now is this right in here. I want this to be 200 pixels wide, so I'm going to select this choice, type in 200 and then hit the tab key. And it changes to 200. And then we can get rid of that. And now we're looking at a pretty good 3-D interface. Why? Because we have engraving on there. Let's check that out. It does look pretty good. You see nice engraving, but the thing is you have absolutely no control over this. So I'd rather actually put my own custom 3-D interface on here. So we click on that, take off the engraving and then what we're going to want to do is draw some lines on here. Put our own custom 3-D interface on here. So I'll select this, go to field control, borders, and we'll change this to a left and right and now see it showing up red here? We're going to want to choose this color right here, which is the third one from here, from the top and then click OK. Now, you don't have to do your custom 3-D interfaces this way. You can do it anyway. I'm just showing you one way to do it. But the thing is you have complete control over it. Now, these colors have to be the same and that's the way I want it, but I want these to be different colors on here. If you take a look at the invoicing solution, you'll see that we're simply replicating that. So what I want now is a line here and I'm actually going to show object info again because then I can get the line tool and a draw a line right here and I know from experience, and as you watch the object info go across, I can get to exactly 199, which is perfect. And I can change it to the right pen color, which is going to be this one right here, which is the second one from the bottom on the second row. There we go. And we can move that into place and once we thing we've got it in place, looks pretty good here, let's go to browse in order to make sure. And good. There's nothing sticking out on the corners here so I think we got it right. And then we can duplicate this one, two, three, four, five, six, move it down, get it just right and I want this to be another choice from the pen color and that will be the third from the bottom here. And we can take another look at that and that looks pretty good, except that you can see how this text is not really centered here and, in fact, when I design cross-platform solutions, I realized that going from Mac to Windows, that the fonts are a little bit bigger, even if you have the exact same font. So I like to add a couple pixels onto that. So you just come and click on your field and change it to the right size. Now, 12 point, you might want to change this to 20 or 21. Really you just have to experiment with it. It's up to you. We'll go ahead with 19 here, I think, and keep it what it was. It looks like it's going to be good cross platform. Sometimes fonts don't look that good across platform, but I wanted to point it out. And then once you get that, then it looks like your text is up at the top. So I want to go ahead and center that. So align text, not center here but center vertically. Ok? And you'll see it centers right in there. And then I want it to be not jammed up against the left side. So we're going to go in here to text and then click paragraph and make sure it says pixels here. If not, click cancel and switch it on here and then just type two in there. You might like three, you might like four. I like two. And you'll see how it moves in a little bit and now we're looking at a pretty good little field. Let's check it out in browse mode. And you can see it's floating right there in the middle. We've got this custom 3-D look here. I really like that.
Tutorial Information
| Course: | FileMaker Pro 9: Intermediate |
| Author: | John Mark Osborne |
| SKU: | 33823 |
| ISBN: | 1-934743-30-5 |
| Release Date: | 2007-11-13 |
| Duration: | 10.5 hrs / 130 lessons |
| Work Files: |
Yes |
| Captions: | For Online University members only |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 