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

 < previousnext > 

 

Ticker

 

<ticker x='number'  
        y='number' 
        width='number' 
        height='number'
        speed_x='number' 
        speed_y='number' 
        />
      


Description

Ticker can be added to an object to make it crawl repeatedly across a predefined area. This can be used to create ticker tapes, news crawls, or moving background graphics.

Ticker can be used with mask to limit the object's's visibility, with constrain to restrict the moving object or make it change direction, and with action to drag the moving object and change its direction and speed:

 

The ticker attributes are:

  • x: The horizontal position of the tickers's upper left corner relative to the upper left corner of the background (0, 0). The default is zero.

  • y: The vertical position of the tickers's upper left corner relative to the upper left corner of the background (0, 0). The default is zero.

  • width: The tickers's width. The default is the board's width.

  • height: The tickers's height. The default is the board's height.

  • speed_x: The tickers's horizontal speed. Positive values push it right. Negative values push it left. The default is 3.

  • speed_y: The tickers's vertical speed. Positive values push it down. Negative values push it up. The default is zero.

 

Example

<slickboard>
   
   <!-- One ticker at the top of the board -->
   <object>
      <ticker speed_x='-3' x='0' y='0' width='480'/>
      <text x='0' y='10' width='300' size='14' color='ffffff' align_h='center'   
            shadow='low'>Tropical Storm Marty in the eastern Pacific.</text>   
   </object>
   

   <!-- Three independent tickers at the bottom that fill the looping gap -->   
   <object>
      <ticker speed_x='-2' x='0' y='0' width='600'/>
      <rect x='0' y='260' width='300' height='20' fill_color='666677' />
      <text x='0' y='260' width='300' size='14' color='88ff00' align_h='center'   
            shadow='low'>Tropical Storm Marty in the eastern Pacific.</text>   
   </object>
   <object>
      <ticker speed_x='-2' x='0' y='0' width='600'/>
      <rect x='300' y='260' width='300' height='20' fill_color='666677' />
      <text x='300' y='260' width='300' size='14' color='ffffff' align_h='center'   
            shadow='low'>The Atlantic remains mostly quiet.</text>   
   </object>
   <object>
      <ticker speed_x='-2' x='0' y='0' width='600'/>
      <rect x='600' y='260' width='300' height='20' fill_color='666677' />
      <text x='600' y='260' width='300' size='14' color='ff4400' align_h='center'   
            shadow='low'>Typhoon Choi-Wan in W. Pacific.</text>   
   </object>
   
   
   <filter>
      <shadow id='low' alpha='.2' blurX='5' blurY='5' />
   </filter>
   
</slickboard>

 


<slickboard>

   <!-- draw an object with two, red, concentric circles -->
   <!-- make the innter circle dragable -->
   <!-- make the object a ticker that moves in both directions -->
   <!-- contstran the object and make it bounce off the board's edges -->
   <object>
      <circle x='240' y='150' radius='65' fill_color='ff4444' state='hit' /> 
      <circle x='240' y='150' radius='100' fill_alpha='0' line_color='664444' line_thickness='20' /> 
      
      <action><item type='drag' float='false' /></action>
      <ticker speed_x='3' speed_y='2' x='0' y='0' width='480' height='300' />
      <constrain x='0' y='0' width='480' height='300' reflect='2' />      
   </object>
   
   
   <!-- draw a rectangular background for the blue ticker -->
   <rect x='50' y='95' width='380' height='60' fill_color='555555' shadow='hole' />
   
   
   <!-- draw a blue rectangular object -->
   <!-- make the blue rectangular dragable -->
   <!-- make the object a ticker that moves in one direction -->
   <!-- mask the object to make it invisible beyound its backgound -->
   <!-- contstran the object horizontally to prevent dragging it vertically -->
   <object>
      <rect x='50' y='100' width='170' height='50' fill_color='8888ff' shadow='default' state='hit' /> 
   
      <action><item type='drag' /></action>
      <ticker speed_x='1' speed_y='0' x='50' y='100' width='380' height='100' /> 
      <mask target='mask' />  
      <constrain x='-500' y='100' width='5000' height='50' />
   </object>
   
   
   <!-- the blue ticker's mask -->
   <object id='mask' >
      <rect x='50' y='95' width='380' height='60' />
   </object>
   
   
   <filter>
      <shadow id='default' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
</slickboard>

 

 

 < previousnext > 


Copyright © 2010-2017, maani.us