Modern Skin: Non-Rect Player

From Winamp Developer Wiki
Jump to: navigation, search

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


Introduction

Modern Winamp skins bring forth unprecedented flexibility and power to skinning. You are no longer confined to simple rectangular shapes; in fact any shape is possible. Just take a look at these awesome examples. In addition, Winamp3 has been revamped so that any part of the user interface is skinnable.

You should notice that while the shapes are different, the X and Y coordinate system still applies. The (0,0) coordiante starts at the upper-left corner. The x-coordinate increases at you move to the right and the y-coordinate increases link building service as you move down.

While the shape of the image can be anything you want, the image itself remains in rectangular form. What happens is that the back ground of the image is transparent; therefore all you see is the shape that you intend to show. To produce the complex designs that you see below, you must overlay many images on top of the each other. To do this, you must use layers. Layer composition is covered in the next section.


File:Non-rect mad.png


File:Non-rect boxer.png


Complex Tutorial Modern Skin - The Break Down

Complex Tutorial Skin is composed of these parts:

Everything from Simple Tutorial Modern Skin A second container: "complex" Within the "complex" container, a layout called "normal".

  • Group #1: "complex.circle" - to illustrate Layer Composition (Section 3.2)
  • Group #2: "complex.circle2" - to illustrate Alpha Channel (Section 3.3)
  • Group #3: "complex.circle3" - to illustrate Drawer (Section 3.6 and 4.1)
  • Group #4: "complex.circle4" - to illustrate Animated Layer (Section 3.4)
  • Group #5: "complex.circle5" - to illustrate Animating Skin (Section 4.2)

Concepts such as container, layout and group were explained in Section 2. Please refer to them.


File:Complexskin diag.png


Player.XML - Part 1: SimpleTutorialXML.xml

When you open player.xml file for the "Complex Tutorial" skin, you noticed that it has been changed from the one from "Simple Tutorial" skin. We have made changes to it to illustrate new concepts for this section. Part one of the file (line 1-7) gives a brief description of the file and tells you that the components from Simple Tutorial has been moved into a different file: SimpleTutorialXML.xml. We used an <include > tag to incorporate all of the Simple Tutorial's functionalities into our current skin.


File:Complex playerxml 1.png



Player.XML - Part 2: Graphic Elements

File:Triangle-clickme.png File:Blue-vis-layer.png File:Yellowcircle-arrow.png File:Background.png

File:Blue-circle.png File:Red-circle.png File:Triangle.png File:Numfont1.png


This are the graphics that I've used in creating complex Tutorial skin. One thing to notice is that we like to use PNG file format. Please also use that format too. The graphics files are the parts that we're going to use for our skin. The following are XML code linking graphics to elements. Element definition was covered in last section.


File:Complex playerxml 2.png