Tarik: Protected "Modern Skin: Animating a Skin" [edit=autoconfirmed:move=autoconfirmed]

2008-09-25T12:59:26Z

Protected "Modern Skin: Animating a Skin" [edit=autoconfirmed:move=autoconfirmed]

Tarik: Unprotected "Modern Skin: Animating a Skin"

2008-09-24T17:15:52Z

Unprotected "Modern Skin: Animating a Skin"

Tarik: Protected "Modern Skin: Animating a Skin": There seems to be a problem with your login session [edit=sysop:move=sysop]

2008-09-22T21:30:31Z

Protected "Modern Skin: Animating a Skin": There seems to be a problem with your login session [edit=sysop:move=sysop]

Wahdahtahdammie at 19:37, 27 August 2008

2008-08-27T19:37:52Z

New page

Creating a Modern Skin --> [[Modern Skin: Intro|Intro]] --> [[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]] --> [[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]] --> [[Modern Skin: XML Intro|XML Intro]] --> [[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]] --> [[Modern Skin: Container| Container]] --> [[Modern Skin: Group|Group]] --> [[Modern Skin: Relative Positioning| Relative Positioning]] --> [[Modern Skin: Complex Skin|Complex Skin]] --> [[Modern Skin: Non-Rect Player| Non-Rect Player]] --> [[Modern Skin: Layer Composition| Layer Composition]] --> [[Modern Skin: Alpha Channels| Alpha Channels]] --> [[Modern Skin: Animatedlayer|Animatedlayer]] --> [[Modern Skin: Snap Points|Snap Points]] --> [[Modern Skin: Drawers|Drawers]] --> [[Modern Skin: Skin Scripting| Skin Scripting]] --> [[Modern Skin: Drawer Scripting| Drawer Scripting]] --> [[Modern Skin: Animating a Skin|Animating a Skin]] --> [[Modern Skin: Maki Overview| Maki Overview]] --> [[Main_Page#Glossary_of_Terms|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.

[[Image:Flash2.png]]

==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.

[[Image: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.

[[Image: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.

[[Image:scripting_animmaki2.png]]

==Variable Declaration Section==

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

[[Image: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.

[[Image: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.

[[Image: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.

[[Image:scripting_animmaki6.png]]

← Older revision	Revision as of 12:59, 25 September 2008
(No difference)

← Older revision	Revision as of 17:15, 24 September 2008
(No difference)

← Older revision	Revision as of 21:30, 22 September 2008
(No difference)

Modern Skin: Animating a Skin - Revision history

Tarik: Protected "Modern Skin: Animating a Skin" [edit=autoconfirmed:move=autoconfirmed]

Tarik: Unprotected "Modern Skin: Animating a Skin"

Tarik: Protected "Modern Skin: Animating a Skin": There seems to be a problem with your login session [edit=sysop:move=sysop]

Wahdahtahdammie at 19:37, 27 August 2008