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.
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.
Posts Related:
- #Excel Dynamic Tables Fleet Management Transportation & Logistics #Dashboard Tutorial 2
- Bulk Combine PDF files to Excel without losing formatting & NO 3rd party software
- Turn outdated into automated - Design intelligent dashboards with automated reporting
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.
