Quick Sign In:  

Forum: VirtualDJ Skins

Topic: Help: How to Make .PNG button with glow effect that overlaps other buttons

This topic is old and might contain outdated or incorrect information.

Hi guys, I'm aware of how this can be achieved by using multiple combinations of the same graphic. My goal is to be able to skip the multiple combinations.
I would like to specify an Icons width and height, but when the mouse is over the icon, extend the width and height so that the icon shows the surrounding glow.

The image below shows the Icons I'm working with. I am planning on doing this all throughout my skin, but need to make sure it can be done first.
I also Attached the image of the Icon dilemma I'm trying to avoid

As of now, I have to first specify a size larger than the original icon in the off state. This causes overlap issues (ie, when the cursor is in between Icons, both light up) . Any Ideas?
 

Posted Fri 13 Feb 15 @ 8:39 pm
PachNPRO InfinityMember since 2009
I'm no pro skinner, but isn't it possible to define a padding for the icon?
If so, then you could make the padding a little bit smaller than the grafic itself.
That means, you will loose some pix when the button illuminates / is clickable, but you could avoid the double lighting.

Or just leave some space between the buttons.

 

Posted Sat 14 Feb 15 @ 3:54 am
If you "skip the multiple combinations", what is the source of the glowing version?

 

Posted Sat 14 Feb 15 @ 5:30 am
groovindj wrote :
If you "skip the multiple combinations", what is the source of the glowing version?



I realize that there has to be a few... as seen in the example I provided, but I'm trying to avoid having to do what you see in the image below


Because there are soooooo many combinations, the image would have to be astronomically large in order to produce such a small effect.
I figured by using .PNGs with alphas, there would be more commands to choose from? Like pad? But how do I script this?
 

Posted Sat 14 Feb 15 @ 12:09 pm
I guess it needs a mask of some sort - mouserect?

"Set a simple rect zone as a mouse mask"

So use the larger image size in order to accommodate the glowing edge, but restrict the area which can be clicked by using the mouserect.
 

Posted Sat 14 Feb 15 @ 12:17 pm
Thank You!

I haven't seen it implemented in other skins, so I wasn't sure if it was what I needed. It is!
This will definitely help to optimize!

Btw, Because Virtual DJ only allows .zip files for skins in Version 8, how do you auto save changes in the Zip archive?

I open the file from within winrar. It opens the associated program, "Notepad++" When I am done adding what I want, I use Ctrl+S to Save. But then I get a prompt from winrar, "File "Skin.xml was modified. Do you wish to update it in the archive? Of coarse I do, and always say yes. But, I want to work faster with out the prompt.

Also, I'm hoping there is a some sort of macro that will automatically refresh my skin when I save the .XML
Suggestions?
 

Posted Sat 14 Feb 15 @ 3:11 pm
That was a lucky guess!

Oh right, so I know what that does as well now. :-)

As for saving, I do pretty much what you do except with WinZip. If I'm doing a lot of messing though, I unzip the files and work in a "skins in progress" folder - only zipping once I've done a bunch of work.

Perhaps VDJ 8 needs a "developer mode" option?
 

Posted Sat 14 Feb 15 @ 4:02 pm
Yeah, I did that for V7. But in V8, If I unzip in a folder, VirtualDj tells me the file is impossible to open.
 

Posted Sat 14 Feb 15 @ 5:36 pm
I don't mean a folder inside the skins directory, I just mean a folder (elsewhere on my drive) that I use for keeping skin projects.
 

Posted Sun 15 Feb 15 @ 5:55 am
Just put the XML and PNG file on the skins folder and make sure they have the same name...
Once you're done you can compress them inside the zip file with whatever names you want.

Personally I always use testskinX.xml and testskinX.png for my unfinished projects (where X is a number depending on how many projects I have unfinished)
 

Posted Sun 15 Feb 15 @ 9:16 pm
Ah, that's the secret! Thanks Phantom.

I think it would be useful if VDJ 8 could see and read from subdirectories, so that users could keep skins tidy.

For example, grouped together in folders - maybe a video skins folder, 4 deck skins folder, old skins folder, development folder and so on. Whatever we want.

I've got a big collection, and it's quite tedious having to scroll through them.

Another idea is to have a shortcut XML in the main folder that can be clicked on to make VDJ 8 read skins from another directory.
 

Posted Mon 16 Feb 15 @ 4:51 am
That belong to wishes forum, but the main concept right now is to have a .zip file with a skin "family" inside.
Adding subdirectories may make things easier to manage on the OS side (Windows Explorer / Finder) but you will still end up with a huge list inside VirtualDj.

Personally I like the fact that subdirectories are not included in the listing.
I usually have 5-6 skins on the root directory to keep it clean (the skins I'm usually using and the ones I currently work on) and the rest are organized in subfolders, but they are not accessible via VirtualDj config window ;)
If I need a skin from a folder I just copy it on the root.
The nice thing with VirtualDj 8 is that if you close config window and open it again the list of available skins gets refreshed. Therefore you don't need to restart VirtualDj if you suddenly decide to use a skin that's not present on the root (that was a big disadvantage of VirtualDj 7) You just copy it on the root and open config window and it's there, ready to be used!!!
 

Posted Mon 16 Feb 15 @ 5:01 am
I don't mean for VDJ 8 to "look inside" the subdirectories. Just have them visible in the listing so they be clicked and entered.
 

Posted Mon 16 Feb 15 @ 5:19 am
PhantomDeejay wrote :
Just put the XML and PNG file on the skins folder and make sure they have the same name...
Once you're done you can compress them inside the zip file with whatever names you want.

Personally I always use testskinX.xml and testskinX.png for my unfinished projects (where X is a number depending on how many projects I have unfinished)


Got it! Had to remove skin.png from within .xml

 

Posted Thu 19 Feb 15 @ 7:23 pm


(Old topics and forums are automatically closed)