With the customizable skinning system of DFX, skin designers can change the look of DFX,
reposition components, and even change the shape of DFX without any programming!
The creative possibilities are limitless with this system.
New: DFX 7 introduced a new exciting component
called the "spectrum analyzer", which gives you the ability to apply animation to your skin.
The "spectrum analyzer" is a dynamic bitmap area allowing 5 different sound frequency bands,
low bass to high treble, to drive the animated display of different images. Each frequency band
can drive the display of 20 different image bitmaps that represent the level of that frequency
band during song playback.
Create a traditional multi-band spectrum analyzer or surprise users with something totally wild
or original. For example, you could have the bass frequencies animate the movements of one character
and have the high frequencies animate the movements of a different character. Again, you won't have
to do any programming.
Other new components include a mini-mode option and processing mode selection options.
Summary of steps:
- Create image bitmaps of skin components using a graphics editing program
- Define component parameters such as placement, hotspot dimension, and shape
in the skin definition text file
- Create matching mini-mode skin (if desired)
- Test your skin
- Agree to the DFX Skin Submission Agreement
- Submit your skin
Detailed step by step instructions:
- Install DFX 8 from the link below.
The installation package includes several factory skins of various shapes, sizes and colors.
These skins provide helpful examples of how to develop a new skin and illustrate the skin
possibilities.
Note: If you have a lot of DFX skins already installed, you may want to temporarily rename your DFX
skins folder so you can easily browse the factory skin samples. Open C:\Program Files\DFX\Shared
and rename the "Skins" folder to "Skins_installed" or whatever name you prefer before installing
DFX 8.
>> Click here to download DFX 8
Then double-click on the downloaded file and complete the installation.
To view the skins, launch DFX and click Options > Skin Browser and select a DFX skin.
- Create the folder for your skin
In this example we will be creating a skin called "Myskin." Therefore we will create the
following folder: "C:\Program Files\DFX\Shared\Skins\Myskin"
(Note: The skin name should not have spaces, but underscores and dashes are ok)
- Copy default skin bitmaps into your new skin folder
Copy the bitmap files (.bmp extension) from the default skin folder into your new folder. The default skin
folder is located under: "C:\Program Files\DFX\Shared\Skins\default_(player)"
(Note: replace "(player)" with the name of the player you're using, ie Winamp, Musicmatch, WMP, or RealNetworks)
The files to copy are: master.bmp, all_off.bmp, section_off.bmp, headphone_on.bmp, music1_on.bmp,
music2_on.bmp, speech_on.bmp, slider.bmp, number_0.bmp through number_10.bmp, and spectrum_1_1.bmp through
spectrum_1_20.bmp.
These are the bitmaps that you will change, replace, or eliminate to create your skin. They
must be saved as Windows Bitmap files and must maintain their exact filenames. Make sure all
letters including the "bmp" are lower case.
- Copy default skin_definition.txt file into new skin folder
Also copy the skin_definition.txt file located in the same default skin folder from where you
got the bitmaps into your new skin folder.
This file contains the coordinates that you will change to define the location of each DFX
component (or lack thereof) and the shape of your DFX skin. The file name CANNOT be changed
and the parameters must remain in the same order as the original list.
- Edit, remove, or replace your skin bitmaps
Use a graphics editing program to edit the individual bitmaps or completely create new
bitmaps. The following describes each different bitmap:
master.bmp : Defines the main background of your skin and is always drawn. It can be of
any size and shape, and the components of DFX can be placed anywhere on your skin design.
Although this bitmap is always rectangular in its raw form, you can redefine its shape through
the skin_definitions.txt file which will be covered later.
Keep in mind that other people may use your skin, so try to be user-friendly with your design.
At a minimum, draw the essential interactive buttons and toggles: power, presets, options,
help, and mini-mode. Other optional components include the title bar, close button, minimize
button, on/off buttons for each enhancement effect, effects level display field, slider,
speakers/headphones toggle, music type buttons, spectrum analyzer, and a logo that links to
our website.
There are some default settings to be aware of when creating the master.bmp:
Power state is ON, state of each DFX effect button is ON, speakers/headphones toggle is set to
Speakers, music type selection buttons are all set to OFF.
all_off.bmp : Overlayed on the master.bmp at the location of the main Power
button. It is used when the DFX audio processing is turned off.
section_off.bmp : Overlayed on the master.bmp at the locations of the on/off buttons
of each DFX effect, ie, Fidelity, Ambience, etc. It is used when an individual section
(effect) is turned off.
headphone_on.bmp : Overlayed on the master.bmp at the location of the
speakers/headphones toggle. It is used when the DFX listening environment is headphones,
not speakers.
music1_on.bmp : Overlayed on the master.bmp at the location of the Music Type I
button. It is used when the DFX processing mode is Music Type I.
music2_on.bmp : Overlayed on the master.bmp at the location of the Music Type II
button. It is used when the DFX processing mode is Music Type II.
speech_on.bmp : Overlayed on the master.bmp at the location of the Speech
button. It is used when the DFX processing mode is Speech.
slider.bmp : Represents the fader or slider handle that users move to change the
level of an effect. This single bitmap is reused as the control for each of the individual effects.
number_0.bmp through number_10.bmp : This set of bitmaps is used to display the enhancement
level of each DFX effect. They are overlayed on the master bitmap at the numeric display locations of
each DFX effect. Each bitmap represents an enhancement level, with a total of 10 possible levels.
spectrum_1_1.bmp through spectrum_1_20.bmp : This set of bitmaps is used to create an
animated sound frequency analyzer during song playback. They are overlayed on the master bitmap
over the spectrum analyzer region. Each bitmap represents a frequency
level, with a total of 20 possible levels.
Only one set of 20 bitmaps is necessary to draw over the five possible frequency band regions
because if no other bitmaps are provided, the same set will be reused to draw over the other
band regions. You can see an example of this simple type of spectrum display by examining the
"default_(player)_mini" skin.
However, you have the ability to create 5 unique sets of 20 bitmaps for each frequency band
region for a total of 100 bitmaps. When you create each additional set, be sure to use the
naming convention "spectrum_2_1.bmp" through "spectrum_2_20.bmp", "spectrum_3_1.bmp" through
"spectrum_3_20.bmp", and so forth.
Keep in mind that Spectrum Band 1 represents the lowest sound frequency (bass), and Spectrum Band
5 represents the highest sound frequency (treble). The default_(player) skin is an example of a
skin implementing this more complex spectrum display. Note how each band of the spectrum uses a
different color.
- Edit the skin_definition.txt file
The skin_definition.txt file is an important link to your skin bitmaps. This file defines
the placement (or non-placement) of various DFX components on your master.bmp, the "hotspot"
regions of interactive components, and the shape of your DFX skin. The parameters are
listed in a precise order and must remain in the same order when you edit the file. You will
only be changing the numeric coordinates.
*Note, you don't have to edit this file if you created a skin that has the same bitmap dimensions
(width and height) as the default skin and all of the interactive components are in the
same xy coordinate locations as the default skin.
The coordinate system we've implemented to describe the location of various components uses
X to represent the horizontal position and Y to represent the vertical position.
The upper left corner of your master.bmp bitmap is represented by the x,y coordinates
0,0.
If you need reference to better understand the system, we recommend that you open the master.bmp
and the skin_definition.txt files of the default skin to compare the coordinates. When you edit the
skin definitions for your own skin, you should also have your master.bmp file open so you can
define the coordinates.
The following describes the parameters of the skin_definition.txt file in the order that they appear.
- border width
Represents in pixels the thickness of the DFX window border allowing users to drag DFX around
their desktop.
- placement - slider (fidelity | ambience | surround | dynamic boost | bass)
xmin = defines the x coordinate of the left end of the slider track where the DFX
effect setting will be at 0.
xmax = defines the x coordinate of the right end of the slider track where the
DFX effect setting will be at 10.
ycenter = defines the y coordinate or vertical center position of the slider track
The slider.bmp is placed based on these coordinates.
Set the coordinates for the slider of each effect (fidelity, ambience, etc.) making sure each
slider has a unique set of coordinates.
- placement - numeric display (fidelity | ambience | surround | dynamic boost |
bass)
xmin, ymin = defines the location of the upper left corner of the numeric display
area. Bitmaps number_0.bmp through number_10.bmp will be placed and displayed based on these
coordinates.
Make sure each effect has a unique set of xmin-ymin coordinates for numeric display.
- placement - section button (fidelity | ambience | surround | dynamic boost |
bass)
xmin, ymin = defines the location of the upper left corner of the section on/off button.
The section_off.bmp is placed based on these coordinates.
Make sure each effect has a unique set of xmin-ymin coordinates for its section off button.
- placement - (power button)
xmin, ymin = defines the location of the upper left corner of the Power button.
The all_off.bmp is placed based on these coordinates.
- placement - (headphone on button)
xmin, ymin = defines the location of the upper left corner of the speakers/headphones
toggle. The headphone_on.bmp is placed based on these coordinates.
- placement - (music1 on button)
xmin, ymin = defines the location of the upper left corner of the Music Type I ON button.
The music1_on.bmp is placed based on these coordinates.
- placement - (music2 on button)
xmin, ymin = defines the location of the upper left corner of the Music Type II ON button.
The music2_on.bmp is placed based on these coordinates.
- placement - (speech on button)
xmin, ymin = defines the location of the upper left corner of the Speech ON button.
The speech_on.bmp is placed based on these coordinates.
- hotspot - selection button (fidelity | ambience | surround | dynamic boost |
bass)
Defines the rectangular region that is clickable allowing users to switch a DFX effect on or
off. Usually this region is the same size as a section off button. Make sure each button has
its own unique region.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (power)
Defines the rectangular region that is clickable allowing users to enable or bypass DFX.
Usually this region is the same size as the main power button.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (presets)
Defines the rectangular region that is clickable allowing users to select DFX presets. Usually
this region is the same size as the Preset button.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (options)
Defines the rectangular region that is clickable allowing users to select DFX options. Usually
this region is the same size as the Options button.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (help)
Defines the rectangular region that is clickable allowing users to display DFX help items.
Usually this region is the same size as the Help button.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (headphone on)
Defines the rectangular region that is clickable allowing users to toggle between
speakers and headphones modes.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (music1 on)
Defines the rectangular region that is clickable allowing users to switch to Music Type I mode.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (music2 on)
Defines the rectangular region that is clickable allowing users to switch to Music Type II mode.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - command button (speech on)
Defines the rectangular region that is clickable allowing users to switch to Speech mode.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - (logo)
Defines the rectangular region that is clickable allowing users to launch an Internet browser
to visit the DFX website.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - window component (toggle mini mode)
Defines the rectangular region that is clickable allowing users to quickly switch to the DFX
mini-mode skin. Usually this region is the same size as the Mini-mode button.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - window component (titlebar)
Defines the rectangular region that is clickable allowing users to drag the DFX window over
their desktop.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - window component (minimize)
Defines the rectangular region that is clickable allowing users to minimize the DFX window.
Usually this region is the same size as the Minimize button.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- hotspot - window component (close)
Defines the rectangular region that is clickable allowing users to close the DFX window.
Usually this region is the same size as the Close button.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- placement - (Spectrum Region)
This defines the total rectangular area that is continually refreshed for the spectrum
analyzer animation. It should cover the entire area where the five bands of the spectrum
will be overlayed on the master bitmap.
xmin = defines the x coordinate of the left edge of the region
ymin = defines the y coordinate of the top edge of the region
xmax = defines the x coordinate of the right edge of the region
ymax = defines the y coordinate of the bottom edge of the region
- placement - (Spectrum Band 1)
xmin, ymin = defines the location of the upper left corner of spectrum band 1.
Bitmaps spectrum_1_1.bmp through spectrum_1_20.bmp are placed based on these coordinates.
Spectrum Band 1 represents the lowest sound frequency (bass).
- placement - (Spectrum Band 2)
xmin, ymin = defines the location of the upper left corner of spectrum band 2.
Bitmaps spectrum_2_1.bmp through spectrum_2_20.bmp are placed based on these coordinates. If
they don't exist the bitmaps for spectrum band 1 are used.
- placement - (Spectrum Band 3)
xmin, ymin = defines the location of the upper left corner of spectrum band 3.
Bitmaps spectrum_3_1.bmp through spectrum_3_20.bmp are placed based on these coordinates. If
they don't exist the bitmaps for spectrum band 1 are used.
- placement - (Spectrum Band 4)
xmin, ymin = defines the location of the upper left corner of spectrum band 4.
Bitmaps spectrum_4_1.bmp through spectrum_4_20.bmp are placed based on these coordinates. If
they don't exist the bitmaps for spectrum band 1 are used.
- placement - (Spectrum Band 5)
xmin, ymin = defines the location of the upper left corner of spectrum band 5.
Bitmaps spectrum_5_1.bmp through spectrum_5_20.bmp are placed based on these coordinates. If
they don't exist the bitmaps for spectrum band 1 are used. Spectrum Band 5 represents the highest
sound frequency (treble).
- Shape Region Points (optional; not necessary if your skin shape is rectangular)
If you have created a rectangle-shaped skin (no rounded corners), then you may skip this part.
Otherwise, if your skin is not shaped like a rectangle or has rounded corners, then you probably
want to make the bitmap area around your shape be transparent, which can be done in this section.
All you need to do is specify all the xy coordinates that would form the shape of your skin.
The points you specify are "connected" together sequentially as if you were drawing an outline
of the shape, and any part of the image outside of the outline becomes transparent. Be sure to
connect your points in counter-clockwise order.
This section is to be placed last in the skin_definition.txt file. The following example
defines an 8-point shape:
8: Shape Region Points [represents total number of pts.]
0,0 [represents point 1 or starting point]
0,136 [represents point 2]
83,136 [represents point 3]
83,191 [represents point 4]
272,191 [represents point 5]
312,136 [represents point 6]
382,136 [represents point 7]
382,0 [represents point 8 that's automatically connected to point 1]
Excluding DFX components:
If you have chosen to exclude any component from your skin design, you need to specify the
coordinates "-1" (negative 1) to "turn off" the component as in the following example. DO NOT
delete any lines in the skin_definition.txt file simply because you don't use the component:
In this example we have excluded the 3D surround feature. Notice that we will "turn off" all
components related to 3D surround.
.
.
-1: placement - slider (surround) xmin
-1: placement - slider (surround) xmax
-1: placement - slider (surround) ycenter
.
.
-1: placement - numeric display (3D surround) xmin
-1: placement - numeric display (3D surround) ymin
.
.
-1: placement - section button (3D surround) xmin
-1: placement - section button (3D surround) ymin
.
.
-1: hotspot - selection button (3D surround) xmin
-1: hotspot - selection button (3D surround) ymin
-1: hotspot - selection button (3D surround) xmax
-1: hotspot - selection button (3D surround) ymax
.
.
- Create matching Mini-mode skin (optional)
DFX 7 introduced a new mini-mode feature allowing users to quickly switch DFX to the
mini-mode skin. On the default skin, the Mini-mode button is located at the upper left
hand corner with the down arrow symbol. Clicking this button will switch DFX to the
default mini-mode skin (if you're using Winamp, default_Winamp_mini). This is the
default mini-mode skin for all skins unless an alternative is available.
You may create a custom mini-mode skin to match your "normal mode" skin and
override the default mini-mode skin when a user clicks on the button from your skin.
Instructions:
Create a new skin folder called "Myskin_mini" and create your mini-mode skin using the same instructions
above. As long as the name of your mini-mode skin is the same as your "normal mode" skin with
a "_mini" extension, your mini-mode skin will be selected when the user clicks on the mini-mode
button.
- Select and Test Your Skin
Bring up DFX. From within DFX click on the "Options" button and then select "Skin Browser"
from the menu. Select your new skin from the list of skins and hit "OK". You will now see your
new skin. Go back and make any changes to the bitmaps until you are satisfied.
- Submit Your Skin
When you are done creating your skin and want to share it with the public,
send us an email with your skin components as a compressed Zip file.
Instructions for creating your Zip file:
- Include all image bitmap files
- Include a skin_definition.txt file
- Include a skin_info.txt file with the following information:
Skin Name:
Developer Name:
Email Address:
Skin Description:
Zip files containing anything other than bitmaps and text data will be deleted.
Email your Zip file to: skins@fxsound.com
Submission Agreement
By submitting your skin to FXSOUND (each a "Submission") you understand and agree that you are
giving a license under your intellectual property rights to all authorized users. In addition,
you are giving FXSOUND all the necessary rights to make your Submission available for
distribution, including but not limited to, website downloads and software installation packages.
No compensation will be paid with respect to the use of your Submission, as provided herein.
FXSOUND may remove any Submission at any time in its sole discretion.
By contributing a Submission you warrant and represent that:
- Your work is completely original or you obtained the necessary permission and rights
to use copyrighted materials
- You own or otherwise control all of the rights to your Submission including, without
limitation, all the rights necessary for you to provide, post, upload, input or submit the
Submission
- Your Submission does not contain any viruses, Trojan horses, worms or other components
designed to limit or harm the functionality of a computer
- Congratulations! Once your skin has been approved it will be posted and enjoyed by
millions of music fans around the world.
|
|