Create An Interactive Colouring Book In PowerPoint

oh this is Justin from the tech train here and in today's tutorial what I'm going to show you is how to create this interactive coloring book in Microsoft PowerPoint you can see that we've got a number of colors on the right-hand side which I can choose from and then once I've chosen a particular color I can then select that and paint the image on the left-hand side so it's a nice little tutorial that will show you a number of different tools and we'll teach you a little bit about writing in VBA which is the programming language we're going to use we're not going to use a lot of it but just a little bit and and also some logical thinking and using shapes so let's get started [Music] so there are three parts to this particular PowerPoint presentation we have the picture on the left hand side the paint palette and the brush in the bottom right corner here and the purpose of the brush is to show you which color is currently selected so as I click on the different colors in the paint box at the top you can see that the paintbrush down here changes color to match and then whatever color we choose is the color that we can then paint with in the picture on the left hand side like that and of course we can reset everything by simply choosing the white color and then clicking on those parts to reset it so let's look at how we can produce this step by step it's a good task for students to it's a try perhaps as their first introduction to writing or looking but a simple code doing a little bit of VBA because it's so about logical thinking it's about a little bit of code and it's also of course about using shapes and assigning macros there's quite a few little basic tools that would students could enjoy so what I'm going to do then is start a new presentation I'm going to close the old presentation get rid of that no we're not going to save it so you can see step by step everything that we need to do and the first thing I'm going to do is change the layout on a blank slide here and I'm going to change the background as well just so we can see things a little more clearly because of course with the black and white pictures we're going to end up with different contrast if we don't have a colored background so I'm going to do is change that to radial and set the gradient like that there we are just so that the black and white pictures or the parts that run colored will stand out against that background a bit more clearly okay so now we've got the the background done the first thing we're going to do is the pink brush so I'm going to go to insert shapes and we need three things for the paintbrush we need the tip we need the bit that holds the tip to the brush that the handle rather and we need handle these are three shapes were going to use and we'll see how those can be adjusted now so the first thing to do with the shape here I'm going to fill it with white change the shape outline to black and change the width of the outline to three points now that doesn't look much like a brush at the moment or the paint tip so I'm going to right click and edit the points and then it change this point at the bottom left from a corner point to a smooth point and they're going to do the same thing with the one on the right I'm going to lift this one on the right up slightly so they're more even and then the one at the top I'm going to pull up slightly and as you see I click on it I get these little handles which I can use to pull and distort the angle of that curve I'm then going to just lift this bit up so it's a bit more even and there we are that'll be the tip of the paintbrush now this bit here is the rounded rectangle again I'm going to fill it with a key I'll fill it with a gray color change the line to black and again make that three points and it's a bit of a square edge to rectangle the moment I want it more oval so when I click on it you can see there's a little orange or gold colored circle if I pull that you can see that I can make the ends of the rectangle more curved there we out that will do for that and it's we reduce the size of the brush and put that just underneath like that now the other handle again I'm going to color this will have an orange handle with black outline and three points and this will need to go underneath everything so I'm going to send it to the back and just position that underneath like that so there we are a pretty simple little paintbrush that will do for this now I want to rotate this at about 45 degrees and put it in the bottom right corner of course if I was to rotate it then that would just separate everything out like that so I'm going to right click and group it first of all then I can rotate it as one group and bring it down into the bottom right corner like and now we can ungroup it now it's not important particularly but there is a little paintbrush sticking out over the edge of the side and I'd like to get rid of that really I'd like to remove that bit that sticking out so what I'm going to do is I'm going to create a rectangle and I'm going to remove the edge from it so that I can put that right up against the bottom of the slide like that and then I'm going to click on the handle of the brush hold the shift key down and click on this rectangle and then in the drawing tools format toolbar or tab rather I can click on merge shapes and then subtract and there we are that's now removed the part of the brush that was overlapping if you have an older version of PowerPoint by the way unfortunately that subtract function is not available right next step is to add in the little blob of paint up here now you could use any shape I'm going to use a circle I'd like it to be a perfect circle as I'm going to hold down the shift key so that I can lock that to a perfect circle but there's no reason why you can't use any shape at all of course for your pink box next I'm going to change the outline to black and three points and the color inside of course it doesn't really matter we're going to have lots of different colors but for the purpose of this I'm going to have that as red there we go so I have my paintbrush and I have my first color now the next thing we need to do is to name the paintbrush and this color this is important because we'll need to refer both to this brush here so we can change its color and we need to refer to this shape here so we can get its color and that'll happen in our code so for a code to be able to know which shape we're talking about they have to have names if we go into the Home tab and click on select on the right hand side and then click on selection pane here we can see the names of all our shapes if I click on the brush the tip of the brush just here you can see that currently it's called isosceles tranq triangle 3 so that it simply change that to brush like that and now the Paint Pot a color here is currently oval 9 I'm going to change that to red now you'll end up with quite a few of these colored pots here and they'll each have a name which refers to the color that's inside them and again that will help our code know which of the colors to use it doesn't matter what words you use over here you could have light red dark red medium red burnt red it's up to you as long as each of them has a unique name right so we've named a brush we've named our shape we can close the selection panel for the moment and it's now time for some code so you might be tempted to create lots of these colors to begin with don't do that because we'll need to add some code that will then be connected to this Paint Pot here and once you've done that once we've made that connection then we'll make copies of it so that all the copies also have that connection to the code so it's easier it saves time we just have one of these colors to begin with so to open up our code window if you hold down the Alt key which is to the left of the space bar and then tap the f11 key at the top of your keyboard that opens up the code window and you can see them on the left hand side we have VBA project that's the coding project for presentation 1 that's the name of the presentation that I'm currently working in so I'm going to right click on that and insert a module this is simply a where I can type out some code and we need three separate bits of code the first bit of code that we need is to create a variable a variable is like a little box into which we can store a single piece of information so to create a variable we starts off with the word dim and then we name our variable it can be anything you like but in this case what we're going to store inside this variable is the name of the color that we are going to be using so it's going to be named color so dim color and what we can be putting in this variable is a name some text so we can actually say that this type of variable is going to be a string variable string is another word for text so dim color the string is our first block of code that was quite simple so now we're on to our second bit of code now this second bit of code is actually several lines were not many it's just a few lines but we'll need to put them into what we call a subroutine so a subroutine is a block of code that's named that we can then get the computer to do as one lump of code one block of code it does all those lines in one thing so what we're going to do this sort of gonna call it well we are going to pick up or get the color that the user has clicked on so I'm going to call mine and get color now of course when we do click on a color we'll need to make sure the computer makes a note of which color or which shape the user has clicked on so when we ask the computer to do this block of code we're going to say my shape that's just a like a variable name that I've just made up myself that's not a code word my shape has shape so this is what we call a parameter it's like a variable but it's used by a subroutine and this here my shape is a sort of a variable parameter that stores information what information does it store it stores all the information about the shape that has triggered this subroutine so some get color my shape is shape means okay whenever we ask you to do the block of code called get color then make sure you make a note of all the details to do with the shape than we've clicked on and of course that will be linked to this block of code here this shape rather here so later on when we click this shape the computer will make a note of all the details about this shape its name its color its style where it is so it'll get all the information and it'll store all that information in a little block of code if you like a little block of information that we've called my shape okay so sub get color my shape has shape press enter it'll put in the end sub for you automatically don't get rid of that we'll need that that simply means this is where our submarine begins and this is where that subroutine ends so what are we going to do in here we're going to do three things first of all our variable color that we created up here we're going to put in there the name of the block the name of the shape that we have clicked on so if we click on the red palette then it's going to put the word red which is the name of that block of shape into the variable color so if I have my shape here that's named red over here we can start means red then what we're going to do is put the word red that I've put here into the variable color so color equals and we've got all the information of the shape in my shape dot and what particular bit of information is it about my shape well it's the name of my shape so if we click on the red palette then the name red will go into the variable color so now we know which shape the users clicked on and we know what the name of that shape is now what we can do is go and pick up that particular color want to pick up whatever color we have actually made that particular shape so although I've called it red that computer doesn't know what color that shape actually is I could have this named red and actually fill it green and we'll still be able to paint in green the computer doesn't recognize that as a color it's just some text so I'm going to do now on this line is write active presentation because we might have more than one PowerPoint file open at a time so we need to make sure that the computer is only looking at this presentation if this one's active and then we need to tell it which slide we're looking at I'm on slide 1 if you've only got one slide then it'll be slide 1 but you might have a title slide so just make sure you put the correct number there for the slide you're on so here obviously I'm on slide 1 and dot shapes because we're looking at the shapes and and which shape are we looking at well it's whatever shape the name stored in color refers to so we're just going to put in color in there and what we need to do we need to pick up that color pick up the style of that shape so if I've clicked on the red circle the name of that shape will be stored in the variable color so in this case the word red and then this line says look at slide 1 find the shape called red and copy or pick up the style of that shape once we've copied or picked up the style of the shape where do we want to put it we want to put it on the brush so we'll type active presentation dot slide 1 dot shapes and this time we don't need to use the variable because we know the name of the brush it's always going to be brush so we took type that in speech marks like that and now what you want to do with that we want to apply the style or the color that we have picked up there so that's it that's all the code we need for the getting of the color so if we go back now to our presentation and we click on the color palette here and we go to insert and then click on action and in the section here called run macro you can see a list of all the blocks of code these subroutines that we have created we only created one is called get color and there it is so we choose that and click OK now if I run this presentation you'll see that if I put my mouse over the red circle I get the little white hand which tells me that there is an action linked to that shape and if I click it you'll see that the paintbrush down here turns red to match that color so what we'll do now is we'll take a few copies of this color palette here so I'm going to click on it once I'm going to hold down the Alt key but not the one on the left of the spacebar I'm actually going to hold down the Alt key on the right of the spacebar on some computer keyboards that may be alt gr volt gray but if you hold that one down you'll see that the mouse has a little plus sign next to it and if I keep that held down I can click and drag and just take lots and lots of copies of that in one go just a nice quick way of doing a a bit of a copy what I'm going to do is just I don't worry too much about lining them all up you can do that obviously I'm just doing this a bit quickly next thing I'm going to do is I'm going to color each of these so I'll have an orange there as well yellow let's choose an orange there then have a yellow color then I'll have a light green I will have a a blue and I'll have a purple like that whoops purple Phil no yeah so there are those are my different shapes in fact this green one here let it change that to white so that we can remove the color later on from our coloring now in order for these to actually work properly we need to change their names now so we open up the selection pane and you'll see that they're all Called red so we have to click on each one one at a time now this here you can see is the orange one it's called red so I need to rename that I'm going to call that one orange this one here just to show that it doesn't really matter what you type in here that the name that I'm typing in isn't somehow magically going to tell the computer the color I got a call this banana which we know isn't going to be a color but you'll just see how that will still work even if we type in a name which tells us what what it is but it's not an obvious code color this one I know right sinners wait and then we're gonna have this one here I'll type the light blue there we go and this one will be purple that's what we need to do because of course we attach the code to this red palette here and then when we copied it we copied the action to every single one of these so if I was to click on the light blue one and go to insert action you'll see it's already got run macro get color that's already there and if I was to run this presentation you'll see that now I can click on any of these colors and the brush will change color to match it there we go so that's all working fine let's just save our presentation now before we move on to doing the color because it's really important we save this in the right way because what we need to do is to make sure when we are saving it that we don't save it as a PowerPoint presentation what we need to do is make sure that we save it as a PowerPoint macro enabled presentation the reason is that we have code built in to our presentation and if we don't have it saved as a macro enabled presentation then the code will be removed from the PowerPoint file and of course it won't work so I'm going to call this color and click Save there we go so that's now saved properly that's all working it's time now to create our drawing so now we have our color palettes and brush it's time to create the shape or the picture that we're going to color now this could be abstract it could be as simple as you like or as complicated as you like I'm going to do a simple butterfly and show you how I created the one that I demonstrated earlier on so I'm going to begin with a single circle and that's gonna be able to left hand wing of the butterfly all the shapes that we're going to create will be filled with white have a black outlined and that will be set to three points notice that I'm using the same thickness of line for these images as I am for the color palettes over here now that's important because when we apply the style of one of these paints to the shape over on the left hand side we'll be applying not only the fill color but also the line color and style around the outside so it's important to keep that consistent so here's my left hand wing obviously it's not really a butterfly wing shape yet so I'm going to right click and edit points although there are black dots around the edge of this which we can pull out and adjust you can click anywhere on this edge here so I'm going to grab just around in the middle of this point and pull that up then it is the same thing down at the bottom here and pull that round creditor sort of a kidney bean look and we can click on those and adjust the curve a little bit pull that in perhaps and do the same for the one at the bottom like that and pulled this in a little bit like that as well and then flatten off the right-hand side I'm just going to pull that down like that perhaps so it's up to you you can play around with this as much as you like I'm not going to do too much of that because I don't take too much time but that'll do for the left hand wing I'm going to duplicate that by pressing ctrl D and then I'm going to do a flip horizontal and put that on the right hand side over here the next thing I'm going to do is the body of the butterfly that's another one of these rounded rectangle shapes so I'm going to put it like that there's obviously quite square at the moment so we're going to click the orange dot and pull that to round the edges now I can actually do manually what the code over here is doing when I'm picking up and applying styles or color I can click on this butterfly wing here which has a white fill and a black outline go to the Home tab and click on format painter which picks up the style I can then click on this shape and apply the style it's basically what our code is doing if I did is exactly what our cone is doing so that's just a way of quickly applying the style for each of the shapes that we'll be using that we'll do for the body of the butterfly next I'm going to do just a few shapes inside so I'm going to grab a circle draw it over here I'm going to edit points and just distort that slightly just so it's not blocky shapes they are that will do that I pull that up like that put this into the corner there we are and then again apply the style of the wing to them then I can duplicate it again for Matt we're at eight flip and then bring it over here and you'll see when I drag it there's a sort of a dotted red line which shows me that it's lined up with the one on the right hand side so I know that that is the same height let's do two more shapes very quickly so let's those he's a triangle shape this time like we did with a brush down here and again edit the points I'm going to smooth out those two points there like that and change the angle over here widen that slightly and and this I think will probably go down here but I'll need to just put at that point at the bottom slightly to fill in that okay that's a little sharp but again I'm not gonna worry too much at this point because I don't want to take up too much time there we go that will deep bring that down perhaps and in there there's a little bit rough but again it'll do for the moment for the purpose of this let's format that and again format it flip it move it across and line it up so the basic that tablet is an appalling butterfly and I do apologize you'll see that in the the demo I did earlier on it was a lot neater but it did spend a bit longer on that that is probably the world's worst butterfly still that aside it will work so what we need to do now is to create the code which will allow these shapes here to pick up or apply the custom colors on the right hand side so it's time to go back into our code window which we can do by holding alt and pressing f11 so the first two parts of our code they're already the dim color as string that's our variable and the subroutine that picks up the color from the Paint Pot on the right hand side so the last block of code we need is another subroutine so we'll start it with words sub and this time it's to apply the color to whatever shape we've selected and if you use the the name apply color or even just apply and that will help the fact that it begins for the letter A will make life a little bit easier later on you'll see why again when we do click on a shape we will need to know which one it is so we need this my shape as shape the brackets just afterwards so it's a little bit like like having a variable but it's a it's called a parameter and it contains a lot more information than just one thing okay now the problem we've got here is of course that so it's possible someone might click on one of these shapes before they've selected a color on the right hand side which means that our variable color won't actually contain anything it won't contain the name of a color yet so we have to just think about what do we do if color is blank so we'll do a little if statement so if color equals and then just empty speech marks so not a space in there just absolutely nothing then what we'll do on the next line is simply exit this subroutine so we won't continue doing any of the code in this block we'll just end our end if statement and now if we get to this line we know that the variable color does contain some text it does contain the name of one of those color circles so if it does contain the name of a color circle then what we need to do is to pick up that color first of all and then apply it to whatever the shape is that we've clicked on so the color that we know we are going to be using is the name stored in this variable color so we'll start off with active presentation dot slides and of course we're still working in slide 1 dot shapes now which shape is it it's the shape name that stored in color that's where the name of the color circle is and we need to pick up that color so that light there you'll see is exactly the same as this line here where we picked up the color and then we applied it to the brush here we're picking up the color just as we did before and now we need to apply it to the shape which shape is it well it's my shape into whatever shape we've just clicked on so we can type in my shape here and then simply dots apply we don't need all the information about active presentation slides one shapes because we've clicked on the shape it knows that it's that shape on that slide on that PowerPoint presentation so all that information is already included in that parameter there and that's it that's all we need so that will now allow us to apply a color what we have to do of course is to now link that code to each shape in this picture on the left hand side and I'd have to say the more I look at that butterfly the more embarrassed I am by it I'm seriously considering just scrapping this video and doing that all over again so and please if you've got this far in the video don't judge my butterfly drawing skills please do please do comment below what you think of my butterfly though right so let's so click on one of these shapes any one of them and the start top left here click on that shape insert and then go to actions and you'll see that in actions we can go to run macro and this is we're using the word apply is useful because it's the one at the top of the list so we don't have to keep clicking on that list and scrolling down to choose at the subroutine it's the one that's at the top so we apply the color and what I'm going to do is click on each shape in this picture click on run macro and okay because apply color is already selected so a click action run macro click action run macro so the more detailed this picture then of course the the more you'll have to do this and you could possibly do it all on the right hand side just draw the right hand side and then copy and paste and flip it all across but there we are that's that's now so it doesn't take too long so there's the butterfly I'm just going to save this presentation again and now press f5 and you'll see now if I click on a shape click on a color I'm going to choose the choose purple I can click on these shapes here and color them purple let's have some red at the top there some yellow at the bottom and the body will set to black and there we are and of course to reset it to always somebody click on whites and just click on all of these shapes so there you have it a interactive coloring book which you can do in PowerPoint with a little bit of VBA code and a little bit of drawing or hopefully considerably better than mine and and the linking of code to buttons so I hope that was useful hope you enjoyed that if you did please do give this video a like that'll be awesome and of course to leave a comments if you have any questions any suggestions or you just want to laugh at my drawing skills that's absolutely fine if you do leave a comment I will read them I will reply to them assumes I possibly can and so do feel free to leave them behind and if you haven't subscribed already please do hit that subscribe button or click it or tap it or whatever just don't leave it behind and if you could like the video that would be brilliant thank you very much indeed for watching who can join it and I look forward to seeing you in the next video bye for now you

Channel: The Tech Train

Views: 13,596

Keywords: Microsoft, PowerPoint, Microsoft PowerPoint, colouring, colouring book, PowerPoint colouring book, interactive colouring book, colouring book app, PowerPoint app, VBA, macros, color, coloring book

Id: yohIrDoh590

Length: 31min 43sec (1903 seconds)

Published: Sun Jun 10 2018