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

 < previous 

 

Custom Interface Elements

 

Different board features can be combined to create custom interface elements unique to your application. For example, images can be used to create icon-based buttons and menus, sounds can be used to highlight user selections, etc. Below are some simple examples, but the possibilities are endless.

 

Example

<slickboard>
   
   <!-- an object encloseing the menu to offset it anywhere on the board -->
   <object offset_x='25' offset_y='25'>
     
      <!-- the menu title, which is a button that opens the menu drawer -->
      <rect  x='0' y='0' width='80' height='20' fill_color='888888' state='hit' />
      <text  x='0' y='0' width='80' height='20' align_h='center'>Gallery</text>
      <action><item type='drawer_toggle' target='menu_body' /></action>
      
      <!-- the mask that hides menu_body when retracted -->
      <object id='menu_mask'>
         <rect  x='0' y='20' width='80' height='240' />
      </object>
      
      
      <!-- the menu body, which includes the menu items and their background -->
      <object id='menu_body' offset_y='-220'>
      
         <!-- the background of menu items, which functions as a drawer, masked by menu_mask -->   
         <rect x='0' y='0' width='80' height='240' fill_color='aaaaaa' />
         <mask target='menu_mask' />
         <drawer type='down' depth='240' auto_open='false' handle_front='240' handle_back='20' />   
         
         <!-- the first menu item -->
         <object offset_y='0'>
            <image  x='1' y='1' width='78' height='78' url='images/icon_roadrunner.jpg' state='hit' />
            <action>
               <item type='float' target='roadrunner' />
               <item type='drawer_close' target='menu_body' />
            </action>
         </object>
         
         <!-- the second menu item -->
         <object offset_y='80'>
            <image  x='1' y='1' width='78' height='78' url='images/icon_dove.jpg' state='hit' />
            <action>
               <item type='float' target='dove' />
               <item type='drawer_close' target='menu_body' />
            </action>
         </object>
         
         <!-- the third menu item -->
         <object offset_y='160'>
            <image  x='1' y='1' width='78' height='78' url='images/icon_quail.jpg' state='hit' />
            <action>
               <item type='float' target='quail' />
               <item type='drawer_close' target='menu_body' />
            </action>
         </object>         
      </object>
      
   </object>
   
   <!-- the gallery images -->
   <object id='quail'>
      <image  x='150' y='75' width='240' height='150' url='images/image_quail.jpg' />
   </object>
   <object id='dove'>
      <image  x='150' y='75' width='240' height='150' url='images/image_dove.jpg' />
   </object>
   <object id='roadrunner'>
      <image  x='150' y='75' width='240' height='150' url='images/image_roadrunner.jpg' />
   </object>
   
</slickboard>

 


<slickboard>
   
   <!-- red rectangle used as a selection highlighter -->
   <object id='highlight'>
      <rect  x='120' y='50' width='80' height='20' fill_color='ff4400' />
   </object>
   
   
   <!-- three hit areas with actions triggered by mouse over -->
   <object>
      <rect  x='120' y='50' width='80' height='20' fill_alpha='.1' state='hit' />
      <text  x='120' y='50' width='80' height='20' align_h='center'>quail</text>
      <action>
         <item type='move_to' target='highlight' x='120' duration='.5' easing='bounce' event='mouse_over' />   
         <item type='float' target='quail' event='mouse_over' />
      </action>
   </object>
   
   <object>
      <rect  x='200' y='50' width='80' height='20' fill_alpha='.1' state='hit' />
      <text  x='200' y='50' width='80' height='20' align_h='center'>Dove</text>
      <action>
         <item type='move_to' target='highlight' x='200' duration='.5' easing='bounce' event='mouse_over' />   
         <item type='float' target='dove' event='mouse_over' />
      </action>
   </object>   
   
   <object>
      <rect  x='280' y='50' width='80' height='20' fill_alpha='.1' state='hit' />
      <text  x='280' y='50' width='80' height='20' align_h='center'>Roadrunner</text>
      <action>
         <item type='move_to' target='highlight' x='280' duration='.5' easing='bounce' event='mouse_over' />   
         <item type='float' target='roadrunner' event='mouse_over' />
      </action>
   </object>   
   
  
   <!-- the gallery images -->
   <object id='roadrunner'>
      <image  x='120' y='75' width='240' height='150' url='images/image_roadrunner.jpg' />
   </object>
   <object id='dove'>
      <image  x='120' y='75' width='240' height='150' url='images/image_dove.jpg' />
   </object>
   <object id='quail'>
      <image  x='120' y='75' width='240' height='150' url='images/image_quail.jpg' />
   </object>
   
</slickboard>

 

 < previous 


Copyright © 2010-2017, maani.us