Subtitles of the Movie

So let's start recreating this interface; this example we have here with this nice OS X-like interface, this interface that was done in Photoshop. We want to recreate this in our Contact Manager and what we're going to start with is our background. So if you come over here, this is our background, this little 3D look around the edge, all the way down here and all the way up here. We want to start by recreating that. So what we're going to do is show you how we did it. We actually went into Photoshop and created the whole, entire interface first. So if we come over here, we have included the Photoshop .jpg in the Work Files so you can grab this also. We designed the whole thing in there and what we're going to do is show you how to move this. You don't want to move the whole thing over into your solution. You actually want to go ahead and grab little Lego pieces. So what we do is we select just a piece like that, we'd copy it and that would be in the Clipboard and we paste that into our Contact Manager. That's so we can build this little side here with a whole bunch of different graphics. We grab this corner piece, a bottom piece, another corner piece and this side over here. In fact, we do it with all these pieces up here but we're going to start with just the background here. So again, this is available in your Work Files. You can grab this and grab your little pieces yourself. So we're going to go back over to FileMaker, it's right here and switch over to our Contact Manager. We'll go into Layout Mode and we'll simply paste that graphic. So you can see right here, we'll move it over here and if we duplicate that and then we move it so it's perfectly aligned with this one and I'll use the arrow keys a little bit here and once you get it lined up, it's going to make a perfect 3D interface. So it's going to be a whole bunch of these together, it's going to make that look that you saw in the Photoshop file. Now, you may be thinking right now, this is a lot of graphics. That's going to make the file really big. Well, actually FileMaker only stores this graphic once, no matter how many times you put it in there. So actually, even though it's in here twice, it's only stored once. If we put the whole graphic in there, it has to store the whole thing and that's much more space. It also displays faster if FileMaker only has to load the small little image and then replicate it all the way down. And even better, it's easier to modify your screen size. If you decide that you want your screen to be a little bit bigger, then you just duplicate a couple of these, move everything down and you've made your interface bigger. That's a lot easier than going back to Photoshop and doing a whole bunch of work. So I like this method of using these Lego pieces for many reasons. It gets stored once, they display faster and it's easier to modify your screen size. So let's get rid of this because what we're going to do is we're actually going to grab these graphics out of a file we've shown you, the FileMaker Reference. You don't have access to that but you can grab them out of the Photoshop.jpg. But I want to grab them out of the FileMaker Reference and the reason for that is because they're all exactly the same size. I've precisely made the 3D look over here exactly the same size and pixels over here and it's very painstaking. I wanted to show you that, but you can imagine how you can draw those selection rectangles and grab exactly the same size piece. It's not that difficult to do. Now, if you want to have my pieces, all you have to do is go to the Work Files, locate the Contact Manager and look at the end file. That will have all the pieces that I'm showing you from the FileMaker Reference. So even though you don't have access to FileMaker Reference, you can have all those pieces from the ending version of the file that's in the Work Files. So to accommodate us building this interface, we're going to move everything over to the right. We're just going to start from scratch. So I'm going to Select All. I'm going to make sure everything's unlocked and I'm going to move everything over to the right. Get over there as far as I can and we're going to get rid of the header and the footer so we need to make our body part bigger. And I'll drag that down a little bit and then what we want to do is move this up there and then grab everything. I'll Select All and move everything down. There we go. So it looks like it all fits in there. So now we can get rid of our footer and our header because we really don't need these inside of the Form View. And another thing we'll do is we'll change the color of our body part. We'll just click on it once and come over here to the fill and change to this light gray. Now, ahead of time I've made sure that the interface that I've designed in Photoshop matches that particular gray shade right there. So now we've got this all set up. Now we can go ahead and go to the FileMaker Reference, it's right here, go to the Graphics section and you can see all these pieces already in here. I've painstakingly taken and made them all exactly the same size as you can see right here but we're not interested in these pieces right now. We want to go down and find these pieces. So we're going to move this over. Now, realize we're in Browse Mode over here. These are container fields and we're in Layout Mode over here, so we can drag from Browse Mode to Layout Mode, puts it right in there. There's the right side. There's the bottom. There's the corner and we'll have to mov this over just a little bit more and there's the other corner. So there we go. We'll go ahead and hide this and now we can set these up and show you how to do this. Now, again, you have to spend a lot of time deciding on the screen size you're going to make and you have to go between Browse and Layout Mode a lot to make sure you got it just right for the screen size you want. But right now we're just going to show you how to get these graphics on there. Let me move this up a little bit. So I'm not going to pay attention to the screen size right now. We're going to do that offline. You have to decide what screen size you want to work with and so I'm going to do that offline. So very painstaking process again of going between Browse and Layout to make sure you don't have any scrollbars and it's just the right size. So we're not going to go over that online but what we're going to do is show you how you, once you decide what screen size, how to get these graphics on there efficiently.