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

 < previousnext > 

 

Scale

 

<scale x='number' 
       y='number' 
       start='number' 
       end='number' 
       step='number'
       direction='string'
      
       shake_frequency='number'
       shake_span='number' 
       shake_snap='number' 
       />
      


Description

Scale can be added to an object to make it scale without any user input or actions. This can be used to create scaling gauge indicators, 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 scale attributes are:

  • x: The horizontal coordinate of the point to scale towards. The default is zero.

  • y: This vertical coordinate of the point to scale towards. The default is zero.

  • start: The percentage to start scaling from. Valid values are zero and above (.5 is half the size, 1 is full size, 2 is double the size, etc.) This can be used to create a continuously updated gauge indicator with the current start aligned with the previous end. The default is 1 (full size).

  • end: The percentage to end scaling at. Valid values are zero and above (.5 is half the size, 1 is full size, 2 is double the size, etc.) The default is 1 (full size).

  • step: The percentage to scale the object in each step. This determines the scaling speed. This must be a positive number greater than zero. The default is .2 (20%).

  • direction: The scaling direction. Valid values are vertical, horizontal, and both. The default is vertical.


  • 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.

  • shake_span: The maximum movement in percentage generated by the shake. Valid values are 0 (no movement) to 1 (the full object size.) The default is .1 (10%).

  • shake_snap: If the object should snap to fixed positions while shaking, this determines the intervals in percentage 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>

   <!-- dark green and dark red rectangles in the background -->
   <rect x='80' y='90' width='220' height='70' fill_color='448800' shadow='hole' />
   <rect x='350' y='100' width='40' height='50' fill_color='880000' line_thickness='8' />


   <!-- green indicator scaling and growing horizontally -->
   <object>
      <rect x='90' y='100' width='200' height='50' fill_color='88ff00' shadow='default' />
      <scale x='90' y='100' start='.25' end='.75' step='.01' direction='horizontal' />   
   </object>
   
   <!-- red indicator scaling and growing vertically -->
   <object>
      <rect x='350' y='100' width='40' height='50' fill_color='ff0000' />
      <scale x='350' y='150' start='0' end='.75' direction='vertical' />
   </object>
   
   
   <filter>
      <shadow id='default' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
</slickboard>

 


<slickboard>
   
   <!-- this is similar to the first example, but with looping updates that scale the -->   
   <!-- indicator repeatidly to 25% and 75% -->
   
   
   <!-- dark blue rectangle in the background -->
   <rect x='80' y='90' width='320' height='70' fill_color='444488' shadow='hole' />


   <!-- blue indicator -->
   <object>
      <rect x='90' y='100' width='300' height='50' fill_color='8888ff' shadow='default' />
      <scale x='90' y='100' start='.25' end='.75' step='.01' direction='horizontal' shake_span='.05' />   
      
      <!-- call the update for the second indicator position --> 
      <update url='xml/indicator_2.xml' delay='5' />
      
   </object>
   
   
   <filter>
      <shadow id='default' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
</slickboard>

<!-- the indicator_2.xml update code --> 
<object>
   <rect x='90' y='100' width='300' height='50' fill_color='8888ff' shadow='default' />
   <scale x='90' y='100' start='.75' end='.25' step='.01' direction='horizontal' shake_span='.05' />   
  
   <!-- call the update for the first indicator position --> 
   <update url='xml/indicator_1.xml' delay='5' />
  
</object>

<!-- the indicator_1.xml update code --> 
<object>
   <rect x='90' y='100' width='300' height='50' fill_color='8888ff' shadow='default' />
   <scale x='90' y='100' start='.25' end='.75' step='.01' direction='horizontal' shake_span='.05' />   
  
   <!-- call the update for the second indicator position --> 
   <update url='xml/indicator_2.xml' delay='5' />
  
</object>

 


<slickboard>
   
   <!-- this is similar to the above example, but lines are drawn on top of the -->
   <!-- indicator to make it look like 20 LED lights -->
   
   <!-- dark green rectangle in the background -->
   <rect x='80' y='90' width='320' height='70' fill_color='448800' shadow='hole' />


   <!-- green indicator -->
   <object>
      <!-- the indicator is 300 pixels wide, divided into 20 LED lights, each 15 pixels wide -->
      <!-- each LED is 5% of the indicator's width. So, set both 'step' and 'shake_snap' to .05 -->
      <!-- and make 'start_scale', 'end_scale', and 'shake_span' an increment of .05 -->
      <rect x='90' y='100' width='300' height='50' fill_color='88ff00' shadow='default' />
      <scale x='90' start='.1' end='.75' step='.05' direction='horizontal' shake_frequency='.9' shake_span='.2' shake_snap='.05' />   
      
   </object>
   
   
   <!-- foreground lines that divide the indicator visually into 20 LED lights, each 15 pixels wide -->
   <line x1='105' y1='100' x2='105' y2='150' color='448800' thickness='2' />
   <line x1='120' y1='100' x2='120' y2='150' color='448800' thickness='2' />
   <line x1='135' y1='100' x2='135' y2='150' color='448800' thickness='2' />
   <line x1='150' y1='100' x2='150' y2='150' color='448800' thickness='2' />
   <line x1='165' y1='100' x2='165' y2='150' color='448800' thickness='2' />
   <line x1='180' y1='100' x2='180' y2='150' color='448800' thickness='2' />
   <line x1='195' y1='100' x2='195' y2='150' color='448800' thickness='2' />
   <line x1='210' y1='100' x2='210' y2='150' color='448800' thickness='2' />
   <line x1='225' y1='100' x2='225' y2='150' color='448800' thickness='2' />
   <line x1='240' y1='100' x2='240' y2='150' color='448800' thickness='2' />
   <line x1='255' y1='100' x2='255' y2='150' color='448800' thickness='2' />
   <line x1='270' y1='100' x2='270' y2='150' color='448800' thickness='2' />
   <line x1='285' y1='100' x2='285' y2='150' color='448800' thickness='2' />
   <line x1='300' y1='100' x2='300' y2='150' color='448800' thickness='2' />
   <line x1='315' y1='100' x2='315' y2='150' color='448800' thickness='2' />
   <line x1='330' y1='100' x2='330' y2='150' color='448800' thickness='2' />
   <line x1='345' y1='100' x2='345' y2='150' color='448800' thickness='2' />
   <line x1='360' y1='100' x2='360' y2='150' color='448800' thickness='2' />
   <line x1='375' y1='100' x2='375' y2='150' color='448800' thickness='2' />
   <line x1='390' y1='100' x2='390' y2='150' color='448800' thickness='2' />
   
   <filter>
      <shadow id='default' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>

</slickboard>

 


<slickboard>
   
   <!-- this differs from the above example in that the LED indicator remains static and -->
   <!-- a mask is scaled to reveal portions of the indicator. This approach allows creating  -->
   <!-- more elaborate LED design with multiple colors, bevels, etc.  -->
   
   
   <!-- background rectangle -->
   <rect x='80' y='90' width='320' height='70' fill_color='444444' shadow='hole' />


   <!-- multi-color indicator -->
   <object shadow='default' >
   
      <!-- three rectangles with diffrenet colors -->
      <rect x='90' y='100' width='150' height='50' fill_color='88ff00' />
      <rect x='240' y='100' width='75' height='50' fill_color='ff8800' />
      <rect x='315' y='100' width='75' height='50' fill_color='ff0000' />
      
      <!-- lines that divide the rectangles into 20 LED lights, each 15 pixels wide -->
      <line x1='105' y1='100' x2='105' y2='150' color='333333' thickness='2' />
      <line x1='120' y1='100' x2='120' y2='150' color='333333' thickness='2' />
      <line x1='135' y1='100' x2='135' y2='150' color='333333' thickness='2' />
      <line x1='150' y1='100' x2='150' y2='150' color='333333' thickness='2' />
      <line x1='165' y1='100' x2='165' y2='150' color='333333' thickness='2' />
      <line x1='180' y1='100' x2='180' y2='150' color='333333' thickness='2' />
      <line x1='195' y1='100' x2='195' y2='150' color='333333' thickness='2' />
      <line x1='210' y1='100' x2='210' y2='150' color='333333' thickness='2' />
      <line x1='225' y1='100' x2='225' y2='150' color='333333' thickness='2' />
      <line x1='240' y1='100' x2='240' y2='150' color='333333' thickness='2' />
      <line x1='255' y1='100' x2='255' y2='150' color='333333' thickness='2' />
      <line x1='270' y1='100' x2='270' y2='150' color='333333' thickness='2' />
      <line x1='285' y1='100' x2='285' y2='150' color='333333' thickness='2' />
      <line x1='300' y1='100' x2='300' y2='150' color='333333' thickness='2' />
      <line x1='315' y1='100' x2='315' y2='150' color='333333' thickness='2' />
      <line x1='330' y1='100' x2='330' y2='150' color='333333' thickness='2' />
      <line x1='345' y1='100' x2='345' y2='150' color='333333' thickness='2' />
      <line x1='360' y1='100' x2='360' y2='150' color='333333' thickness='2' />
      <line x1='375' y1='100' x2='375' y2='150' color='333333' thickness='2' />
      <line x1='390' y1='100' x2='390' y2='150' color='333333' thickness='2' />
   
      <!-- use a mask to reveal portions of the LED -->
      <mask target='led_mask' />
      
   </object>
   
   
   <!-- the LED mask -->
   <object id='led_mask'>
      <!-- the indicator is 300 pixels wide, divided into 20 LED lights, each 15 pixels wide -->
      <!-- each LED is 5% of the indicator's width. So, set both 'step' and 'shake_snap' to .05 -->
      <!-- and make 'start_scale', 'end_scale', and 'shake_span' an increment of .05 -->
      <rect x='90' y='100' width='300' height='50' fill_color='88ff00' />
      <scale x='90' start='.1' end='.85' step='.05' direction='horizontal' shake_frequency='.9' shake_span='.2' shake_snap='.05' />   
      
   </object>
   
   
   <filter>
      <shadow id='default' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>

</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us