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

 < previousnext > 

 

Slideshow

 

<action>

     <item type='string' slide='number' instant='boolean' />
     ...
   
</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 slideshow functions are:

    • slideshow_play: Play the slideshow.

    • slideshow_pause: Pause the slideshow.

    • slideshow_toggle: Toggle the slideshow (if it is playing, then pause it. If it is pausing, then play it).

    • slideshow_forward: Jump to the next slide.

    • slideshow_backward: Jump to the previous slide.

    • slideshow_jump: Jump to a particular slide.


  • slide: This is used when type is set to slideshow_jump. It determines the slide number to jump to. The first slide is 1, the second slide is 2, and so on.

  • instant: This is used when type is set to slideshow_forward, slideshow_backward, or slideshow_jump. It determines if the new slide is displayed instantly or transitioned in. Valid values are true or false. The default is true. With buttons that can be clicked repeatedly and quickly, it is recommended advancing to new slides instantly to avoid unattractive, overlapping transitions.

 

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>

 

 < previousnext > 


Copyright © 2010-2017, maani.us