Modern Skin: Alpha Channels
From Winamp Developer Wiki
m |
Current revision (10:45, 17 October 2011) (view source) m (Reverted edits by Mahfujalubna (Talk) to last version by Culix) |
||
| Line 26: | Line 26: | ||
| - | 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 | + | 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. |
| Line 57: | Line 57: | ||
[[Image:Alpha xml2.png]] | [[Image:Alpha xml2.png]] | ||
| - | + | ||
Current revision
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.
* No transparency: images overlap.
* Some transparency: images blend.
Complex Tutorial
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:
Contents |
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
Change the Alpha Value for the Triangle
