Tarik: Protected "Modern Skin: Layer Composition" [edit=autoconfirmed:move=autoconfirmed]

2008-09-25T13:06:09Z

Protected "Modern Skin: Layer Composition" [edit=autoconfirmed:move=autoconfirmed]

Tarik: Unprotected "Modern Skin: Layer Composition"

2008-09-24T17:14:59Z

Unprotected "Modern Skin: Layer Composition"

Tarik: Protected "Modern Skin: Layer Composition": There seems to be a problem with your login session [edit=sysop:move=sysop]

2008-09-22T21:29:13Z

Protected "Modern Skin: Layer Composition": There seems to be a problem with your login session [edit=sysop:move=sysop]

Wahdahtahdammie at 19:36, 27 August 2008

2008-08-27T19:36:29Z

New page

Creating a Modern Skin --> [[Modern Skin: Intro|Intro]] --> [[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]] --> [[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]] --> [[Modern Skin: XML Intro|XML Intro]] --> [[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]] --> [[Modern Skin: Container| Container]] --> [[Modern Skin: Group|Group]] --> [[Modern Skin: Relative Positioning| Relative Positioning]] --> [[Modern Skin: Complex Skin|Complex Skin]] --> [[Modern Skin: Non-Rect Player| Non-Rect Player]] --> [[Modern Skin: Layer Composition| Layer Composition]] --> [[Modern Skin: Alpha Channels| Alpha Channels]] --> [[Modern Skin: Animatedlayer|Animatedlayer]] --> [[Modern Skin: Snap Points|Snap Points]] --> [[Modern Skin: Drawers|Drawers]] --> [[Modern Skin: Skin Scripting| Skin Scripting]] --> [[Modern Skin: Drawer Scripting| Drawer Scripting]] --> [[Modern Skin: Animating a Skin|Animating a Skin]] --> [[Modern Skin: Maki Overview| Maki Overview]] --> [[Main_Page#Glossary_of_Terms|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:

#produce the images and save them in a file
#define an element to represent that image in your XML
#make a layer using that element
#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'''

[[Image:Complexskin diag layercomp.png]]

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:

==Make the graphics: The Red Circle and Blue Triangle.==

red-circle.png    [[Image:Red-circle.png]]

triangle.png       [[Image:Triangle.png]]

==Define the Elements in the XML Code==

[[Image:Layercomp xml.png]]

==Define Layers Using those Elements==

[[Image:Layercomp xml2.png]]

[[Image:Layercomp xml3.png]]

==Place the Layers in the Same Area==

[[Image:Layercomp xml4.png]]

← Older revision	Revision as of 13:06, 25 September 2008
(No difference)

← Older revision	Revision as of 17:14, 24 September 2008
(No difference)

← Older revision	Revision as of 21:29, 22 September 2008
(No difference)

Modern Skin: Layer Composition - Revision history

Tarik: Protected "Modern Skin: Layer Composition" [edit=autoconfirmed:move=autoconfirmed]

Tarik: Unprotected "Modern Skin: Layer Composition"

Tarik: Protected "Modern Skin: Layer Composition": There seems to be a problem with your login session [edit=sysop:move=sysop]

Wahdahtahdammie at 19:36, 27 August 2008