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

 < previousnext > 

 

Mask

 

<mask target='string' />
      


Description

Mask can be added to an object to make only some of its parts visible. This enables creating irregular and complex graphical elements, or creating boundaries beyond which the masked object becomes invisible.

Each mask can be used only once. To mask two objects, it is necessary to create two masks, one for each object.

 

To mask a graphical element:

1. Create a graphic with any number of basic drawing tools and make it an object:

<slickboard>
   
   <!-- object to be masked -->
   <object>  
      <image url='images/image_flower.jpg' fill='stage' />   
   </object>  
      
</slickboard>

 


2. Create a mask with any number of basic drawing tools, make it an object, and give it a unique ID:

<slickboard>
   
   <!-- object to be masked -->
   <object>  
      <image url='images/image_flower.jpg' fill='stage' />  
   </object>  
   
   
   <!-- object to be used as a mask -->
   <object id='flower_mask'>  
      <text y='50' width='480' align_h='center' size='100'>FLOWER</text>   
   </object>  
      
</slickboard>

 


3. Add the mask tag to the first object to link it to its mask. The second object disappears and only the overlapping parts of the first object become visible:

<slickboard>
   
   <!-- masked object -->
   <object>  
      <image url='images/image_flower.jpg' fill='stage' />  
      <mask target='flower_mask' />
   </object>  
   
   
   <!-- masking object -->
   <object id='flower_mask'>  
      <text y='50' width='480' align_h='center' size='100'>FLOWER</text>   
   </object>  
      
</slickboard>

 

Example

<slickboard>

   <!-- drag each square -->
   
   
   <!-- the first draggable object contains both the masked and masking objects -->  
   <!-- they both move together -->  
   <object>
      <image url='images/image_flower.jpg' fill='stage' state='hit' />
      <action><item type='drag' /></action>
      <mask target='mask_1' />

      <object id='mask_1'>
         <rect x='45' y='80' />
      </object>
   </object>
      
   
   <!-- the second draggable object contains only the masked object -->  
   <!-- the masked object moves, while the masking object stays still -->
   <object>
      <image url='images/image_flower.jpg' fill='stage' state='hit' />
      <action><item type='drag' /></action>
      <mask target='mask_2' />
   </object>
   
   <object id='mask_2'>
      <rect x='190' y='80' />
   </object>
   
   
   <!-- the third draggable object contains only the masking object -->  
   <!-- the masking object moves, while the masked object stays still -->
   <object>      
      <image url='images/image_flower.jpg' fill='stage' />
      <mask target='mask_3' />
   </object>
   
   <object id='mask_3'>
      <rect x='335' y='80' state='hit' />
      <action><item type='drag' /></action>
   </object>

</slickboard>

 


<slickboard>

   <!-- reload the webpage to see the transitions again -->
   
   
   <!-- three animated texts, each is masked to define its visible boudaries --> 
   <!-- first text and its mask --> 
   <object>
      <text x='205' y='50' size='110' color='ff4400' alpha='.95' shadow='default'>Sale</text>   
      <transition_in type='fly' startPoint='4' easing='strong' duration='1' />
      <mask target='mask_1' />
   </object>
   <object id='mask_1'>
      <rect x='200' y='0' width='500' height='300' />
   </object>
   

   <!-- second text and its mask --> 
   <object>
      <text x='100' y='65' size='25' color='ffffff' alpha='.9' shadow='default'>33-50%</text>
      <transition_in type='fly' startPoint='8' easing='strong' duration='1' />
      <mask target='mask_2' />
   </object>
   
   <object id='mask_2'>
      <rect x='0' y='0' width='480' height='100' />
   </object>
   
   
   <!-- third text and its mask --> 
   <object>      
      <text x='120' y='100' size='50' color='000000' alpha='.3' shadow='default'>off</text>
      <transition_in type='fly' startPoint='2' easing='strong' duration='1' />
      <mask target='mask_3' />
   </object>
   
   <object id='mask_3'>
      <rect x='0' y='100' width='480' height='200' />
   </object>
   
   
   <!-- white lines --> 
   <line x1='200' y1='50' x2='200' y2='170' color='ffffff' thickness='1' />
   <line x1='80' y1='100' x2='200' y2='100' color='ffffff' thickness='1' />
         
         
   <filter>
      <shadow id='default' />
   </filter>

</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us