Select language
English : Russian
Desktop multi language  
Top main menuMainDownloadsRegistrationSupportForum 
Products
Aston2
  • Product details
  • Themes
  • Live desktop
  • Skinning Manual
  • Skinning Tutorials
  • Aston 1.x
  • Aston2 Menu
  • Product details
  • Skins
  • Aston Secure Desktop
  • Product details
  • AltDesk
  • Product details
  • FAQ
  • Skinning Tutorial
  • Skins
  • StarBlaze
  • Product details
  • FAQ
  • StarBlaze 2
  • Product details

  • Services
  • Upload center
  • Press
  • Links


    MrBiotech's site

    adni18 site

    Skinning.net site
    Freeware
  • Fox Hunting
  • c2pas32

  • Search

    Animation

     
     

    Animation.

    Before using animation in skins, you should describe it in animation section. In your skin you can use as many animated elements as you want, and choose any names for them. Please refer to the example below:

    ...
      <skin>
        <animation name="anim1">
            <render image="frame0.jpg"/>
            <render image="frame1.jpg"/>
            <render image="frame2.jpg"/>
            <sequence name="on_Start">
              <frame render="0"/>
              <frame render="1"/>
              <frame render="2"/>
              <frame render="1"/>
              <frame render="0"/>
            </sequence>
        </animation>
        <paint animation="anim1"/>
      </skin>
    ...
    

    The first step is defining the render states (please refer to render sections).
    In the example above, the animation contains 3 render states, that use 3 images - "frame0.jpg", "frame1.jpg" and "frame2.jpg".
    Render states are automatically enumerated, starting from the zero index.
    If the animation frames are assembled into one picture, you should use "u" and "v" attributes to set the offset point in the texture:

    ...
      <skin>
        <animation name="anim1">
            <render image="button.jpg" u="0" v="0"/>
            <render image="button.jpg" u="0" v="64"/>
            <render image="button.jpg" u="0" v="128"/>
            <sequence name="on_Start">
              <frame render="0"/>
              <frame render="1"/>
              <frame render="2"/>
              <frame render="1"/>
              <frame render="0"/>
            </sequence>
        </animation>
        <paint animation="anim1"/>
      </skin>
    ...
    


    The next step is defining the frames sequences (see sequence and frame sections).
    Each frame corresponds to a certain render state by its index.
    Sequences names are depended from the widget implementation.
    Be careful - if you make a mistake in the name, a widget can never start your sequence.
    In the example above, there is only one sequence - "on_Start". It includes 5 frames.
    As a result, you'll see the following sequence of render states: 0, 1, 2 ,1 ,0.
    The animation speed is controlled by "fps" attribute (frames per second) for each frame.
    If you skip this attribute, fps will be equal to "30" by default:

    ...
        <sequence name="on_Start">
          <frame render="0" fps="15"/>
          <frame render="1" fps="20"/>
          <frame render="2" fps="25"/>
          <frame render="1" fps="0.1"/>
          <frame render="0"/>
        </sequence>
    ...
    

    Look at fps="0.1". It's means 10 seconds delay to next frame (delay = 1 / fps = 1 / 0.1 = 10).

    Some widgets use animation to show their percent indicators (for example some process progress - loading, infill level, etc.). In this case, instead of sequence section, indicator section is used:

    ...
        <animation name="indicator1">
            <render image="img1.jpg"/>
            <render image="img2.jpg"/>
            <render image="img3.jpg"/>
            <render image="img4.jpg"/>
            <indicator name="progress"/>
        </animation>
    ...
    

    The indicator uses all the available render frames.

    back


     
         
    Copyright © 1999-2017 Gladiators Software