Difference between revisions of "Modern Skin: Non-Rect Player"

From Winamp Developer Wiki
Jump to: navigation, search
m (Reverted edits by Iseficibuw (Talk) to last version by Tarik)
Line 1: Line 1:
=[http://ocavyle.co.cc UNDER COSTRUCTION, PLEASE SEE THIS POST IN RESERVE COPY]=
+
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]]
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 23: Line 22:
  
 
Everything from Simple Tutorial Modern Skin
 
Everything from Simple Tutorial Modern Skin
A second container: "complex"
+
A second container: "complex"
Within the "complex" container, a layout called "normal".
+
Within the "complex" container, a layout called "normal".
  
* Group #1: "complex.circle" - to illustrate Layer Composition (Section 3.2)
+
* Group #1: "complex.circle" - to illustrate Layer Composition (Section 3.2)
* Group #2: "complex.circle2" - to illustrate Alpha Channel (Section 3.3)
+
* 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 #3: "complex.circle3" - to illustrate Drawer (Section 3.6 and 4.1)
* Group #4: "complex.circle4" - to illustrate Animated Layer (Section 3.4)
+
* Group #4: "complex.circle4" - to illustrate Animated Layer (Section 3.4)
* Group #5: "complex.circle5" - to illustrate Animating Skin (Section 4.2)  
+
* 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.
 
Concepts such as container, layout and group were explained in Section 2. Please refer to them.
Line 42: Line 41:
  
  
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.
+
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.
  
  

Revision as of 04:32, 30 November 2010

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 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