Difference between revisions of "Modern Skin: Alpha Channels"

From Winamp Developer Wiki
Jump to: navigation, search
m (Protected "Modern Skin: Alpha Channels": There seems to be a problem with your login session [edit=sysop:move=sysop])
m (Unprotected "Modern Skin: Alpha Channels")
(No difference)

Revision as of 18:15, 24 September 2008

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


Alpha channel controls the transparency value of an element. By adjusting the alpha value of an element, you can make the element totally transparent or not transparent at all. Winamp3 blends that element with the background image if the transparency of that element is increased.

Take a look at the two images below. Both images have a red rectangle layer on top of the Boxer skin. The red rectangle in the first image has no transparency: the result is an overlap of images. The second image uses alpha channel to create some transparency: the result is the blending of the red rectangle and the Boxer skin.


File:Layer-notblend.png

* No transparency: images overlap.


File:Layer-blend.png

* Some transparency: images blend.


Complex Tutorial


File:Complexskin diag alpha.png


In Complex Tutorial, Group #2 (the second circle from the left), has blue triangle blended with the red circle. This is done through Alpha Channel. Note that the graphical asset for this group is the same as the ones used to demonstrate Layer Composition. The only difference is that we adjusted the alpha value for the triangle in this section. Here's the process.


Lets go through in detail how do to each step:

Make the Graphics: The Red Circle and Blue Triangle

red-circle.png    File:Red-circle.png

triangle.png       File:Triangle.png



Define the Elements in the XML Code

File:Layercomp xml.png



Define Layers Using those Elements

File:Alpha xml1.png

File:Alpha xml2.png



Place the Layers in the Same Area

File:Alpha xml3.png



Change the Alpha Value for the Triangle

File:Alpha xml4.png