How to customize skin.xml

We realize that this may prove to be a little challenging at times and we thought it might be a good idea to write a few tutorials on how to skin some components. Mind you, even if this particular article is focused on the Image Zoomer, you will be able to apply the principles you learn here to most of the other components.

For the purpose of this tutorial we will be using an already created design, the one that is on the first demo of the Image Zoomer.

Step 1 – Understanding the grid

The whole idea behind our skinning system is a specially made grid that maps out the surface of the stage. It is composed of 9 equally large areas, each of them with a width and height equal to ? of the stage’s width and height. Each of these areas is called a cell and is divided into 9 even smaller areas. Take a look at the following picture to get a visual representation.

A visual representation of the grid system


The 9 large areas are named in accordance with their position relative to the stage. For example, the first of these is in the top left corner. The position is Top Left, which we have further abbreviated to TL. The 8th one (counting from left to right, up down) is in the Bottom Center of the stage, therefore BC. As you can see, the first letter represents the line in which the cell is placed (which can be Top, Center or Bottom) and the second one stands for the column in which the cell is situated (and can vary between Left, Center and Right).

As you can see, the same principle applies to the smaller areas.

Step 2 – Placing the elements

Now that we have understood how the grid behind the skin works, you might think that you might want to have more control over the positioning of the elements. If you will open your skin.xml file, you will notice that you have some more attributes when declaring a group of elements. A group of elements usually contains similar buttons, or buttons that you want to always keep together.

A group of buttons

After declaring a group, you must then specify a grid position (via the gridPosition attribute). Please take a look at the following example to better understand how this works.

How to use the gridPosition attribute


With that part completed, you then need to position the group of buttons inside the big cell that you selected previously. This should follow the same approach as before, as the grid acts the same for smaller cells as well. You might also find the following image useful during this process.

How to use the cellPosition attribute


After these 2 attributes, you can select an orientation for that specific group. If the buttons you want to position are “left” and “right”, then the orientation should be “horizontal” (as this is how most people would expect to see these kind of buttons aligned). If you would want to position the “up” and “down” buttons(or in the case of the zoomIn and zoomOut buttons, as seen in the pictures bellow), then orientation should be “vertical” (again, because most people would expect this kind of layout).

Orientation & Spacing attributes


The spacing attribute, as seen above, controls the amount of space between elements of the same group. So, for example, if you set spacing=”15” in the group that controls the left and right buttons, the component would leave a 15 pixel gap between the buttons, as you can see in the picture above.

As for the last two parameters available, paddingH and paddingV control the offset (in pixels) of the group they are defined in. This offset is relative to the gridPosition and cellPosition set previously and can be both negative and positive.

Using the paddingH and paddingH attributes

Types of buttons

You will notice that each button has several states inside. These are usually “out”, “over” and “down”. This means that you can put a different image for each state of the button.
out – the button looks like this when there is no interaction with it
over – starts when the user rolls their mouse over the button and ends when the mouse leaves the button.
down – activated when the user clicks on the mouse

You need to keep in mind that not all the buttons are the same. Some are named “button”, others “holdButton” and there are certain structures like “doubleButton”.

We will go into more detail regarding these types of buttons now.

The button is just that, nothing out of the ordinary.

The 3 states available for a button


A holdButton is a button you can click and hold, and its effect gets multiplied (for example, if you click and hold the “left” button, the image will continually scroll to the left, until the end of the stage).

The principles involved in the functioning of a hold button


A doubleButton is a button that, once clicked, changes to another button completely, with a different functionality. Think of a “play/pause” button. When you click on “play”, a song/movie starts playing and the button changes to “pause”. When you click that, the song/movie pauses – different action from the previous one.

The cycle of states that each double button passes through


That about covers what the Image Zoomer uses in terms of skins.


Sameer sharma

Posted 2 years ago

Can you help me in i want to know how to get robux for free ways which matters a lot.


Posted 6 years ago

I built my wordpress using the lezara theme. I would like to remove the search box at the top of the page and center and enlarge my logo at the top. I havent been able to do so. Could you please assist me in doing so?

Thanks Robert

FlashXML Support

No sorry. We don’t offer custom work.

Jeff Newman

Posted 7 years ago

in the 360 product viewer, there are buttons for “left right front back”. how do I specify which image (i’m using 16 images) should be used for those buttons? right now, it looks like it assumes the first image loaded is the left, then does some math to figure out the others, but this isn’t exact (it’s picking the wrong images for the other 3).


FlashXML Support

You don’t have to specify anything. Everything it’s automatically. The last image from the images.xml file is the front and the middle image is the back.


Posted 7 years ago

Hi – I’m wondering if it’s possible to increase the overall size of the entire player? I figured out how to increase the size of the video – but then, of course, it goes beyond the bounds of the player itself…



FlashXML Support

You have to increase the width and height in the settings.xml file and in the embedding code that you added to your website.

Do you have a question?

you will get an answer in 24 hours, tops.

(required) Only alphanumeric characters allowed
(required) (will not be published)
Please type a message! Your message is too long! Either try to keep within 1500 characters, or contact our support team via email at support [at]
(will not be published)
You mistyped the two words!
Can't read? Change the image
Format your comments using Textile: *bold*, _italic_, "link text":address, @code@
Connect to us on Facebook Follow us on Twitter Subscribe to our RSS feed
Copyright © 2009 - 2020