Difference between revisions of "Modern Skin: Animatedlayer"
m (Unprotected "Modern Skin: Animatedlayer") |
m (Protected "Modern Skin: Animatedlayer" [edit=autoconfirmed:move=autoconfirmed]) |
(No difference)
|
Latest revision as of 13:11, 25 September 2008
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.
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.
* 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.
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.