Documentatie >
Willz-2-Welcome-to-skinning-in-messenger-pluso
Willz - 2 - Welcome to skinning in Messenger Plus!
Written by Will "Willz" Ingles
Index
Well now we can jump into starting to learn skinning properly. Fortunate for you Messenger Plus! has made things so much easier compared to the methods I've been used to using all these years. This guide will cover an introduction to Messenger Plus skinning and how to begin structuring your first skin.
Before we start!
Before starting any major skin project I plan it out. What I like to do is whip up a mock up in Photoshop or Illustrator so that I know where I want to go and also because I know that later on I will most likely refine what I have mocked up earlier. It just means a higher quality skin in the end. That's just some advice so take it as you wish.
The other thing I do is start up a directory structure to keep things organised. What I normally do is have a folder called UIFILES, which contains the subfolders DEFINITIONS and STYLES to separate my UIfiles so that I don't confuse them. I then have another folder called IMAGES which contains several subfolders such as ICONS, ANIMATIONS, and GRAPHICS but of course you don't have to do that if you don't want to.
Now this part is essential. I highly recommend that you use something other than Notepad to edit your files! While Notepad is something that's simple, it only has one level of undo and it is easy to mess something up. Now in the official skinning documentation XMLSpy is recommended, but you can use something like Dreamweaver or Notepad Pro as well. I use Eclipse for my file editing because I had it on my computer from when I used to use it at University, it's free and it does a pretty good job.
Extracting Resources
The very first thing you need to do is to firstly extract all of Messengers resources so that you have everything that you can edit in one neat handy location. So what I want you to do is open up Resource Hacker and extract each resource from msgsres.dll one by one.......
Ha got you. No we aren't going to do that, what we are going to do is use the resource extractor within Messenger Plus!. Oh yes, Plus! has a handy resource extractor that takes out every single resource that Messenger has and put it into a neat folder for you. But wait, there's more! Not only does this extractor take out Messengers resources, but it can also organise it into what is known as "Consolidated Windows". Consolidated Windows is a very useful way of having things as it organises resources into folders for each UIFILE.
So what this essentially does is put in every image that appears within a certain UIFILE in a folder for you, which means when you use the table from the previous Guide you can now know where every single resource goes. Well not EVERY resource, since some do not appear within UIFILES, but more on that later.
Important: Remember back in part 1 of this guide where I mentioned the new image format that Microsoft introduced for Windows Live Messenger? Well while you can't actually make this format, Plus! automatically converts this format to PNG for you so that you can edit it. Of course this conversion process is still being worked on at the moment and not all images convert correctly, but the majority do so do not worry.
Now here is the important part. Microsoft's new format (called MSNRLE by us older skinners) can have multilayered images, kind of like a PSD. Because there is no way of replicating this in a PNG image, what Patchou has done is put each layer of a multilayer MSNRLE next to each other in a single PNG image.
These images have a naming convention so that you can pick them out. Any multilayered MSNRLE image that has been made into PNG will have "_multi" in the filename. An example of this is shown below.
MSNRLE #46611 converted to a png (the contact list buddy)
Now the reason I am pointing this out is because I know many people will fall into this trap. Say for example you wanted to edit image 46611 to give your skin some new buddy images. What would you do? Would you edit the PNG image and then get Plus! to replace it?
If you answered yes to this question then you fell into the multilayer MSNRLE trap! Don't feel too bad because it is pretty much guaranteed that any new skinner will fall into this trap. Now why is it wrong to just edit this image? Well let me show you what happens when you edit this PNG image and replace the MSNRLE with it.
So what I did was just edit the image in Photoshop to change the buddy to blue. Then I replaced the image using SkinInfo.xml (more on this next). Notice something wrong? Yes it is showing every single image instead of just one. Why does it do that? I won't get into the technical explanation for it since most will not care, but this is what happened in simple terms:
UIFiles have image 46611 referenced as a multilayered MSNRLE. So what messenger does is whenever it needs to change to a different state it just goes to the appropriate MSNRLE layer and displays it. Because PNG's do not have layers it will always display the whole image.
So how do you get around this? Simple, you have to create a separate image for each layer that would have been in the MSNRLE file, and then you have to edit the UIFILE code to point to the appropriate file per state, rather than the MSNRLE layer. Do not worry about this too much right now as we will cover it in depth in another tutorial later on. For now just be aware of it.
Your First Skin
What is SkinInfo.xml?
SkinInfo.xml is the core of every single Plus skin. It contains the instructions to replace and add resources into Messenger. It is a very important file and is essential that you know how it works properly in order to be able to succeed when making a skin. Whilst the Messenger Plus! skinning feature already covers SkinInfo.xml, I will cover it here as well for those who want to follow on.
Starting a new SkinInfo.xml
Before we start please create a new folder in C:\Program Files\Messenger Plus! Live\Skins\ and call it "My First Skin" this is the directory we will be working from.
Now the best way to explain the SkinInfo.xml file is by making a simple skin bit by bit and breaking it apart so that you can see how it works. The file may look intimidating at first, but rest assured once you are used to it, it is really easy to manage. So fire up the XML editor of your choice and start a new file.
Every single Plus! skin begins with the opening tag <SkinInfo>, this is what is known as the root element in XML terms. Every XML file must have a root element that contains everything else. In a Plus! skin this is exactly it. What you should get used to is closing the element straight away so that you do not forget to later. Also please note that every element in a SkinInfo.xml is case sensitive.
So this is what your XML should look like so far:
<SkinInfo>
</SkinInfo>
Now the next thing that you do is make the skins Information section. The information section of a Plus! skin contains things such as the skins name, description and version. Things such as compatibility fall under this section as well. For now we will create a barebones Information section and later on in another tutorial we will cover more of the other options it has.
Within the <SkinInfo> element you need to add the child element <Information> again close this element straight away so that you don't forget later.
Now within the newly created <Information> element we are now going to make a series of child elements that will define the skins Information data. So take a look at the code below and I will then explain it for you. Also note that at any point you can add comments to a SkinInfo.xml to remind you of things by using the following:
<!-- This is a comment. It will not affect your XML in any way. -->
<SkinInfo>
<Information>
<Name>My First Skin</Name>
<Description>Fear my Uber Awesome Skills</Description>
<Version>1.0</Version>
<Compatibility>
<MsgVersion Major="8" Minor="5"/>
</Compatibility>
</Information>
</SkinInfo>
Now let's check out what we just made above.
<Information>: Contains all the relevant information data of the skin
<Name>: Defines that name of the skin
<Description>: A description of the skin for the user
<Version>: The version number of your skin
<Compatibility>: This is important. It tells Plus! what versions of Messenger your skin works with.
<MsgVersion>: This goes under <Compatibility>, it defines a version of messenger.
The <Compatibility> element is very important as it will tell Plus! is your skin is compatible with the users current version of messenger. At the moment, if your skin is not compatible with a users version of messenger the skin will be greyed out in the Plus! options. The <MsgVersion> child element is what defines a version of messenger that is compatible with the skin. The way you set this it is simple adding Major and Minor attributes. So say your skin was compatible with Messenger 8.5, your Major attribute would be equal to 8 and your Minor would be equal to 5. You can take it as far as build number if you really want to as well.
Under the <Compatibility> element you can have as many <MsgVersion> elements as you want. This is so if your skin is compatible with multiple versions of messenger you can define it. The way it is done is like so:
<Compatibility>
<MsgVersion Major="8" Minor="5"/>
<MsgVersion Major="9" Minor="0 Build="1407""/>
<!-This skin is compatible with WLM 8.5.xxxx and 9.0.1407 -->
</Compatibility>
Now let's take a look at what this XML code does visually:
As you can see, in the skins list in Messenger Plus! you can see your skin appear in the list with the version number that was specified. Also when you roll over it you can see your description comes up in a tooltip. So that is the basis of a Plus! skin. Now to start some Image replacing!
Replacing Resources in Windows Live Messenger
Since this is your very first skin, we will just introduce the concept of image replacement by replacing one image in Windows Liver Messenger. In later tutorials, we will cover individual UIFiles and what can be replaced under each. For now we will just stick with something simple so that you can absorb the technique.
If you haven't extracted Messenger's Resources yet, then please do it now and find image 20061 and copy it into the image directory of your skin. Why 20061? Because 20061 is the background of a window in Windows Live Messenger so you will see the change as soon as you sign into Windows Live Messenger.
Now what I want you do to is just edit the image in any way you want (it doesn't really matter just make it look different from the original). For the purpose of this tutorial I just inverted the image in Photoshop, it may be graphically ugly but it will do just to illustrate the point.
Now onto the code, again I will explain afterwards:
<SkinInfo>
<Information>
<Name>My First Skin</Name>
<Description>Fear my Uber Awesome Skills</Description>
<Version>1.0</Version>
<Compatibility>
<MsgVersion Major="8" Minor="5"/>
</Compatibility>
</Information>
<MessengerSkin>
<ResGroup>
<Restrictions>
<MsgVersions>
<Version Major="8" Minor="5"/>
</MsgVersions>
</Restrictions>
<Resources>
<Replace>
<Graphics>
<Pictures>
<Picture Id="20061">
<File>images/20061.png</File>
</Picture>
</Pictures>
</Graphics>
</Replace>
</Resources>
<ResGroup>
</MessengerSkin>
</SkinInfo>
The way you begin to declare your skin is by creating the <MessengerSkin> element after the <Information> element. The <MessengerSkin> element contains the instructions to add and replace resources in Windows Live Messenger.
A <MessengerSkin> element consists of series of <ResGroup> Elements. <ResGroup> means resource group and the way it works is that you can make a series of replace and add instructions depending on the context.
For example, if you wanted to have your skin replace an image in a different way depending on the version of Messenger the user was running you would create a resource group for each version you wanted it to be different for. We will come back to this example in a minute.
From here a <ResGroup> element is then made up of two child elements, <Restrictions> and <Resources>. The <Restrictions> element defines the context that the <ResGroup> can be used in. So in the code above, the restriction is that the <ResGroup> can only be used if the user is running Windows Live Messenger 8.5.
The <Resources> element defines the resources that will be used in the skin, whether it be replaced or new resources, they all go under this section. Now what we are going to do is take a closer look at each of these elements to see how they are structured.
<Restrictions>
<MsgVersions>
<Version Major="8" Minor="5"/>
</MsgVersions>
</Restrictions>
The <Restrictions> element contains child elements that tell Messenger Plus! when to use the resources in the <Resources> element. Because we are just doing a barebones skin, the only restriction data we need to worry about is Messenger version restrictions. This is carried out in a similar way to the way we did it in the <Information> section of SkinInfo.xml.
The element <MsgVersions> is contains child elements of <Version> which define what version the ResGroup is used for. Just like the <Information> section you can have several Messenger versions by just making more <Version> elements.
Again I must stress that this isn't everything that goes in the restrictions area, there are several other things you can put in there that will help you make unique skins. But of course to keep things simple we just used one restriction. Now let's take a look at the <Resources> element.
<Resources>
<Replace>
<Graphics>
<Pictures>
<Picture Id="20061">
<File>images/20061.png</File>
</Picture>
</Pictures>
</Graphics>
</Replace>
</Resources>
The <Resources> element can be broken up into two child elements <Replace> and <New>, since we aren't adding any new resources into this skin we are just using the <Replace> child element. We will cover the <New> element in a later tutorial.
The <Replace> element can then be broken up into 5 child elements which give instructions on what things to replace within Windows Live Messenger. Again to keep things simple we only used <Graphics>, however I will still give a rundown of the other things that you can put under the <Replace> element.
<Graphics>: This element is used to replace images that fall under the 4000 group in msgsres.dll. Bitmaps and icons are also replaced in this group as well.
<Windows>: This element is used to replace UIFIles.
<Strings>: This element is used to replace strings in mslang.
<Colors>: This element is used to replace 4002 group colors.
<StandardUI>: This element is used to replace Dialogs and Menus in messenger
The last thing we are going to do before we publish the skin to plsk format is to take a look at how the 20061 image was replaced. Under the <Graphics> element there are 3 child elements that can occur:
<Pictures>: Replaces 4000 group images in msgsres.dll
<Bitmaps>: Replaces BITMAPS in msgsres.dll
<Icons>: Replaces Icons in msgsres.dll and msnmsgr.exe
Now because we are just replacing 20061 from the 4000 group all we need is the <Pictures> element. The <Pictures> element then contains a series of <Picture> elements that point to files in msgsres.dll. The way you instruct your skin to replace an image is to simply use the Id attribute. So because we are replacing image 20061, the Id attribute is set to 20061. The <File> element under <Picture> simply contains the path to the new picture from SkinInfo.xml.
Packaging your skin
The last step we are going to do is package our skin for distribution. This process is very simple. All you have to do is add everything inside your skin folder (DO NOT ADD THE ACTUAL FOLDER, ADD EVERYTHING INSIDE THE FOLDER) into a zip file. Then you just rename the extension from .zip to .plsk.
That's it! It's ready to go.
So if you now load Windows Live Messenger you should see the new 20061 image in place. Not exactly pretty but you get the idea.
Well that's it for this tutorial. You should now be familiar with making a simple SkinInfo.xml and replacing images. The next tutorial will cover adding new images and how elements work in definition files. So see you guys then.
DOWNLOAD THE PLSK FROM THIS TUTORIAL