SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Move

 

<action>

     <item type='string' 
           target='string' 
          
           x='number' 
           y='number' 
           offset='boolean' 
           
           distance='number' 
           angle='number' 
           
           duration='number' 
           easing='string'
           />
     ...
   
</action>
             


Description

The action tags can be added to an object and enclose any number of items, each executes an action when triggered by an event.

 

  • type: The type of action to execute. The type values that move objects are:

    • center_on_cursor: Center an object on the cursor's position.

    • move_to: Move the target object to the position defined by the x and y attributes.

    • move_by: Offset the target object by the given x and y pixel amounts, or by the given distance and angle amounts (relative to the current position).


  • target: Specifies the ID of the object to apply this action to. If this attribute is omitted, then the object that encloses this action is targeted.


  • x: The horizontal position to move the target object to (move_to) or the horizontal amount to offset it (move_by). If omitted, then the object's horizontal position remains unchanged.

  • y: The vertical position to move the target object to (move_to) or the vertical amount to offset it (move_by). If omitted, then the object's vertical position remains unchanged.

  • offset: This is used only when type is set to move_to. It determines whether the x and y values are offsetted by the object's offset_x and offset_y or not. The default is true. Set this attribute to false to move the object to an absolute location regardless of the object's relative offsets.


  • distance: If the action type is move_by, and the x and y attributes are omitted, then the target object is moved by distance in the direction of angle. The default is 0.

  • angle: If the action type is move_by, and the x and y attributes are omitted, then the target object is moved by distance in the direction of angle. Angle zero is at the 12 o'clock position. The default is 0.


  • duration: The number of seconds it takes to move the object. A value of zero moves the object instantly. Larger values move the object gradually. The default is 1.

  • easing: The way the animation comes to a stop. Valid values are:

    • back: Moves the object past its destination and then brings it back.

    • bounce: Bounces the abject on its destination with several decaying rebounds.

    • elastic: Bounces the abject past its destination and then back with several decaying rebounds.

    • regular: Slows down the object to its destination. This is the default value.

    • strong: Similar to regular, but starts faster and decelerates faster.

    • none: Moves the object to its destination without a change in speed.

If an object does not move to the expected location, this is likely because it has invisible parts that affect its bounding rectangle. The object's bounding rectangle includes border lines, and hidden and transparent graphics. To exclude these parts, it is necessary to mask them.

 

Example

<slickboard>

   <!-- gray background box -->
   <rect x='180' y='140' width='120' height='120' fill_color='888888' /> 
   
   <!-- blue object -->
   <object id='blue'>   
      <rect x='190' y='150' fill_color='8888ff' shadow='default' /> 
   </object >
   
   
   <!-- move to button -->
   <object>   
      <rect x='160' y='30' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='160' y='35' width='70' alpha='.6' align_h='center' shadow='default'>Move To</text>   
      <action>
         <item type='move_to' target='blue' x='0' y='0' duration='1' easing='bounce' />
      </action>
   </object>
   
   <!-- move by button -->
   <object>   
      <rect x='250' y='30' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='250' y='35' width='70' alpha='.6' align_h='center' shadow='default'>Move By</text>   
      <action>
         <item type='move_by' target='blue' y='20' duration='1' easing='bounce' />
      </action>
   </object>
   
   <!-- angle button -->
   <object>   
      <rect x='160' y='80' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='160' y='85' width='70' alpha='.6' align_h='center' shadow='default'>Angle</text>   
      <action>
         <item type='move_by' target='blue' distance='100' angle='100' duration='1' easing='back' />
      </action>
   </object>
   
   <!-- reset button -->
   <object>   
      <rect x='250' y='80' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='250' y='85' width='70' alpha='.6' align_h='center' shadow='default'>Reset</text>   
      <action>
         <item type='reset' target='blue' duration='1' easing='back' />
      </action>
   </object>


   <filter>
      <shadow id='default' />
   </filter>
 
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us