Modern Skin: Group

From Winamp Developer Wiki
Revision as of 15:11, 25 September 2008 by Tarik (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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


What is a Group?

A group is a set of objects that can be referred to and manipulated as a whole. First must defined by a <groupdef> tag, then located with a <group> tag. Group is an important concept to understand because a group is such a versatile object.


Simple Tutorial: Using groups

Let's go back to our "Simple Tutorial" example. As you recall, we have two groups defined: "player.normal.playbuttons" and "play.normal".


File:Simpleskin diag.png


Let's take a look at the code: (player.xml)

File:Playerxmlcode6.png


If we change line 113 and 114: change the x and y coordinates of the group objects, their positions are reversed. This is a simple change and much more convinient than changing the position of each element independently.


File:Simpleskin reversedxml.png

File:Simpleskin reversed.png


Simple Tutorial: Playback Buttons Group Definition

File:Playerxmlcode4.png


File:Playbackgroup.png


On lines 19-64 you'll see our group definition of the playback buttons. This section contains only the definition of the group or, in another words, it defines which objects are in the group. Once the group is defined, you can use it later as we will see later. Let's go over the elements inside the group.


File:Playbackexpl.png


Simple Tutorial: Song File Info & Visualization Group Definition

File:Playerxmlcode5.png


SongInfo group is another group definition just like the Playback Buttons group. As you can see that the elements defined inside this group is different from the previous one. In this example, we're using elements other than buttons. We're using the layer to set the background color of two areas. A layer is basically an image. Layers can overlay on top of each other. It is similar to a layer in Adobe Photoshop. "Songinfo" and "infoline" are text objects displaying information stored within Winamp3 runtime variables.


File:Songinfogroup.png