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

 < previousnext > 

 

Drag

 

<action>

     <item type='string' target='string' float='boolean' direction='string' 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 execute dragging functions are:

    • drag: Initiate dragging to move an object with the mouse.

    • page: Initiate dragging to page through an object wider or taller than the board.

    • rotate: Initiate dragging to rotate an object around its center. While the shift key is pressed, the rotation snaps to increments of 45 degree.

    • scale: Initiate dragging to scale an object.


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

  • float: Determines whether to bring the targeted object to the front or keep it behind other objects. If the board has a scribble layer, then the object is brought forward, but only as far as the scribble layer (objects behind scribbles stay behind them). Valid values are true and false. The default is true.

  • direction: This attribute is used only when the action type is page. It determines the paging direction. Valid values are horizontal and vertical. The default is horizontal.

  • duration: This is used when type is set to page. It determines the number of seconds it takes to page the object after the mouse is relased. The default is 1.

  • easing: This is used when type is set to page. It determines 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.

    • strong: Similar to regular, but starts faster and decelerates faster. This is the default value.

    • none: Moves the object to its destination without a change in speed.

 

Example

<slickboard>
 
   <!-- a circle that responds to mouse clicks, which trigger the dragging action -->
   <object>
      <circle x='150' y='150' radius='35' fill_color='8888ff' state='hit' />   
      <action>
         <item type='drag' />
      </action>
   </object>   
   
   
   <!-- draggable square, but only by its black handle -->
   <object id='square'>
      <rect x='300' y='125' width='75' height='75' fill_color='ff4400' />
      
      <!-- the black handle that executes the dragging action -->
      <object>
         <rect x='300' y='105' width='20' height='20' fill_color='000000' state='hit' />   
         <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>

   <!--drag and throw an image to the side to page through all images -->


   <!-- one object that contains 3 side-to-side images, collectively wider than the board -->
   <object>
      
      <image url='images/image_roadrunner.jpg' x='0' y='0' width='480' height='300' state='hit' />   
      <image url='images/image_dove.jpg' x='480' y='0' width='480' height='300' state='hit' />
      <image url='images/image_quail.jpg' x='960' y='0' width='480' height='300' state='hit' />

      <!-- page action that pages through the object one board width at a time -->
      <!-- another action that plays a sound when throwing the image -->
      <action>
         <item type='page' direction='horizontal' />
         <item type='sound_play' target='woosh' event='throw' />
      </action>

   </object>
      
      
   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>
   
</slickboard>

 


<slickboard>

   <!-- object that contains the red square, black circle, and black square -->
   <object id='red_square'>
      
      <!-- draggable red square -->
      <rect x='150' y='100' width='90' height='90' fill_color='ff4400' state='hit' />   
      <action><item type='drag' /></action>
   
     
      <!-- black circle that rotates the red square -->
      <object>
         <circle x='230' y='110' radius='7' state='hit' />
         <action><item type='rotate' target='red_square' /></action>
      </object>
      
     
      <!-- black square that rotates and scales the red square -->
      <object>
         <rect x='220' y='170' width='15' height='15' state='hit' />
         <action>
            <item type='rotate' target='red_square' />
            <item type='scale' target='red_square' />
         </action>
      </object>
      
   </object>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us