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

 < previousnext > 

 

Scribble

 

<action>

     <item type='string' color='string' alpha='number' thickness='number' />
     ...
   
</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 execute scribbling functions are:

    • scribble_pen: Defines the pen attributes to use in the next scribble.

    • scribble_start: Start the scribbling mode, which suspends the interaction with board elements below the scribbling layer. The following mouse drag produces a freehand drawing in the scribbling layer.

    • scribble_stop: Stop the scribbling mode and hide the scribble. This restores the interaction with the board elements and hides the scribble without erasing it. The old scribble becomes visible again when the scribbling mode is started.

    • scribble_clear: Erase the scribble.


  • color: This is used only when the action type is set to scribble_pen to determine the scribble color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "ff0000" (red).

  • alpha: This is used only when the action type is set to scribble_pen to determine the scribble's transparency value. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is .75.

  • thickness: This is used only when the action type is set to scribble_pen to determine the scribble's thickness. The default is 5 pixels.

 

Example

<slickboard>
 
   <!-- draggable orange circle below the scribble layer, which can be scribbled on -->
   <object>
      <circle x='240' y='150' radius='50' fill_color='ff6600' shadow='default' state='hit' />
      <action><item type='drag' /></action>
   </object>  
   
   
   <!-- scribbling layer -->
   <object>
      <scribble active='false' />   
   </object>
      
   
   <!-- layers above the scribble layers can be ineracted with -->
   <object>
   
      <!-- bottom drawer that holds drawing tools -->
      <rect x='100' y='300' width='280' height='40' fill_color='8888ff' corner_tl='10' corner_tr='10' shadow='default' /> 
      <drawer type='up' depth='40' />
     
      <!-- select a black pen and start the scribbling mode -->
      <object>
         <circle x='150' y='320' radius='15' fill_color='000000' fill_alpha='.6' state='hit' shadow='default' />
         <action>
            <item type='scribble_start' />
            <item type='scribble_pen' color='000000' thickness='30' alpha='.6' />
         </action>
      </object>  
   
      <!-- select a red pen and start the scribbling mode -->
      <object>
         <circle x='200' y='320' radius='15' fill_color='ff3300' fill_alpha='.7' state='hit' shadow='default' />
         <action>
            <item type='scribble_start' />
            <item type='scribble_pen' color='ff3300' thickness='30' alpha='.7' />
         </action>
      </object>  
   
      <!-- select a blue pen and start the scribbling mode -->
      <object>
         <circle x='250' y='320' radius='10' fill_color='4400ff' fill_alpha='.7' state='hit' shadow='default' />
         <action>
            <item type='scribble_start' />
            <item type='scribble_pen' color='4400ff' thickness='20' alpha='.7' />
         </action>
      </object>  

      <!-- clear the scribble and end the scribbling mode -->
      <object>
         <rect x='300' y='310' width='65' height='20' fill_color='aaaaff' 
               corner_tl='5' corner_tr='5' corner_bl='5' corner_br='5' shadow='default' state='hit' />   
         <text x='300' y='311' width='65' height='20' color='000000' align_h='center' shadow='default'>Clear</text>   
         <action>
            <item type='scribble_clear' />
            <item type='scribble_stop' />
         </action>
      </object> 
     
   </object>


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

 

 < previousnext > 


Copyright © 2010-2017, maani.us