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

 < previousnext > 

 

Scale

 

<action>

     <item type='string' target='string' value='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 scale objects are:

    • scale_to: Scale an object to a given factor.

    • scale_by: Scale an object horizontally by a given increment relative to the current scale.


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

  • h: The horizontal scale value or increment to apply to the object. If omitted, then the object's horizontal scale remains unchanged. When the object has a horizontal scale of 1, then it is displayed at its original width. Smaller values reduce its width. Larger values increase its width.

  • v: The vertical scale value or increment to apply to the object. If omitted, then the object's vertical position remains unchanged. When the object has a vertical scale of 1, then it is displayed at its original height. Smaller values reduce its height. Larger values increase its height.

  • duration: The number of seconds it takes to scale the object. A value of zero scales the object instantly. Larger values scale 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.

 

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 >
   
   
   <!-- scale to button -->
   <object>   
      <rect x='115' y='70' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='115' y='75' width='70' alpha='.6' align_h='center' shadow='default'>Scale To</text>   
      <action>
         <item type='scale_to' target='blue' h='2' v='1.5' duration='.5' easing='regular' />
      </action>
   </object>
   
   <!-- scale by button -->
   <object>   
      <rect x='205' y='70' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='205' y='75' width='70' alpha='.6' align_h='center' shadow='default'>Scale By</text>   
      <action>
         <item type='scale_by' target='blue' h='1' v='0' duration='1' easing='bounce' />
      </action>
   </object>
   
   <!-- reset button -->
   <object>   
      <rect x='295' y='70' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='295' y='75' 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