Modern Skin: Animating a Skin

From Winamp Developer Wiki
Jump to: navigation, search

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

An animated layer does not move. However, an animating skin does move. To actually move a graphical element you must write a MAKI script. In this section, we will show you how to do a sequence of animation that you see in this skin.


MAKI Script - anim.m

Couple things you need to notice in your XML:

  • Both animated layer and animating skin are "AnimatedLayer" type.
  • Both use the same graphical element.
  • The difference lies that animating skin uses a MAKI script to move the arrow.

File:Scripting animxml.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.

File:Scripting animmaki1.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.

File:Scripting animmaki2.png

Variable Declaration Section

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

File:Scripting animmaki3.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.

File:Scripting animmaki4.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.

In this script, we set the initial state for several variables and call "move_arrow()" function when the script is loaded.

File:Scripting animmaki5.png

You own functions

To move the arrow, we use two functions. The first function, "move_arrow()", is called by "system.onScriptLoaded()" when the script is loaded. The function of "move_arrow()" is to move the arrow down from its initial location. To do this, it sets the x and y coordinate and the speed for that movement. When the arrow reaches the target location, an event is fired telling the system that the arrow has reached the target location.

Winamp3 is an event driven system. The second function is designed to handle the event when the arrow reaches its destination. Depending on its state, it will direct the arrow to move to a new location. This function is called over and over again every time the arrow reaches its destination. This simple function directs the movement of the arrow that you see in the skin.

File:Scripting animmaki6.png