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

 < previousnext > 

 

Objects

Object tags can be used to enclose one or more graphic elements to organize them into objects and to give them additional functionality such as animation, interactivity, etc.:

<slickboard>

   <!-- the two circles are grouped into one object -->
   <object>
      
      <circle x='240' y='150' radius='75' />
      <circle x='240' y='150' radius='100' fill_alpha='0' line_thickness='10' />    
      
      <!-- the new object is given the ticker function to animate it -->
      <ticker speed_x='6' speed_y='3' />
      
   </object>
   
   
   <!-- the text is outside the object tags, so it stays static -->
   <text x='230' y='130' size='30' color='ff3300'>Hello World!</text>

</slickboard>

 


Layering

Graphics and objects are layered according to their order in the XML source code. The first XML tags generate the bottom element. The last XML tags generate the top element:

<slickboard>

   <!-- move the text before the circles to send it to the background -->   
   <text x='230' y='130' size='30' color='ff3300'>Hello World!</text>

   
   <!-- the circles now animate over the text -->   
   <object>
      <circle x='240' y='150' radius='75' />
      <circle x='240' y='150' radius='100' fill_alpha='0' line_thickness='10' />    
      <ticker speed_x='6' speed_y='3' />
   </object>

</slickboard>

 


Parent & Child

An object (child) can be nested inside another object (parent). The child object inherits and is affected by most of the parent's behaviors, but the child object can have additional behaviors independently from the parent:

<slickboard>

   <text x='230' y='130' size='30' color='ff3300'>Hello World!</text>

   
   <!-- parent object -->
   <!-- the ticker animates both the parent and its child (both circles) -->
   <object>
      
      <circle x='240' y='150' radius='75' />
      <ticker speed_x='6' speed_y='3' />
      
      <!-- the outer circle is now a child within the parent object -->
      <!-- the child has a new blinking behavior that does not affect the parent -->   
      <object>
         <circle x='240' y='150' radius='100' fill_alpha='0' line_thickness='10' /> 
         <blink on='1' fade_out='0' off='1' fade_in='0' />  
      </object>
      
   </object>

</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us