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

 < previousnext > 

 

Move

 

<move start_offset_x='number' 
      start_offset_y='number' 
      end_offset_x='number' 
      end_offset_y='number' 
      step='number'
      
      shake_frequency='number'
      shake_span='number' 
      shake_snap='number' 
      />
      


Description

Move can be added to an object to make it move without any user input or actions. This can be used to create moving dashboard needles, background animations, etc.:

 

This function might affect the operation of other functions. This tool does not prevent combining functions, but it is necessary to test and verify each combination. In general, use this function only with transitions and functions that do not move, rotate, or scale the same object.

 

The move attributes are:

  • start_offset_x: The object's horizontal location at the beginning of the animation, relative to its initial rendering location. This can be used to create a continuously updated gauge needle with the current starting point aligned with the previous ending point. The default is zero.

  • start_offset_y: The object's vertical location at the beginning of the animation, relative to its initial rendering location. This can be used to create a continuously updated gauge needle with the current starting offset aligned with the previous ending offset. The default is zero.

  • end_offset_x: The object's horizontal location at the end of the animation, relative to its initial rendering location. The default is zero.

  • end_offset_y: The object's vertical location at the end of the animation, relative to its initial rendering location. The default is zero.

  • step: The number of pixels the object moves in each step. This determines the object's speed. This must be a positive number. The default is 2.


  • shake_frequency: After the object reaches its destination, shake_frequency determines how often the object shakes as a visual effect. Valid values range from 0 (never shake) to 1 (always shake). The default is 1. The shake direction is the same as the animation direction (determined by the offset attributes above). Therefore, it's necessary to offset the pointer at least slightly to establish a shake direction.

  • shake_span: The maximum movement in pixels generated by the shake. The default is 10.

  • shake_snap: If the object should snap to fixed positions while shaking, this determines the intervals in pixels at which to snap. This must be a positive value greater than zero. If this attribute is omitted or equal to zero, then the object shakes smoothly without snapping. The default is zero (no snapping).

 

Example

<slickboard>

   <!-- reload the web page to see the animation from the beginning -->


   <!-- green background rectagle -->
   <rect x='100' y='100' width='280' height='50' fill_color='88ff00' shadow='hole' />   
   
   <!-- black pointer -->
   <object>
      <line x1='120' y1='100' x2='120' y2='150' thickness='3' shadow='default' />
      <rect x='115' y='130' width='11' height='20' shadow='default' />
      
      <!-- move the black pointer 200 pixels horizontally -->
      <move end_offset_x='200' step='3' />
   </object>

   
   <filter>
      <shadow id='default' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
</slickboard>

 


<slickboard>

   <!-- background image -->
   <image url='images/equalizer.jpg' />


   <!-- 10 slider knobs with looping updates that slide the knobs to two different positions -->   
   <object>

      <!-- 10 slider knobs at the first position -->
      <object>
         <image url='images/slider.jpg' x='124' y='179' width='16' height='9' state='hit' />   
         <move start_offset_y='0' end_offset_y='-10' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='154' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='0' end_offset_y='-20' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='184' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='0' end_offset_y='-50' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='214' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='-10' end_offset_y='-70' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='244' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='-20' end_offset_y='-68' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='274' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='-50' end_offset_y='-55' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='304' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='-70' end_offset_y='-40' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='334' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='-60' end_offset_y='-25' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='364' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='-50' end_offset_y='-10' shake_frequency='0' />
      </object>
      <object>
         <image url='images/slider.jpg' x='394' y='179' width='16' height='9' state='hit' />
         <move start_offset_y='-40' end_offset_y='-5' shake_frequency='0' />
      </object>
   
      <!-- call the update for the second knob positions --> 
      <update url='xml/equalizer_2.xml' delay='4' />

   </object>

</slickboard>

<!-- the equalizer_2.xml update code -->
<object>

   <!-- 10 slider knobs at the second position -->
   <object>
      <image url='images/slider.jpg' x='124' y='179' width='16' height='9' state='hit' />   
      <move start_offset_y='-10' end_offset_y='0' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='154' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-20' end_offset_y='0' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='184' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-50' end_offset_y='0' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='214' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-70' end_offset_y='-10' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='244' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-68' end_offset_y='-20' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='274' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-55' end_offset_y='-50' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='304' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-40' end_offset_y='-70' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='334' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-25' end_offset_y='-60' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='364' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-10' end_offset_y='-50' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='394' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-5' end_offset_y='-40' shake_frequency='0' />
   </object>
   
   <!-- call the update for the first knob positions --> 
   <update url='xml/equalizer_1.xml' delay='4' />

</object>

<!-- the equalizer_1.xml update code -->
<object>

   <!-- 10 slider knobs at the first position -->
   <object>
      <image url='images/slider.jpg' x='124' y='179' width='16' height='9' state='hit' />   
      <move start_offset_y='0' end_offset_y='-10' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='154' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='0' end_offset_y='-20' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='184' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='0' end_offset_y='-50' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='214' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-10' end_offset_y='-70' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='244' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-20' end_offset_y='-68' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='274' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-50' end_offset_y='-55' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='304' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-70' end_offset_y='-40' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='334' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-60' end_offset_y='-25' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='364' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-50' end_offset_y='-10' shake_frequency='0' />
   </object>
   <object>
      <image url='images/slider.jpg' x='394' y='179' width='16' height='9' state='hit' />
      <move start_offset_y='-40' end_offset_y='-5' shake_frequency='0' />
   </object>
   
   <!-- call the update for the second knob positions --> 
   <update url='xml/equalizer_2.xml' delay='4' />

</object>

 

 

 < previousnext > 


Copyright © 2010-2017, maani.us