XML/SWF Gauge  1.6 | XML/SWF Charts | SlickBoard(New)

 < previousnext > 

 

rotate

 

<rotate x='float' 
        y='float' 
        start='float' 
        span='float' 
        step='float'
      
        shake_frequency='int'
        shake_span='float' 
        shake_snap='float' 

        shadow_alpha='int'
        shadow_x_offset='float' 
        shadow_y_offset='float' >
      
           element to rotate
           element to rotate
           ...
      
</move>
              


Description

rotate is used in gauges with rotating pointers to rotate them from one angle to another. It rotates all the design elements nested inside it. This can also be used to create blinking lights and simple animations by rotating design elements on and off screen (see example.)

Draw all rotating pointers in the 12 o'clock position (angle zero,) even if they never appear in this position. Then use the rotate tag to set the rotation's start and end angles.

Animation tags (move, rotate , scale) only animate elements generated with the drawing tags (circle , image , line , polygon , rect , text .) Only drawing tags can be nested inside the animation tags. Animation tags can't be nested inside each other.

 

  • x: The horizontal coordinate of the point to rotate around. The default is zero

  • y: This vertical coordinate of the point to rotate around. The default is zero

  • start: The angle to start rotating from. Angle zero is the 12 o'clock position. The default is zero

  • span: The number of degrees to rotate the pointer. A positive value rotates it clockwise. A negative value rotates it counterclockwise. To rotate the pointer more than full circle, make this value larger than 360 or smaller than -360. The default is 360 (full circle, clockwise)

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


  • shake_frequency: After the pointer reaches its destination, shake_frequency determines how often the pointer shakes as a visual effect. Valid values are 0 (never shake) to 100 (always shake). The default is 100

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

  • shake_snap: If the pointer 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 pointer shakes smoothly without snapping. The default omits this attribute (no snapping)


  • shadow_alpha: The transparency value of the pointer's shadow. Valid values are 0 (fully transparent) to 100 (fully opaque, hard shadow). Shadows give gauges some depth. To hide the shadow, set this value to zero. The default is 20

  • shadow_x_offset: The shadow's horizontal distance in pixels from the pointer. This makes the pointer look more or less elevated from the layers below it. The default is 2

  • shadow_y_offset: The shadow's vertical distance in pixels from the pointer. This makes the pointer look more or less elevated from the layers below it. The default is 2

 


Example

	
<gauge>

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


   <!-- draw a green half-circle in the background -->
   <circle x='200' y='175' radius='100' start='270' end='450' fill_color='88ff00' />
   
   <!-- create a pointer for the green area -->
   <rotate x='200' y='175' start='300' span='120' step='5'>
      <line x1='200' y1='85' x2='200' y2='175' thickness='5' />
   </rotate>

   <!-- draw a gray circle to mask part of the pointer and its background -->
   <circle x='200' y='175' radius='35' fill_color='666666' />
   
   
   <!-- draw a dark, red circle as a background for a blinking light -->
   <circle x='300' y='100' radius='11' fill_color='880000' />
   
   <!-- create a red circle and rtotate it repeatidly, mostly off screen -->
   <!-- step=90 to show the circle only once every full rotation of 4 positions -->
   <rotate x='300' y='300' span='360000' step='90' shadow_alpha='0'>
      <circle x='300' y='100' radius='10' fill_color='ff3300' />
   </rotate>
   
</gauge>
	

 

 

 < previousnext > 


Copyright © 2005-2013, maani.us