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

 next > 

 

Object

 

<object id='string' offset_x='number' offset_y='string' hide='boolean'>

   ...

</object>
      


Description

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

  • id: Any unique ID to identify the object. This is used in some cases to reference and control the object from other external components. The default is omitted (the object has no ID and cannot be referenced externally). The ID "slickboard" is reserved for the entire board.

  • offset_x: The number of horizontal pixels to offset the graphic elements enclosed by the object tag. This is useful to establish a local coordinate system within each object, and to duplicate and move objects without re-editing pixel values enclosed by the object. The default is zero.

  • offset_y: The number of vertical pixels to offset the graphic elements enclosed by the object tag. This is useful to establish a local coordinate system within each object, and to duplicate and move objects without re-editing pixel values enclosed by the object. The default is zero.

  • hide: Determines if the object is initially visible or not. This can be used to initially hide objects and show them later with actions. Valid values are true or false. The default is false (do not hide).

 


Layering

Graphical elements 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>
   
   <!-- bottom object -->
   <object>
      <rect x='0' y='0' width='40' height='40' />
   </object>
   
   <!-- top object -->
   <object>
      <rect x='50' y='100' width='40' height='40' />
      <rect x='150' y='100' width='40' height='40' />  
   </object>
   
</slickboard>

The initial layering order can be changed with actions.

 


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. For example, if the parent moves, then the child follows. If the child moves, it does so independently from the parent:

<slickboard>
   
   <!-- parent object -->
   <object>
   
      <rect x='0' y='0' width='40' height='40' />
      
      
      <!-- child object -->
      <object>
         <rect x='50' y='100' width='40' height='40' />
         <rect x='150' y='100' width='40' height='40' />   
      </object>
      
   </object>
   
</slickboard>

 


Coordinates

SlickBoard uses a coordinate system with the origin point at the top-left corner (0, 0). By including the offset_x and offset_y attributes in the object tags, all the pixel values enclosed by this object become offsetted. This can be used to move complex graphics anywhere on the board just by offsetting their enclosing object:

<slickboard>
   
   <object>
      <!-- draw a rect at the origin point (0, 0) -->
      <rect x='0' y='0' width='40' height='40' />
   </object>
   
   
   
   <object offset_x='100' offset_y='100'>
      <!-- draw an offsetted rect at point (100, 100) -->
      <rect x='0' y='0' width='40' height='40' />
   </object>
   
  
  
   <object offset_x='100' offset_y='100'>
      <!-- draw an offsetted rect at point (100, 100) -->
      <rect x='0' y='0' width='40' height='40' />
      
      <object offset_x='100' offset_y='100'>
         <!-- draw another rect offsetted twice by two nested objects at point (200, 200) -->   
         <rect x='0' y='0' width='40' height='40' />
      </object>
   
   </object>
   
</slickboard>

 

Example

<slickboard>

   <!-- draw two black squares not defined as objects -->
   <rect x='50' y='50' width='40' height='40' />
   <rect x='150' y='50' width='40' height='40' /> 
   
   <!-- draw two red squares defined as an object -->
   <object>
      <rect x='50' y='100' width='40' height='40' fill_color='ff3300' />
      <rect x='150' y='100' width='40' height='40' fill_color='ff3300' /> 
   </object>
   
   <!-- duplicate the above object and offset it -->
   <object offset_x='250' offset_y='0'>
      <rect x='50' y='100' width='40' height='40' fill_color='ff3300' />
      <rect x='150' y='100' width='40' height='40' fill_color='ff3300' />  
   </object>
   
   <!-- draw a green square at the origin point (0, 0) and define it as an object -->   
   <!-- offset the object and transition it (reload the webpage to see the transiton) -->   
   <object offset_x='200' offset_y='200'>
      <rect x='0' y='0' width='40' height='40' fill_color='88ff00' />
      <transition_in type='fly' />
   </object>
   
</slickboard>

 

 next > 


Copyright © 2010-2017, maani.us