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

 < previousnext > 

 

Buttons

 

To create an interactive button, draw any shape or button with the draw function, and then overlap it with a link that responds to a click and performs a task:

<chart>

   <!-- reduce the chart's height to make room for a button -->
   <chart_rect height='100' />
               
   <draw>
      <!-- draw a simple rectangle and text to use as a button -->
      <rect x='110' y='200' width='80' height='25' fill_color='cccccc' />   
      <text x='135' y='204'>print</text>
      
      <!-- draw a second button with a roll over state -->
      <button url_idle='images/print_idle.jpg' url_over='images/print_over.jpg' x='210' y='200' width='80' height='25' />   
   </draw>

   <!-- add printing links over the buttons -->
   <link>
      <area x='110' y='200' width='80' height='25' target='print' />
      <area x='210' y='200' width='80' height='25' target='print' />
   </link>

</chart>

 


Flash Button

If you use the draw function to draw a flash button with rollover frames, an overlapping link will suspend the button's rollover effect and its actions. To combine a flash button with a link, design a regular flash movie (not a button) that responds to the mouse with looping actionscript like this:

//detect if the mouse is inside the button
if ( _xmouse>0 && _xmouse<30 && _ymouse>0 && _ymouse<20 ){      
   gotoAndPlay(3); //display rollover frame
}

//detect if the mouse is outside the button
if ( !(_xmouse>0 && _xmouse<30 && _ymouse>0 && _ymouse<20) ){   
   gotoAndPlay(1); //display the idle button
}

 

The above values are in local coordinates (not related to the chart's coordinates). Make them reflect the buttons's stage dimensions, not the button's size inside the chart. The above example assumes that the stage is 30x20 pixels and that the button fills the whole stage. When you insert the button inside a chart, it can be a different size (60x30 pixels for example).

Here is an example that includes a flash button (click here to download the Flash 9 files):

<chart>

   <!-- reduce the chart's height to make room for a button -->
   <chart_rect height='100' />
               
   <!-- draw a flash button -->
   <draw>
      <image url='images/button_rollover.swf' x='167' y='200' width='66' height='25' />   
   </draw>

   <!-- add a printing link over the button -->
   <link>
      <area x='160' y='200' width='80' height='25' target='print' />
   </link>

</chart>

 

Button states do not have to be single frames. They can also be multiple-frame animations.

 

 

 < previousnext > 


Copyright © 2003-2017, maani.us