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

 < previousnext > 

 

Cloak

 

<cloak type='string'  
       radius_1='number'  
       radius_2='number'
       target='string' 
       />
      


Description

Cloak can be added to an object to make it appear or disappear in response to its proximity to the mouse or another object. This can be used to create side-tools and content that appear only when reached for:

 

The cloak attributes are:

  • type: Determines whether to show or hide the object when the mouse moves closer. Valid values are show and hide. The default is show.

  • radius_1: The radius from the center of the object within which the cloak effect is fully applied. The default is 100. The area between radius_1 and radius_2 is where the cloak effect is gradually applied. To apply the effect suddenly, set radius_1 and radius_2 to the same value.

  • radius_2: The radius from the center of the object beyond which the cloak effect is not applied. The default is 200. The area between radius_1 and radius_2 is where the cloak effect is gradually applied. To apply the effect suddenly, set radius_1 and radius_2 to the same value.

  • target: If this attribute is omitted, then cloaking responds to the mouse proximity. If this attribute is the ID of another object, then cloaking responds to the proximity of that object instead. In this case, one or both objects should be movable to show a dynamic cloaking.

 

Example

<slickboard>
    
    <!-- draw 2 gray circles in the background -->
    <circle x='120' y='50' radius='25' fill_color='555555' />
    <circle x='360' y='50' radius='25' fill_color='555555' />
    
    <!-- create 2 blue objects on top of the gray circles -->
    <!-- the blue circle on the left appears gradually as the mouse moves closer -->   
    <!-- the blue circle on the right appears sudenly as the mouse moves closer -->
   <object>
      <cloak radius_1='20' radius_2='100' />
      <circle x='120' y='50' radius='20' fill_color='8888ff' shadow='low' />
   </object>

   <object>
      <cloak radius_1='100' radius_2='100' />
      <circle x='360' y='50' radius='20' fill_color='8888ff' shadow='low' />
   </object>


   <filter>
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
   </filter>
     
</slickboard>

 


<slickboard>
   
   <!-- a red ticker square that can be dragged to change its direction and speed -->
   <object id='square'>
      <rect x='20' y='20' width='50' height='50' fill_color='FF4400' shadow='low' state='hit' />   
      <ticker speed_x='5' />
      <action><item type='drag' /></action>
   </object>
  
   
   <!-- a cloaked circle affected by the square's proximity, not by the mouse -->
   <object>
      <cloak target='square'/>
      <circle x='240' y='170' radius='75' fill_color='8888ff' shadow='low' />
   </object>
   
   
   <filter>
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
   </filter>
   
</slickboard>

 


<slickboard>
   
   <!-- red square with a cloaked black handle -->
   <object id='square'>
      <rect x='200' y='100' width='75' height='75' fill_color='ff4400' />
      
      <!-- black handle that can be dragged -->
      <object>
         <rect x='200' y='80' width='20' height='20' state='hit' />   
         <cloak radius_1='20' radius_2='100'/>
         <action>
            <!-- drag the object with the 'square' id, which encloses both the red and black squares -->   
            <item type='drag' target='square' />
         </action>
      </object>   
   </object>   

</slickboard>

 


<slickboard>
   
   <!-- music -->
   <sound>
      <clip id='music' url="sounds/slow.mp3" delay='0' stream='5' timeout='30' retry='2' />
   </sound>
   <action>
      <item type='sound_play' target='music' event='timer' delay='0' loop='99999' />
      <item type='global_volume' event='timer' delay='0' volume='0' />
   </action>
   
   
   <!-- volume slider the uses cloaking volume indicators -->
   <object offset_x='200' offset_y='100' >
   
      <rect width='100' height='30' fill_color='444444' corner_tl='10' corner_tr='10' corner_br='10' corner_bl='10' shadow='inner' />   
         
      <object id='speaker_cloak'>
         <rect x='95' y='15' width='1' height='1' fill_alpha='0'  />
      </object>
      <object id='speaker_constrain'>
         <rect x='2' y='10' width='96' height='10' fill_alpha='0'  />
      </object>
            
      <object id='speaker' shadow='default'>
         <rect x='2' y='4' width='26' height='22' fill_alpha='0' state='hit' />
            
         <polygon fill_color='ffffff'>
            <point x='4' y='10' />
            <point x='10' y='10' />
            <point x='15' y='5' />
            <point x='15' y='25' />
            <point x='10' y='20' />
            <point x='4' y='20' />
         </polygon>
         <polygon fill_color='ffffff' state='over' glow='control'>
            <point x='4' y='10' />
            <point x='10' y='10' />
            <point x='15' y='5' />
            <point x='15' y='25' />
            <point x='10' y='20' />
            <point x='4' y='20' />
         </polygon>
         <polygon fill_color='ffaaaa' state='press' glow='control'>
            <point x='4' y='10' />
            <point x='10' y='10' />
            <point x='15' y='5' />
            <point x='15' y='25' />
            <point x='10' y='20' />
            <point x='4' y='20' />
         </polygon> 

         <object>   
            <circle x='15' y='15' radius='6' start='45' end='135' fill_alpha='0' line_color='ffffff' line_alpha='1' line_thickness='3' />
            <cloak target='speaker_cloak' radius_1='50' radius_2='75' />
         </object>
         
         <object>   
            <circle x='15' y='15' radius='10' start='45' end='135' fill_alpha='0' line_color='ffffff' line_alpha='.75' line_thickness='2' />
            <cloak target='speaker_cloak' radius_1='25' radius_2='50' />
         </object>
            
         <object>
            <circle x='15' y='15' radius='14' start='45' end='135' fill_alpha='0' line_color='ffffff' line_alpha='.5' line_thickness='1' />
            <cloak target='speaker_cloak' radius_1='0' radius_2='30' />
         </object>
            
         <constrain target='speaker_constrain' reflect='0' />
         <action>
            <item type='adjust_global_volume' event='slider' />
            <item type='drag' target='speaker' />
         </action>
            
      </object>
   </object>
   
   
   <filter>
      <shadow id='default' />
      <shadow id='inner' inner='true' distance='3' alpha='.25' blurX='5' blurY='5' />
      <glow id='control' color='ff4400' alpha='.9' blurX='10' blurY='10' inner='false' /> 
   </filter>

</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us