Modern Skin: Drawer Scripting - Revision history

Culix: Reverted edits by Iseficibuw (Talk) to last version by Tarik

2010-11-30T03:32:40Z

Reverted edits by Iseficibuw (Talk) to last version by Tarik

Iseficibuw at 07:19, 24 November 2010

2010-11-24T07:19:08Z

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

2008-09-25T12:59:32Z

Protected "Modern Skin: Drawer Scripting" [edit=autoconfirmed:move=autoconfirmed]

Tarik: Unprotected "Modern Skin: Drawer Scripting"

2008-09-24T17:15:46Z

Unprotected "Modern Skin: Drawer Scripting"

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

2008-09-22T21:30:24Z

Protected "Modern Skin: Drawer Scripting": 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:42Z

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

==What is a MAKI Script?==

What is MAKI? MAKI stands for Make A Killer Interface. It is the scripting language for modern Winamp skins. Scripting is used to produce the animations you see in the skin. Scripting is simple. It's easy! Anyone can do it! You'll love it.... Trust me.

==So how does a MAKI script work?==

MAKI scripts are event based. In other word, your functions are used to define behaviors when an event occurs. If you don't define action for that event, the default behavior will be used and the default behavior is defined by Winamp. Scripts are used to override an existing behavior. For example, when you click on the PL button, the playlist container appears. You can override that functionality so that the Media Library also appears. (However, we don't recommend you to do this)

==What about elements I define in my own skins?==

When you define new elements in your skin such as new buttons or sliders (elements that is not in the Default skin), essentially what you're doing is creating new objects. The behavior for that object is nothing.... nada until you specify an action in you XML or in your scripts.

The script to implement the animation you see below is short and simple. But it demonstrates the power of modern skins: with little programming, you can add functionalities to your skin or user interface. For more about MAKI, please read MAKI Overview.

[[Image:Flash3.png]]

==Compiling a MAKI script==

[[Image:Scripting dir.png]]

Here are the basic concepts that you should know before starting.

===Directory hierarchy===

All your scripts for your skin should be together in a subdirectory. Usually that subdirectory is called "scripts". In terms of hierarchy, that subdirectory is placed under your skin directory. In our example, "scripts" subdirectory is under the "ComplexTutorial" skin directory.

===.m and .maki files===

A sourcecode file is a text file that you can read and understand with a text program like Notepad or Editplus. The sourcecode file for your script has the .m extension. A compiled file is the result after being compiled by the compiler. It has been optimized (therefore unreadable for you) for the computer to run. The compiled script has the .maki extension.

===Compiling a MAKI file===

To compile a MAKI scripting, you must use the MAKI Compiler (mc.exe) in your Winamp directory. It is located in the same directory as your Winamp player. Chances are that it is located in "C:\Program Files\Winamp\Studio.exe" directory.

#Open a DOS Prompt: "Start Menu" => "Run..." => type "command"
#Change path to script directory for your skin. For this example, the path is "C:\Program Files\Winamp\Skins\ComplexTutorial\Scripts"
#Run mc.exe on your script. Because mc.exe is not located in the same directory as your script, you need to type "..\..\..\mc" in order to run it. For our example, it is "..\..\..\mc triangle.m" to compile triangle.m into triangle.maki.

You can set an environment variable to your Winamp directory so you don't have to type "..\..\..\" to access mc.exe. You can just type "mc triangle.m" instead. (To set an environment variable: Right on "My Computer" => "Advanced" tab => Environment Variables.)

[[Image:Scripting dos.png]]

==MAKI Script - triangle.m==

The drawer animation is done through MAKI Scripting. The script is short and simple but it demonstrates the power of modern skins: with little programming, you can add functionalities to your skin or user interface. In your XML, you need to specify which MAKI script you want to use.

[[Image:Scripting drawerxml.png]]

Lets break down the script:

===Introduction Comments:===

The first part of the script should be a brief introduction to the script. It should talk about the purpose and the functionality of the script.

[[Image:Scripting trianglemaki1.png]]

===#include Section:===

The second part is the #include section. Use "#include" to include any file you need. If you need to call or use another function that is defined in another file, make sure you include that file in your script.

[[Image:Scripting trianglemaki2.png]]

===Variable Declaration Section===

Any variable that you'll use in your script, declare them in this section.

[[Image:Scripting trianglemaki3.png]]

===System.onScriptUnloading() Section===

When the script is unloaded, this part of the script will run. Typically, you do your clean up in this section. Our triangle script is simple and therefore doesn't need anything in this section.

[[Image:Scripting trianglemaki4.png]]

===System.onScriptLoaded() Section===

When the script is first loaded, this part of the script will run. Typically, if anything you want to make happen when the script first start, you do that here. In our example, we initialized some objects and set the initial state for those objects. Just like the previous section, it is perfectly fine to leave this section empty. If you do that, nothing will happen when the script is loaded.

[[Image:Scripting trianglemaki5.png]]

===Your own functions===

This section is where you put all your own functions that will define the behavior of your script. Make sure that any variable you use in this function is decared and their initial state has been initialized. For our example, we have two functions.

*button_triangle.onleftbuttonup(int x,int y) function

This function responds to the event when the triangle button is pressed. The triangle buttons has two states: open or closed. Depending on the current state, its position is changed so that it is moved.

*button_triangle.ontargetreached() function

This function responds to the event when the triangle has reached its destination. What event occurs, the state of the button is changed to its new state.

[[Image:Scripting trianglemaki6.png]]

@@ Line 1: / Line 1: @@
-=[http://erihybomex.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 --&gt; [[Modern Skin: Intro|Intro]] --&gt; [[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]] --&gt; [[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]] --&gt; [[Modern Skin: XML Intro|XML Intro]] --&gt; [[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]] --&gt; [[Modern Skin: Container| Container]] --&gt; [[Modern Skin: Group|Group]] --&gt; [[Modern Skin: Relative Positioning| Relative Positioning]] --&gt; [[Modern Skin: Complex Skin|Complex Skin]] --&gt; [[Modern Skin: Non-Rect Player| Non-Rect Player]] --&gt; [[Modern Skin: Layer Composition| Layer Composition]] --&gt; [[Modern Skin: Alpha Channels| Alpha Channels]] --&gt; [[Modern Skin: Animatedlayer|Animatedlayer]] --&gt; [[Modern Skin: Snap Points|Snap Points]] --&gt; [[Modern Skin: Drawers|Drawers]] --&gt; [[Modern Skin: Skin Scripting| Skin Scripting]] --&gt; [[Modern Skin: Drawer Scripting| Drawer Scripting]] --&gt; [[Modern Skin: Animating a Skin|Animating a Skin]] --&gt; [[Modern Skin: Maki Overview| Maki Overview]] --&gt; [[Main_Page#Glossary_of_Terms|Glossary]]
@@ Line 36: / Line 35: @@
-All your scripts for your skin should be together in a subdirectory. Usually that subdirectory is called &quot;scripts&quot;. In terms of hierarchy, that subdirectory is placed under your skin directory. In our example, &quot;scripts&quot; subdirectory is under the &quot;ComplexTutorial&quot; skin directory.
+All your scripts for your skin should be together in a subdirectory. Usually that subdirectory is called "scripts". In terms of hierarchy, that subdirectory is placed under your skin directory. In our example, "scripts" subdirectory is under the "ComplexTutorial" skin directory.
@@ Line 48: / Line 47: @@
-To compile a MAKI scripting, you must use the MAKI Compiler (mc.exe) in your Winamp directory. It is located in the same directory as your Winamp player. Chances are that it is located in &quot;C:\Program Files\Winamp\Studio.exe&quot; directory.
+To compile a MAKI scripting, you must use the MAKI Compiler (mc.exe) in your Winamp directory. It is located in the same directory as your Winamp player. Chances are that it is located in "C:\Program Files\Winamp\Studio.exe" directory.
-#Open a DOS Prompt: &quot;Start Menu&quot; =&gt; &quot;Run...&quot; =&gt; type &quot;command&quot;
+#Open a DOS Prompt: "Start Menu" => "Run..." => type "command"
-#Change path to script directory for your skin. For this example, the path is &quot;C:\Program Files\Winamp\Skins\ComplexTutorial\Scripts&quot;
+#Change path to script directory for your skin. For this example, the path is "C:\Program Files\Winamp\Skins\ComplexTutorial\Scripts"
-#Run mc.exe on your script. Because mc.exe is not located in the same directory as your script, you need to type &quot;..\..\..\mc&quot; in order to run it. For our example, it is &quot;..\..\..\mc triangle.m&quot; to compile triangle.m into triangle.maki.
+#Run mc.exe on your script. Because mc.exe is not located in the same directory as your script, you need to type "..\..\..\mc" in order to run it. For our example, it is "..\..\..\mc triangle.m" to compile triangle.m into triangle.maki.
-You can set an environment variable to your Winamp directory so you don't have to type &quot;..\..\..\&quot; to access mc.exe. You can just type &quot;mc triangle.m&quot; instead. (To set an environment variable: Right on &quot;My Computer&quot; =&gt; &quot;Advanced&quot; tab =&gt; Environment Variables.)
+You can set an environment variable to your Winamp directory so you don't have to type "..\..\..\" to access mc.exe. You can just type "mc triangle.m" instead. (To set an environment variable: Right on "My Computer" => "Advanced" tab => Environment Variables.)
@@ Line 82: / Line 81: @@
-The second part is the #include section. Use &quot;#include&quot; to include any file you need. If you need to call or use another function that is defined in another file, make sure you include that file in your script.
+The second part is the #include section. Use "#include" to include any file you need. If you need to call or use another function that is defined in another file, make sure you include that file in your script.

@@ Line 1: / Line 1: @@
-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]]
+=[http://erihybomex.co.cc UNDER COSTRUCTION, PLEASE SEE THIS POST IN RESERVE COPY]=
@@ Line 35: / Line 36: @@
-All your scripts for your skin should be together in a subdirectory. Usually that subdirectory is called "scripts". In terms of hierarchy, that subdirectory is placed under your skin directory. In our example, "scripts" subdirectory is under the "ComplexTutorial" skin directory.
+All your scripts for your skin should be together in a subdirectory. Usually that subdirectory is called &quot;scripts&quot;. In terms of hierarchy, that subdirectory is placed under your skin directory. In our example, &quot;scripts&quot; subdirectory is under the &quot;ComplexTutorial&quot; skin directory.
@@ Line 47: / Line 48: @@
-To compile a MAKI scripting, you must use the MAKI Compiler (mc.exe) in your Winamp directory. It is located in the same directory as your Winamp player. Chances are that it is located in "C:\Program Files\Winamp\Studio.exe" directory.
+To compile a MAKI scripting, you must use the MAKI Compiler (mc.exe) in your Winamp directory. It is located in the same directory as your Winamp player. Chances are that it is located in &quot;C:\Program Files\Winamp\Studio.exe&quot; directory.
-#Open a DOS Prompt: "Start Menu" => "Run..." => type "command"
+#Open a DOS Prompt: &quot;Start Menu&quot; =&gt; &quot;Run...&quot; =&gt; type &quot;command&quot;
-#Change path to script directory for your skin. For this example, the path is "C:\Program Files\Winamp\Skins\ComplexTutorial\Scripts"
+#Change path to script directory for your skin. For this example, the path is &quot;C:\Program Files\Winamp\Skins\ComplexTutorial\Scripts&quot;
-#Run mc.exe on your script. Because mc.exe is not located in the same directory as your script, you need to type "..\..\..\mc" in order to run it. For our example, it is "..\..\..\mc triangle.m" to compile triangle.m into triangle.maki.
+#Run mc.exe on your script. Because mc.exe is not located in the same directory as your script, you need to type &quot;..\..\..\mc&quot; in order to run it. For our example, it is &quot;..\..\..\mc triangle.m&quot; to compile triangle.m into triangle.maki.
-You can set an environment variable to your Winamp directory so you don't have to type "..\..\..\" to access mc.exe. You can just type "mc triangle.m" instead. (To set an environment variable: Right on "My Computer" => "Advanced" tab => Environment Variables.)
+You can set an environment variable to your Winamp directory so you don't have to type &quot;..\..\..\&quot; to access mc.exe. You can just type &quot;mc triangle.m&quot; instead. (To set an environment variable: Right on &quot;My Computer&quot; =&gt; &quot;Advanced&quot; tab =&gt; Environment Variables.)
@@ Line 81: / Line 82: @@
-The second part is the #include section. Use "#include" to include any file you need. If you need to call or use another function that is defined in another file, make sure you include that file in your script.
+The second part is the #include section. Use &quot;#include&quot; to include any file you need. If you need to call or use another function that is defined in another file, make sure you include that file in your script.

← Older revision	Revision as of 12:59, 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)