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

 < previousnext > 

 

Button

 

<circle ... state='string' />
<image ... state='string' />
<line ... state='string' />
<polygon ... state='string'>...</polygon>
<rect ... state='string' />
<text ... state='string'>...</text>
      


Description

A button is a hit area with added states that change the look of the button on mouse rollover and press events.

The state attribute can be added to any drawing tag (circle, image, line, polygon, rect, and text) to specify the mouse state the graphic responds to. Valid state values for buttons are:

  • hit: Defines the area that can be clicked. A graphic with this state is always displayed, but can be transparent (alpha='0') or covered by other graphics.

  • idle: Display this graphic only when the mouse is not over it.

  • over: Display this graphic only when the mouse hovers over it.

  • press: Display this graphic only when the mouse is pressed over it.

 

Example

<slickboard>

   <!-- the top "Play" button with hit, over, and press states and a static text -->
   <object>
      <rect x='190' y='100' width='100' height='30' fill_color='ff4400' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' shadow='default' state='hit' />
      <rect x='190' y='100' width='100' height='30' fill_color='ff4400' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' glow='blue' state='over' />
      <rect x='190' y='100' width='100' height='30' fill_color='ff0044' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' state='press' />

      <text x='190' y='100' width='100' height='30' align_h='center' align_v='middle' size='16' alpha='.7' shadow='default'>Play</text>
      
      <action><item type='sound_play' target='woosh' /></action>
   </object>


   <!-- a similar bottom "Play" button, but with some color and state variations -->
   <object offset_y='50'>
      <rect x='190' y='100' width='100' height='30' fill_color='ff4400' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' shadow='default' state='hit' />
      <rect x='190' y='100' width='100' height='30' fill_color='ff4400' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' glow='blue' state='over' />
      <rect x='190' y='100' width='100' height='30' fill_color='ff04400' line_color='000000' line_thickness='4' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' state='press' />

      <text x='190' y='100' width='100' height='30' align_h='center' align_v='middle' size='16' alpha='.7' shadow='default'>Play</text>
      <text x='190' y='100' width='100' height='30' align_h='center' align_v='middle' size='16' color='ffffff' state='press'>Play</text>   
      
      <action><item type='sound_play' target='woosh' /></action>
   </object>
   
   

   
   <filter>
      <shadow id='default' />
      <bevel id='margin' blurX='10' blurY='10' distance='3' highlightAlpha='.5' shadowAlpha='.5' type='inner' />
      <glow id='blue' color='0088ff' alpha='.5' blurX='20' blurY='20' inner='false' />   
   </filter>

   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>
   
</slickboard>

 


<slickboard>

   <object>
      <!-- the round button in its idle state -->
      <circle x='240' y='150' radius='30' state='hit' />
      <circle x='240' y='150' radius='30' fill_color='ff4400' line_color='ffffff' line_alpha='.9' line_thickness='3' 
              bevel='margin' shadow='low' state='idle' />
      <circle x='240' y='150' radius='20' fill_color='ff4400' bevel='center' blur='soft' state='idle' />
      <text x='210' y='120' width='60' height='60' align_h='center' align_v='middle' size='30' alpha='.7' shadow='default' state='idle'>1</text>   
      
      <!-- the mouse over state -->
      <circle x='240' y='150' radius='30' glow='blue' state='over' />
      <circle x='240' y='150' radius='30' fill_color='ff4400' line_color='ffffff' line_alpha='.9' line_thickness='3' 
              bevel='margin' state='over' />
      <circle x='240' y='150' radius='20' fill_color='ff4400' bevel='center' blur='soft' state='over' />
      <text x='210' y='120' width='60' height='60' align_h='center' align_v='middle' size='30' alpha='.7' shadow='default' state='over'>1</text>   
              
      <!-- when the button is pressed, draw a similar button, but slightly shifted to suggest a lower button position -->
      <circle x='242' y='152' radius='30' fill_color='ff4400' line_color='ffffff' line_alpha='.9' line_thickness='3' 
              bevel='margin' shadow='default' state='press' />
      <circle x='242' y='152' radius='20' fill_color='ff4400' bevel='center' blur='soft' state='press' />
      <text x='212' y='122' width='60' height='60' align_h='center' align_v='middle' size='30' alpha='.7' 
            shadow='default' state='press'>1</text>
   
      <action><item type='sound_play' target='woosh' /></action>
   </object>
   
   
   <filter>
      <shadow id='default' />
      <shadow id='low' distance='5' alpha='.5' blurX='10' blurY='10' />
      <bevel id='margin' blurX='15' blurY='15' distance='3' highlightAlpha='.4' shadowAlpha='.4' type='inner' />
      <bevel id='center' angle='315' blurX='30' blurY='30' distance='5' highlightAlpha='.4' shadowAlpha='.4' type='inner' />
      <glow id='blue' color='0088ff' alpha='.5' blurX='30' blurY='20' inner='false' />   
      <blur id='soft' blurX='3' blurY='3' />   
   </filter>

   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us