Interface Design / Buttons pt. 1
Subtitles of the Movie
I think it's a good time to transfer our buttons onto these button objects. So we have four buttons; one for find, new customer, delete customer and print. And then we'll just keep these for further developments we might make. We'll just make them unknown for now. So there's several steps to do for this. We go into Layout Mode and we could assign our script directly to this button by going to Format and choosing Button Setup. And then we can choose to perform a script. Let's say we wanted to perform the find and remember, we actually had that with our Enter Find Mode. There we go. Click OK and then if we go to Browse Mode, watch what happens when we click on it. You see how it's got a rectangular highlight? It's really not professional looking. I'd rather have it be right around the edges; perfectly on that and while this doesn't have a big, ugly look, imagine having a circle. If it had that square background like this one does, it would really look unprofessional and it's very easy to fix in FileMaker. What happens is if you go into Layout Mode and you put a graphic from another program, let's say Photoshop in here, it's going to have an invisible rectangular background. So if you make a button on there, it's going to think that the graphic goes beyond its actual borders. So to correct that, first thing we have to do is take that button off there. So go to Button Setup and say Do Nothing. And then we're going to simply draw a FileMaker object on top of it. Let's first verify that this is not working. Good. We'll show this, go into Layout Mode and there's a perfect object for it; the rounded rectangle. Let me get it right on top of there, get it right there, draw it perfectly. I'm going to even fill it with red, as you'll see why. Because it'll make it easier to see that we've covered everything and take a step back and look and that looks pretty good. So what we'll do is we'll duplicate that; 123456 and then we'll move it over and then start holding the Shift Key down, get it right on top of that one and that looks pretty good. So now we can duplicate it again. I'll use the keyboard command. That looks pretty good and you see this one's a little off. The reason it's a little off is because when we went ahead and distributed this distance here, there wasn't an even amount of space between here so there's one extra pixel basically between some of these. So I move that one, duplicate that one, that one looks good. Do that one. Now this one's off the other direction. There we go. So now we've got them all set up perfectly, just double check them. Once we have that we can go ahead and select them again and we can come over here and make them invisible or give them a transparent fill and line. So we'll come over here to this choice, transparent and then we'll come over here to this and do that transparent and now they're invisible but we can attach our button to that invisible object. It will appear you're clicking on this graphic but you're actually clicking on the FileMaker graphic, not the Photoshop graphic. Now, it's a little tricky clicking on an invisible or transparent object because you can't click in the middle. We actually just clicked on the Photoshop graphic, even though the FileMaker object is on top of it. You have to click on the edge of a transparent object and you've got to get used to it and if you click right on the edge where it could be or should be, then you'll see that the anchors change and you'll know when you get used to it that you actually have the right object selected. And then we can go up to Format, Button Setup and go to Enter Find Mode and we're ready to go. And we can go to the next one, Format Button, we'll go to Perform Script and this one we'll choose to do a new contact and that was also done just with the New Record script step. So we'll find that one. There we go. Click OK. Come to this one, Format, Button Setup. Now hopefully I remember this correctly. It is Delete Contact, so we'll perform that script and then we'll come to the last one, Format, Button Setup and we'll choose our Perform Script and our Print Form. So now we have these four buttons set up. These are ready to get set up. They have no scripts that we can attach to them right now.
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
United States 