WEBVTT 00:00.000 --> 00:23.160 All right. We're back to the patent application. Let's finish setting this up. So, I'm going 00:23.160 --> 00:28.380 to add a new simple button in this application, and then I'm going to draw a little pencil 00:28.380 --> 00:34.600 or a little magic wand or a little plus or minus sign on top of it. So, here's what I'm 00:34.600 --> 00:39.800 going to do. I'm going to go to the sprite selector. I'm going to choose a sprite, and 00:39.800 --> 00:44.520 then I'm going to add button 3 again now, because button 3 is too big. I'm going to add 00:44.520 --> 00:50.520 that little script again that will make it 50% smaller. So, I'm going to go to events, 00:50.520 --> 00:54.720 and then when flash clicks, then I'm going to go to look at the purple section and set 00:54.720 --> 01:01.440 the size to 100% instead of 100. I'm going to fill in 50. So, when the flag is clicked, 01:01.440 --> 01:06.320 the button shows the same size as the other buttons. All right. Now I'm going to go to 01:06.320 --> 01:10.760 costumes for the sprite, and of course, I'm going to delete this blue costume, and I'm 01:10.760 --> 01:15.980 going to add the pencil costume to this button. Watch what I'm doing. So, I'm going to 01:15.980 --> 01:20.640 choose a costume, and I'm going to search for a pencil again. I'm going to select pencil 01:20.640 --> 01:25.480 B, which will add it as a separate costume to the sprite, but I don't want it as a separate 01:25.480 --> 01:31.520 costume. I want to draw on top of the button. So, I'm going to control A or command A in 01:31.520 --> 01:36.980 this costume. So, select the pencil, then copy right over here, or control or command 01:36.980 --> 01:41.960 C on your computer. So, hit on copy, then go back to the other great costume for the 01:41.960 --> 01:47.560 button, and hit on paste or command or control V on your computer. So, after you hit paste, 01:47.560 --> 01:52.520 the spread should look something like this. A huge pencil drawn on top of a button. So, 01:52.520 --> 01:56.320 I want you to go ahead and shrink the pencil until it's small enough to fit inside the 01:56.320 --> 02:02.000 button. So, I'm going to zoom in, and I'm going to position it until the way I like it. 02:02.000 --> 02:07.520 All right. So, feel free to position the pencil the way you like it. After you've done 02:07.520 --> 02:11.680 that, feel free to click on the pencil B costume, and delete it because the button with the 02:11.680 --> 02:16.680 pencil, drawn on top of it, is the only costume you need for this sprite. Then bring it down 02:16.720 --> 02:24.560 right under the red button, and set its coordinates to 154X and a 155 for Y. This is exactly 02:24.560 --> 02:30.400 what I wanted. Now, I'm going to rename this sprite to draw. Okay, because this is the 02:30.400 --> 02:35.280 toggle for the pencil, then I'm going to duplicate this sprite for the magic wand. I'm 02:35.280 --> 02:38.760 going to bring it down right next to it, and the coordinates are going to be negative 02:38.760 --> 02:45.800 for X, which aligns it right below the orange button, and 155 for Y. Now, of course, we 02:45.800 --> 02:49.680 need to edit the costume for the sprite as well, so I would like to delete the pencil 02:49.680 --> 02:54.200 from the costume of this sprite. So, click on various parts of the costume, and delete 02:54.200 --> 02:59.160 them. Okay, so this leaves just the gray button, and then do the same thing that we did 02:59.160 --> 03:05.080 for the draw button, and add the magic wand costume on top of the gray button. So, here's 03:05.080 --> 03:10.240 what I'm doing, hovering over this icon. I'm going to search. I'm going to select 03:10.240 --> 03:17.520 a magic wand. Alright, so, we have a magic wand as a standalone costume for the sprite, 03:17.520 --> 03:22.440 which we don't really want. We want this drawn on top of the gray button. So, I'm going 03:22.440 --> 03:27.560 to control or command and on my computer. Then, I'm going to hit control or command, 03:27.560 --> 03:31.800 see or copy this little button over here, and then go back to the gray button, and I'm 03:31.800 --> 03:36.760 going to paste, which draws the magic wand horizontally here on top of the gray button, 03:36.760 --> 03:42.120 which is not exactly what we wanted. We want this inclined, much like the pencil. So, 03:42.120 --> 03:47.680 I'm going to drag this rotation icon right until the icon is inclined, much like this. 03:47.680 --> 03:53.000 Okay, and then I'm going to resize the magic wand until it fits into the button. So something 03:53.000 --> 03:57.920 like this, and then once you're satisfied, you can just delete the magic wand costume 03:57.920 --> 04:02.320 because the button is all you need. I'm going to rename this sprite to erase, because 04:02.320 --> 04:06.280 this will be the eraser toggle, and then I'm going to duplicate it for the full erase 04:06.280 --> 04:12.560 with a little lightning bolt icon on top of it. I'm going to name this erase all. Okay, 04:12.560 --> 04:16.840 and as we did for the pencil, I'm just going to delete various pieces until I only have 04:16.840 --> 04:21.400 the plane button over here, and then I'm going to add the little zap, the little lightning 04:21.400 --> 04:26.360 bolt on top of it, much like we did with the pencil and the magic wand. So, you know 04:26.360 --> 04:32.080 the drill. Hover over the choose the costume, click on search, and search for lightning. 04:32.080 --> 04:38.880 Click on this one, control or command A to select everything. Then, copy. Go back to 04:38.880 --> 04:43.480 the button costume and hit on paste. We have this huge lightning bolt drawn on top of 04:43.480 --> 04:47.720 the gray button, which is not something that we really want. So, I'm going to drag this 04:47.720 --> 04:52.560 little rotation icon until it's somewhat inclined like this, and then I'm going to re-seize 04:52.560 --> 04:57.480 the lightning bolt until it can fit inside the button, going to zoom in, make it a little 04:57.480 --> 05:02.400 smaller, draw it in the middle until I like it. And once you're done that, feel free 05:02.400 --> 05:07.560 to delete the lightning costume. As for the other two buttons that grow and shrink, 05:07.560 --> 05:12.440 once, they're going to be pretty easy to create. So, I'm just going to right click on this 05:12.440 --> 05:16.800 erase all button, and I'm going to duplicate it as it is, and then I'm going to delete 05:16.800 --> 05:21.400 this lightning bolt from the button by clicking on various pieces of it. Make sure you're 05:21.400 --> 05:24.960 clicking on the black part of the lightning bolts so that you don't end up deleting the 05:24.960 --> 05:31.240 button. Alright, okay, I'm going to rename this sprite to a big row, and I'm going to 05:31.240 --> 05:36.320 simply draw a white plus sign on this little gray button. So, here's what I'm going to 05:36.320 --> 05:41.200 do. I'm going to select the line tool and click on this outline color picker, which 05:41.200 --> 05:45.800 will dictate the color of the line. And right now, the color is black because the third 05:45.800 --> 05:49.680 slider is pulled all the way to the left. I want you to pull it all the way to the 05:49.680 --> 05:53.680 right, and the second slider all the way to the left, so that the color becomes white 05:53.680 --> 06:01.120 instead of black. Okay, and make the outline 10 instead of one. Okay, so the line will 06:01.120 --> 06:05.840 be quite thick. So right now, we have a line tool that will allow us to draw various 06:05.840 --> 06:10.760 lines on the button. So, I want you to start in the middle of the button. So maybe like 06:10.760 --> 06:15.920 here, hold the shift key, and drag your mouse down so that the line is perfectly vertical. 06:15.920 --> 06:20.320 Okay, so maybe draw something like this, and again, in the middle of the button, somewhere 06:20.320 --> 06:24.840 like this, hold the shift key, and drag the mouse horizontally until you get a little 06:24.840 --> 06:31.560 plus sign. That will be Agriba then. So, rename the sprite to Grow and Duplicate by right 06:31.560 --> 06:36.240 clicking on it, hitting Duplicate, and name this to Shrink. In the Shrink's costume 06:36.240 --> 06:41.560 editor, just click on the arrow sign over here. Okay, in the editor, and then click on 06:41.560 --> 06:46.440 the vertical line and just delete it. So, all you're left with is a negative sign for 06:46.440 --> 06:52.960 minus. Okay, so right now, we have all the costumes for all the sprites. Let's just position 06:52.960 --> 06:57.800 them on the screen properly. So, the group button clicks on it. The coordinates for that 06:57.800 --> 07:04.640 are going to be 54 for X and 155 for Y. So that's right below the yellow button. Click 07:04.640 --> 07:13.000 on the Shrink button and make its X coordinate 0 and the Y coordinate the same. 155. And finally, 07:13.000 --> 07:20.600 for the erase all button, click on that. Instead, its X coordinates it to 50 and its Y coordinates 07:20.600 --> 07:27.640 to the same. 155. So that all our buttons are perfectly aligned. Now all we need to do 07:27.640 --> 07:31.960 is create a little background for these buttons because they look a little boring, don't 07:31.960 --> 07:37.560 you think? So, I'm going to click on the stage here for the backdrop and notice that the 07:37.560 --> 07:43.960 backdrop also has a little editor where you can edit the backdrop. So, all I'm going to do here 07:43.960 --> 07:48.840 is create a simple rectangle that I'm going to fill with a gradient. So, here's what I'm going 07:48.840 --> 07:53.960 to do. I'm going to click on this little square icon, which will let me create a rectangle. So, 07:53.960 --> 07:58.360 I'm going to drag a little rectangle until it covers the entire backdrops width, but the height 07:58.360 --> 08:03.560 just covers maybe a quarter of it. So something like that. Okay, and then I'm going to click on this 08:03.560 --> 08:07.880 arrow icon and I'm going to click on the fill control and then I'm going to select a gradient 08:07.880 --> 08:13.160 and I'm going to select this third vertical gradient. Okay, so see the purple gradient? 08:13.160 --> 08:17.400 I'm going to have no gradient to a light blue gradient, so I'm going to drag it maybe something 08:17.400 --> 08:23.320 like here in saturation, a little bit lower than that. Okay, so something light blue. Okay, 08:23.320 --> 08:27.960 pick whatever color you like and then just click elsewhere to validate, which will create this very 08:27.960 --> 08:33.320 cute light blue background behind the buttons that we've created. And at this point, we're done 08:33.320 --> 08:44.360 setting up the paint project. It's time to program our sprites starting in the next video.