1
00:00:01,640 --> 00:00:08,000
OK, in this video I want to talk about frames and frames are a way to group things together sort of

2
00:00:08,000 --> 00:00:14,240
easily right there, just boxes basically, and you can see them or not see them.

3
00:00:14,510 --> 00:00:20,570
You'll often have them kind of invisible and you just put things in them and it's easy to like, say,

4
00:00:20,580 --> 00:00:21,320
group things together.

5
00:00:21,320 --> 00:00:23,230
And this will make more sense as we start to build things out.

6
00:00:23,240 --> 00:00:26,740
So let's just come up here and I've got the same program open.

7
00:00:26,750 --> 00:00:31,340
I took the fake command out that we're going to keep our menu stuff for now because we're going to play

8
00:00:31,340 --> 00:00:32,840
with those in the next couple of videos.

9
00:00:33,170 --> 00:00:34,610
But let's create a frame.

10
00:00:34,610 --> 00:00:36,230
But first, I want to create a couple of buttons.

11
00:00:36,440 --> 00:00:37,250
So let's go.

12
00:00:37,940 --> 00:00:39,590
Let's call this a show button.

13
00:00:41,490 --> 00:00:43,170
And this is a hide button.

14
00:00:45,200 --> 00:00:56,210
And this is a button and we want this and a route and we want the text to say show and we want the command

15
00:00:56,540 --> 00:01:03,350
to equal show and I'm just going to copy all of this and paste it.

16
00:01:03,650 --> 00:01:07,280
And this one will be Hyd, obviously, and we've done this before.

17
00:01:09,290 --> 00:01:13,760
Hide, OK, and then up here at the top, let's create a couple of quick functions.

18
00:01:14,730 --> 00:01:16,620
So define hide.

19
00:01:17,740 --> 00:01:22,570
To let's just go past four now and define show.

20
00:01:24,630 --> 00:01:26,550
And again, we'll just pass for now.

21
00:01:26,850 --> 00:01:29,190
OK, so we've got a couple of buttons.

22
00:01:31,750 --> 00:01:40,630
Now, let's put these on the screen, let's go show button grid and let's go row equals zero.

23
00:01:41,140 --> 00:01:43,660
Column equals zero.

24
00:01:44,760 --> 00:01:48,600
And then let's go hide button grid.

25
00:01:49,640 --> 00:01:54,150
And row equals zero, column equals one.

26
00:01:54,530 --> 00:02:01,340
OK, so now let's create a frame and we can call this anything we want, but I'm going to call it my

27
00:02:01,340 --> 00:02:02,270
underscore frame.

28
00:02:02,720 --> 00:02:05,180
I just like that naming convention, my whatever.

29
00:02:05,540 --> 00:02:08,780
And this is a frame and we want it in root.

30
00:02:09,260 --> 00:02:12,200
And there's a bunch of things you can sort of define here.

31
00:02:12,200 --> 00:02:16,610
We can define, for instance, the width, let's make it equal.

32
00:02:16,610 --> 00:02:18,200
Two hundred and a height.

33
00:02:18,530 --> 00:02:19,370
Let's make that equal.

34
00:02:19,370 --> 00:02:20,150
Two hundred.

35
00:02:20,900 --> 00:02:24,860
We could have a border if we want by calling BBD.

36
00:02:26,430 --> 00:02:33,000
We can have a background color by calling BGI, let's just make this blue so it's easy to see, we could

37
00:02:33,000 --> 00:02:33,900
call relief.

38
00:02:35,100 --> 00:02:41,820
Equals, remember, we looked at this a while back with our something labels, I think sunk in.

39
00:02:41,880 --> 00:02:43,700
OK, so a bunch of different things we could do here.

40
00:02:43,890 --> 00:02:48,810
And then finally, let's just go my frame dot grid and we want to put this.

41
00:02:50,210 --> 00:02:52,160
In row one.

42
00:02:54,420 --> 00:03:02,940
Column zero, as I call this a column, spane equals two, so it'll span both of those buttons.

43
00:03:03,150 --> 00:03:05,160
All right, so let's say this and run it.

44
00:03:06,100 --> 00:03:11,440
And it's kind of awkward looking because our our thing is four hundred by four hundred, but these are

45
00:03:11,440 --> 00:03:12,700
just two hundred by two hundred.

46
00:03:12,910 --> 00:03:13,780
But here you see.

47
00:03:13,780 --> 00:03:16,810
Right, it's, you know, kind of awkward looking.

48
00:03:17,200 --> 00:03:19,450
It's just a box and it's blue.

49
00:03:19,720 --> 00:03:22,150
And we've made a little border and it's sunk.

50
00:03:22,150 --> 00:03:25,810
And it's kind of hard to tell because it's small, the sunken we put the border as one.

51
00:03:25,810 --> 00:03:27,100
So it's a little bit hard to tell.

52
00:03:27,580 --> 00:03:28,960
We can play with this a little bit more.

53
00:03:28,960 --> 00:03:38,890
We can you know, we can give this a pad X of twenty or something and let's call it pad Y of twenty.

54
00:03:39,940 --> 00:03:45,760
And let's give this border of, I don't know, five and steads if that makes it easier to see.

55
00:03:46,380 --> 00:03:47,320
Let's run this again.

56
00:03:50,190 --> 00:03:53,160
So you can sort of see that's how that looks.

57
00:03:53,670 --> 00:04:00,020
OK, so that's interesting, but it's not that interesting because it's just a box.

58
00:04:00,450 --> 00:04:04,280
The cool thing about frames is obviously that we can put things inside of them.

59
00:04:04,470 --> 00:04:06,030
So let's do that real quick.

60
00:04:07,380 --> 00:04:09,350
So let's come down here and let's go.

61
00:04:11,320 --> 00:04:18,010
Frame, label, it's put some text in there and it's going to be a label, and now normally we would

62
00:04:18,010 --> 00:04:21,910
put this in room, but now we want to put it in my underscore frame.

63
00:04:22,300 --> 00:04:22,660
Right.

64
00:04:22,870 --> 00:04:26,590
And we want the text to equal a little world.

65
00:04:27,400 --> 00:04:36,070
And we can put the font, the different font if we want font equals let's go Helvetica and let's make

66
00:04:36,070 --> 00:04:37,880
this, I don't know, kind of big ish.

67
00:04:38,140 --> 00:04:45,490
So now we can frame the label pack to pack this inside of the frame.

68
00:04:45,490 --> 00:04:50,110
And I know you're not supposed to mix grids in packs and the same thing, but this is not in the same

69
00:04:50,110 --> 00:04:50,270
thing.

70
00:04:50,290 --> 00:04:53,800
This is inside of a frame, which is a different thing.

71
00:04:54,370 --> 00:04:56,680
So if we save this and run it.

72
00:04:58,500 --> 00:05:01,930
Now we get hello, world, why is the thing changed?

73
00:05:01,950 --> 00:05:06,710
Well, because it has something inside of it now and it will resize to the thing that's inside of it

74
00:05:06,720 --> 00:05:07,590
when you use pack.

75
00:05:07,590 --> 00:05:07,840
Right.

76
00:05:08,190 --> 00:05:13,320
So you could see the borders kind of blue, but the inside of it is not because the label itself, its

77
00:05:13,320 --> 00:05:15,390
background is the one that's getting shown.

78
00:05:15,780 --> 00:05:17,400
So so that's kind of interesting.

79
00:05:17,410 --> 00:05:20,790
Now, inside of here, we can do the normal things we would do.

80
00:05:20,790 --> 00:05:26,810
We could go pad X equals twenty, add Y equals twenty four, save this and run it.

81
00:05:27,510 --> 00:05:30,240
You could see sort of how this is starting to work.

82
00:05:30,540 --> 00:05:36,330
This item inside of here gets padding and since now this is the only thing, you know, the height and

83
00:05:36,330 --> 00:05:37,950
width of this is what it is.

84
00:05:38,130 --> 00:05:42,600
Since we've put padding you can see the background of the frame itself, the background color obviously

85
00:05:42,810 --> 00:05:43,650
as blue.

86
00:05:44,130 --> 00:05:45,030
So that's kind of fun.

87
00:05:45,390 --> 00:05:48,270
So this is sort of the beginning of frames.

88
00:05:48,270 --> 00:05:49,890
There's all kinds of things you can do with them.

89
00:05:50,160 --> 00:05:51,720
We've got this show and hide button.

90
00:05:51,720 --> 00:05:54,990
We can change these really quickly to just.

91
00:05:56,120 --> 00:06:04,990
Well, let's just go hide, we can go mindframe, dot grid, underscore, forget, because we gridded

92
00:06:04,990 --> 00:06:06,340
that thing onto the screen.

93
00:06:08,340 --> 00:06:10,380
Or we can go mindframe dot.

94
00:06:11,680 --> 00:06:14,840
Grid and then passing whatever we wanted.

95
00:06:14,860 --> 00:06:16,930
So what are we originally put it as?

96
00:06:18,760 --> 00:06:21,160
This right here, so we could.

97
00:06:22,380 --> 00:06:25,910
Face that in there, say this and let's run it again.

98
00:06:27,690 --> 00:06:33,960
So we can hide it and it completely disappears, so it comes back and you notice these things change

99
00:06:33,960 --> 00:06:39,870
as well because these are just gritted to column zero and column one.

100
00:06:40,080 --> 00:06:41,700
But there's nothing else underneath it.

101
00:06:41,730 --> 00:06:44,880
They'll just fit to the size of the thing they are originally.

102
00:06:44,880 --> 00:06:47,610
And so these are just small buttons that shrinks down to the size.

103
00:06:47,970 --> 00:06:50,620
If we show boom, that comes back very cool.

104
00:06:51,330 --> 00:06:52,410
So those are frames.

105
00:06:52,410 --> 00:06:57,030
We'll use these more in detail going forward when we need to position things around certain ways.

106
00:06:57,480 --> 00:06:58,290
But very cool.

107
00:06:58,440 --> 00:07:03,360
In the next video, we'll look at sort of linking up our menu items to frames and some of the cool things

108
00:07:03,360 --> 00:07:04,170
we can do with that.

109
00:07:04,410 --> 00:07:05,610
And that'll be the next video.