1 00:00:01,560 --> 00:00:05,450 OK, so in this video, we're going to start to build out the buttons for our MP three player. 2 00:00:05,460 --> 00:00:07,860 So before we start, let me put a little comment here. 3 00:00:08,100 --> 00:00:13,980 Let's say create a playlist box and hashtags like this. 4 00:00:13,980 --> 00:00:17,160 The no sign that is a comment in Python. 5 00:00:17,430 --> 00:00:18,630 Python will ignore that. 6 00:00:18,640 --> 00:00:21,450 It's just to help us sort of keep track of our code. 7 00:00:21,460 --> 00:00:22,890 So let's create another comment. 8 00:00:22,900 --> 00:00:29,100 So let's go create buttons, say play, stop, et cetera. 9 00:00:29,100 --> 00:00:30,550 Buttons, right. 10 00:00:30,930 --> 00:00:36,120 So we want to kind of create a box and put all of our buttons in that box. 11 00:00:36,330 --> 00:00:39,330 So to do that, we're going to use something called a frame, a frame widget. 12 00:00:39,330 --> 00:00:41,850 So let's go create buttons. 13 00:00:43,830 --> 00:00:48,840 Frame, so I'm going to call this control underscore frame. 14 00:00:50,010 --> 00:00:56,520 These are our button controls, our MP three controls forward back placed upon US controls, so cost 15 00:00:56,520 --> 00:01:02,490 control frame and this is going to be a frame and we want to put it in route and then we can go control, 16 00:01:02,490 --> 00:01:06,420 underscore, frame, dot pack and give this iPad. 17 00:01:06,420 --> 00:01:12,350 Why also of 20 to kind of push it down the screen a little bit underneath this guy. 18 00:01:13,080 --> 00:01:16,020 So now we can put our buttons in that frame. 19 00:01:16,320 --> 00:01:18,450 So I'm going to create some buttons. 20 00:01:18,480 --> 00:01:19,770 Let's call this back button. 21 00:01:21,380 --> 00:01:25,790 And let's call this forward underscore button. 22 00:01:27,410 --> 00:01:30,620 And let's say we need a play underscore button. 23 00:01:32,800 --> 00:01:41,110 We need a pause, underscore button, and we need a stop underscore button, and you can call these 24 00:01:41,110 --> 00:01:43,210 anything you want, but you want to be descriptive. 25 00:01:43,210 --> 00:01:46,690 So it's a back button forward button, a play button, a pause button, a stop button. 26 00:01:46,690 --> 00:01:47,390 That makes sense. 27 00:01:47,680 --> 00:01:53,200 So now for each of these, they are a button widget and then where do we want to put them? 28 00:01:53,230 --> 00:01:55,480 We don't want to put it in route like we did with this one. 29 00:01:55,490 --> 00:01:58,960 We want to put it in the control frame, that box we just created. 30 00:01:59,300 --> 00:01:59,600 Right. 31 00:02:00,340 --> 00:02:07,120 So for now, let's just do that and we can give this a text equals and let's call this back. 32 00:02:07,480 --> 00:02:08,680 And that's good for now. 33 00:02:08,710 --> 00:02:12,850 So I'm going to copy this and paste it for each of these. 34 00:02:13,980 --> 00:02:22,700 And instead of back here, we want this to say forward and this one will say play and this one will 35 00:02:22,710 --> 00:02:27,330 say a pause and this one will say stop. 36 00:02:27,790 --> 00:02:28,190 All right. 37 00:02:28,500 --> 00:02:33,360 So like I said earlier, whenever you're dealing with widgets, it's always a two step process. 38 00:02:33,360 --> 00:02:35,160 You define it and then you put it on the screen. 39 00:02:35,170 --> 00:02:37,420 So we've defined them here. 40 00:02:37,650 --> 00:02:39,140 So now we want to put them on the screen. 41 00:02:39,150 --> 00:02:41,610 So let's go back underscore button. 42 00:02:42,360 --> 00:02:45,210 And instead of patting these, we want to grid these. 43 00:02:45,480 --> 00:02:48,840 And so with a grid system, it's always a row column system. 44 00:02:48,840 --> 00:02:52,680 So we want to put this in row zero column. 45 00:02:53,730 --> 00:02:55,140 Zero, right? 46 00:02:55,680 --> 00:03:04,080 So let me just copy this back forward play, pause and stop, and let's just change this like this forward. 47 00:03:08,700 --> 00:03:15,440 Pause and stop, and we need to change the column so each of these will be a different column. 48 00:03:15,450 --> 00:03:21,580 So we started in column zero and we go column one column to column three and column four. 49 00:03:21,780 --> 00:03:24,960 OK, so let's go ahead and save this and run it just to see what this looks like. 50 00:03:30,290 --> 00:03:35,360 And all right, we see we've got these buttons, they look like regular windows, buttons, and they're 51 00:03:35,360 --> 00:03:39,120 all scrunched together, so let's kind of move them apart a little bit. 52 00:03:39,440 --> 00:03:46,900 Remember a couple of videos ago we did Pad Y to move to give padding above and beyond, above and below. 53 00:03:47,060 --> 00:03:50,930 We can also give pad X to give things padding from left to right. 54 00:03:50,940 --> 00:03:56,470 So let's put a column and go Pad X equals and let's just give this 10 pixels of padding. 55 00:03:56,480 --> 00:03:57,950 So when I copy this. 56 00:03:59,540 --> 00:04:01,850 And it's just each one of these. 57 00:04:01,940 --> 00:04:04,580 OK, so let's go ahead, save this and run this guy. 58 00:04:06,970 --> 00:04:09,760 And you see now they're spaced apart a little bit and that looks better. 59 00:04:09,790 --> 00:04:13,730 Now we're going to change these two images in just a minute. 60 00:04:13,990 --> 00:04:18,820 For now, though, we want them to just be regular buttons, because, like I said, these need to be 61 00:04:18,820 --> 00:04:19,170 buttons. 62 00:04:19,180 --> 00:04:22,690 We're just going to have images on top of them so that when we collect them, for instance, we could 63 00:04:22,690 --> 00:04:24,340 play it actually plays. 64 00:04:24,340 --> 00:04:25,510 So that's all for this video. 65 00:04:25,510 --> 00:04:27,940 In the next video, we'll turn these into actual images.