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

 < previousnext > 

 

Controller

 

Controllers, toolbars, and elaborate interface elements can be created by combining buttons, checkboxes and other basic SlickBoard features.

 

Example

<slickboard>

   <!-- music -->
   <sound>
      <clip id='music' url="sounds/slow.mp3" delay='0' stream='5' timeout='30' retry='2' />
   </sound>
   <action>
      <item type='sound_play' target='music' event='timer' delay='0' loop='99999' />
      <item type='global_volume' event='timer' delay='0' volume='0' />
   </action>
   
   
   <!-- first slide -->
   <object>
      <image url='images/image_roadrunner.jpg' fill='stage' />
      <slide duration='1' />
      <transition_in type='fade' />
      <transition_out type='fly' duration='1' startPoint='4' />
   </object>

   <!-- second slide -->
   <object>
      <image url='images/image_dove.jpg' fill='trim' width='480' height='300' />
      <slide duration='1' />
      <transition_in type='fly' duration='1' startPoint='6' />
      <transition_out type='none' />
   </object>
   
   <!-- third slide -->
   <object>
      <image url='images/image_quail.jpg' fill='trim' width='480' height='300' />
      <slide duration='1' />
      <transition_in type='fly' easing='bounce' startPoint='2' />
      <transition_out type='fade' />
   </object>


   <!-- slidesow controller that appears when the mouse moves to the bottom of the board -->
   <object offset_x='100' offset_y='300'>
      <rect width='280' height='40' corner_tl='10' corner_tr='10' corner_br='10' corner_bl='10' shadow='control_bar' />
      <rect width='280' height='40' fill_color='4488ff' fill_alpha='.5' corner_tl='10' corner_tr='10' corner_br='10' corner_bl='10' />
      <drawer type='up' depth='60' handle_front='60' handle_back='0' />

      <!-- backward button -->
      <object id='backward' offset_x='25' offset_y='5' >
            
         <polygon fill_color='ffffff' state='hit'>
            <point x='0' y='15' />
            <point x='15' y='0' />
            <point x='13' y='8' />
            <point x='20' y='8' />
            <point x='20' y='22' />
            <point x='13' y='22' />
            <point x='15' y='30' />
         </polygon>
         
         <polygon fill_color='ffffff' state='over' glow='control'>
            <point x='0' y='15' />
            <point x='15' y='0' />
            <point x='13' y='8' />
            <point x='20' y='8' />
            <point x='20' y='22' />
            <point x='13' y='22' />
            <point x='15' y='30' />
         </polygon>
         
         <polygon fill_color='ffaaaa' state='press' glow='control'>
            <point x='0' y='15' />
            <point x='15' y='0' />
            <point x='13' y='8' />
            <point x='20' y='8' />
            <point x='20' y='22' />
            <point x='13' y='22' />
            <point x='15' y='30' />
         </polygon>
         
         <action><item type='slideshow_backward' /></action>
      </object>
   
   
      <!-- play/pause checkbox -->
      <object id='play' offset_x='65' offset_y='5' >
         
         <!-- hit area -->
         <rect width='25' height='30' fill_alpha='0' state='hit' />
         
         <!-- pause -->
         <rect x='0' y='2' width='8' height='26' fill_color='ffffff' state='unchecked' />
         <rect x='12' y='2' width='8' height='26' fill_color='ffffff' state='unchecked' />
         <rect glow='control' x='0' y='2' width='8' height='26' fill_color='ffffff' state='unchecked_over' />
         <rect glow='control' x='12' y='2' width='8' height='26' fill_color='ffffff' state='unchecked_over' />
         <rect glow='control' x='0' y='2' width='8' height='26' fill_color='ffaaaa' state='unchecked_press' />
         <rect glow='control' x='12' y='2' width='8' height='26' fill_color='ffaaaa' state='unchecked_press' />
         
         <!-- play -->
         <polygon fill_color='ffffff' state='checked' >
            <point x='22' y='15' />
            <point x='2' y='0' />
            <point x='2' y='30' />
         </polygon>
         <polygon fill_color='ffffff' state='checked_over' glow='control' >
            <point x='22' y='15' />
            <point x='2' y='0' />
            <point x='2' y='30' />
         </polygon>
         <polygon fill_color='ffaaaa' state='checked_press' glow='control' >
            <point x='22' y='15' />
            <point x='2' y='0' />
            <point x='2' y='30' />
         </polygon>
         
         <action>
            <item type='slideshow_toggle' />
            <item type='sounds_pause' event='check' />
            <item type='sounds_resume' event='uncheck' />
         </action>
      </object>

      
      <!-- forward button -->
      <object id='forward' offset_x='122' offset_y='5' >
         <polygon fill_color='ffffff' state='hit'>
            <point x='0' y='15' />
            <point x='-15' y='0' />
            <point x='-13' y='8' />
            <point x='-20' y='8' />
            <point x='-20' y='22' />
            <point x='-13' y='22' />
            <point x='-15' y='30' />
         </polygon>
         
         <polygon fill_color='ffffff' state='over' glow='control'>
            <point x='0' y='15' />
            <point x='-15' y='0' />
            <point x='-13' y='8' />
            <point x='-20' y='8' />
            <point x='-20' y='22' />
            <point x='-13' y='22' />
            <point x='-15' y='30' />
         </polygon>
         
         <polygon fill_color='ffaaaa' state='press' glow='control'>
            <point x='0' y='15' />
            <point x='-15' y='0' />
            <point x='-13' y='8' />
            <point x='-20' y='8' />
            <point x='-20' y='22' />
            <point x='-13' y='22' />
            <point x='-15' y='30' />
         </polygon> 
         
         <action><item type='slideshow_forward' /></action>
      </object>


      <!-- volume slider -->
      <object id='volume' offset_x='150' offset_y='5' >
         <rect width='100' height='30' fill_color='224488' corner_tl='10' corner_tr='10' corner_br='10' corner_bl='10' shadow='inner' />   
         
         <object id='speaker_cloak'>
            <rect x='95' y='15' width='1' height='1' fill_alpha='0'  />
         </object>
         <object id='speaker_constrain'>
            <rect x='2' y='10' width='96' height='10' fill_alpha='0'  />
         </object>
            
         <object id='speaker' shadow='default'>
            <rect x='2' y='4' width='26' height='22' fill_alpha='0' state='hit' />
            
            <polygon fill_color='ffffff'>
               <point x='4' y='10' />
               <point x='10' y='10' />
               <point x='15' y='5' />
               <point x='15' y='25' />
               <point x='10' y='20' />
               <point x='4' y='20' />
            </polygon>
            <polygon fill_color='ffffff' state='over' glow='control'>
               <point x='4' y='10' />
               <point x='10' y='10' />
               <point x='15' y='5' />
               <point x='15' y='25' />
               <point x='10' y='20' />
               <point x='4' y='20' />
            </polygon>
            <polygon fill_color='ffaaaa' state='press' glow='control'>
               <point x='4' y='10' />
               <point x='10' y='10' />
               <point x='15' y='5' />
               <point x='15' y='25' />
               <point x='10' y='20' />
               <point x='4' y='20' />
            </polygon> 

            <object>   
               <circle x='15' y='15' radius='6' start='45' end='135' fill_alpha='0' line_color='ffffff' line_alpha='1' line_thickness='3' />
               <cloak target='speaker_cloak' radius_1='50' radius_2='75' />
            </object>
            
            <object>   
               <circle x='15' y='15' radius='10' start='45' end='135' fill_alpha='0' line_color='ffffff' line_alpha='.75' line_thickness='2' />
               <cloak target='speaker_cloak' radius_1='25' radius_2='50' />
            </object>
            
            <object>
               <circle x='15' y='15' radius='14' start='45' end='135' fill_alpha='0' line_color='ffffff' line_alpha='.5' line_thickness='1' />
               <cloak target='speaker_cloak' radius_1='0' radius_2='30' />
            </object>
            
            <constrain target='speaker_constrain' reflect='0' />
            <action>
               <item type='adjust_global_volume' event='slider' />
               <item type='drag' target='speaker' />
            </action>
            
         </object>
      </object>
   </object>
   
   
   <filter>
      <shadow id='default' />
      <shadow id='control_bar' knockout='true' distance='5' alpha='.25' blurX='10' blurY='10' />
      <shadow id='inner' inner='true' distance='3' alpha='.25' blurX='5' blurY='5' />
      <glow id='control' color='ff4400' alpha='.9' blurX='10' blurY='10' inner='false' /> 
   </filter>
   
</slickboard>

 


<slickboard>
   
   <!-- this example can be used to build control panels summoned with double-clicks -->
   
   <!-- double-click anywhere on the gray background to summon the red circle -->
   <!-- click the red circle to toggle the blue square -->
   <!-- move the cursor out to hide the red circle -->
   
   
   <object>
   
      <!-- make the entire board background a hit area -->
      <rect x='0' y='0' width='480' height='300' fill_alpha='0' state='hit' />

      <!-- when the background is double-clicked, center the red circle on cursor and show it -->
      <action>
         <item type='center_on_cursor' event='double_click' target='red' duration='0' easing='none' />   
         <item type='show' event='double_click' target='red' transition='fade' duration='.5' />
      </action>
      
   </object>
   
   
   <!-- a blue square -->
   <object id='blue'>   
      <rect x='115' y='100' width='100' height='100' fill_color='8888ff' shadow='default' /> 
   </object >
   
   
   <!-- initially hidden red circle used to control the blue square -->
   <object id='red' hide='true'>   
      <circle radius='25' fill_color='FF6600' shadow='default' state='hit' />
      
      <!-- when the red circle is clicked, toggle the blue square -->
      <!-- when the cursor moves out, hide the red circle -->
      <action>
         <item type='toggle' target='blue' transition='fade' duration='.5' />
         <item type='hide' event='mouse_out' target='red' transition='fade' duration='.5' />
      </action>  
   </object>


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

 

 < previousnext > 


Copyright © 2010-2017, maani.us