Modern Skin: Layer Composition

From Winamp Developer Wiki

Creating a Modern Skin --> Intro --> Winamp 2 to Winamp 3+ --> Simple Skin Tutorial --> XML Intro --> Simple Skin Tutorial (Continued) --> Container --> Group --> Relative Positioning --> Complex Skin --> Non-Rect Player --> Layer Composition --> Alpha Channels --> Animatedlayer --> Snap Points --> Drawers --> Skin Scripting --> Drawer Scripting --> Animating a Skin --> Maki Overview --> Glossary

Layer composition is the process by which several images lay on top of each other to produce a complex graphical visualization. It is similar to layers in Photoshop.

The process is:

1. produce the images and save them in a file
2. define an element to represent that image in your XML
3. make a layer using that element
4. if you put layers in same area, they will lay on top of each other based on the ordering of the xml code.

Complex Tutorial

In Complex Tutorial, Group #1 (the first circle from the left), has blue triangle on top of the red circle. This is done through layer composition. Here's the process.

• Make the graphics: the red circle and blue triangle.
• Define the elements in the XML code.
• Define layers using those elements.
• Place the layers in the same area.

---

Lets go through in detail how do to each step:

Contents 1 Make the graphics: The Red Circle and Blue Triangle. 2 Define the Elements in the XML Code 3 Define Layers Using those Elements 4 Place the Layers in the Same Area

Make the graphics: The Red Circle and Blue Triangle.

red-circle.png   

triangle.png      

Define the Elements in the XML Code

Define Layers Using those Elements

Place the Layers in the Same Area