Powered by AOL Music

Animatedlayer

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.


  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.

a) Make the graphics: rotating arrow
b) Define the elements in the XML code.
c) Define layers using those elements.


Lets go through in detail how do to each step:

a) Make the graphics: the red circle and blue triangle.

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.


* yellowcircle-arrow.png

b) 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.



c) 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.