Difference between revisions of "Modern Skin: Group"
m (Unprotected "Modern Skin: Group")
m (Protected "Modern Skin: Group" [edit=autoconfirmed:move=autoconfirmed])
Latest revision as of 13:11, 25 September 2008
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".
Let's take a look at the code: (player.xml)
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.
Simple Tutorial: Playback Buttons Group Definition
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.
Simple Tutorial: Song File Info & Visualization Group Definition
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.