Go Back   Winamp & SHOUTcast Forums > Skinning and Design > Modern Skins

Reply
Thread Tools Search this Thread Display Modes
Old 7th February 2003, 04:35   #1
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
FrisbeeMonkey's Skinning Tutorial - Discussion

Hey everyone,
Not all of my recent time away from the forums has been spent skiing and backpacking. I've also been working on a new project that I think is finally at a point that I am willing to advertise it. I'm creating a tutorial/walkthrough that I think might benefit new and experienced skinners alike. I'm starting this thread so that if anyone needs help with anything, or thinks it needs improvements in certain areas, they can post it here so that I and other members of the community can help out. On the other hand, if you catch any mistakes(grammar, dead links, etc), please email me via the link at the bottom of any of the pages. I'll also use this thread to notify of updates as they are available. Anyways, without any further ado:
Skinning Tutorial
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 7th February 2003, 05:07   #2
razmansix
Senior Member
 
razmansix's Avatar
 
Join Date: Jun 2002
Location: Nuuk
Posts: 402
Send a message via AIM to razmansix
WOW! frisbeemonkey! I just quick skimmed all the pages you've done so far. It's easy to read and understand imo! I will definately use your pages if I ever desided to give it a shot! I'm a super noob coder and this is just the kind of tutorial I've been missing.

You'e done a great job on the project so far! - I'm sure this will come in handy for alot of people here.

Remember to make a printerfriendly version
razmansix is offline   Reply With Quote
Old 7th February 2003, 07:02   #3
eh?one
Senior Member
 
eh?one's Avatar
 
Join Date: Feb 2003
Location: canada, eh?
Posts: 296
wow!



(i'm speechless)
eh?one is offline   Reply With Quote
Old 7th February 2003, 09:23   #4
qlimo
Senior Member
 
qlimo's Avatar
 
Join Date: Oct 2002
Location: Slovakia
Posts: 114
Send a message via ICQ to qlimo
GREAT. This is what lots of people were waiting for .
qlimo is offline   Reply With Quote
Old 7th February 2003, 17:07   #5
hammerhead
The Shark
(Forum King)
 
hammerhead's Avatar
 
Join Date: Jul 2002
Posts: 2,537
Send a message via AIM to hammerhead
Good work
Although I won't need to use it, it'll make skinning for n00bs a lot easier.
hammerhead is offline   Reply With Quote
Old 7th February 2003, 18:21   #6
dam
Forum King
 
dam's Avatar
 
Join Date: Nov 2001
Location: The foot of the bed
Posts: 2,536
Send a message via Yahoo to dam
Great work. It covers a lot of things that other tutorials dont.
dam is offline   Reply With Quote
Old 7th February 2003, 19:26   #7
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
Quote:
Remember to make a printerfriendly version
Good idea, razmansix, I didn't even think of that.

Anyways, thanks everyone for the support so far
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 7th February 2003, 21:10   #8
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
That is an excellent tutorial site! Very clear and knowledgable. Now I have somewhere to send the n00bs asking me how to make skins, thanks!
rpeterclark is offline   Reply With Quote
Old 8th February 2003, 00:18   #9
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
Heh, see, it benefits the veteran skinners too Oh, and I hope you don't mind that I've pimped your Gamma Worker in the tutorial. Right now it is just mentioned on the index and the graphics pages. Once I get to the gamma groups section of the tutorial, I'd like to use it in my examples if that's alright with you.
Thanks in advance,
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 8th February 2003, 02:04   #10
rpeterclark
Major Dude
(Reviewer)
 
rpeterclark's Avatar
 
Join Date: Aug 2002
Location: South Florida
Posts: 1,388
Absolutely!
rpeterclark is offline   Reply With Quote
Old 8th February 2003, 03:00   #11
digitalspyder
Senior Member
 
digitalspyder's Avatar
 
Join Date: Aug 2002
Location: Maqedoni (f.y.r.o.m)
Posts: 138
THANK YOU VERY MUCH frisbeemonkey ,this is really appreciated!
digitalspyder is offline   Reply With Quote
Old 12th February 2003, 03:02   #12
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
Minor update. I've added the start of a FAQ section. So far there're only a handful of questions. I'd appreciate it if some of the regulars around here could take a look at it and suggest(here or PM or email) other questions(and answers) that show up fairly often.
Thanks,
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 12th February 2003, 03:05   #13
iPlayTheSpoons
Major Dude
 
iPlayTheSpoons's Avatar
 
Join Date: Aug 2001
Location: SJSU
Posts: 1,030
Send a message via AIM to iPlayTheSpoons
i saw your objects thing was empty...i assume, youve seen http://bluemars.planet-d.net/wa3skintutorial/tut2.html, but if not...

by the way, AWSOME contribution. if you feel so inclined, you can include the crap in my how to write a maki script thread so you dont have to write something from scratch
iPlayTheSpoons is offline   Reply With Quote
Old 12th February 2003, 03:13   #14
thepyr0x
Major Dude
 
thepyr0x's Avatar
 
Join Date: Oct 2001
Location: At my house in a city in Canada
Posts: 1,336
frisbeemonkey - your page's tables (specifically the tabs at the top) don't work well with Opera, you should try and make em work for all browsers

thepyr0x is offline   Reply With Quote
Old 12th February 2003, 08:06   #15
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
iPlay, yeah, I was intending on using Francis' page as a starting point and updating it as necessary. Thanks for the offer of the MAKI stuff. That won't be addressed until the Advanced section, but I may take you up on the offer when I get there.
pyr0x, thanks for the heads up. I downloaded Opera, and yikes. The text was huge. The tabs were also messed up, as you said, but only one the first page I tried. I went to another page, it looked fine, went back, now it too was magically normal. I officially don't like Opera. It shouldn't handle the same exact HTML differently just because of the phase of the moon or whatever it was basing it on, heh. Unless someone knows of a fix for those temporary gaps, I guess the page will look wrong once for Opera users.
Until next time,
~FrisbeeMonkey
[edit]Okay, think I fixed it. Upon loading the images the first time, Opera would sub in the alt tag until image was loaded, but then not adjust the width. Lemme know if it looks okay for you now too.[/edit]

Last edited by frisbeemonkey; 12th February 2003 at 08:33.
frisbeemonkey is offline   Reply With Quote
Old 25th February 2003, 09:54   #16
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
Hmm, just wondering here, some of the topics are rather lengthy. (See the Thinger page, for example) Should I break that up into two pages, or let the users scroll forever and ever? I'm thinking I should break it up. Any other pages that would be better spanning another page or two?
Also, I've been watching my error log pretty closely and have found the cause of most, but not all of the broken links(a lot were from when I changed over to PHP and redid the structure a bit). If anyone comes across a dead link in the Winamp3 section(aside from advanced/index.php), I'd love it if you could tell me where it was. Drop me a PM or an email(there's a link at the bottom of every page), I don't bite.
Thanks in advance,
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 26th February 2003, 07:25   #17
carlosp
Major Dude
 
carlosp's Avatar
 
Join Date: Nov 2002
Location: Hamburg, Germany
Posts: 1,312
Hello frisbeemonkey,
I saw your page and it is really good. I am about to make a databank for maki Scripts. I need so many scripts i get and i tought this is the right thread to tell the people that cuase first yu are a major skinner and second is that i saw that other major skinner walk throw that. What do you major skinner think about that?
carlosp is offline   Reply With Quote
Old 26th February 2003, 07:56   #18
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
You mean something like this?
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 26th February 2003, 12:37   #19
darko-ninja
Member
 
Join Date: Feb 2003
Location: Washington
Posts: 94
Send a message via AIM to darko-ninja
Dunno if I missed this, or if you just plain don't want this in your tut, but it looks like you left out a section to explain drawers. I'm in no real hurry for this just thought it might be a nice thing to have there?

peace
darko-ninja
darko-ninja is offline   Reply With Quote
Old 27th February 2003, 00:15   #20
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
I'm pretty sure that I'll be covering drawers in the tutorial since they're so popular. I'm not sure how I want to do them yet, though. I'm thinking I will go step-by-step through a drawer in the Advanced section, maybe add one to the shade mode or something. The Outline is really just to give an idea of what is to come, I plan on changing it around a bit as I develop more of the tutorial. If there's anything else you or anyone else would like to see in there, just ask.
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 27th February 2003, 07:51   #21
matt_69
Sunshine
(Major Dude)
 
matt_69's Avatar
 
Join Date: Jan 2003
Location: Brisvegas, Australia
Posts: 1,248
very good frisbee
apart from helpin me heaps its helpin everyone else. its clear and easy to understand. keep the otha tutorials comin!!

matt_69 is offline   Reply With Quote
Old 27th February 2003, 21:45   #22
carlosp
Major Dude
 
carlosp's Avatar
 
Join Date: Nov 2002
Location: Hamburg, Germany
Posts: 1,312
Not really. I ment a sql datebank where you can download scripts. No introduction, no nothing. Only a script datebank like those for java you know. You give a key word and you get the script file to download. Not more not less.
carlosp is offline   Reply With Quote
Old 4th March 2003, 06:50   #23
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
carlosp, I guess that would be kind of helpful. You're more than welcome to use any and all of my scripts for your database.

And now the main reason I am posting here... The Intermediate Area is now completed I'll probably be starting the Advanced area soon(after I redo a few of the skin's graphics, namely the Speakers and Windowing Buttons). To see my temporary plan, check out the outline.

Anyone have any requests for MAKI concepts that you'd like to see covered there? I was thinking I'd basically do a line by line analysis of a couple of easy scripts, then give brief examples of other concepts. A few people have asked about drawers, so I'll make sure to include that. Anything else? There is still plenty ahead of the MAKI, but I figured it couldn't hurt to get your hamster-wheels spinning early.
Thanks,
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 4th March 2003, 18:31   #24
carlosp
Major Dude
 
carlosp's Avatar
 
Join Date: Nov 2002
Location: Hamburg, Germany
Posts: 1,312
I work on the database. I use all the sripts from your site and those one in maki cheats and "how to write a maki script".

When i started to make winamp 3 skins i had at first big problems becuase my code was to dirty. I think you should tell on your site to the newbies what is the best why for the xml code. I think the best why is to tell them this:

Put nothing ether than groups in your layout. This means:

<container>

<groupdefs id="what you want">
</groupdef>

<groupdefs id="what you want">
</groupdef>

<groupdefs id="what you want">
</groupdef>

..... and so on. In you layout comes only:

<layout id="normal" droptarget="pldr">

<group id="what you want" />
<group id="what you want" />
<group id="what you want" />

</layout>

</container>

I think this is the cleanest why to cody becuase many people works with more than one layout and it is very use full cuase you change only the groupdef and nothing else. I think this could be helpfull for the newbies. Put it in your tut if you want if not than not.
carlosp is offline   Reply With Quote
Old 4th March 2003, 22:49   #25
kenfle
Junior Member
 
Join Date: Mar 2003
Posts: 2
new skinner needs help

Your tutorial seems great, but when I download the sample skin, change the extension to .wal and add it to my skins folder for Winamp, Winamp gives me an error that it basically will not work. I'm trying to use your sample as a base to make my own for a deadline...any thoughts?
kenfle is offline   Reply With Quote
Old 5th March 2003, 00:11   #26
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
Hmm, well, if you are downloading the sample skin(you mean at the end of the Beginner or Intermediate Areas?), you shouldn't have to change it to .wal, they are already .wal files. Are you perhaps using an internal build of WA3 or are you trying to load Parts.zip as a skin or something?
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 6th March 2003, 00:52   #27
kenfle
Junior Member
 
Join Date: Mar 2003
Posts: 2
FrisbeeMonkey...thanks for your help yesterday I got pretty far with your tutorial but I'm coming up with a window that say "ooch!!" when I try to load my skin. Soooo obviously I haven't done something right. Is there anyway we can chat privately? I can pay to you fix my skin today if at all possible. (deadline looming) thanks heaps.
-k
kenfle is offline   Reply With Quote
Old 24th March 2003, 09:27   #28
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
Beta Testers?

Hey everyone, the Tutorial skin is nearing completion. Any chance anyone would be interested in beta testing it, make sure everything works as it should, etc? Aside from an options window, the skin is pretty much done (or will be after fixing any problems people find), so there should be some significant updates to the tutorial soon.
New to the skin since the Color Theme version:
Skinned Components, Thinger, EQ, Tutorial Browser, improved graphics, and a few different display/vis modes(left-click on the peanut-shaped button to cycle through them or right-click and select the mode you want from the menu.)

Tutorial_A_Test.wal (229KB)

Thanks in advance for your help,
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 24th March 2003, 09:49   #29
J_Bloggs
Major Dude
 
J_Bloggs's Avatar
 
Join Date: Jan 2002
Posts: 1,778
Not everything in the thinger can be read, the text, it should at least be centered.

The speakers are very dark and hard to see.

¯¯¯¯Joe Bloggs____
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
J_Bloggs is offline   Reply With Quote
Old 25th March 2003, 00:05   #30
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
The text is/was centered, but now it scrolls for names that are too long, thanks for that catch.
And either I have my brightness too high, or yours is too low, I can see them fine(except on one or two of the color themes). Anyone else have a say one way or the other? Or about anything regarding this?
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 25th March 2003, 16:49   #31
QuadHeliX
Major Dude
 
QuadHeliX's Avatar
 
Join Date: Jan 2003
Location: Washington State
Posts: 1,133
NIce Skin, I did use your tutorial to code some of the Dominator. I love your skin!
QuadHeliX is offline   Reply With Quote
Old 1st April 2003, 02:13   #32
iPlayTheSpoons
Major Dude
 
iPlayTheSpoons's Avatar
 
Join Date: Aug 2001
Location: SJSU
Posts: 1,030
Send a message via AIM to iPlayTheSpoons
and CustomVis pulls into the lead (most downloaded maki cheat). OHHH YAAA
iPlayTheSpoons is offline   Reply With Quote
Old 1st April 2003, 03:08   #33
buddy139913
Senior Member
 
buddy139913's Avatar
 
Join Date: May 2002
Location: Glued to my computer screen.
Posts: 302
Send a message via AIM to buddy139913
Thank-you thank-you thank-you frisbeemonkey! This tutorial is exactly what I needed to figure out how to code skins! I tried reading the official one on the site, and that just got me going 'huh?' even more. Yours cleared up everything! Thank-you sooo much!
buddy139913 is offline   Reply With Quote
Old 1st April 2003, 22:56   #34
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
No prob, buddy, glad it helped

And iPlay, you're lucky my site was/is not resolving when I read that or your count would mysteriously drop to -200... Just for an April Fool's joke, of course So how many of those downloads are you? Am I gonna have to start keeping track of only unique IPed downloads so people don't start pumping up their count?
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 2nd April 2003, 02:02   #35
iPlayTheSpoons
Major Dude
 
iPlayTheSpoons's Avatar
 
Join Date: Aug 2001
Location: SJSU
Posts: 1,030
Send a message via AIM to iPlayTheSpoons
only one was me, to make sure it was all right when you first put it up. boy was it tempting though
iPlayTheSpoons is offline   Reply With Quote
Old 16th June 2004, 02:05   #36
Velvet Sledge
Senior Member
 
Velvet Sledge's Avatar
 
Join Date: May 2004
Location: Oztralia.
Posts: 344
SKIN n00b HERE!!!

i'm working through your tute... but when i got to the step about checking to see if the background is working, i got nothing, nada, zip, zilch.... i'm using winamp 5.03 does that have anything to do with it? 'cause i can see that your tute was written with winamp 3 in mind, have they changed all that much? i've seen two tute, and both referenced to the default file locations differently...

yours:

<include file="../default/xml/pledit.xml"/>

the winamp tute (from the sdk site)

<include file="@DEFAULTSKINPATH@xml/pledit.xml"/>

what's the difference here? is one correct? or is it just two different ways to do the same thing?

"Before you judge a man, walk a mile in his shoes, after that who cares... you a mile away, and you've got his shoes." - Billy Connelly

"And the lord said unto john, come forth and recieve eternal life, but john came fifth and won a toaster" - Someone else in the winamp forums

"There's nothing wrong with the voices in my head... except when they start singing "this is the song that doesn't end.... "" - Me
Velvet Sledge is offline   Reply With Quote
Old 16th June 2004, 03:21   #37
Velvet Sledge
Senior Member
 
Velvet Sledge's Avatar
 
Join Date: May 2004
Location: Oztralia.
Posts: 344
okay, i've tried the whole thing all over, and i installed winamp 3 for the occasion. but all i can see when i get to the 'Checking Your Progress' stage is winamp reduced to a little green icon saying "image not found"... what's happening here? so far i've got 4 xml files, and one png

my file structure goes something like this:

in frizz skin(dir):-
skin.xml
player(dir)
xml(dir)

in player(dir):-
mainbase.png

in xml(dir):-
player.xml
player-normal.xml
player-elements.xml


***skin.xml***

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<WinampAbstractionLayer version="0.8">
<skininfo>
<version>1.0</version>
<name>YourSkinName</name>
<comment>Enter some comment here.</comment>
<email>YourEmail@somewhere.com</email>
<homepage>http://www.YourWebpage.com</homepage>
<screenshot>skin.png</screenshot>
</skininfo>

<include file="xml/player.xml"/>
<include file="..default/xml/pledit.xml"/>
<include file="..default/xml/thinger.xml"/>
<include file="..default/xml/eq.xml"/>

</WinampAbstractionLayer>

***in player.xml***

<container id="main" name="Main Window" default_x="0" default_y="0" default_visible="1">

<include file="player-normal.xml"/>
<include file="plater-elements.xml"/>

</container>


***in Player-elements***

<elements>

<bitmap id="player.normal.background" file="player/mainbase.png"/>

</elements>

***in Player-normal.xml***

<layout id="normal" w="380" h="165" droptarget="pldr">

<layer id="Mainbase" image="player.normal.background" x="0" y="3" sysregion="1"/>

</layout>


P.S. i'm assuming that at this 'checking your progress' stage you suppose to compress the files into a zip file and rename it to a wal?

"Before you judge a man, walk a mile in his shoes, after that who cares... you a mile away, and you've got his shoes." - Billy Connelly

"And the lord said unto john, come forth and recieve eternal life, but john came fifth and won a toaster" - Someone else in the winamp forums

"There's nothing wrong with the voices in my head... except when they start singing "this is the song that doesn't end.... "" - Me
Velvet Sledge is offline   Reply With Quote
Old 16th June 2004, 04:56   #38
frisbeemonkey
Major Dude
 
frisbeemonkey's Avatar
 
Join Date: Jun 2002
Posts: 851
As mentioned in the 3rd paragraph of that page, include your player-elements.xml (also, not plater) before your container tags. Right now, Winamp is trying to display images that have not yet been made visible to it. The code should work for WA 3 or 5.

Also, no need to WAL your files, they'll work out of a folder if you have it in your skins directory.

Lastly, the @DEFAULTSKINPATH@ would be best, but I remember having issues with that so I went the route I knew to work.

Hope this helps!
~FrisbeeMonkey
frisbeemonkey is offline   Reply With Quote
Old 16th June 2004, 05:03   #39
iron2000
Senior Member
 
iron2000's Avatar
 
Join Date: Mar 2002
Location: Singapore
Posts: 391
You have a really good tutorial there, frisbeemonkey.
Thanks to you that I am able to make my first modern skin.

There are bugs on some of the scripts on the site, one common one is the scripts lose effect on skin refresh when the player is in different play states. Pretty much have to fix things myself.

I think a complete and constantly updated documatation on MAKI and the XML used would encourage more people to make skins.

A good tutorial like yours is very needed.

Thanks

Thanx
iron2000 is offline   Reply With Quote
Old 16th June 2004, 05:08   #40
Velvet Sledge
Senior Member
 
Velvet Sledge's Avatar
 
Join Date: May 2004
Location: Oztralia.
Posts: 344
WOOHOO... it worked!!! "well duh" i hear you say well... it was the "plater" error, 'cause i tried it with the <include file... bit infront of the container tag, it didn't work so i threw in within the tag to see what happened, and that's what i showed you... just fixed both errors and wallah... thanks a million, if i thought you were a good looking lass i'd give ya a big hug....

"Before you judge a man, walk a mile in his shoes, after that who cares... you a mile away, and you've got his shoes." - Billy Connelly

"And the lord said unto john, come forth and recieve eternal life, but john came fifth and won a toaster" - Someone else in the winamp forums

"There's nothing wrong with the voices in my head... except when they start singing "this is the song that doesn't end.... "" - Me

Last edited by Velvet Sledge; 16th June 2004 at 07:40.
Velvet Sledge is offline   Reply With Quote
Reply
Go Back   Winamp & SHOUTcast Forums > Skinning and Design > Modern Skins

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump