Tarik: Protected "Modern Skin: Drawers" [edit=autoconfirmed:move=autoconfirmed]

2008-09-25T13:05:54Z

Protected "Modern Skin: Drawers" [edit=autoconfirmed:move=autoconfirmed]

Tarik: Unprotected "Modern Skin: Drawers"

2008-09-24T17:15:33Z

Unprotected "Modern Skin: Drawers"

Tarik: Protected "Modern Skin: Drawers": There seems to be a problem with your login session [edit=sysop:move=sysop]

2008-09-22T21:30:02Z

Protected "Modern Skin: Drawers": There seems to be a problem with your login session [edit=sysop:move=sysop]

Wahdahtahdammie at 19:37, 27 August 2008

2008-08-27T19:37:19Z

New page

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

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

[[Image: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                [[Image:Red-circle.png]]

triangle-clickme.png       [[Image:Triangle-clickme.png]]

==Define the Elements in the XML Code==

[[Image:Drawer xml1.png]]

==Define Layers using those Elements==

[[Image: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.

[[Image:Scripting trianglemaki1.png]]

[[Image:Scripting trianglemaki2.png]]

[[Image:Scripting trianglemaki3.png]]

[[Image:Scripting trianglemaki4.png]]

[[Image:Scripting trianglemaki5.png]]

[[Image:Scripting trianglemaki6.png]]

<nowiki>*</nowiki> Triangle.m MAKI file for Complex Tutorial Skin

[[Image:Scripting animmaki1.png]]

[[Image:Scripting animmaki2.png]]

[[Image:Scripting animmaki3.png]]

[[Image:Scripting animmaki4.png]]

[[Image:Scripting animmaki5.png]]

[[Image:Scripting animmaki6.png]]

<nowiki>*</nowiki> Anim.m MAKI file for Complex Tutorial Skin

← Older revision	Revision as of 13:05, 25 September 2008
(No difference)

← Older revision	Revision as of 17:15, 24 September 2008
(No difference)

← Older revision	Revision as of 21:30, 22 September 2008
(No difference)

Modern Skin: Drawers - Revision history

Tarik: Protected "Modern Skin: Drawers" [edit=autoconfirmed:move=autoconfirmed]

Tarik: Unprotected "Modern Skin: Drawers"

Tarik: Protected "Modern Skin: Drawers": There seems to be a problem with your login session [edit=sysop:move=sysop]

Wahdahtahdammie at 19:37, 27 August 2008