VBA UI UX-2: Add web-like effects to Excel UserForm Controls

hey guys welcome back to VBA eh-2-zed my name is lumpam i and in the series of upcoming videos i'll be showing you how to design a professional user interface using Microsoft Office applications in short UI focus on creating attractive visual layouts that are responsive and guiding whereas UX focuses more on the user experiences I'll be covering both aspects of these designs I'll show you how to use all existing controls and also teach you how to create custom controls in effect we'll try to cover many practical examples so you can easily replicate them for your workspace all these videos will be added to playlists called professional UI / UX as always project file source codes use with include rules will be made available absolutely at no cost so you can change them as per your requirement the only request from you is to support my channel so I can keep sharing all these videos and programs so before we begin please do not forget to subscribe to my channel and hit the bell icon for upcoming videos in today's video i'll be showing you how to add effects to controls within your interface which will look something like this so if you look here if I hover my mouse on top of these controls it gives a transition effect of certain sort that you can customize by yourself and if I click on any of these controls it is a sunken effect and once I leave it it goes back to normal like this so some kind effect goes back to normal like this today we'll be focusing on how to add effects to any of these controls that you have and then once you learn this you'll be able to replicate and add the controls to any of the controls in your interface so before we begin let me quickly walk you through some of the resources for today's tutorial in our upcoming videos we'll try to create a dashboard which will look very similar to this I'll show you how to add charts and graphs within your user interface how to customize and add icons like this as you already know you know first video we've done a part of it so you should be aware of some of the ways to add those I'll also show you how to add effects like this which will be you know like you'll come to know today how we'll be taking care of all those and I'll be showing you how to create a customized table in the meantime we will also learn about existing controls as well so if you click here this is a beautiful that's what I came across so I'll show you how to replicate similar table like this how to get a color like this and so on so first thing I want to show you is that if you like a color from any of the interface web application text of application and so on you know like there are so many tools out there I use a tool called color spy you can use this to you know like spy on any of this color you can hover on top of those background and then you can get this hex color code which you can convert it to RGB as as you like okay in today's form in this form for example let's try to get a background color of this form let's say that you wanted this form color right so I have this hex code here which I'll copy it and normally I use this hex to RGB sigh with to convert the hex code to RGB once I have this here this is my RGB code for the one that I copied from the color spy quickly showing you this because it becomes really helpful when you want to incorporate this exact color team within your form and icons that I use in this particular form all these icons are downloaded from this eye icon sitcom and the collection is from aluminum I'm quickly showing you this because here you can set the background color as well as the front color which is really useful because in our last video we use the PowerPoint to create our icons and then set the background color so that it matches exactly with the background of your phone right I'm gonna download one of them for example let's say you want it down with this click on it once you come here I normally don't like g-pack you know that we cannot import PNG so JPEG and then here once you come down here you can set the foreground to any color you want for example let's set it to darker Kim because the foam is dark and the background color here you can set your color code that we just - let's say 1:07 so red is 1:07 Green will be 79 and then here blue will be 1:07 again once we have this you've seen like the edges of these form changes and once you're happy with this you can also take care of the width and the height and everything from here itself based on you know like your requirement once you're done you can click on download once it's done it's gonna go to your downloads folder which you can use to import it to you to your form this all from the source perspective I'm gonna close this out for now so coming back to our form here I'm gonna quickly insert a new user phone I'll just make it really big for now like this okay what I want to show you now before we continue on adding the effects is basically what I've done there is let's say that this is my image I'll just import this new it may say we downloaded not gonna download all the things because you already know how to do it from our prior video so as you can see here this is the one I just downloaded now and the effect that was there is you you see like special Freddy's here so you can you have option of adding any of this special effect but the first one was flat and the second one was good so what I did was when I hover my mouse on top of these controls I change the effect to each and then otherwise is flying it goes back to flat let me quickly show you where you can access these effects basically these are done through events once you double-click on any of the controls quickly go back v f7 going back so if you add any of these controls for example this is a text box you see all this most downloads move up ki aapki down key press down exit all these are events are runs whenever you do something with the control so similarly the one that we imported right now is the image it all of these controls have this and this event if you look here you can see the most down effect is there so what I did was one the most most is down when I the object is click I change the effect of that particular controls the sunken so if I have to show you manually like image that special effect is equal to IC sunken so when is clicked down I see it is sunken and when the mouse is up then I can change this back to to flat for example so if we just tried this out now on image one I'm gonna load this so you can see like once I click on this you can see like there's a sunken effect there like this okay and we'll try to add one more effect so one the mouse is on top of it more smooth okay when the mouse is on top of this we'll try to add we'll try to add a special effect and we'll call this peach as soon as it exits from this particular control we want to reset it back to flat so what we can do here is we can use the user form itself or whatever it is next to that particular control okay so I'll say most move so when the user form most move we want to set back the effect of image one to flat when loaded you can see like once I hover my mouse on top of this the effect has changed to eat and once I move out it has gone back to flying okay this is how you can easily add effect to any of the controls so I'm gonna delete all this all right and I'll quickly show you how to add a class object and then take care of the all these controls it's not feasible because if you have to do this for all the controls here let's say you have 10 objects and you have to add effects to all of this it's very difficult to write you have to go back and add this effects to all these controls one by one and then keep on resetting them right it's not it's not very fit so quickly show you that portion of it for now I'm gonna delete all this and we'll go to this particular form let me quickly copy this part okay I'm copying all these controls this for now so that we can you know I demonstrate how to work with this so once you load this form is gonna give me an error now because of the prior code that we wrote so I'm gonna get rid of all this so it loads up like this without any background as normal so it's not looking that great okay now we're gonna go back and copy the code that we wrote in our prior video and add them at the background like this okay so once I load this up this full screen and then you can see all these controls seems to be okay that that looks better okay so now if you place your cursor on top of this nothing happens so that's what we're trying to add but instead of going to each of this image and adding show you how to write a class and then add an effect to them now you already know this index how to generate this in this once you double-click on it and you select any of this effect you can get the syntax of how to use this for an example getting rid of that now going back to our users let me insert a new class object okay class module and then let's call this as class underscore control something like this and once you go in here basically here we want to add an image object within this class module and then we'll add this with with an event okay so we'll add a public object okay so if you add an object like this this is a normal object but we want to have this we want to add events to this particular object so we'll say with events so we're basically telling that this particular object will have even associated with the image control okay so here you can add any of the matter that you see in the forum for example if you come here and double click on this you can add all these events to that particular control okay so for example let's say we want to have a mouse move and then we want to have moles down or image click right mistakes so I'm gonna get this mouse move for now and I'm gonna go back to the class and we add it here like this so instead of image six we'll just get this a image and then here within this will say we'll say we'll reset will first write a code to reset all effects existing effects and then here we'll say whatever image you know like the mouse is on top of will Donna reset that will set the special effect to each like this okay and along with this we will add a click event as well so in case you the images getting click just simple effect like that so class is really useful from this perspective so we can say we can tell the code to do whatever you want when the image is clicked okay so for now with this something like this something like this okay so now this is a class that we just created we'll have to reference it in our user form to be able to use this okay so going back to our user form here I've already created this code so that we don't have to waste so much time so just basically it reset all effects for all the controls we're declaring the control then we're looking through all the controls within this user form and if the type of that control is image then we're saying reset it to flat the special effect of flight and then it was on to the next country so you can add more condition here you know like if the tag is something or you know like we can play around that more for now we'll just take this here before we set an effect that will just reset everything first and then we'll do that so similarly down here we'll say when it is click after that we'll say that reset the effect okay let's come back to our form our phone still won't do anything because we have not used a class yet so I'll quickly copy the code that I've already written this part is simple so I just kept it here I'm going to quickly walk you through this I'm saying I'm declaring that my image will be the class control the class that we are we just created okay and coming down here this our we'll just put this within the code the initialization code for your clearing not an object and then we're having a pointer and then inmates pointers I think we don't need a pointer for now okay and then coming down here I'm gonna copy all this code and we'll put it down here at the bottom quickly gonna walk you through them so I mean here we don't need this pointer I was trying for a label earlier so you can use this effect on any of the controls so here declaring an object this is basically an index or a pointer of how many objects you know like it to be used in an array so here you know like we are you know like declaring or array that the image count will be from 1 to account of all image then every time it looks through all the objects if it finds the type object as image is gonna increase the the counter and then it's gonna set this image setting up the image object here as the new class control that we already created here and then we're setting this we are setting this particular image that we already set here and then we're using this object that we created within this particular class so let's say that you want to have more objects within this class you can say for labels you can see here the label text box and so on you can have here like label something like that okay you can use it let you guys play around that coming back to here but it's using that particular herbs like we created and then it goes to the next subject then in the final it has you know like it preserve the image count that was already conjured here okay so if I load this now you see like as soon as you place your cursor on top of any of this object you can see that it has that particular effect but when you move out of this you still have this is because on exit you you also need to add this effect so that it goes away for now you can add this reset class effect when the userform is activated for example just for an example oh yeah this would be fine okay so your cursor goes out touch you know like like this so when you click on it it says this image was click this mace was click like that okay and then it resets it up right after that so if you have to add more effects to this here we have added mass move we can also do for other you know like BiCMOS down like this so let's copy this syntax and then you can say instead of this static we'll just copy this you know object that we created and then we'll just say this can say the special effect is equal to something so when you click on it it gets something right and then once you hear most up let's copy this as well so when the mouse is up we want to just bring it back to the flap so let's give it a shot so hovering is OK when you click on it you can see the sunken effect now like this okay now one more problem you'll come across when you do this is because once you use the class you will not be able to use this particular thing from here whatever you write here is useless okay because we're already saying that these controls will be you know like access from this class and not from this particular phone this particular image control on top UML so what is going to happen is let's say that there is another image like this somewhere here right like this so it's gonna hover on that as well maybe you do not want to hover on that so you can take care of this by there are different ways to do that but as an example for now you can add attack you can add a tag or some sort of like base on the name let's say that all these objects as a name starting with let's say that effect something like this for an example right effect 1 or something like that so when you click on a fake one only one the name is starting by effect you can run the you know like the effects you can apply the defect or the other thing you can do is you can select all these controls that you want to add an effect to like this and then you can take you know like whatever word you want let's say that anything or something like this okay and then when we want to add this effect only to those controls that has this tag so you can implement this from here if the type name is this and object dot name dot type is equal to this then we want to implement this something like that so it still works if you copy this here this one does not ah let's remove this tag and see its store so that the effect is not added here so you if I only works on all these controls which is attacked like this and one final thing to add here is so every time any of these control is Cle is gonna go through this so let's say that you want to run certain code when this particular button is pressed and this and this for an example well will do will try for this one here in the class you can mention that if if you made that name is equal to this then here you can specify the name of the macro call micro one or something like this or just the name of the function or sub procedure that you have so let's say that we have a code sample here click one sample test something like that mrs. box this code was triggered from class something like that I'm coming here I'm calling this hold this code like loading this form so when I click on this it's this image for earthquake this this but when I click here it'll say if everyone was click and then this code was triggered from this quad so if you have to you know like take care of this click event you'll do in this fashion in our next video we'll visit more design and customization ideas and also learn how to create real-life applications and dashboard that's all I have for you today please leave a like and a comment if you found this video informative it's gonna mean a lot and please do subscribe for our upcoming videos thank you so much for your support I'll see you guys in our next video bye bye

Channel: VBA A2Z

Views: 26,885

Rating: 4.9417477 out of 5

Keywords: Add effects to Excel UserForm Controls, create hover effects, button effects, menu effect, glow, transition effect, mouse move Create, Advanced, Userform, VBA UserForm Design, Develope UserForm, user interface, create form, advanced form design, slim, thin, ui design, excel ui, gui, design, custom Field, field placeholder, form effects, field effects, transparent ico, Custom Button, dynamic, background, image, ui ux, vba, Secret Techniques, Advanced tips and tricks, vba form excel

Id: k03AG9Mn7CU

Length: 20min 47sec (1247 seconds)

Published: Thu Jan 23 2020