1 00:00:01,850 --> 00:00:04,140 OK, so we've created our buttons right here. 2 00:00:04,400 --> 00:00:09,780 Now we want to actually put images on them, those play buttons to stop buttons and things like that. 3 00:00:09,800 --> 00:00:16,130 So up here, let's define button images. 4 00:00:17,050 --> 00:00:25,150 For controls and to do this, let's just define each one, so let's go back and I'm going to call this 5 00:00:25,150 --> 00:00:31,300 BTN short for button and then IMG short for image. 6 00:00:31,300 --> 00:00:31,530 Right. 7 00:00:31,540 --> 00:00:33,090 So we need a back button image. 8 00:00:33,310 --> 00:00:36,850 We need a forward underscore button, underscore image. 9 00:00:37,240 --> 00:00:42,340 We need a play underscore BGN, underscore image. 10 00:00:42,730 --> 00:00:51,490 We need a pause, underscore and underscore image and we need a stop, underscore and underscore image. 11 00:00:52,090 --> 00:00:56,380 So each of these now will be something called a photo image. 12 00:00:57,360 --> 00:01:03,480 And this is another widget capital P capital that's important, and now we just need to say where our 13 00:01:03,480 --> 00:01:07,470 image is sitting, so we type in file equals quotation marks. 14 00:01:07,620 --> 00:01:13,380 And remember, we put it in the images directory and then the name of each one. 15 00:01:13,410 --> 00:01:14,130 So back. 16 00:01:15,150 --> 00:01:22,500 50 PMG, so if we save this and head over to our terminal and type in less, we see that we have this 17 00:01:22,500 --> 00:01:25,680 images directory so we can move into that directory if we want. 18 00:01:25,680 --> 00:01:32,160 So CWD Images now type in LS and you can see here's a list of all of the buttons. 19 00:01:32,400 --> 00:01:39,930 So we have back 50 forward 50 Porres 50 50 and stop 50 and I name them 50 because they're 50 pixels 20 00:01:39,930 --> 00:01:40,200 each. 21 00:01:40,200 --> 00:01:41,910 So just I just did that. 22 00:01:41,910 --> 00:01:43,660 So you name them anything you want. 23 00:01:43,680 --> 00:01:47,310 So back 30, 40, 50 plus 50, play 50 and stop 50. 24 00:01:47,310 --> 00:01:49,500 So let's move out of this directory. 25 00:01:49,510 --> 00:01:57,420 So let's go CD dot dot slash that moves us backwards into our MP three or we could see there's our file 26 00:01:57,420 --> 00:01:58,590 so we know we're in the right place. 27 00:01:58,920 --> 00:02:03,630 So now we just put each of these things in our code. 28 00:02:03,630 --> 00:02:05,160 So let's do that. 29 00:02:05,950 --> 00:02:10,440 So I'm just going to copy this and paste it in for each one. 30 00:02:10,440 --> 00:02:14,190 I'm hitting the control and the V button at the same time V as in victory. 31 00:02:14,430 --> 00:02:14,970 Or you can right. 32 00:02:14,970 --> 00:02:22,770 Click and click paste to copy I control and C C as in Cat or you can highlight something. 33 00:02:22,770 --> 00:02:24,570 Right, click and copy. 34 00:02:25,080 --> 00:02:26,940 So we need to change each of these. 35 00:02:27,720 --> 00:02:35,640 So instead of back fifty for this one, it's going to be forward fifty and instead of play fifty four 36 00:02:36,210 --> 00:02:38,280 instead of back fifty for this one let's play 50. 37 00:02:38,640 --> 00:02:43,650 This one is Porres fifty and this one is stop fifty. 38 00:02:43,890 --> 00:02:46,470 So OK, we've now defined each of these buttons. 39 00:02:46,470 --> 00:02:50,070 Now we need to put them into the actual buttons. 40 00:02:50,340 --> 00:02:56,190 So to do that, instead of text for each one, we want to say, hey, use those images. 41 00:02:56,190 --> 00:02:56,460 Right? 42 00:02:56,470 --> 00:03:02,640 So to do that, we you get rid of that and we just type in image equals and then just paste in each 43 00:03:02,640 --> 00:03:03,870 of these variable names. 44 00:03:04,170 --> 00:03:06,120 So boom, just like that. 45 00:03:06,120 --> 00:03:10,470 So let's go and save this head back over here and let's run this guy just to see what that look like. 46 00:03:13,980 --> 00:03:15,810 And we could see now there's a. 47 00:03:16,700 --> 00:03:18,770 Button an image there on this button. 48 00:03:18,980 --> 00:03:22,490 Very cool, doesn't do anything yet, but it looks almost good. 49 00:03:22,970 --> 00:03:25,340 We need to now get the border, take the border off of that. 50 00:03:25,340 --> 00:03:26,380 But we'll look at that in just a minute. 51 00:03:26,390 --> 00:03:31,550 So come back through here and just change this for each of these. 52 00:03:31,700 --> 00:03:35,450 I'm just going to copy and paste over these things. 53 00:03:39,630 --> 00:03:49,950 And this one was stop, this one was because this one was play and this one was forward. 54 00:03:50,440 --> 00:03:54,240 All right, so save this and run this again to see if that looks good. 55 00:03:56,460 --> 00:04:02,430 So we've got each of these things and they still have these weird borders around them, so we can take 56 00:04:02,430 --> 00:04:09,270 that border off, do that, or maybe you like having them on there, but I don't. 57 00:04:09,280 --> 00:04:16,890 So let's come over here and we could just type in border with equals zero. 58 00:04:17,430 --> 00:04:20,250 So let's copy this to each of these. 59 00:04:21,640 --> 00:04:24,490 OK, so let's go ahead and save this and run it one more time. 60 00:04:27,050 --> 00:04:31,880 And just like that, we've got these nice image buttons and when we click them, you can see they kind 61 00:04:31,880 --> 00:04:34,400 of do still move just like a button moves. 62 00:04:34,670 --> 00:04:37,550 Now they don't do anything yet because we haven't programmed them to do anything yet. 63 00:04:37,550 --> 00:04:39,620 But we'll start to look at that soon and. 64 00:04:39,830 --> 00:04:40,140 All right. 65 00:04:40,160 --> 00:04:40,850 Not too bad. 66 00:04:40,850 --> 00:04:41,160 So. 67 00:04:41,430 --> 00:04:43,030 So that's all for this video.