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

 < previousnext > 

 

Slide

 

<slide duration='number'  
       next='number' 
       forward='number' 
       backward='number'
       float='boolean' 
       stack='boolean'
       preload='number' 
       spinning_wheel='boolean' 
       purge='boolean' 
       />
      


Description

Slide can be added to a root object (not embedded inside other objects) to make it function as a slide in a slideshow. Root objects with the slide tags are displayed as a slideshow in the order they are created:

 

Objects that function as slides cannot be docked.

 

The slide attributes are:

  • duration: The slide's duration in seconds. The default is 2.

  • next: By default, slides are displayed in the order they are created. However, this attribute can be used to override the default order. If this attribute is set to 0, then a random slide is played next; if it is set to 1, then the first slide is played next; if it is set to 2, then the second slide is played next; and so on.

  • forward: By default, slides are displayed in the order they are created. However, this attribute can be used to determine which slide to show at a forward action. The first slide is 1, the second slide is 2, and so on.

  • backward: By default, slides are displayed in the order they are created. However, this attribute can be used to determine which slide to show at a backward action. The first slide is 1, the second slide is 2, and so on.

  • float: Determines whether to bring this slide to the front or keep it behind other objects. Valid values are true and false. The default is true.

  • stack: Determines whether to stack the current slide over the previous slide or not. If true, then the current slide transitions over the previous slide without deleting it, which allows creating composite slides. If false, then the current slide removes the previous slide. The default is false.

  • preload: Determines when to load the slide's resources. Valid values are:.

    • 1: Load the slide's resources immediately. This insures that the slide is loaded early, but might delay the launch of the board. If the board has actions that enable jumping to any slide, then use this preload value to ensure that all the slides are loaded before the actions are called. This is the default value.

    • 2: Load the slide's resources only when nothing else is loading. This insures that the slide is loaded early, but without delaying the launch of the board. If the board has actions that enable jumping to any slide, then do not use this preload value to ensure that all the slides are loaded before the actions are called.

    • 3: Load the slide's resources only before displaying the slide. This keeps the memory free until the slide is displayed. If the board has actions that enable jumping to any slide, then do not use this preload value to ensure that all the slides are loaded before the actions are called.


  • spinning_wheel: If true, a spinning wheel is displayed whenever the slide is expected to transition in, but its resources are still being loaded. If false, then the spinning wheel is not displayed and the previous slide's duration is lengthened while the resources are being loaded. The default is false.

  • purge: If true, the resources are purged from memory and have to be reloaded when needed. In the case of large slideshows, this save memory, but requires reloading repeating slides. If false, the resources stay in memory to be reused again. In the case of small looping slideshows, this saves loading time. The default is false. If the board has actions that enable jumping to any slide, avoid purging to ensure that all the slides are loaded before the actions are called.

 


Slideshow Timers

  • Timers within a slide are executed after their initial delay, counting down from the start of the slide's transition.

  • Timers are executed every time the slide appears. See the third example below.

  • Slideshows can be used without graphics to store timers that control the board over time. This has the added advantage that the slideshow and its timers can be paused and resumed, the timers can be executed in different sequences by jumping to different slides, the slideshow and its timers are looped, etc. See the third example below.

 

Example

<slickboard>
   
   <!-- first slide -->
   <object>
      <image url='images/image_roadrunner.jpg' fill='stage' />
      <text x='-5' y='300' width='300' align_h='center' size='50' color='ffffff' rotation='-90' shadow='default'>Roadrunner</text>   
      <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' />
      <text y='0' width='480' align_h='center' size='35' color='ffffff' shadow='default'>D            o            v            e</text>   
      <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' />
      <text x='480' y='0' width='300' rotation='90' align_h='center' size='55' color='ffffff' shadow='default'>Q  u  a  i  l</text>   
      <slide duration='1' />
      <transition_in type='fly' easing='bounce' startPoint='2' />
      <transition_out type='fade' />
   </object>


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

 


<slickboard>
   
   <!-- first slide -->
   <object>
      <image url='images/image_roadrunner.jpg' x='0' y='0' width='240' height='150' shadow='default' />
      <slide duration='.5' />
      <transition_in type='fade' />
      <transition_out type='fly' duration='1' startPoint='4' />
   </object>

   <!-- second slide (stacked) -->
   <object>
      <image url='images/image_dove.jpg' x='240' y='0' width='240' height='150' shadow='default' />
      <slide duration='.5' stack='true' />
      <transition_in type='fly' duration='1' startPoint='6' />
      <transition_out type='fly' duration='1' startPoint='4' />
   </object>
   
   <!-- third slide (stacked) -->
   <object>
      <image url='images/image_quail.jpg' x='0' y='150' width='240' height='150' shadow='default' />
      <slide duration='.5' stack='true' />
      <transition_in type='fly' easing='bounce' startPoint='2' />
      <transition_out type='fly' duration='1' startPoint='4' />
   </object>

   <!-- fourth slide (stacked) -->
   <object>
      <image url='images/image_snake.jpg' x='240' y='150' width='240' height='150' shadow='default' />
      <slide duration='1' stack='true' />
      <transition_in type='blinds' duration='1' startPoint='6' />
      <transition_out type='fly' duration='1' startPoint='4' />
   </object>
   
   <!-- fifth non-stacked slide. It clears previously stacked slides -->
   <object>
      <image url='images/image_flower.jpg' fill='stage' />
      <slide duration='1' />
      <transition_in type='fly' duration='1' startPoint='6' />
      <transition_out type='fade' />
   </object>


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

 


<slickboard>
   
   <!-- this example uses timers within a slideshow. The slideshow does not -->
   <!-- display any graphics. It is only used to control the red circle over time. -->
   
   
   <!-- gray background circle that marks the starting position-->
   <circle x='75' y='75' radius='55' fill_color='555555' />
      
      
   <!-- red object -->
   <object id='red'>
      
      <!-- red circle -->
      <circle x='75' y='75' radius='50' fill_color='ff3300' state='hit' />
      
      <!-- black outline that appears when the slideshow is paused -->
      <circle x='75' y='75' radius='45' fill_alpha='0' line_thickness='4' state='checked' />
      
      <!-- click the red circle to pause/resume the slideshow -->
      <!-- double-click the red circle (fast) to reset its position -->
      <action>
         <item type='slideshow_toggle' />
         <item type='slideshow_jump' slide='4' event='double_click' />
      </action>
      
   </object>
   
   
   <!-- four slides that do not diaply graphics. They only have timers that move the red circle -->   
   <!-- first slide -->
   <object>
      <slide duration='2' />
      <action>
         <item type='move_to' target='red' x='355' easing='bounce' event='timer' />
      </action>
   </object>
   
   
   <!-- second slide -->
   <object>
      <slide duration='2' />
      <action>
         <item type='move_to' target='red' y='175' easing='bounce' event='timer' />
      </action>
   </object>
   
   
   <!-- third slide -->
   <object>
      <slide duration='2' />
      <action>
         <item type='move_to' target='red' x='25' easing='bounce' event='timer' />
      </action>
   </object>
   
   
   <!-- fourth slide -->
   <!-- this slides resets the circle's position -->
   <!-- double-click the red circle (fast) to jump to this slide.-->
   <object>
      <slide duration='2' />
      <action>
         <item type='move_to' target='red' x='25' y='25' easing='bounce' event='timer' />
      </action>
   </object>

</slickboard>

 


<slickboard>
   
   <!-- this example combines transitions with scaling to produce a zooming and panning effect -->
   <!-- this works only when the transition does not move, scale, or rotate the slide (to avoid conflicts with scale) -->   
   <!-- the scale's x and y attributes determine the point to zoom into, which sholuld usually be where the eyes are -->
   <!-- the smoothness of this effect depends on the image quality and size, the scale's step value, and the CPU speed -->
   
   
   <!-- first slide -->
   <object>
      <image url='images/image_roadrunner.jpg' fill='stage' />
      <scale x='225' y='0' start='1' end='1.5' step='.005' direction='both' shake_frequency='0' />   
      <slide duration='1' />
      <transition_in type='fade' duration='1' />
      <transition_out type='fade' duration='1' />
   </object>

   <!-- second slide -->
   <object>
      <image url='images/image_dove.jpg' fill='trim' width='480' height='300' />
      <scale x='225' y='50' start='1' end='1.5' step='.005' direction='both' shake_frequency='0' />   
      <slide duration='1' />
      <transition_in type='fade' duration='1' />
      <transition_out type='fade' duration='1' />
   </object>
   
   <!-- third slide -->
   <object>
      <image url='images/image_quail.jpg' fill='trim' width='480' height='300' />
      <scale x='0' y='0' start='1' end='1.5' step='.005' direction='both' shake_frequency='0' />   
      <slide duration='1' />
      <transition_in type='fade' duration='1' />
      <transition_out type='fade' duration='1' />
   </object>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us