Home
Username:
Password:
FileMaker Pro 9: Intermediate Tutorials

Interface Design / Buttons

Subtitles of the Movie

Now what we want to do is move these into place. So we're going to go ahead and drag them right about there and make sure they're in just the right spot, but you can notice that this has to be, it doesn't look right here. And this should meet there. So we need to move that down just a little bit, check it out, one more pixel down so they meet. Again, if you spend all this time on one layout, it'll all be perfect. You won't have to worry about another layout. So spend the time here. And now this needs to be in front, this graphic, so we're going to arrange, bring to front and now it's going to look really nice, how it's melding with this graphic there. And this one wants to be behind, which it already is, which is good, but you don't want to see a black line there. You want to see the blue line. So they're perfectly placed and now we can duplicate this as many times as we want. Six pixels up and then move it over. In fact, I'll move it with the mouse with the Shift key held down most of the way. Get it just the way you want it. See the black line there? Just send it to back and now it looks right. Now we've created this interface. All we need for the basic interface is our buttons. So we go in here and scroll down to where our buttons are. See if we can find those. And this looks like the right one right down here. There's a whole bunch in here that I use and this is the right one right here, I think. So we'll try moving that one in. Drag each piece in there. And let's see what we've got here. That looks pretty good. Move that piece right in there. Make sure it's just right. Duplicate it once because we're going to want a longer button than that. There we go. Move this piece right over there. No need to send it to back because we duplicated this after this, so it's now on top of that. Each new item you add to a layout goes in the top layer. We can then group this. We were just about to where we want it because we're going to want to have a line of buttons across here. And I'll duplicate the grouped objects. And we'll go one, two, three, four, five, six. Move this with the Shift key held down and then smart duplicate it. And we'll get six of those. And what we want is for these to perfectly fill up this top part and it's actually very easy to do. What you want to do is move the last one just to the same place as the other one on the left side, get it just about right and if you really want to, you can measure it this way. I like this little technique. As I draw little rectangle here, make it red so it shows up. There we go. Take the embossing off. Ok? So you can see how it's hitting each edge. Come over here and go oh, let's see if that fits. Well, I just happened to have eyed it just right, but you can make sure by going like that. And it looks just right. I got it right on the first try. Now I have them exactly the same distance on both sides here. I can select all of them and then go up to a range and distribute horizontally. Now what we've got is a nice, clean, evenly-spaced button row up here. Let's take a look at that in browse mode and this looks like a great start for an interface. So spend the time putting this together, make sure it's just right and that way you won't have to go back and change 50 layouts because you made one mess-up somewhere. Make sure it's perfect right from the beginning. You can see how nice and evenly laid out. It looks very professional. Spend the time creating just the perfect interface. It will really pay off in the end.

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