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

 < previousnext > 

 

Transparency

 

<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 affect transparency are:

    • alpha_to: Set the alpha (transparency) of an object to a given value. Valid alpha values range from 0 to 1.

    • alpha_by: Adjust the alpha (transparency) of an object by a given amount relative to the current alpha value. Valid alpha values range from 0 to 1.


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

  • value: The value or amount of transformation to apply to the object. The default is 20.

  • duration: The number of seconds it takes to transform the object. A value of zero transforms the object instantly. Larger values transform 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 >
   
   
   <!-- alpha 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'>Alpha To</text>   
      <action>
         <item type='alpha_to' target='blue' value='.5' duration='.5' easing='bounce' />
      </action>
   </object>
   
   <!-- alpha 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'>Alpha By</text>   
      <action>
         <item type='alpha_by' target='blue' value='-.25' duration='.5' 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