Roadrunner Skinning Tutorial

Meelobee · 08-15-2005, 10:58 AM

Requirements

RoadRunner to use the skin.
RoadRunner Skin Editor to make the skin.
RoadRunner Skin Editor- pRoFiT's version (adds Flash support, XY Position) (Read this)
Adobe Photoshop CS (which is very expensive) or Gimp (which is free!) to create the graphics.

These are actually RoadRunners requirements, but you need RR anyway:

At least a VGA screen.
RAM & CPU Requirements vary according to the skin used. (Or the one that you are making.)
Visual Basic Runtime Files (If you get DLL/OCX errors, get it Here.)
Winamp (www.winamp.com) NOTE! --> MUST NOT be a LITE version and you should use a CLASSIC skin. (All versions should work but Winamp 2.9 is recommended for performance reasons.) (you can find older versions of winamp here.)
Graphic Editing Program (Adobe Photoshop, Gimp, Paint Shop Pro, etc)
Loads of patience!

Getting an idea of how RoadRunner skins work

Every skin has multiple screens. (Main menu, Audio player, Audio Browser, DVD, etc.)
Every screen is made from multiple .jpg (some use .swf) graphic files, that have button areas defined over them.
Usually every screen uses 4 graphic files: 1. Off, 2. On, 3. Down, 4. Empty.

The "Off" condition is what your skin will look like when your mouse pointer is off of it and you haven't pushed any buttons or anything.
The "On" condition is what the button or area will look like when you have your mouse pointer over it. (most skins use a glow or highlight as on state.)
The "Down" condition is what the button or area looks like when you push a button.
The "empty" condition is used for blank screens. This option is hardly used. Most skinners use the same file as in 1. "Off".

The graphic files are only the background, they are static and won't do much by themself. This is where the Skin Editor comes in. If you take a look in a folder of an installed skin you will notice that for every screen in the skin there are 4 files with the almost the same name. For example: Menu_down.jpg, Menu_off.jpg, Menu_On.jpg and Menu.skin. The .skin file is important, this tells RoadRunner which buttons and functions are defined.

The buttons and labels are invisible and lay on top of the background graphic. The position and function of the buttons and labels are saved in a .skin file. Every screen in a skin has a .skin file.
You can use Notepad or a similair text editing tool to make changes to the .skin file. When you use Notepad to edit skin files you will see something like this:

Code:

MEDIACAR Skin
MEDIACAR ZdGrey(800x600)Skin Skin
menu_off.jpg,menu_off.jpg,menu_on.jpg,menu_down.jpg

/, B, x, y, w, h, Command;COMMANDCODES, Tooltip
B,179,506,146,65,,

/, L, x, y, w, h, color R;RGB, G, B, font size;FONT, font name, Code;LABELCODES, Tooltip;LABELALIGNMENT
L09,365,140,70,24,255,255,255,19,"DS-Digital","=TRACK:","RIGHT"
L08,200,140,80,24,255,255,255,19,"DS-Digital","=TIME:","RIGHT"
L07,200,110,80,24,255,255,255,19,"DS-Digital","=TITLE:","RIGHT"
L01,285,80,310,24,255,255,255,19,"DS-Digital","TAGARTIST","SCROLL-LEFT"
L06,200,80,80,24,255,255,255,19,"DS-Digital","=ARTIST:","RIGHT"
L02,285,110,310,24,255,255,255,19,"DS-Digital","TAGTITLE","LEFT"
L03,285,140,75,24,255,255,255,19,"DS-Digital","CURRENTTRACKTIME","LEFT"
L04,440,140,90,24,255,255,255,19,"DS-Digital","TRACKNUMBER","LEFT"
L,200,187,80,20,255,255,255,14,"DS-Digital","=PROGRESS","RIGHT"
L,200,248,80,20,255,255,255,14,"DS-Digital","=VOLUME","RIGHT"
L,200,216,80,24,255,255,255,17,"DS-Digital","=DATE:","RIGHT"
L,410,216,120,24,255,255,255,17,"DS-Digital","TIME","LEFT"
L,286,216,120,24,255,255,255,17,"DS-Digital","DATE","LEFT"
L05,512,248,45,20,255,255,255,14,"DS-Digital","VOLUME","LEFT"

/, B, x, y, w, h, Command;COMMANDCODES, Tooltip
B01,23,49,146,86,"VOL+",
B02,23,213,146,86,"VOL-",Volume Down

/, I, x, y, w, h, Code;INDICATORCODES
I,118,165,20,20,"MASTERMUTE:b"

/, B, x, y, w, h, Command;COMMANDCODES, Tooltip
B03,23,136,136,76,"MUTE",Mute Sound
B04,631,49,146,86,"NEXT",Next Track
B05,631,213,146,86,"PREV",Prev Track
B06,641,136,136,76,"PLAY",Play / Pause
B01,480,506,146,65,"APPEARANCE","Appearance"
B07,330,506,145,67,"EXITMENU",Exit Program
B08,102,410,145,90,"GPS",GPS,
B09,252,405,145,95,"DVD",DVD,
B10,402,405,145,95,"AUDIO",Music,
B11,552,410,145,90,"VIDEO","List"

/, Y,  Back Slider file path
Y01,"zd_slider1\slider_*.gif"
Y02,"zd_slider2\slider_*.gif"

/, S, x, y, w, h, x1, y1, w1, h1, O, Style, Pointer file path, h2, Code;SLIDERCODES, Tooltip
S01,286,250,220,15,286,250,220,15,H,01,"zd_slider1\pointer.gif",013,"MASTER",
S02,286,190,220,15,286,190,220,15,H,02,"zd_slider2\pointer.gif",013,"SONGPOS",
 

END

Usually for a beginner skinner this is way too complicated. So some smart people came up with the RoadRunner Skin Editor. It allows you to edit the .skin files with a Graphic User Interface. There are 2 versions, the original editor and an advanced (recommended) version made by pRoFiT, see the Requirements section above. You can also use Notepad or any text editor to edit the .skin files.
In the skin editor you can define area's as buttons and place them where you want on the screen. Usually the positions of the buttons in the SkinEditor are taken from the Graphics files for the screen. In other words, try to outline the buttons you made on the graphics files. (The Buttons you make in the editor will be invisible in the skin, the .jpg graphics file have the actual buttons on them.)

When the area of the button is clicked, the corresponding code is executed. There are many options and functions in RoadRunner to name them all, have a look at the Skin Commands.txt file in the RoadRunner folder to get an idea of the possibilities.

Installing RoadRunner Skin Editor

Download the skineditor from http://guino.home.insightbb.com/download.html (get the file: RR Skin Editor (By lbooker - Modified by Guino))
Extract the content of the zip file to a location of your preference. (Does not have to be in the RoadRunner Folder) I extracted it to the folder C:\RoadRunnerEditor
For easy access you can make a shortcut on your desktop to the file: C:\RoadRunnerEditor\RRSkinEditor.exe

Configuring the Skin Editor

When you start the editor you will see a blank (grey) screen. You will have to set a folder where the RoadRunner Skins are located. To do this you have to set a path in the Skin Editor Settings menu. Open this menu by clicking on: Settings, Skin Editor Settings.

Here you can set the following options:

RR Skin Path - Here you can set the path to the skins folder or browse to select it. It's a good practice to copy the skin you want to edit to another folder and edit that. That way you always keep an original if you screw things up.
Object Color - The color of the objects.
Selected Object Color - The color of the selected object.
Object Border Size - The width of the border of all (not currently selected) objects.
Selected Object Border Size - The width of the border the selected object.
Enable mouse over image - When this box is selected you will see the _On & _Off_ effect when you move the mouse over the buttons.
Enable mouse down image - When this box is selected you will see the _down effect when you select the button.

Skinning Problems / Bugs
If you have a problem with making a skin, don't hesistate to ask. But please try to describe the problem you have so others understand you. (what might be commen knowledge to you might be totally new to another.)

As mentioned before, pRoFiT is improving the skin editor In this thread you can see the progress he made, and request features of submit bugs.

From here it's up to your imagination to make a nice skin.

Links

RoadRunner
RoadRunner Skin Editor (scroll down a bit)
RoadRunner Skin Editor- pRoFiT's version (adds Flash support, XY Position) (Read this)
Adobe Photoshop CS
Gimp
J187's RoadRunner Skinning Tutorial

Comments, suggestions and contributions to the tutorial are more than welcome!

Meelobee · 08-15-2005, 10:59 AM

Reserved

Erwin · 08-15-2005, 11:12 AM

Nice job

Enforcer · 08-15-2005, 12:21 PM

*cough

there is actually four graphic files, you've forgotten empty, although a lot of times off is used again instead.

edrex · 08-15-2005, 12:26 PM

Sticky!!

Also, I wouldn't say Adobe Photoshop Pro is required. It costs $599 on the link you provided and I'm sure there are other options out there that are more user's wallet friendly. Maybe try to give some other examples of programs that will work in its place.

Meelobee · 08-15-2005, 12:55 PM

Enforcer: Added the 4rd grapic file.

edrex: Added Gimp (=free!) to the list.

J187 · 08-24-2005, 12:55 PM

Its funny you did this, I've been working on one of these off and on for a couple weeks now. I'll be posting it soon I think. Nice.

pRoFiT · 09-03-2005, 05:28 AM

Okay, im a noob to posting new threads. So ill post a reply

Guino said go for it, i was bored and modified the RR skinner. Haven't done VB in awhile. So anyways, I added a draggable box for button placement, an xy mouse position at top right and.........i just spent the last two hours adding flash playback in the editor. Not sure if the flash is good or bad in the editor. Kind of distracting so i put a checkbox in the settings area. So if you dont see flash change that option.

The box dragging is done with the shift key and the left mouse button. Then you can select "ADD" then the type and the x,y,w,h will auto fill. Was kind of hard for me to place the buttons when i used it. So dragging a box with the mouse seemed right.

Anyways guino wanted me to send it to him with code, which i will, but i wanted everyone that uses rrskinner to try this mod and give me feed back. I'm new to skinners so dont expect too much.

http://home.comcast.net/~cstrachn/RRSkinEditor.rar

edit: Since this is where you are going to find this post Check out this thread where im keeping track of the skineditor changes

http://www.mp3car.com/vbulletin/showthread.php?t=65723

Meelobee · 09-03-2005, 05:08 PM

Very nice, the xy positions are very handy, they save alot of time and doublechecking

Flash support is good too, but can you make the background tranceparant instead of white?

(Ill add the link to this version in the 1st post)

pRoFiT · 09-03-2005, 06:40 PM

Quote: Originally Posted by Meelobee

Very nice, the xy positions are very handy, they save alot of time and doublechecking

Flash support is good too, but can you make the background tranceparant instead of white?

(Ill add the link to this version in the 1st post)

First off, thanks.

Not sure about the white. looks like if theres no file to read from you will get a white box. Ive got another problem causing the flashs to mix when you move the layers around. No prob. if you close and open again but kind of anoying. I will look more into transparency for flash. Although i thought mine was transparant kind of hard to tell with black on black

Edit: Transparency is a pain

utahere: Ill keep hacking away. Any features you want added maybe i can work on it during my spare time.

Edit2 9/5/05: I see what you mean now. When i change the display (wmode) for flash to transparent then i cant get the flash to play. It's hanging up on something in the editor. Ill keep pokeing around. Maybe the constant redraw of the picture.

pRoFiT · 09-05-2005, 05:07 AM

Meelobee,
Okay i did it. I guess for some strange reason when it was in transparent mode the editor would constantly update it so you wouldn't get animation. And in window mode it would run but you would get the white box around it. I just added a line that says only load/reload if there is a change in position or first time through.

I updated the file in the link.

Edit 9-24-05: Okay Ive been busy this last few weeks and flash made me go crazy. I spent a day or two looking through the skinner code and I still couldn't fix the flash problem I had when setting the order. Also I noticed when you switch screens the flash follows from the previous screen, which kind of sucks. So I guess I need to debug the hell out of the flash and figure out whats going on. I've just been lazzy.

Edit 10 minutes later: fixed the change screen bug.

im happy.

Edit 1 hour later: Fixed crash when you click down and nothing is selected. And fixed the link. I compressed the source folder instead of the program folder....Still cant figure out the damn up down on the flash. Just dont do it. Also added a build number 0.3.003<-- build 003. Although the way im going i should of done a four digit build. I shouldn't have any problem going through 999 code changes.

Meelobee · 09-15-2005, 05:08 AM

Great work pRoFIT!

mukow · 09-29-2005, 07:12 PM

anyone looking for Winamp 2.91 you can find it here

http://www.oldversion.com/program.php?n=winamp

Meelobee · 10-01-2005, 11:12 AM

Added link to http://www.oldversion.com/ to first post, thanks mukow!

replicant · 12-30-2005, 08:28 PM

Not sure if posting questions about making skins in here is the right place, but here goes:

Is there a way to have an on-screen display of sorts for RR skinning? For instance, if you turn the volume up or down with your griffin powermate (for example), I'd like to have a transparent volume progressbar/indicator pop up for about 2 seconds then disappear. Is this something that is available when skinning in RR?

Thanks!

User Name		Remember Me?
Password