Interface Design / Finishing Touches pt. 2
Subtitles of the Movie
And now we're going to go on to our buttons. Now, if we select this and make this a button, and choose, let's say, resume script right now, and then go back to browse mode, what you'll notice is that it highlights as a rectangle, rather than rounded rectangle. I don't really like that. So we're going to go ahead and go to layout mode and we're going to remove that button. Now, the reason this happens is because this graphic was created in another program so it has this invisible background that FileMaker highlights to and in this object it's not a big difference, but some objects, like a circle, it'll really make an unprofessional highlight. So all we have to do is draw a regular FileMaker object on top of it. So we go right about there, draw it so it meets those edges and I think I'll fill it with red here to make it easy to see. And it looks pretty good. It looks like it pretty much covers the whole button. So we'll duplicate that. One, two, three, four, five, six. And we'll hold the Shift key down to get it over there. Get it just right. And I think that's just about right; one pixel over. We'll smart duplicate and you notice it's a little off, if you can see that. It's hard to see but the reason it's a little bit off is because we distributed the space between each one of these buttons isn't necessarily the same because it wasn't necessarily an even amount there. So I'm going to move it over a little bit. Duplicate again. And it was a little bit off further. Duplicate. Little bit off. Duplicate again and let's see what the hell this one did. And that looks like that one went in the right spot. So we got them all set there. Now what we can do is change them to an invisible color, or a transparent fill. Now you can't see them. But we're going to actually attach the buttons to this FileMaker graphic that you can't see and it will appear that you're actually trying to click on the graphic that you can see. But you need to make sure you get that clicked correctly. You can't click in the middle because a transparent graphic key, you got to click on the edge. So if I click right in the middle, I'm actually clicking on the button behind or the graphic behind it. You'll notice when I click right on the edge, if I get it just right, it, now you see that you're on the FileMaker object. So now we can go up to format, button setup, and we can assign a button here. So we're going to enter find mode and that's it. And then we also want to have some text there, so we'll type in find, change the text color to black. And then we want to make this text block all the way out to the edge here. Get those anchor points even on both sides. Move it up a little bit. That looks pretty good. And then align to center. That's looking pretty good. So now we can duplicate this. One, two, three, four, five, six. Move it all the way across here. Get in just the right spot. Duplicate it. There we go. It's a little bit off there. Keep going. A little bit off there. And let's see how this one did. That one is just about right. So we got them on there and now what we want to do is put the rest of our buttons on there. So the next one is new customer. So type in new customer. Just by double clicking on it and then very carefully, make sure we get the right graphics selected; not this one down there but this one right there. And then we'll go to format, button setup and that performs a new record. There it is. click OK. We're all set there. This will be delete customer. Make sure you got the right graphic selected. Format button. And this performs a script so we'll go in here and perform our delete contact. And we can go back and change this name as well later if we want. And then we have another button here. This is our print button. Double click on that type in print, click on here to make sure we have the right one. See? I didn't get it that time. I have to click up there and then go format, button setup, perform script and if you remember, we have our print form improved here, so click on that one. And now the rest of the buttons are really unknown. So we're just going to double click on this and we'll fill them up later, but for right now we don't have anything to put there. And to remind ourselves, we'll just put the word unknown there. And now we're ready to put our recreated status area on here. Now, what you'll find out is that when you have a button that performs a single step, like in our find, versus a button that does a script, runs a complete script like as in delete customer, it reacts differently when you copy and past from one file to another. If it's a single step, it will copy and paste over, such as in the case with previous record, next record. So I can actually steal this whole, entire little section from another database. So we can go into invoice and we can go into layout mode and we can steal this whole thing right here. So we'll select that, we'll examine where it is, 56057, that's where it's located on the layout. We'll copy that. And then we'll move on over back to our contacts. We'll paste. And then we'll bring out our object info, type in 560 tab 57 tab and that should be in just the same spot. Just as invoice here, we'll just double click on that, change that word to customer and then we'll see if this works. If we have the same field name inside of this database as we did in the other one, well, then it should copy that merge field over. Sometimes it looks like it did and it really didn't. We'll see what happens. So we'll go into browse mode. And you can see it actually did. We can see those records here. So that's good. In fact, you can see these buttons actually work and you can see it highlight nicely because we used a circle on top of the actual Photoshop graphic. And you can see how these highlight much better now too. They're really nice looking. So, spend the time once because once we make this button, we won't ever have to make it again. Very easy to do. Spend a long time on one time on one thing and then duplicate it all throughout your whole solution. I am here just showing you them, how to create them from scratch. But once you create them once from scratch, you never have to do it again.
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
- 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 