|
Using Pictures
If there was only one thing that interest skin developers in
general it would certainly have to be pictures. Because Messenger
windows are very graphical, a lot of pictures are used everywhere.
Changing the alignment of pictures, stretching backgrounds and
using the other multiple options related to graphics is what makes
a difference in a window.
Replacing Existing Pictures
More than often, skin developers simply want to replace an
existing picture, without modifying its attributes or its location.
To achieve such a thing, all that's needed is a <Picture> element added in the <Replace> block of your skininfo file, as
seen in the Test Skin example.
<Resources>
<Replace>
<Graphics><Pictures>
<Picture Id="20061">
<File>background.jpg</File>
</Picture>
<Picture Id="442">
<File>colorbutton.png</File>
</Picture>
...
</Pictures></Graphics>
</Replace>
</Resources>
Pictures can generally be replaced by other pictures of any
other size and encoded in any other format. Of course, there are
some exceptions to this rule so make sure to always test and see
for yourself. Encrypted RLE pictures can generally be replaced with
non encrypted pictures, with the exception of multi-picture RLE
files. These files contain more than one picture, often used for
different states of a single element (like a button). Because
Messenger Plus! cannot re-encode pictures into the RLE format used
by Microsoft, you won't be able to touch these pictures. In some
cases, changing the style file of a window to use more than one
picture id will help achieve similar results though.
Some other pictures also use what's called meta-attributes (this
documentation will also refer to these as metadata). These special
attributes are not visible in definition or style files and are
binary coded into Messenger's own resources. This metadata can be
used for several things such as masks (extracted pictures of this
kind will be marked with resource type 4006) and background properties. Because the
original metadata recorded in Messenger for a picture may not match
the needs of your new file, remember to try replacing some of the
attributes (see below) if you experience problems with some
pictures. A good example of that can be found with some of the
pictures used in toolbar buttons: you'll need to reset the metadata
of these pictures by changing any attribute (like setting
<Colorize> to false) if you want your new picture to be displayed
properly.
Adding new Pictures
One of the special things Messenger Plus! allows you to do with
its skinning system is to add brand new resources to Messenger.
This means new pictures using new resource ids unknown by
Messenger's original files. These pictures are assigned the id of
your choice (between 59000 and
59999) and can be referenced in
definition and style files just like any other Messenger picture.
Here are the main advantages of this features:
- You're not limited by the original number of pictures
distributed with Messenger.
- No need to double check every window to make sure a resource
replaced in one place affects another place. For example, instead
of replacing the background picture used in the contact list window
and cause the same background to be used in many other windows, you
can add a new picture with a new id and change the contact list's
style file to use the different id.
- You can specify new metadata for your new pictures. This is
particularly useful if you want to use background pictures that are
supposed to stretch automatically in your new layout or if you want
to colorize them. This also prevents new backgrounds to look
strange because of Messenger's original metadata for a particular
picture id.
Adding a new picture is as easy as replacing one. Instead of
putting your XML data in <Replace>, you'll just have to use the
<New> element. In the following
example, picture.png is added to the
Messenger's picture resources with the new id of 59005.
<Resources>
<New>
<Pictures>
<Picture Id="59005">
<File>picture.png</File>
</Picture>
</Pictures>
</New>
</Resources>
In addition to the usual source element (here, <File>), a <Metadata> element can also be specified if
the picture is meant to be used as a background or be colorized.
Here is how it works: by default, any background has a static size
which is the size of the picture given in parameter. This means
that if the size of the window increases or decreases, the
background does not change: the picture is cut if the window is
smaller and it is repeated if the window is bigger. As you may have
already noticed, many backgrounds in Messenger stretch to follow
the size of a window. This is where meta-attributes come into play.
Here are the additional attributes you can specify for your
pictures (note that Messenger may ignore them depending on how you
declare your picture in your windows files) :
- Untouched Margin Metadata. If not specified,
backgrounds will be displayed in mosaics. Four elements are
available for this metadata: <UMLeft>, <UMTop>, <UMRight> and <UMBottom>. If at least one of these elements
is set to something else than 0, the
background will be stretched. The Untouched Margin
parameters allow you to specify the size of the margin that must
not be stretched. For example, if <UMLeft> is set to 3, the whole picture will be stretched except
for the first 3 pixels on the left side of the picture. This is
particularly useful when you want to add borders in your background
pictures.
-
Colorization Metadata. By
default, pictures are not colorized. This means that the picture
won't change depending on the user's chosen color. If you want to
emulate Messenger in your skin and have an adaptive background (a
picture that will be converted to grayscale and recolorized with
the user's color, if different than the default blue one), set
<Colorize> to true.
The Neko-Koneko Examples
Let's put all of this theory into practice. Thanks to the use of
new pictures, we're now able to refine the Test Skin
example to make sure only the logon screen is affected by our
modifications. Once again, this example assumes that you are using
Windows Live Messenger 8.5. To reach our goal, we need to do two
things:
- Specify a new picture with a new id for the background we want
to use.
- Modify the appropriate style sheet file to replace the
referenced old background with the new one.
Let's begin by adding the picture. This code is identical to
what you've seen above except that a meta-attribute has been added
so that the background gets colorized with the user's chosen color
(the original background used by Messenger already uses that same
attribute).
<New>
<Pictures>
<Picture Id="59000">
<File>cat1.png</File>
<Metadata>
<Colorize>true</Colorize>
</Metadata>
</Picture>
</Pictures>
</New>
If you were to create a skin with this resource data only,
nothing would change in Messenger as the picture id is not used by
any window file of Messenger (ids between 59000 and 59999 were
specifically chosen for that reason as Microsoft does not assign
anything in this range in Messenger). Let's change that: Go in the
Windows\Styles directory of your
extracted resources and
find the file called msgres_4005_947.txt. Why do we know this is the
file we want to modify? if you check in the Consolidated Windows directory, the 947
sub-directory is called 947
(logonFrame) and this hint can be confirmed by checking the
style file and searching for a known string appearing in the window
such as "Remember my password".
Open the file and search for the id of the background. In
Test Skin we've already established that in Messenger 8.5,
the picture used for this purpose is 20061. But don't take our word for it and see by
yourself in the Pictures subdirectory
of Consolidated Windows\947
(logonFrame). If you're trying to adapt this example to a
different version of Messenger, you won't have any choice but to
search for the id used in your own version.
Now that we know the id of the background, search for it in the
style file. The background is referenced in only one place:
...
Element[id=atom(mainwndcontainer)]
{
Background:rcbkd(20061);
}
...
Change 20061 for 59000 and save the file with a new name:
NekoLogonStyle.txt. A new directory
needs to be created for this example so the final destination of
the file should be something like Skins\Neko-Koneko Example\NekoLogonStyle.txt in
Messenger Plus!'s main directory.
The style of the mainwndcontainer element should now
look like this in your new style sheet file:
Element[id=atom(mainwndcontainer)]
{
Background:rcbkd(59000);
}
That's it for the style file. Pictures used in this example can
be found here, extract both
cat1.png and cat2.png in your skin's directory. You now have the
3 necessary resource files, all that's left to create is the
appropriate sinking. Create a new SkinInfo.xml file and copy this data into it to
finalize the skin:
<SkinInfo>
<Information>
<Name>Neko-Koneko 1</Name>
</Information>
<MessengerSkin><ResGroup>
<Restrictions>
<MsgVersions>
<Version Major="8" Minor="5"/>
</MsgVersions>
</Restrictions>
<Resources>
<New>
<Pictures>
<Picture Id="59000">
<File>cat1.png</File>
<Metadata>
<Colorize>true</Colorize>
</Metadata>
</Picture>
</Pictures>
</New>
<Replace>
<Windows><Styles>
<Style Id="947">
<File>NekoLogonStyle.txt</File>
</Style>
</Styles></Windows>
</Replace>
</Resources>
</ResGroup></MessengerSkin>
</SkinInfo>
With purple set as the user's chosen color, the
end-result should look like that:
|
|
What's been changed:
-
New background using a custom picture with a new
id. The background is specific only to the logon window and will be
automatically colorized with the user's color if needed.
-
The background is displayed in mosaics, the
picture is repeated both horizontally and vertically.
|
If the window appears all in black, check the following:
- Is there a cat1.png picture file in
your skin's directory?
- Did you modify the style file properly?
If you saw the cats in your logon screen, you successfully
created a skin with a new picture and a modified style file,
congratulations! As a final exercise, let's look at how a stretched
background would be implemented in the same way. For this example
we'll use the same style sheet file but with a new picture called
cat2.png. All you need to do is replace
the <New> block of your skininfo
file with the following one:
<New>
<Pictures>
<Picture Id="59000">
<File>cat2.png</File>
<Metadata>
<UMLeft>5</UMLeft>
<UMTop>5</UMTop>
<UMRight>5</UMRight>
<UMBottom>5</UMBottom>
</Metadata>
</Picture>
</Pictures>
</New>
As you can see, the Colorize element
has been removed so the background will keep its original colors,
disregarding the choice of the user. Untouched margins have been
added for 5 pixels on each sides. This allows our picture to
include a bluish border that won't stretch with the rest of the
picture. Here is the result of this modification:
|
|
What's been changed:
-
New background using a custom picture with a new
id. The background is specific only to the logon window and is
never colorized.
-
The background is stretched to keep the cat in
the lower right corner, proportionally to the rest of the window.
The blue border keeps its size on every side.
|
Tip: If you still fail to understand what the UM elements do in
this example, try changing one or two to 0 and it should become
clearer to you.
Doing More with Pictures
The subject of how to manipulate images properly in Messenger is
a rather big one and the goal of this documentation is only to
introduce you to the various elements of the Messenger interface.
You'll learn more by practicing and testing your ideas. Many things
can be done by playing with layouts, padding, alignment and child
elements. Check the files of Messenger, try to understand how
things work and do your best! remember that there are big
differences between static images (rcimg) and backgrounds (rcbkg) so always experiment with both. The most
interesting results can only be achieved with time, once you'll
have understood how to put all the pieces together.
Creating the best looking skin in the world means nothing if
there is no proper way to distribute it. Your last lesson awaits
you in Packaging Your Skin.
See Also
Skins Essentials, Packaging Your Skin.
| 
