Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Roadrunner Skinning Tutorial

  1. #1
    Variable Bitrate
    Join Date
    May 2005
    Posts
    350

    Roadrunner Skinning Tutorial

    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.

    1. 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.
    2. 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.)
    3. The "Down" condition is what the button or area looks like when you push a button.
    4. 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!

  2. #2
    Variable Bitrate
    Join Date
    May 2005
    Posts
    350
    Reserved

  3. #3
    Variable Bitrate Erwin's Avatar
    Join Date
    Mar 2005
    Posts
    301
    Nice job
    Hardware: Via Epia M10000, 512MB DDR RAM, 3,5" 40 Gig HD, slimline DVD-ROM & CD-R/RW, M1-ATX (PSU).
    Software: Roadrunner, Mapmonkey/Freedrive

    My Car PC project
    FD & MM voices

  4. #4
    Confusion Master
    Auto Apps:loading...
    Enforcer's Avatar
    Join Date
    Sep 2003
    Location
    If you go down to the woods today, You're sure of
    Posts
    14,588
    *cough

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

  5. #5
    FLAC edrex's Avatar
    Join Date
    Dec 2004
    Location
    West Chestinghamshire, UK init!!
    Posts
    1,088
    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.
    Spent so far: $1,755
    Check Out My Work Log for Specs/Pics
    CarPC Progress[!!!!!!!!!!!!!!].....Installation[---------+].....Pastrami Progress[!!!!!!!!!!!!!!]
    Don't mess with Texas.
    It's not nice to pick on retards!

  6. #6
    Variable Bitrate
    Join Date
    May 2005
    Posts
    350
    Enforcer: Added the 4rd grapic file.

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

  7. #7
    FLAC J187's Avatar
    Join Date
    Nov 2004
    Location
    Boston
    Posts
    1,237
    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.
    Its not the cards you're dealt, its how you play the hand!

    Quote Originally Posted by ryuandwings View Post
    Where can I get a roll of tin foil?
    I been looking for that all over the net, but I can't find it.
    Please help.

  8. #8
    Maximum Bitrate pRoFiT's Avatar
    Join Date
    Apr 2005
    Location
    Fresno, CA
    Posts
    795
    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

    RRSkinEditor BUGS / FIXES / COMMENTS / CURRENT PROGRESS OUTDATED
    Um, I guess this is where you put something witty.WITTY

    My Web site, in the design stage. http://home.comcast.net/~cstrachn

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

  9. #9
    Variable Bitrate
    Join Date
    May 2005
    Posts
    350
    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)

  10. #10
    Maximum Bitrate pRoFiT's Avatar
    Join Date
    Apr 2005
    Location
    Fresno, CA
    Posts
    795
    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.
    Um, I guess this is where you put something witty.WITTY

    My Web site, in the design stage. http://home.comcast.net/~cstrachn

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

Page 1 of 2 12 LastLast

Similar Threads

  1. Request: Skinning Tutorial.
    By Meelobee in forum RR Skins
    Replies: 11
    Last Post: 08-11-2005, 12:32 PM
  2. HORM and RoadRunner...
    By CornFlake340 in forum Road Runner
    Replies: 6
    Last Post: 04-14-2005, 04:17 PM
  3. Skinning Tutorial
    By vatik in forum FrodoPlayer
    Replies: 4
    Last Post: 02-18-2005, 11:36 AM
  4. Skinning tutorial?
    By erazor in forum FrodoPlayer
    Replies: 26
    Last Post: 11-06-2004, 07:36 AM
  5. Fiberglass Tutorial
    By AJ Quick in forum Fabrication
    Replies: 13
    Last Post: 06-16-2004, 01:45 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •