Version 1.0
by geniusalz
For use with MXM Skinner 5.0+

This is a step by step guide to create an MXM skin with MXM Skinner. Just follow it through from beginning to end to make a skin.

This tutorial is aimed at new skinners with no experience. Experienced skinners will probably not have too much to gain from it, besides general tips on skinning.

Note: All steps marked with an asterisk (*) are optional. You can make a decent skin without that stuff.

Remember that making a decent skin takes some time, especially the first time you are skinning. However, once you get used to it, it is possible to whip up a decent skin in 10-15 minutes

Please wait for it to finish loading

+ Planning - Plan your skin Before you launch MXM Skinner

+ Tips - Things to keep in mind; think about these before you start skinning

- Find a suitable background image, or edit one yourself in your favorite image editing program.
- *Find a good animated (looping) background video

+ Layouts - Plan 'Layouts' a.k.a. screens (but we'll call them layouts) - It is a good idea to roughly draw each layout on paper. There are 4 layouts used currently in MXM. All are independent in terms of the elements (pictures, text, etc) they contain. Think about which ones you want to include:

+ *The 'Title' layout - this shows up when you start MXM. Good ideas for elements to put in there:

- Image - Intro video
- Text - Saying 'Loading skin now'

+ The 'Menu' layout - this is the main screen, and stays on while you are selecting games. Elements to put in there (you can add more elements if you want):

- Image - Your background picture/video
- Boxes and lines - To draw a sort of frame for your elements
- Game list (a.k.a. MXM Menu)
- Image - Preview videos (More on that later)
- *Text - Information you would like to display

+ *The 'Load' layout - this shows up when you launch a game.

- Text - 'Loading ...' or something.
- Image - Background picture

+ *The 'Saver' layout - this is a screensaver, and shows up after a period of inactivity. It is a good idea to leave the background blank in this screen, to prevent burn-ins

- Anything you put in here should be animated (bounce modifier recommended)

+ The 'FileManager' layout - not much is known about this, but it is rumored to be in the works. Currently, this layout will not do anything. Don't worry about it =)

- Coming whenever...

+ *The 'JukeBox' layout - see FileManager

- Coming whenever...

+ Creation - Creating the actual skin - Launch MXM Skinner for this step

+ Resource Setup

Note: This is a crucial part in creating your skin. It lets you allocate image resources (picture and video files) that your skin can use. You cannot use any pictures/videos (a.k.a. images) in your skin that you do not specify as resources. (However, you can add resources later as well)

+ Custom Resources - Add all your picture or video (image) files

- In MXM Skinner, click Configuration/Resource Manager (menu at the top)
- Click 'Custom (from file)' - This will let you select a file to add as a resource
- *Type a resource name (what you would like to call the image; NOT the filename)
- Click 'Browse' and select your resource file
- Click 'Add' at the bottom
- Repeat for all pictures/videos you want to use in your skin

+ Predefined Resources - Add a special type of resource, the PreviewMedia resource. This will show your preview videos in MXM

- Click 'Preset (In MXM)' in 'Resource Manager'
- Select 'PreviewMedia' from the listbox that shows up
- Click 'Add Resource'
- Repeat if you want other built-in resources (Select a resource form the listbox to see its description. All resources beginning with '::ICO' are icons built-in to MXM)

+ Skin Configuration - Skin Setup

- Click Configuration/Skin Info.
- Enter a skin name.
- * Enter other information, like author name (you), or anything else you want to write in there.

+ Colors Setup - Set System Menu Colors

- Click Configuration/System Colors
- Here you will see what the system menu and message boxes will look like. Generally, you want to pick a background color that is different from the general background color of your skin.
- Tip: You can set opacity of the background colors (it will not show in MXM Skinner, but it WILL show up in MXM). Generally it is a good idea to have the opacity greater than around 60. This creates a cool semitransparent effect over your skin.

+ Music Setup - Defining What Music Plays in Your Skin

- Click Configuration/Audio Settings
- Here, define what sort of music the user will hear in the dash.
- Currently, you can only add *.wma files to MXM (Check the 'Links' section at the end to learn how to convert your favorite format to wma)

+ Creating Elements - Making the Skin

- Select the Layout you want to draw the element in, from the option buttons on the right.

+ Create one of these Elements:

- Box - Select a border color and a background color and drag your mouse inside the big black box to draw. Tip: You can set opacity of the box (1 - 100). This will not show up in skinner, but in MXM the box will be semitransparent. Cool effect =
- Line - Select a color and draw
- Image/Video - Select a resource from the drop-down box and draw it. Note: All the resources added previously will be listed in the drop-down box. You can add more resources if you want
- Text - Select a color, and opacity (leave at 100 for good readability). Type in some text you want to display. If you want to display dynamic text (i.e. text that changes according to its value), select preset text from the list. E.g. Selecting 'CGTitle=' will make the textbox display the Current Game Title= while MXM is running
- Game List (MXM Menu) - This is the most customizable element. Change settings depending on how you want your game list to be displayed.

Repeat as necessary for all elements in all layouts

+ Saving - Save Your Skin

- Create an empty folder anywhere on your hard drive
- In Skinner, click Skin/Save and select the folder
- Read the instructions to complete your skin