COFFEECUP XML DEMYSTIFIED!!!
The XML Source File Demystified.
I have been trying to decide how to present this over the past few days. I considered a full blown step-by-step skinning tutorial, but then decided that the average person who is considering skinning in the first place probably doesn't need the basics. So I decided to just present a crib-sheet on the XML contents. Hopefully that is enough to help someone.
Many of the attributes are shared, and have the same meaning regardless of which element contains them, so I only describe attributes once.
When you create a skin, imagine you are designing it on graph paper. Each square represents one pixel (a single point in an image).
The X axis represents the position when moving from left to right across the graph page.
The Y axis represents the position from top to bottom when moving down the graph page.
You will use these values in the body and the actions buttons, so let's mention them first
X from left to right - where does this image begin? 0 is top left
Y from top to bottom - where does this image begin? 0 is top left
W how wide is your image?
H how tall is your image?
so x=10, y=25, w=150, y = 15 would represent an image (perhaps a scrolling text label window)
that starts 10 pixels from the left (x) border, and 25 pixels down from the top (y) border.
Then it will be 150 pixels Wide by 15 pixels High.
NOTE: images are placed in position based on their TOP-LEFT coordinate.
The width goes out to the RIGHT from there, and the height goes DOWN from there.
QUESTION: How do I GET those X,Y coordinates anyway???
You could do trial and error if you had to. If you know your image is 100 pixels across and the previous button starts about 1/4th of the way across, try x=25. If the top-left corner of that button starts halfway down, and your body is 100 pixels high, try Y=50. It will only take you a few minutes per button using the trial and error method, so it's not that bad if it's all you've got.
GREAT - but how ELSE can I get the COORDINATES???
Most graphics programs have some feature that allows you to open the body image, put the mouse on a spot (say, the top left corner of the play button) and get the X,Y coordinates, to help you code it properly in your xml file. Despite having higher-end graphics programs like Photoshop, and medium-end programs like PhotoImpact, and others, I actually use the free graphics viewer IrfanView (www.irfanview.com
) to get my coordinates, since it is small, fast, and easy to use. I open the body image. Click (and hold) on the top left corner of the button in question, and the titlebar in IRFANVIEW shows (X,Y: 19,71) (or whatever position I happen to be clicking on.) Very handy. very quick.
Back to the XML
Do you want this item to be visible to the user? (true or false)
Certain buttons, such as loop and shuffle have Toggle States.
The button has an up image and a down image, one representing the "true" state (yes, shuffle),
and one representing the false state (no, don't shuffle)
Have jukebox start automatically upon page load? (t or f)
Enable looping by default (a loop button doesn't have to be visible to be set to loop).. (To loop is to repeat a playlist over and over)
Enable "Shuffling" by default (a shuffle button doesn't have to be visible to be set to shuffle). (shuffle means playing the playlist in completely random order.)
Do you want to specify the background color when NOT using an image?
If set to true, specify the color in the parameter: bkfillclr="....."
NOTE: if ALL background related items are set to false (bkdobk, bkdogradient, bkdoimg),
then the background will be what is set on the HTML page in the object PARAMS.
i.e. <param name="bgcolor" value="#ffcc00" /> sets the background to a goldish color
if you do NOT use a JPG background image (in which case, set bkdoimg="f"), you can create a solid or gradient fill colored background for your jukebox.
Do you want to use a gradient fill (two-color blend)?
what color should the body of the jukebox be?
NOTE: Those are standard HEX color notations. If your graphics programs gives you colors like #C0C0C0, just dump the "#" and add "0x" to the beginning of the color code.
(percent) how opaque is the background color gradient?
100% is completely solid.
0% is completely transparent (you won't see any of the gradient)
What is the color you want to use as a gradient blend with the background?
How opaque do you want the gradient alpha blend to be?
What is the angle of the gradient?
You have from 1 tp 360, since we are dealing with a circular style gradient.
imagine you are rotating the two colors on a circular color-wheel (you are).
180 is straight from left to right. (green to red)
90 is straight top to bottom (red to green)
270 is straight top to bottom (green to red)
0 is straight left to right (red to green).
obviously (assuming you know a little geometry),
any non 90 degree angle is going to produce a
sloped effect to the color blend.
70 will seem to go from solid red
(top left corner, to solid green, bottom right corner),
and so forth.
Do you want to use a background image for the background?
this is the path to the body image.
NOTE: if you have bkdoimg set to "f", no background will appear,
even if one is specified here.
Do you want a small line for a border around the jukebox?
(t) true. solid. a nice solid line.
(f) false. renders a dotted line.
bkbdrcolor="0x0033cc" (dark blue)
This is the color of the border
Sorry no idea about this one. Have not yet been able to demystify it :-)
The Label and ScrollingLabel also allow you to set the font properties:
How opaque do you want the font to be?
What point size do you want the font to be (bigger numbers, bigger font)
What color should the font be?
Should it be bold?
Should it be italic?
What family should the font be?
i.e. Arial, Times, Helvetica, Serif
(I'm not really sure what the options are, but those four are probably standards)
These are commands that are built into CoffeeCup to tell the program what to do when this image is clicked. Leave them at their defaults.
VOLUME is a built in flash object with a slider-line and a center rectangle to show where the current position is. You specify the x/y/height/width/and visibility of this object just like you would with the other images, though in this case, it is a builtin flash object.
PROGRESS is a built in flash object with a white to grey progressbar. You specify the x/y/height/width/and visibility of this object just like you would with the other images, though in this case, it is a builtin flash object.
TREE is the playlist parent container.
If you want the playlist in your jukebox, set visible to true. Position it using the familiar x/y/w/h settings
NOTE: despite what a coffeecup support person told me, I don't see any way to make it appear as anything other than the default white solid background with black text. I'd love to be able to customize this to better suit skins, but ... well, maybe you can teach ME how to do this if it's possible :-)
NODE LABEL as first NODE: This is text that appears in the first row of the playlist. Chances are you want it to represent the playlist. Obviously, this is just another song node, but with the name and file parameters removed.
It is optional. You can yank it if you don't want it.
<node label="A STATIC TEXT TITLE for the playlist">
When you create your skin do not include anything inside the default node. When the user adds files, CoffeeCup will fill that in.
ADVANCED: ANIMATED SKINS
If you design your skin with JPG images, but also make corresponding animated flash images (swf files), after you have generated the code using CoffeeCup for your jukebox, go back into the xml file and replace any static jpg images with the corresponding swf file. Then be sure to upload those auxilliary files as well.