Modern Skin: Animatedlayer

From Winamp Developer Wiki
Revision as of 15:11, 25 September 2008 by Tarik (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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 is a layer that displays a series of graphics by cycling through parts of a graphics file. A simple example is the rotating arrow that you see below.

An animated layer does not move. However, an animating skin does move. To move a graphical element in animating layer, you must write a MAKI script. Scripting is covered in the next section.


File:Flash2.png


Complex Tutorial Modern Skin

In Complex Tutorial, Group #4 shows a spinning arrow inside a yellow circle. This is done through Animated Layer. Here's the process.


Lets go through in detail how do to each step:

  • Make the graphics: rotating arrow
  • Define the elements in the XML code.
  • Define layers using those elements.


Make the Graphics: Rotating Arrow

When you make the graphics for this layer, make the graphics for each frame separately. Then put the frames together vertically in a single file as shown below. This example has a short animation. If you plan to show more complicated animation, make more frames.


File:Animlayer graphics.png

* yellowcircle-arrow.png



Define the Elements in the XML Code

The definition for the element is the same as any bitmap definition. The thing that is different is the next step.


File:Animlayer xml1.png



Define Layers Using those Elements

Take a look at line 70. The width and height tells Winamp3 how big each frame is. It will cycle through each frame automatically.


File:Animlayer xml2.png