Difference between revisions of "Modern Skin: Drawers"

From Winamp Developer Wiki
Jump to: navigation, search
m (Unprotected "Modern Skin: Drawers")
m (Protected "Modern Skin: Drawers" [edit=autoconfirmed:move=autoconfirmed])
 
(No difference)

Latest revision as of 14:05, 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


A Drawer is an animated layer that is normally hidden but can be shown when triggered by a user event (often a mouse click).


File:Flash3.png


Complex Tutorial Modern Skin


In Complex Tutorial, Group #3 shows a triangle that slides out when you click on it. This group demonstrates the concept of a drawer. We will go over the XML code in this section. The script explaination is covered in the next section. Here's the process.


Lets go through in detail how do to each step

Make the Graphics: Rotating Arrow

red-circle.png                File:Red-circle.png

triangle-clickme.png       File:Triangle-clickme.png



Define the Elements in the XML Code

File:Drawer xml1.png



Define Layers using those Elements

File:Drawer xml1.png



Making MAKI Script=

Two MAKI scripts function together to create the animations you see. Triangle.maki animates the sliding effect of the drawer. Anim.maki animates the moving arrow. We will go over the MAKI script for drawer in the next section.


File:Scripting trianglemaki1.png

File:Scripting trianglemaki2.png

File:Scripting trianglemaki3.png

File:Scripting trianglemaki4.png

File:Scripting trianglemaki5.png

File:Scripting trianglemaki6.png

* Triangle.m MAKI file for Complex Tutorial Skin


File:Scripting animmaki1.png

File:Scripting animmaki2.png

File:Scripting animmaki3.png

File:Scripting animmaki4.png

File:Scripting animmaki5.png

File:Scripting animmaki6.png

* Anim.m MAKI file for Complex Tutorial Skin