Introduction

Welcome to the K-Jfol skin tutorial. This tutorial has been written to be a guide for all K-Jfol skin
designers. This tutorial is now available in Acrobat .pdf and Envoy executable format as well as
online HTML. At this time, the tutorial is available in English language only. This tutorial is
written for K-Jfol V 0.50 and above, check kjofol.org for updates.
This tutorial is not supported by the K-Jofol development team, so if you have have any comments or
suggestions about this tutorial, please e-mail me at nequiem@angelfire.com.
K-Jofol is a fully skinnable audio player with an amazing amount of options allowing for almost
endless possibilities in customizing the way the player looks and behaves. However, because of all
these options, building a skin for K-Jfol can be an involved and sometimes frustrating process. This
tutorial has been made to give step by step instructions on building K-jofol skins from beginning to
end.

Basics and Necessary Ingredients

Introduction

The Basics
Kjofol uses four text files to control the layout and features of the skin you will be creating. These files
are called resource files and each has a specific function. The main resource file you will be creating
is called the .rc file because it's extension is .rc. The .rc and can be named anything you wish (Ex:
foo.rc) as long as you keep the .rc extension. It is very important to save your .rc file from time to
time while editing it to insure you changes are not lost.
K-jofol skins work by displaying a series of images that will act as an interface to the K-Jfol player
with coordinate defined "hotspots" that activate functions within the player (play, fast forward, rewind,
etc.) or display information (title, track number, etc.). To save a lot of repetition, I will use the default
.bmp format in describing images for this tutorial. Please be advised K-jofol 0.5xx supports multiple
graphics formats such as .png. .tif and .gif. The first image you will be creating will act as the user
interface. Additional images can serve as "pressed" images. This means when you "click" a area on
your skin, that part of the image will become transparent and another selected image will show
through. You can use this to simulate a button being "pressed". After painting buttons on the images,
you will need to "activate" them by making comments into your .rc file. These comments basically
consist of the function of the "button" (i.e. play, stop, rewind), the coordinates of where it is on your
image and which image you plan to use to simulate a button press. You can also set up areas on your
main image for an analyzer, equalizer, volume control, repeat button, track title, track number, and
track play info. These are all coverd in the lessons ahead.
Necessary Ingredients
Before you begin, you will need some programs in order to make a custom skin for K-Jfol:
GRAPHICS
First of all, you should have a good graphics program which can handle things like multiple layers,
transparencies, drop shadows, objects, masks and multiple undos and can optionally save to .jpg,
.bmp, .tif and .png formats. I would recommend PhotoShop, Ulead PhotoImpact, MicroGrafx
Picture Publisher, or Jasc Paint Shop Pro. You might also want to use a rendering program like
Truespace or Rhino 3D to create 3-dimensional models with realistic lighting effects.
EDITING
In order to edit your Resource file, you will need to use a text editing program like notepad.
COORDINATE PLACING
One program you can use is called Akane. Please note, Akane only supports .bmp graphics. If you use
this program, you will have to start with .bmp's and then convert them to .png, .jpg or .tif when you
have finished and then change your .rc accordingly. You will use this program to load up your main or

Design
pressed .bmp and write coordinates of your painted buttons to your resource file. This is a real time
saver program that is written entirely in Japanese. It is fairly outdated now and only supports the
main player setup. It does NOT support docking, window shade or playlist modes. As far as I can
tell, the original author has abandoned this program, but you might want to take a look anyway. Get
Akane here. The program is simple and self-explanatory to use.
Design
In designing skins for K-Jfol you have almost unlimited potential for creativity. There are, however,
some areas to consider that are important. Before you begin, you should probably make a pencil
drawing or a rough sketch on your favorite art program to work out the general details of where
buttons will be placed, and how much space you will need for the features you wish to include.
Here is a list of all the current functions which can be accessed on a K-Jfol skin:
CLOSE | MINIMIZE | ABOUT | OPEN | STOP | PLAY | REWIND | FORWARD |
PAUSE | DOCK | OSCILLOSCOPE | PREVIOUS SONG | NEXT SONG |
PREFERENCES | EQUALIZER | EQUALIZER RESET | EQUALIZER ON |
EQUALIZER OFF | REPEAT | VOLUME | ANALYZER | PLAYLIST | PITCH
if you are planning on using a button bar for volume, you will need to make a "slot" on the skin
where your indicator button will will slide back and forth. If you plan on creating a round "spinning"
button for volume you need to make a "blank" copy of the round button on your skin then copy &
save that button to a file for later use. The round or spinning bitmap volume function is more complicated to build but uses less space on the skin.
IMPORTANT!

Functions and Layout

Design

When making K-Jfol skin graphics in 0.5XX, ALL bitmaps MUST have X sizes divisible BY 4,
i.e. the width must be evenly divided by 4. If you do not do this, your skin
will not work!
If you want your skin to look more realistic, you may want to make a second copy of your skin with the buttons depressed and include a comment
in your .rc file like this:
BackgroundImagePressed1 mypres1.bmp
Where my pres1.bmp would be the bitmap you created with depressed buttons. You would then
open Akane and select the area for the button functions (see Using Akane).
Making the area outside of your skin transparent
To make areas or outlines of your skin transparent, you need to assign then a true pink color. The
RGB of this color is 255 red, 255 blue and 0 green. This will allow you to make a skin that is any
shape and/or have interior transparencies. TIP: Try to design your skin on a background that is neutral to both black and white, i.e. gray. When you've finished the skin design, turn on anti-aliasing
and fill in the area around the skin with a color very similar but not exactly the same color as the
edges of your "device". Now, turn anti-aliasing off and fill the area with pink. If you do this, you
should not end up with a nasty "pink ring" around your skin.

Design, cont'd
Buttons, Bars, Volume and Pitch Functions
"Pressable" Buttons
In order to make buttons that change when you click them... you will need to create a
bitmap which is like your original skin, but with all the buttons depressed. First, save a
copy of your main bitmap to another file, (EX: my_pressed.bmp) and open this bitmap
to edit in the depressed buttons.

Functions and Layout

Design

A good way to make a depressed button with a shadow effect is to trace a selection
around the original button, copy or cut it to the clipboard and then invert the selection
so that everything except the button is selected. Create an object out of that selection
and add a drop shadow so that a shadow is filling the space where the button used to be.
Paste the original button into the spot then resize the button to a slightly smaller size
and drop it down until the shadow object layer is above it. Merge everything and repeat
for the next button. Here's a pictorial to demonstrate the process:

BackgroundImagePressed1 my_pressed.bmp
Where my_pressed.bmp is the .bmp you just saved with all the depressed buttons. Now if
you want to show a depressed button, you will simply add this statement after each function in your .rc file BMP1
Example:
PlayButton 28 27 57 56 Play BMP1
Don't worry about the coordinates. You will change these when you edit the resource file
with Akane in Using Akane.
Volume Control Functions
BARS
In the current version there are two ways to make a volume function on your skin; bars
and bitmaps. The bar method is the easiest and most commonly used. A bar selection
works just like common slider controls in most windows applications. The first thing you
need to do is design your slider control. Here is an example slider control: As you can
see, it is just a small simple bitmap. Create a slider control bitmap similar to this and
save it. Next you need to load your skin bitmap into Akane and determine the coordi-

Design, cont'd
nates of where you would like the slider control to move. This means the coordinates of
the total area in which you want the slider to start and end (See example to the left).
When you determine the coordinates, you will want to make an entry into the resource
file (.rc) to set up your volume control. The entry will look something like this:
#Volume Control
VolumeControlType BAR
VolumeControlImage myvol.bmp
VolumeControlButton 151 84 218 96 Volume
The VolumeControlImage is the slider image you made and saved... the control button
coords are the coords you want to use for the slider area. This function doesn't need a
seek area as of version 0.50.
Volume Control Bitmaps

Functions and Layout

Design

This is the most time-consuming and tedious of all the functions to build in K-Jfol. A
brief description of what you will be doing is creating a long bitmap called the "volume
control bitmap" that is a collection of images of your volume button or knob lined up
side by side. Each image will be slightly different from the other to simulate an "'animated" effect and will be combined into one animated button on the skin using a comment in your .rc file.
As with the other bitmaps, the total width of the volume control bitmap has to be divisable by 4 to function correctly. This is where the complication sets in as the volume
control bitmap is comprised of a series of images, each lined up horizontally to make up
a single "animation". Before you begin, you will need to make a selection of the area in
which you would like the volume control to be and write down the coordinates for later
use. The total width of the control bitmap has to be divisable by 4, so you will have to
determine the amount of images you will need in the control bitmap that will be divisable by 4 in calculating the end result (The images themselves don't have to be divisable by 4, only the final result does when lined up to make a single control bitmap).
These numbers can be different every time, but for an example, we'll use the Aluminotic volume control. Each image in the aluminotic volume control bitmap is 43x43
pixels. In order to create a smooth animation you will
need about 20 images lined up side by side. I used 24 in
Aluminotic to get the red indicator to end about about
halfway down. 43 pixels times 24 images equals 1032
pixels, a number evenly divisable by 4. So the total size
of the aluminotic control bitmap will be 1032x43 pixels.
After creating the base bitmap, now comes the tedious
process of copying and pasting each image side by side
until they fill out the control bitmap. Each image has to
line up perfectly without any gaps or the animation will
not work correctly! After that is accomplished, an even
more tedious process awaits. That is placing the "indicator" strategically along each of the volume images to ensure smooth animation. Trial and error are the only ways I know how to accomplish
this, though I'm sure there is a better way out there somewhere. See the images to the
left for clarification.

Design, cont'd
Now that you've done all that, save your finished bitmap and you're ready to make a seek
area and comment in your .rc file. The .rc file entry will look something like this...
VolumeControlType BMP
VolumeControlImage myvol.bmp
VolumeControlImageXSize 43
VolumeControlImageNb 24
VolumeControlButton 142 108 185 151 VOLUME
VolumeControlImagePosition myvolpos.bmp
Where the VolumeControlImage is the bitmap you just saved with the multiple images of
the volume button side by side. VolumeControlButton is the exact location of where you
want your button to be. VolumeControlImageXSize is the width of each image in your
control bitmap. VolumeControlImageNb is the number of images in the control bitmap.
Myvolpos is the seek area bitmap which is covered in Creating a Seek Area.
To finish out this function, you will need to make a seek area for the volume, see
Creating a seek area. Lots of steps but easy once you understand how it is done.

Pitch function

Functions and Layout

Design

This function is exactly like the volume function in makeup. The pitch function affects
the "speed" of the playback and up until now could only be changed by directly adding a
comment in the player resource file. This function uses the same type of seek area as the
spinning volume function and the same procedures holds true for making it. More will
be added here later.
Creating Fonts - Text and Number images
Creating font images for text and numbers is pretty simple. The fonts you see on K-Jfol
skins are actually just sectored areas of a bitmap chained together to make the tracks
and number sequences on the skin. Since fonts are really bitmaps, there is a lot more
room for creativity than using windows fonts, however try to keep them small enough to
fit on your skin and large enough to be readable.
What most people do with fonts is just take an existing bitmap from a skin they like, recolor it and repackage it with their own skin. You might want to try this rather than go
through all the trouble of making your own font. This section is for people who get
jazzed by total customization...
For this tutorial, we'll start out with a typical font bitmap. TIP: Font bitmap widths do
not have to be divisable by 4 like all other bitmaps.
Text Bitmap
Text font bitmaps consist of 3 rows of letters , numbers and symbols used for the Track
Title , Kbps and Khz on a skin. Here is an enlarged example.

99 Percent of the time the symbols in the text font bitmaps will not be used, but they are
there just in case someone might want to change their name to "The artist currently
known as ^$&#". :) So you'll need to add those in your text font image.

Design, cont'd
The Steps
Create a bitmap of any color background, preferably to match your skin and of small
enough size, so that it will fit within the skin. You can use patterns for your bitmap to
simulate the back of the skin, but your best bet is to make the background behind the
characters one solid color and then use a transparency comment in the .rc file to make
the background transparent.
Add the characters as shown above in exactly the same order and with about one pixel
space in between each character. Color or shape the characters as you like, but make
sure each character and spacing occupies the same width and height as all others in the
bitmap. Write down the width and heigth of the characters (include the single pixel in
between the characters) for the .rc file. Save the bitmap to a name you can remember
like my_text.bmp

Now you can begin to make the necessary comments in the .rc file:
FontImage my_text.bmp
FontSize 5 6
FontSpacing 0
FontTransparent 0

Functions and Layout

Design

FontImage is the name of the text image you saved.

FontSize is the width and height of each character in the bitmap.
FontSpacing is how many pixels you want to space in between the characters, most people use 0.
FontTransparent is used to make the background behind the bitmap transparent. I'm assuming this is the color of the last pixel to the far right of the bitmap?
Now you simply want to specify where on you skin that you would like the text to be located:
FilenameWindow 62 167 143 174
FileName Window is the location where the title of the track will be displayed on your
skin.
MP3KbpsWindow 71 181 88 187
MP3KbpsString
MP3KhzWindow 110 181 122 187
Mp3KhzString
Location of the Kbps and Khz on your skin.
CurrentTrackWindow 112 194 123 200
Location of the track number
Number Bitmap
The number bitmap is just like the text bitmap. It includes the numbers 0-9, so it is alot
simpler than the text bitmap as its only function for this version of K-Jfol is the track
time elasped. Here is an enlarged example:

As you can see... there is 1 pixel of space in between characters, a semi-colon is added
to separate minutes from seconds and a space follows. The total height of this particular
bitmap is 13, the width is 72. Each character is 6 pixels wide. Here is the .rc comment:

TimeFontImage my_no.bmp
TimeFontSize 6 13
TimeFontSpacing 0
TimeFontTransparent 1
Where TimeFontImage is the number bitmap you created and save.
TimeFontSize is the width and height of each number in your bitmap including the 1
pixel space.
TimeFontSpacing is the spacing in between characters... again most use 0.
TimeFontTransparent makes the background transparent.
One simple .rc file comment to place the elapsed tack time and you are finished.
MP3TimeWindow 85 136 116 150
MPTimeWindow and location.

Creating a Seek Area

Creating a seek area is fairly easy. There are two main functions of the K-Jfol program
which use seek areas, volume and track progress.

Functions and Layout

Design

Track Progress Seek

The track progress as seen on K-Jfol's default
skin, appears to move or light up along with
the progress of the track and can be clicked as
a fast way to get to different time points of the
track. A simple example of how this is done is
demonstrated below. The first step in making a
track progress area is to design track area on
your main bitmap as it would appear inactivated or how it would look if the track(s) were
not playing.
The next step would be to draw the progress
area completely activated as if the track was
finished, but still playing. You would design this
area on the first pressed bitmap you use.
Now you would select the area where the progress "bar" is (in either akane or your graphics
program) and write down the coordinates. You
will need these to create the seek area bitmap.
The example coordinates for this skin would be
8, 61, 221, 72.
Next, you would create a bitmap that will be
your seek area. Create a bitmap exactly the same
size as your main bitmap and select the coordinates as noted above. You need to fill the
same area where your track area bar is with a linear gradient. So select the coordinates
as noted above and fill that area with the gradient as shown below.
Now save this bitmap to something like myseek.bmp and you are ready to add a comment to your .rc file:

SeekRegion 8 61 221 72
SeekImage myseek.bmp
Where SeekRegion is the coords you jotted down earlier, and SeekImage is the seek area
bitmap you saved.
Now, your track progress seek area should be working. The example shown above is only
a very simple way to create a track progress seek area. The seek area can be practically
any shape or size. To make "curved" seek area you would draw the curved activated area
on you main bitmap, the curved inactivated on your pressed, and for the seek bitmap,
you would have to draw the exact same shape and location that would merge the activated an inactivated as the track would be playing and fill that area with a linear gradient from left to right, just like shown above. To get a better understanding of this, look
at the sg_seek.bmp of the K-Jfol's default skin. The coordinates of the seek area can
overlap other functions on the skin, so the track area can run along the entire length and
width of the main bitmap.

BMP Volume Seek Area

The volume seek area is quite a bit more challenging than the track progress area and
probably the most challenging, complex and potentially frustrating of any function in KJfol. Although many possibilities exist, the "round volume knob" seek area will be
shown here.

Functions and Layout

Design

BMP Volume Knob Seek Area

This function is similar to the above example in that you will be using a gradient. In this
function however, you will add a gradient to a shape which corresponds to the volume
knob. We will be using aluminotic with the small round volume knob for this example.
What this gradient area does is allow the user to click and drag the volume knob around
in a circle to change the volume. When the user clicks on the volume knob on the skin,
they are actually clicking on a combination of the main bitmap, the gradient seek bitmap, and the volume "animation" bitmap. The gradient seek area tells K-Jfol which of
the series of images to display of the "animated" bitmap which covers the main bitmap
when clicked or dragged. If created correctly, the finished result produces a very pleasing
animation.
The first step is to create a series of small images in parallel which will serve as the
"spinning" control for your volume function. See Buttons, Bars and Volume Functions for
information on how to make this bitmap.
Get the coordinates of the volume knob on your main
bitmap as seen in step 3 and note them.

Next, the tricky part, you will create a bitmap the same
size and shape as your main bitmap and add a gradient with approximately the the same
path as you would like the "indicator" on the button to move, in the same coordinates as
noted above.

Create a seek bitmap the same size

as the main bitmap. Create shape
of button (where
indicator will start
and stop) and add
gradient - black to
white. I do not know why it is done this way, but to make the volume seek area work,
you have to make "blocked" graduations between black and white instead of a smooth
linear gradient. See the images to the left to get an idea of what I am talking about.
The graduation goes from black to white, black being the color used when the volume is
the lowest level and white when the volume is at the maximum. The graduations from
black to white run in bands. I have found it best to move up 20 rgb points per band, i.e
white being 0,0,0 rgb - the next band would be 20,20,20 rgb and so on. The shape of
the gradient itself will not necessarily be round even if
your button is round, because you may not want your
button to start and stop in the same place. Gradient is
"blocked" from black to white instead of a smooth gradient.
This image shows the gradient as it would appear if under the main bitmaps volume control. You may
have to do a lot of tweaking to get this function to work
correctly as each individual case could be different.
Save this bitmap to a file, maybe something like myvolpos.bmp and now we're ready for the .rc comment as
shown in
Buttons, Bars and Volume.

Functions and Layout

Design

With a little luck and a lot of patience and tweaking, this function should now be working. News Flash - As of Version 0.42, rOn, the main programmer of K-jofol, has introduced a feature called the volume smoother. This makes it a lot easier to design the
volume function as you don't have to be so exacting with the gradient. Thanks rOn!!!
Creating an Equalizer Function
Now we're on to the equalizer function. K-Jofol has allowance for an amazing 32 different equalizer settings. If you are making a skin, however, you probably won't want to try
to fit that many onto it. K-Jofol's current default skin made by Steve Gedikian uses 12
bands for eq settings and BlaupunktAmp by Wolfgang Erler uses 8. You may use as
many settings up to 32 depending on how you would like to fit them into your skin.
Remember as of the current version, you still have to make the width of the equalizer
bitmap evenly divisable by 4 or you will experience errors when you try to use the skin.
Making the equalizer bitmap
First, decide how many bands you want. For this example, we'll use 8. Next, decide how
you would like these bands to look on your skin. You can give your equalizer "switches"
simply by blackening or making a small "button" evenly spaced on each equalizer band in
the bitmap. We'll show this in the example below. You will need to space your equalizer
band evenly across the bitmap so that the 1st and last band have about a pixel space on
the right and left sides, respectively while allowing the total bitmap width to be divisible
by four. So now you have a bitmap with 8 bands evenly spaced apart with about a pixel
space or so on each edge.
The next step is to determine where you want the equalizer bitmap on your skin and note

those coordinates for the .rc file. Now, you are ready for your .rc comment.
EqualizerWindow 111 115 180 148 Equalizer 8 6
We'll go through this comment piece by piece. In this example, 111 and 115 are the x
and y locations where the first pixel of the eq bitmap will reside on your skin. The Max
X and Maxy Y positions is the pixel position where your bitmap will end (see pic). You
will of course substitute these numbers for the position and size of your EQ bitmap
NOTE: It won't always work out easily. You will have to simply work with the numbers
until you get your eq to work correctly.
The Equalizer comment is a tool tip that allows the user to know what the function is by
passing the mouse over it. The 8 after the equalizer tool tip represents the number of
bands you created. The 6 represents the X-space or number of pixels between each individual band. Substitute these numbers with the number and spacing for your eq and
we're ready for the next comment.
EqualizerBmp 4 17 sgeq.bmp
Where 4 in this example is the x size or width of each individual band and 17 is half the
Y size of the EQ bitmap. This tells K-Jofol the boundaries of each band and how far up
and down it can go.
Still with me? Don't worry if things don't work out the first time. It will get easier, the
more skins you design.

Functions and Layout

Design

Creating a Playlist Function

The playlist function was introduced in version 0.40. It expands the player by allowing
the user to load, edit and save playlists. Since the playlist editor is in an early phase of
development, it is fairly simple to set up and explain how to make your own.
The first action you will need to do is create a graphic image of a button on your player
image and activate it in your .rc file by adding the following comment with the appropriate x,y coordinates:
PlaylistButton xx xxx xx xxx Playlist BMP1
Next, you will need to create your playlist graphic images. These are the functions you
can add to the playlist editor:
add track
clear
321 order
fastforward
pause
close
down
total tracks

del track
load pl
213 order (shuffle)
play
open
about
selection up
track no

save pl
123 order
rewind
stop
minimize
up
selection down
space for text area

Seems like a lot, but it is not too bad once you get started. The default skin was designed with related functions grouped together. It is best if you consider the user when
designing your skin. Group all the player functions like stop, pause, play, ff, rewind to-

gether for easy access. Most people like the close/mimimize and about buttons being on
the upper right of the skin because of the similarities to a windows application. If you
want to design your playlist, look to the default skin for an example and expand from
there. Remember to leave a fair amount of vertical space for the playlist text. You can
also create a second pressed bitmap (like the main skin), so you can simulate button
presses.
Once you have created your images, you can start to add the comments in your .rc file:
These two comments are the two images you made of the playlist editor:
PlaylistBmp myplaylist.png
PlaylistBmpPressed myplaylist_pressed.png
This comment specifies the area where the tracks will show. Again, make sure you allow
for a lot of space on your skin for tihs function:
PlaylistWindowText 43 42 170 211

Functions and Layout

Design

rOn has taken a departure from the main player in allowing for true type fonts for the
display of text on the playist editor rather than a bitmap. The first comment is the font
face the text in your playlist will be. The second line shows the size of the font and the
third line is the Y spacing between tracks (space between lines):
PlaylistWindowFontName Arial
PlaylistWindowFontSize 12
PlaylistWindowFontYSpacing 10
This line creates an area which shows the track selected by the user
PlaylistWindowNbSelectedTrack 79 215 93 225
Creates an area where Total tracks in playlist are totaled
PlaylistWindowNbTotalTracks 79 230 93 240
This line creates an function on your skin which allows you to "stick" or "unstick" the
playlist to the player. This is represented as a "lock" on the default skin. When the button is depressed once, the lock "closes" and the playlist moves with the player. Hit
the button again and the playlist is freely moveable again.
PlaylistWindowLinkButton 180 33 194 48
This option allows you to color of the text that displays info about the tracks i.e. track
no, total tracks time, and total time (all of this is outside the playlist window). It is expressed in RGB values, so 255 0 0 would make the numbers and text appear red.
PlaylistWindowColor 0 0 0
This option if to color the font which shows the current selected track in the playlist
window
PlaylistWindowCurrentTrackColor 255 0 46
This function highlights the track selection with RGB color values.

PlaylistWindowCurrentSelectionColor 153 207 181

GENERAL STUFF
I'll just go over the following lines briefly, because they are very similar to the Player
functions. These are all just activated x,y coordinates which are represented by graphical buttons you make.
PlaylistWindowCloseButton 174 21 187 35
Closes the playlist

Functions and Layout

Design

PlaylistWindowMinimizeButton 184 50 193 59

minimizes the playlist
PlaylistWindowAboutButton 194 29 217 59
Sames as the "K" on the default player
PlaylistWindowPlayButton 113 285 147 311
Plays the selected track
PlaylistWindowPauseButton 187 266 217 290
pauses the currently playing track
PlaylistWindowStopButton 198 239 234 262
stops the currently playing track
PlaylistWindowOpenButton 202 210 236 233
opens a new track
PlaylistWindowShuffleButton 189 175 233 185
shuffles the playlist tracks (i.e. 312 on the default playlist)
PlaylistWindowSortButton 188 144 234 155
sorts the playlist tracks alphabetically (i.e. 123 on the default playlist)
PlaylistWindowSortInverseButton 187 159 234 170
Inversely sorts the playlist tracks (i.e. 321 on the default playlist)

PlaylistWindowAddButton 188 74 234 84

Adds a new trackt to the playlist
PlaylistWindowDelButton 189 87 234 99
deletes a track in the playlist
PlaylistWindowResetButton 192 102 232 113
Resets the playlist (clears all tracks)
PlaylistWindowLoadPlaylistButton 191 129 231 141
Loads a pre-made playlist
PlaylistWindowSavePlaylistButton 189 115 232 127
Saves the currently playlist to a file
PlaylistWindowSelectionUpButton 27 42 41 55
moves the track selection up
PlaylistWindowSelectionDownButton 27 198 41 211
moves the track selection down

PlaylistWindowPreviousButton 76 285 109 310

PlaylistWindowNextButton 153 283 185 308
plays the previous/ next song

Functions and Layout

Design

Using the Akane Resource Editor

Akane is a resource file editor program for Windows 95, designed by Karin. The program and its help files are written in Japanese. As far as I can tell, it has not been
written for any other language. The program is so simple as to be self-explanatory,
however. It does not appear there will be any more development to this program, so it
will probably become obsolete after version 0.32. It only supports bmp files. Because
it is useful to re-arrange your coordinates, I will cover this program anyway. Below, I
will try to teach the main features of the program and how you can use it to speed your
skin making.
Please know, there are limitations with this editor. You cannot make a volume or slider
function, position the equalizer, position fonts or the kbps khz or position the track title
with this program. It's main use is to re-position the basic controls (play,stop,
rewind) on your skin.
Editing your Resource file with Akane
First, open the Akane.exe program. Notice it has two components, a window called the
'Resource Editor', and a dialog box called the 'Button Region Editor'. The Resource
Editor window is used to load/save your skin bmp file and edit the function coordinates
visually with your mouse. The dialog box is used to select the type of function and adjust its coordinates if you wish, with the arrow buttons. You are able to load active, inactive and pressed bit maps into into the editor.
If you decide to make a "new" resource file from scratch with this program, it will use
the default .rc file included with the program. While this file is okay, it might be better to use a resource file you have created from earlier in this tutorial. If you open another skin file besides your own (i.e. the kjofol.rc), save this file to a new name:

Use your existing .rc file. or to create new, open an existing .rc, edit and save to a new
filename You will notice under the 'type' there is a drop down box with 17 KJfolfunctions. The caption shows the title of the 'type' of function. The user would see
the caption if he/she moused over a function on your skin. Below the 'Type' button, you
will notice a 'Multi-Button' selection. This is used if you want to make more than one
area or button on your skin to close, minimize, etc. To the right of the Multi-Button is
a set of controls to increase the width/height of the area of each function as shown in the
bmp window. Let's begin by opening the skin bit map you have designed. Select TargetBackground-Active from the Editor window:
Select the active bitmap from the menu in the resource editor window
You will be prompted for the active bit map file of the skin you created. If you have followed earlier lessons and already created entries for your functions in your own .rc file,
you will notice highlighted areas covering the functions on your bit map in the editor
window. When you select a different 'Type' in the Button Region editor, you will notice
the highlighted areas change. Here is where Akane comes in handy. You can use your
mouse to "drag" the highlighted areas around the "buttons" on your skin. Use the
drop down menu to move to the next function and then use the mouse to drag or the arrow buttons in the Button Region Editor to move the highlighted areas for each function. This is a easier than writing down the coordinates by hand and can be done very
quickly:
Select the highlighted areas and drag them with the mouse or use arrow buttons to adjust for each function.

Functions and Layout

Design

You can also optionally select to copy the resulting line to the clip board and then paste
manually into your resource file by checking the 'copy this to clipboard' check box. The
Graphic selection in the 'Button Region Editor' allows you to select either nothing, bitmap1, bimtap2 or bitmap3. This is the bit map that will show when the button is
pressed over the area of each function.
Save your work. That's about all there is to this program. You can view your skin bit
map in enlarged sizes by selecting view mode and then 1x 2x 4x 8x. This may help you
be more exact making the functions work. I hope you find this program useful,
with practice.
Inactive areas
Coming soon. An inactive area is simply a line which dampens an area
or areas on your skin to allow greater freedom making skins without
overlapping functions
Docking/Windowshade mode
Coming soon. Docking mode allows K-jofol to attach
itself to an active window. If the window is maximized,
k-jofol will sit in the title bar otherwise, it will attach itself
to the outside left corner of the active window.

Fine Tuning
Quick unorganized notes:
You cannot overlap the play/rewind/ff/stop buttons with the seek area. if
you attempt to, you will experience runtime errors. NOTE: The new feature
in Version 0.5 compensates for this problem by introducing "inactive areas".
These are simply coordinates you place in the .rc file that dampen certain
areas on your skin which already have functions like the Equalizer or
Analyzer. This allows you to make buttons with odd shapes which don't
conform to a rectangle area and place them in close proximity to other
functions.
You have to have the minimum of a volume function, text font, number font
and filename area just to get the skin to work. You have to have most
functions working in order for the player not to give you runtime errors.
The width of most images has to be divisable by 4.
Don't save seek areas to a .gif because it will mess up the gradient and your
seek and/or volume won't work correctly. Save them to .png, .bmp, or .tif
files instead.

Miscellaneous

Notes

If you overlap functions, unpredictable results could occur in versions 0.42

and below.
The seek area bug explained:
If you overlap your seek area with the analyzer, anything on the pressed
bitmap will show through with a "flashing" appearance. You can use this to
make words or images flash behind the analyzer, (like Noirotic's [[end
track]]). Extend the gradient of the seek area down through the anaylzer
and the pressed bitmap will show through only at certain intervals
throughout the track as it is playing. See Noirotic for an example of this
feature/bug.
If you use the btn_vol.bmp or slider control bitmap, your slider bitmap can
only be 5x9 in size. Anything else doesn't seem to work. The slider bitmap
disappears when k-jofol is inactive and it disappears when you slide it from
left to right. This is a bug.
Any skin can have a playlist whether it was designed for version .4xx and up
or not. Simply draw a little button on the skin you want to use that will
activate the playlist, go the the default.rc, copy and paste all the playlist
stuff from the default.rc into the new skin's .rc, then add this to the new
skins resource file:
PlaylistButton X Y maxX maxY Playlist BMP1
Where the X Y maxX maxY are the rectangle coords of button you drew.
Next, change the following line in the pasted playlist text from:
# Playlist screen section

PlaylistBmp sgplist.png
PlaylistBmpPressed sgplist2.png
to:
# Playlist screen section
PlaylistBmp ..\default\sgplist.png
PlaylistBmpPressed ..\default\sgplist2.png
This will allow you to use the default playlist with a skin that doesn't have
it's own.

Miscellaneous

Notes

THE END FORNOW. UPDATES WILL BE COMING.