Conectar :       Password :       Recuerdame

Forum: Virtual DJ Skins - Topic: How To Skin Virtual DJ And How To Resize VDJ Skins

All you ever wanted to say or know about Virtual DJ Skins.
We remind that skins are downloadable by registered Limited and PRO users only.
VirtualDJ Foros
Virtual DJ Skins
How To Skin...


Autor - Tema: How To Skin Virtual DJ And How To Resize VDJ Skins -

DJ FORMAT

Ultra-VIP Member
Skinmaster
Mensajes Thu 29 Mar 07 @ 5:14 pm
  • Go to Resizer Section
  • Go to SDK Section

    Hello

    First of all, always remember you don't need to be a genius to begin to skin.

    Choose your favorite skin in the skin download section. Take an easy skin, with less buttons or functions in order to make sure you understand the way it works.

    OK Unzip the skin file.
    Unzip directly in the skin folder this way the skin will appear in VDJ with it's filename only (easier to rapidly check the results of the modifications). This way you won't need to rezip and move files these operations take many mouse clicks and time.

    Open the BMP file

    When Paint appears, make sure you can see the status line or click on the view menu then check for the status bar.

    Status Bar in PaintShop Pro.


    The .bmp file contains all the graphics needed in your skin. You can use any bitmap editor (from Paint to Photoshop) to modify or create it. The bitmap will usually have a width of 1024, and a height of more than 768. In the first 768 rows you'll find the background used for your skin. The next rows are used to store additional graphics, like pushed or selected buttons.



    OK. Let's move your mouse around in the pic, and see in the status bar (right) the coordinates of the point you focus. You can focus very precisely when zooming on a part of the pic. Try to draw a selection box : the status line tells you the width and the height of the box. Okay now you can find the line 768 (depending on the skin resolution) in the pic. Below this limit, the skin user won't see anything. Look around, you can see there are all the highlighted and animated stuff, lightening visual parts, moving sliders and so on.
    ===================================================
    Open the XML file
    For xml editing you can use Open XML Editor (free)

    What is it? The xml script will tell to VDJ all the skin's picture informations, such as the position of the different buttons, where the highighted buttons are, where the browser will be, and so on. WOW there are MANY numbers here! These are the coordinates you saw in paint. You will use paint to get the pos and width of the buttons, then report them in the xml file, and again, and again in order to get the skin working. All the objects in the skin have name coordinates and even some special fields that you have to know. This is very important, the more you learn about the skin engine, the better the skin is. To help you to learn the different elements, Atomix Production wrote a skin development knowledge base Learn all the page and you'll become a skillful skinner! It can sound like a joke but it's true.

    OK, Take one button, let's say play. Go to paint and try to move the play button to another location. Save the file, but don't quit paint. Now go to the script and find the line named button action="play_stutter".



    Change the button's ordinates according to the Paint status bar. Save it all and test the skin in Virtual DJ to verify your work.



    You'll see that verifying is a hard part of the job (I verify maybe each minute the work, except for very long processes. Just modifying a skin will let you know how hard the work is, and how long the process can be. It's not that hard just reporting thousands of numbers into a text file.

    Creating an entire new skin
    Creating a skin is not that hard, in practice but on the other hand it requieres specific skills. The hard work won't come from the xml script but from the picture part. It will take a long time to elaborate a great bmp file with all buttons (activated or not), with all the features of VDJ. To be beautiful even a small animation part can take hours! Even days! You will have to 'imagine' all the parts of the skin and 'manage' the space allowed. Be consciousness about those things.

    What does a skin need in order to go in VDJ?

    • Must have the 'skin' header & footer
    • Must have the VDJ logo.

    At this point your skin is valuable for VDJ. The following parts are needed to navigate :

    • A 'browser' element
    • Minimize, maximize, close buttons
    • A 'settings' button (NOT NEEDED TO GET STARTED, BUT NEEDED TO CHANGE THE SKIN AGAIN!)

    In order to have your skin published
    • It must the VirtualDJ Logo not an image on the bitmap.
    • The Xml version must refer to 3 or above otherwise it will not be published.
    • Reference to VirtualDJ website must be found somewhere on the Bitmap.
    • There must NOT be any personal email address or web links in either the XML or BMP (you may include your name though)

    Feel free to drop me a line with anything I can assist you with. My MSN details are in my blog, or you can PM me here.


    ==================================================================
    VDJ Skin - How to Resize VDJ Skins
    So what does it do? It resizes your VirtualDJ skins.

    Download VDJSkinResizer Here
    Go To VDJSkinResizer Thread

    Here is a little tutorial with default options to resize a VDJ Skin File.
    After, you can experiment yourself the advanced options to enhance the result.

    At the end of the file you can find some other infos that may be useful to tweak the software.

    • Unzip a skin
    1. Take a zip skin file (by default they are in C:\Program Files\VirtualDJ\Skins).
    2. Uncompress it (open the folder in windows explorer, copy the files and paste them in the skins folder.
    3. Open VDJ Skin Resizer. Click on the OK button on the Message Box.
    • Resize the XML config file
    1. In Input File, enter the path of the xml file extracted from the zip. You can do it by clicking on the "..." button to find the file.
    2. After opened the xml file, it should automatically fill the Input Size. If this is not the case, open the XML file with Notepad or another text editor, and look at the very first line, there should be "width" and "height" values. You must then enter them in the Input Size boxes (first for width, second for height).
    3. Now enter the desired Output Size (it should automatically fill with your desktop resolution). Like before, first box is for width, and second for height.
    4. Enter the desired Output File, for this you can click the "..." button, the program will then automatically propose a filename based on the Input File, but with "-resized-WIDTHxHEIGHT", so you don't have to type anything.
    • Resize the Image skin file
    1. Now click on the "Image" pannel at the upper part of the window to show the Image resize parameters.
    2. In Input File, enter the path of the image file extracted from the zip. You can do it by clicking on the "..." button to find the file. The Input Size fields will automatically be filled by the size of the input image, but if this is not a valid image then it won't show anything. But you still can try to resize the image.
    3. The Output Size should be automatically refreshed proportionally to the size of the input image. Now you can enter the desired size.


      Tip: You should try to put the same width as for the XML file, to have the same size.

    4. Now enter the desired Output File. You can click on the "..." button, and the program will automatically propose you a filename based on the input image name.
    Tip: Try to put the same name as for the XML file, but changing the ".xml" extension to ".bmp", else the final skin won't work.

    • Run the job
    1. Now go to "Execute" pannel, and click the button named "Let's go!".
    2. Wait until the process is finished

    If you have done all the steps carefully, you shouldn't get any error. If this is not the case, then redo the tutorial since the beginning, including unzipping skin file.

    • Preparing the skin for VirtualDJ
    1. If the resize process is finished, you can then close VDJSkinResizer.
    2. Now, you can compress the skin (windows compression) or test it uncompressed.
    3. Make sure the finished files are in the VirtualDJ skins folder (by default: C:Program FilesVirtualDJSkins).
    • Load the new skin in VirtualDJ
    1. Launch VirtualDJ
    2. Click on the "Config", "Set" or "?" button to access VirtualDJ Options. Usually this button is on the upper-right, middle-right, or at the bottom-left, but it can be at another place if you use a different skin than default one.
    3. Go in Skin pannel.
    4. Select your skin in the list. The name should be either: "YourZipName:YourSkinName" or "YourSkinName" (for uncompressed)

    If everything worked as expected, the skin should be loaded and ready to be used.
    Enjoy ! =)

    Final Note: You can note that some pixels and animations may be mis-aligned. You can correct these problems manually.

    ==============================================================================================================

    Developer SDK (With Updated Entries)

    This little documentation should help you understand how to create or modify a skin.

    First, every skin is made of two files, named:


    The BMP file

    The .bmp file contains all the graphics needed in your skin.
    You can use any bitmap editor (from Paint to Photoshop) to modify or create it.
    The bitmap will usually have a width of 1024, and a height of more than 768.
    In the first 768 rows you'll find the background used for your skin.
    The next rows are used to store additional graphics, like pushed or selected buttons.

    The XML file

    The .xml file describes each element of your skin.
    For each element, it defines what it should be used for, where are the graphics used for its various states (in coordinates from the .bmp file),
    and various other things.
    The xml file can be edited from a simple text editor (like notepad), but it's more likely that you will install a specific xml editor
    (by the way, by default, Windows will open a .xml file in internet explorer where you can read it but can't modify it).

    The xml file is composed of a root element (Skin), which contains all the elements of your skin.
    There are 10 different types of elements:


    The Actions
    Here is the list of the valid actions

    • nothing : Useful to make a zone react to the mouse (with over for example) with no action
    • close : Close the software and return to Windows
    • minimize : Minimize the software to the taskbar
    • maximize : Switch to or from the fullscreen mode
    • play : Play the song on desk "chan"
    • play_n_loop : Start a loop on the first beats of the song (or exit the loop the second time).
    • pause : Pause the song on desk "chan"
    • stop : Stop the song on desk "chan"
    • sync : play and synchronize the song on desk "chan"
    • play_pause : Play the song on desk "chan" if it's paused, or pause it if it's playing
    • cue_stop : Cue the song on desk "chan" if it's paused, or stop it if it's playing
    • beatlock : Engage or disable the BeatLock
    • mix : Start an auto-mix
    • select : Set the desk "chan" as the active desk
    • master_volume : Set the windows' soundcard volume
    • headphone_volume : Set the volume of the headphones if any
    • headphone_mix : Set the proportion of the active desk you can hear in the headphone in addition to the working desk
    • mic_volume : Set the volume of the microphone if it's enabled on your soundcard
    • pitch : Set the pitch of the desk
    • pitch_reset : Smoothly reset the pitch to 100%
    • pitch_bend : Add a value to the pitch without changing the display and the pitch slider
    • crossfader : Set the crossfader value
    • level : Set the level value
    • gain : Set the gain value
    • bass : Set the bass equalizer value
    • kill_bass : Remove all bass from the song
    • bassfader : Crossfade only the bass
    • medium : Set the medium equalizer value
    • kill_medium : Remove all medium from the song
    • mediumfader : Crossfade only the mediums
    • high : Set the high equalizer value
    • kill_high : Remove all high from the song
    • highfader : Crossfade only the highs
    • eq_reset : Reset bass, medium and high to 0db
    • menu : Change to the "value"th menu page
    • settings : Open the settings configuration pannel
    • effect : Activate the "value"th effect
    • sample : Play the "value"th sample
    • loop : Enter or exit a loop of "value" beats length
    • shift_loop : Shift the loop from "value" beats
    • loop_in : Set the entry point of a manual loop, or change the entry point if relative
    • loop_in : Set the exit point of a manual loop, or change the exit point if relative
    • loop_length : Set the length of a manual loop
    • set_cue : Save the actual position in the "value"th cue point
    • goto_cue : Go to the "value"th cue point
    • song_pos : Set the playing position to "value"
    • scratch : Scratch the song from "value" samples (must be relative)
    • hold : Hold the disc
    • nudge : Nudge the song from "value" samples (same as scratch, but without beatlock effect)
    • skip_beat : Skip "value" beats in the song
    • zoom : Zoom the rhythm window
    • seek : Quickly move into the song
    • edit_bpm : Open the "fix rhythm" window
    • adjust_cbg : Manually adjust the CBG (obsolete, use edit_bpm instead)
    • adjust_cbg4 : Manually adjust the 4/4 pattern of the CBG (obsolete, use edit_bpm instead)
    • goto_mixpoint : Go to an automix point (obsolete, use edit_bpm instead)
    • set_mixpoint : Set an automix point (obsolete, use edit_bpm instead)
    • edit_comment : Open the "edit comment" window
    • pannel : switch the pannel "value" and all its sub-components
    • show_pannel : show the pannel "value" and all its sub-components
    • hide_pannel : hide the pannel "value" and all its sub-components
    • reset_xp10 : recalibrate the touch-sensitive device of the xp10
    • lock_pannel : Lock or unlock a sidepannel in the browser (directories or playlist)
    • favorite_folder : Set the current folder as favorite folder
    • scan_hd : Scan the hard drive for audio files
    • scan_cd : Scan a CD and add it in the search database
    • delete_cd : Delete a CD from the search database
    • automix : Enable or Disable the automatic playlist mixing
    • randomize : Randomize the playlist
    • onlynew : Remove all already-played songs from the playlist
    • repeat_playlist : Enable or Disable the repeat mode of the playlist
    • load_playlist : Load a playlist
    • save_playlist : Save a playlist
    • search : Go to the search page, and set the focus to the search box
    • record : Start or stop the recording
    • record_cut : Cut the recording to the next file or track
    • load_effect : Load an effect
    • load_sample : Load a sample


    The Values
    Here is the list of the valid value:

    • "reset" : Bring a value back to its default
    • "auto" : Set the matching value (for example, action="pitch" value="auto" set the pitch to match the other desk's BPM)
    • "cut" : Like value="0"
    • "boost" : Like value="4096"
    • +xx : Increment the value by xx
    • -xx : Decrement the value by xx
    • xx : Set the value to xx. If the value is for a slider action, it ranges from 0 (min) to 4096 (max)
    • "temporary" : Do this action only while the button or key is pressed, and reverse to the old value after

The "button" element

The syntax of the button element is




Site map
(C)opyright Atomix Productions 2009

Programas
Hardware
VirtualDJ Pro
VirtualVinyl
Numark CUE
AtomixMP3
VDJ HomeEdition
DJC Edition
eJay DJMixStation
DJ-Box
Características
Pantallas
Versión de prueba
Plugins
Actualizaciones de Software
Material para la prensa
SDK para Desarrolladores
CD de Código de Tiempo
Skins (Pieles)
Efectos de Sonido
Efectos de Video
Samples
Idiomas
Grafx
Herramientas y Controladores
Foros
Usuarios en red
Wiki
Radio
Atomix Productions
DJs VIP
Condiciones de Uso
Haga una Pregunta
Vea sus tickets
Wiki