Difference between revisions of "Modern Skin: Alpha Channels"
m (Protected "Modern Skin: Alpha Channels" [edit=autoconfirmed:move=autoconfirmed]) |
Iseficibuw (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | Creating a Modern Skin -- | + | =[http://umuziny.co.cc Page Is Unavailable Due To Site Maintenance, Please Visit Reserve Copy 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]] | ||
Line 10: | Line 11: | ||
[[Image:Layer-notblend.png]] | [[Image:Layer-notblend.png]] | ||
− | + | <nowiki>*</nowiki> No transparency: images overlap. | |
Line 16: | Line 17: | ||
[[Image:Layer-blend.png]] | [[Image:Layer-blend.png]] | ||
− | + | <nowiki>*</nowiki> Some transparency: images blend. | |
Line 35: | Line 36: | ||
− | red-circle.png [[Image:Red-circle.png]] | + | red-circle.png &nbsp;&nbsp; [[Image:Red-circle.png]] |
− | triangle.png [[Image:Triangle.png]] | + | triangle.png &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[Image:Triangle.png]] |
Revision as of 07:24, 24 November 2010
Contents
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.
<nowiki>*</nowiki> No transparency: images overlap.
<nowiki>*</nowiki> 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
Define Layers Using those Elements
Place the Layers in the Same Area