Prev Previous Post   Next Post Next
Old 16th December 2002, 00:17   #1
iPlayTheSpoons
Major Dude
 
iPlayTheSpoons's Avatar
 
Join Date: Aug 2001
Location: SJSU
Posts: 1,030
Send a message via AIM to iPlayTheSpoons
How to Write a MAKI Script

How to write a MAKI script:

ive seen alot of new skinners comming into the forums asking about maki. most of the time they are just refered to std.mi. the problem is that unless you know something about programming, it wont get you very far. this will serve as a crash course of sorts through maki programming, and will help you get from a blank page to a fully compiled script...hopefully. so lets begin

im going to use a script i wrote myself. its pretty simple and should be easy enough to follow. here it is in full:
code:

//----------------------------------------------------------------------------------------------------------------
// wingsanim.m
//
// controls animation between layouts
// be warned...i accedentally messed this script up after compiling, so as is it actually
// wont compile as is cuz i dont feel like looking for why it wont
//
// help by FrisbeeMonkey
//
//----------------------------------------------------------------------------------------------------------------

#include "../../../lib/std.mi"

Global AnimatedLayer WingAnim;
Global Group AnimGroup, RetractGroup1, RetractGroup2;
Global Button Button1, Button2;
Global Layout NormalLayout, ClosedLayout, AnimationLayout;
Global Container MainContainer;
Global Int a;


System.onScriptLoaded() {

MainContainer = getContainer("main");
Layout NormalLayout = MainContainer.getLayout("normal");
Layout ClosedLayout = MainContainer.getLayout("closed");
Layout AnimationLayout = MainContainer.getLayout("animation");

AnimGroup = AnimationLayout.getObject("anim");
WingAnim = AnimGroup.getObject("wingsanim");
RetractGroup1 = NormalLayout.getObject("retract");
Button1 = RetractGroup1.getObject("ret");
RetractGroup2 = ClosedLayout.getObject("retract2");
Button2 = RetractGroup2.getObject("ret");

WingAnim.setSpeed(65);
a = 0;

}

WingAnim.onStop(){
if(a == 1){
MainContainer.switchToLayout("closed");
}
else if(a == 0){
MainContainer.switchToLayout("normal");
}
}

Button1.onLeftButtonUp(int x, int y) {
a = 1;
WingAnim.setStartFrame(1);
WingAnim.setEndFrame(8);
MainContainer.switchToLayout("animation");
WingAnim.play();
}
Button2.onLeftButtonUp(int x, int y) {
a = 0;
WingAnim.setStartFrame(8);
WingAnim.setEndFrame(1);
MainContainer.switchToLayout("animation");
WingAnim.play();
}



not too complicated, but can be a little intimidating. so lets break it up
code:

//----------------------------------------------------------------------------------------------------------------
// wingsanim.m
//
// controls animation between layouts
// be warned...i accedentally messed this script up after compiling, so as is it actually
// wont compile as is cuz i dont feel like looking for why it wont
//
// help by FrisbeeMonkey
//
//----------------------------------------------------------------------------------------------------------------



this is not required to make your script work, but its nice. just a little intro and credits to your skin. what it does and who made it.
code:

#include "../../../lib/std.mi"


never forget this. it tell the script to look for all the commands youre going to tell it later. make sure it looks just like that and is at the top of your page.
code:

Global AnimatedLayer WingAnim;
Global Group AnimGroup, RetractGroup1, RetractGroup2;
Global Button Button1, Button2;
Global Layout NormalLayout, ClosedLayout, AnimationLayout;
Global Container MainContainer;
Global Int a;


in the Globals area we define any variables we use or items we refrence. if you have a button that will, lets say, increase the volume, you should first put it in your xml (im going to asume you know xml for this), and then have something like "Global Button -yourbutton-". what goes in the -yourbutton- spot is up to you, just make sure you remember it for the next part. there are many kinds of Globals, as you can see here. to know which one to use, just look at youre xml. if it looks like this:
code:

x="2" y="2"
w="335" h="403"
id="wingsanim"
image="winganim"
move="0"
autoplay="0"
autoreplay="0"
sysregion="1"
ghost="1"
/>


then you want a Global AnimatedLayer (notice the first part of the xml is the type of Global).
code:

System.onScriptLoaded() {

MainContainer = getContainer("main");
Layout NormalLayout = MainContainer.getLayout("normal");
Layout ClosedLayout = MainContainer.getLayout("closed");
Layout AnimationLayout = MainContainer.getLayout("animation");

AnimGroup = AnimationLayout.getObject("anim");
WingAnim = AnimGroup.getObject("wingsanim");
RetractGroup1 = NormalLayout.getObject("retract");
Button1 = RetractGroup1.getObject("ret");
RetractGroup2 = ClosedLayout.getObject("retract2");
Button2 = RetractGroup2.getObject("ret");

WingAnim.setSpeed(65);
a = 0;

}


this is the stuff that happens the moment winamp loads your script, and doesnt need to be triggered. 'System.onScriptLoaded() {' tells the program this is the stuff to do as i just described it, and you dont need to change it. ok, this can get a little complicated, so ill be as clear as i can. things like 'MainContainer = getContainer("main");' is where you define all the different parts of youre skin, as they appear in your xml. you need to define anything your skin needs to work (buttons, sliders, layers) as well as the continers, layouts, and groups they are in. in this example, everything is in the main container, so its the only one i have. there are three layout that come into play, so they are defined. they are in the main continer, so you get 'Layout NormalLayout = MainContainer.getLayout("normal"); '. only Layouts require 'Layout' at the begining of the line like that. 'MainContainer.' tells you the layout is in the main container, and its called 'normal' in my xml, so thats how its refenced here. get it?

alright, if youve used Scythe, this will be a little easier. i have two usable layouts, one will the wings opened, the other with them closed, and a third layout which is just the animation. in the three layouts i have ine item i refer to: the buttons in each layout to trigger the animation and the animtion itsself. the reason there are six items defined is that these things all fall into groups, which you have to define as well. if you read this then just stare at the code for a while, you should get it.

last i set the animation speed (just another command you can find in std.mi) and a varible int a = 0. thats pretty much that...just remember the closing bracket!
code:

WingAnim.onStop(){
if(a == 1){
MainContainer.switchToLayout("closed");
}
else if(a == 0){
MainContainer.switchToLayout("normal");
}
}

Button1.onLeftButtonUp(int x, int y) {
a = 1;
WingAnim.setStartFrame(1);
WingAnim.setEndFrame(8);
MainContainer.switchToLayout("animation");
WingAnim.play();
}
Button2.onLeftButtonUp(int x, int y) {
a = 0;
WingAnim.setStartFrame(8);
WingAnim.setEndFrame(1);
MainContainer.switchToLayout("animation");
WingAnim.play();
}



this is the real stuff right here. this is where button clicking and the like does what it does. tis is actually the easiest part once you know what going on. i will assume you have NO IDEA how to program.
code:

WingAnim.onStop(){
if(a == 1){
MainContainer.switchToLayout("closed");
}
else if(a == 0){
MainContainer.switchToLayout("normal");
}
}


this tells winamp that when WingAnim (which was defined earlier) stops, it should perform the action that follows. if a==1, it will switch to the closed layout. if a==0, it will switch to the normal layout. how does it know what a is? thats in the next little bit. 'if' and 'else if' are classic programming commands, and are pretty easy to figure out how to use. make sure you have double equal (==) in an if statement, or != if they should be not equal. some other programming stuff to look out for: make sure you end most lines with a ';' unless the line ends in a { or }. make sure every { has a matching }.
code:

Button1.onLeftButtonUp(int x, int y) {
a = 1;
WingAnim.setStartFrame(1);
WingAnim.setEndFrame(8);
MainContainer.switchToLayout("animation");
WingAnim.play();
}
Button2.onLeftButtonUp(int x, int y) {
a = 0;
WingAnim.setStartFrame(8);
WingAnim.setEndFrame(1);
MainContainer.switchToLayout("animation");
WingAnim.play();
}


this tells winamp that if the user left clicks the button1 i defined earlier (this is the button from normal layout) that it should first set a=1 (this is important so that the onStop() part from above knows which layout to switch to next). it then sets the starting frame of the animation to 1 and the end frame to 8. it is an 8 frame animation. it then switches to the layout that has the animation, and plays it. the only difference between that and the second one is that a will equal 0 (so the animation switching works right) and that is plays the animation backwards.


does all of that make sense? i hope so
there are many many other command you can use in your maki script, which can, for 99% of you, be found at C:\Program Files\Winamp3\Lib\std.mi. its only partly documented, but most of what you need is in there. i just hope mostof you will know how to use those commands now. if you need any clarification, ill be happy to...clarify
iPlayTheSpoons is offline   Reply With Quote
 
Go Back   Winamp & Shoutcast Forums > Skinning and Design > Skinning Tips and Tricks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On

Forum Jump