Subtitles of the Movie

As you can see, I've enlarged the size of the background offline to match an 800 by 600 screen resolution. I've also decided that there will be no dock or taskbar showing and no other interface elements. I've taken up the whole, entire screen size so we can utilize it to the maximum for this tutorial. But you may, in your situation, need to have the taskbar or dock showing and some other interface elements. It's up to you. You need to do your homework and decide what size you want and design it that way. If you want to follow along and do exactly what I'm going, I'll show you how I did this; give you a brief overview. It was a painstaking process but the first thing I did was decide what the size of the window is going to be. I went to my screen, which I'm only working with the solution on my screen. You would have to go to a bunch of screens and try it out. But I went to my screen and said OK, here's the size window I want. I first made this window exactly the size I wanted it. Then I went into Layout Mode and I took my body and moved it all the way down here. I approximated where I thought it should be. I went back to Browse Mode and I checked to see; is there a scrollbar or not? If there was a scrollbar, that means I moved the body part too far down and I had to move it up. If there's no scrollbar, I had to probably try and test it and see if I can move it down. What I did was I went back and forth between Layout and Browse Mode constantly moving all the stuff, the body part down one pixel at a time or two pixels or maybe ten pixels, depending on far we had to move it and kept moving it a little bit at a time until I got those scrollbars and then I'd move back up so it was just right at that scrollbar point where it would make that scroll. I don't want to have a scrollbar here. I want to have none but I want to have my body part go down this far because then when I click the green button, it'll stay exactly the same size or when I choose Adjust the Window, with Resize to Fit, that script step, when I run that on open that will make it come to exactly the window size that I decided I wanted to have. And so I also did the same thing with the graphics over here. I had to constantly go between Layout and Browse, move graphics a little bit, keep doing that. So if you want to copy exactly what I have, let me show the status toolbar. Let's go back here, show that up there. We'll go into Layout Mode and we'll come in here and click on this button, show the object info, click on the body part and you can see it's 533 pixels down. Then we'll come over here and look at this piece over here. This piece, which I've grouped together and you can see it's grouped all the way like this is 748 pixels from the side and then 88 pixels down. So you'll have to group this to test what size it is. Now, you can take a look at this stuff too. I've grouped the corner pieces with the bottom and this corner and that's at three and 506. You can see it's a little bit in from the edge. Because this is a gray background, you don't see it. And then this one, of course, is at zero and 88. So if you want to copy me exactly, those are the dimensions right there. So we'll go back into Browse Mode and what we want to do now is put some more interface elements in here. Let's go ahead and put in the bar that goes across here. So we're going to again go back to the FileMaker Reference and we're going to go find the color that we want. Now, there's a bunch of colors in here but we want the blue color. That's my favorite and what we're going to do is actually switch back to Layout Mode here, get back to our file. We'll get rid of this also and we're going to drag this bar into here. It's as simple as that. Come back over here, position it just right there and I like to click off the anchor points so I can see and then I might move it one pixel this way. Oh, that's perfect. Looks like it's right where I want to be. So I'm going to now duplicate it, move it 123456 and then I'm, without deselecting it, I'm going to mov it over and use the arrow keys to move it back, get it right in the spot we want and then duplicate again using Smart Duplicate and I'll use a keyboard command the rest of the way. There we go. And one more duplicate and then we'll have to move this back. There we go. And then you use the arrow keys for the last little bit. There we go. So that's looking pretty good. Let's take a look at it in Browse Mode. And you can see, if we hide this area, hit the green button, it resizes to exactly what we want so it's starting to look very professional. We have a nice area here. This would be the area we'd use for our data entry. This would an area for more of a navigation and telling us what this is. So we differentiate these two areas. We've also given it a nice 3D look. So it's just looking really professional right now. So what we're going to do in the next section is we're going to add in our tabs as well as a button bar all the way across here. And we'll show you all the ins and outs of how to do that.