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

 < previous 

 

Magnet

 

<magnet>

     <item type='string' target='string' radius='number' strength='number' />
     ...
   
</magnet>
             


Description

Magnet can be added to an object to attract it to or repel it from any number of other objects. This can be used to guide and snap objects to predefined slots.

Magnets have no effect when objects are idle or while being dragged. They affect objects only at the end of dragging operations (when an object is dropped or thrown after a drag). In addition, magnets have no effect when the magnets themselves get dragged (the attracted objects must be dragged instead).

 

 

The magnet tags enclose any number of magnet items, each has the following attributes:

  • type: Determines whether to attract or repel the object. Valid values are attract and repel. The default is attract.

  • target: The ID of the object that this object is attracted to or repelled from.

  • radius: The range of the magnetic in pixels. Ranges are calculated from the centers of objects. If the centers of visible objects are not good magnet locations, then use transparent magnets placed anywhere else instead.

  • strength: The strength of the magnetic effect. Valid values range from 0 (weakest) to 1 (strongest). The default is 1.

 


Event Action

When an object connects with an attracting magnet, actions enclosed by the same object with the event='magnet' are automatically executed. This can be used to play sounds or execute other actions triggered by magnets. This does not apply to objects repelled by magnets:

<object>
   <!-- attracted graphic -->
   <circle x='240' y='100' radius='20' fill_color='8888ff' shadow='low' state='hit'/>   
      
   <!-- a reference to the attracting magnet -->
   <magnet>
      <item type='attract' target='mag_1' radius='100' strength='.9' />
   </magnet>
      
   <action>
      <!-- actions excuted when this object connects with the attracting magnet -->   
      <item type='sound_play' target='woosh' event='magnet' />
      <item type='alert' text='Hello World!' event='magnet' />
   </action>

</object>

 

Example

<slickboard>

   <!-- blue circle attracted to the red square and repelled by the blue square -->
   <object>
      <circle x='240' y='100' radius='20' fill_color='8888ff' shadow='low' state='hit'/>   
      <action>
         <item type='drag' />
         <item type='sound_play' target='woosh' event='magnet' />
      </action>
      <magnet>
         <item type='attract' target='mag_2' radius='100' strength='.9' />
         <item type='repel' target='mag_1' radius='100' strength='.9'  />
      </magnet>
      <constrain />
   </object>

   <!-- red circle attracted to the blue square and repelled by the red square -->
   <object>
      <circle x='240' y='200' radius='20' fill_color='ff4400' shadow='low' state='hit'/>   
      <action>
         <item type='drag' />
         <item type='sound_play' target='woosh' event='magnet' />
      </action>
      <magnet>
         <item type='attract' target='mag_1' radius='100' strength='.9' />   
         <item type='repel' target='mag_2' radius='100' strength='.9'  />
      </magnet>
      <constrain />
   </object>


   <!-- blue and red squares -->
   <object id='mag_1'>
      <rect x='50' y='125' width='50' height='50' fill_color='8888ff' shadow='hole' />
   </object>
   <object id='mag_2'>
      <rect x='380' y='125' width='50' height='50' fill_color='ff4400' shadow='hole' />  
   </object>
    
    
    <filter>
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>

</slickboard>

 

 < previous 


Copyright © 2010-2017, maani.us