< previous

next >

link

<link>

   <area x='int' y='int' width='int' height='int' url='string' target='string' text='string' font='string' bold='boolean' size='int' color='string' background_color='string' alpha='int' stop_sound='boolean' />
   <area x='int' y='int' width='int' height='int' url='string' target='string' font='string' bold='boolean' size='int' color='string' background_color='string' alpha='int' stop_sound='boolean' />
   ...
   
</link>

Description

link holds any number of areas, each defining a rectangle and a URL to go to when the user clicks inside the rectangle. Clicked links can also trigger the gauge to update without reloading the web page. This makes it possible to create interactive gauges.

This feature is available to registered users only. Unregistered software links all gauges to this web site. Register your copy to activate this feature.

Each area has the following attributes:

• x: The horizontal position of the area's upper left corner relative to the upper left corner of the canvas (0, 0). The default value is zero
  
  
• y: The vertical position of the area's upper left corner relative to the upper left corner of the canvas (0, 0). The default value is zero
  
  
• width: The area's width. The default value is the canvas' width
  
  
• height: The area's height. The default value is the canvas' height
  
  
• url: Relative or absolute URL to go to when the area is clicked
  
  
• target: The window to open the link in. Valid values are:
  
  
  • _self: opens the link in the same window (default)
  • _blank: opens the link in a new blank window
  • _parent: opens the link in the immediate frameset parent
  • _top: opens the link in the full body of the window
  • string: opens the link in the window named <string>. If this window doesn't exist, a new window is opened and named <string>
  • update: updates the gauge without reloading the web page. This allows creating interactive gauges that respond to clicks. In this case, the URL must be a script similar to that in the update feature
  • print: prints the gauge. Place a link on top of a "Print" button to add a print function to the gauge (see example below.) In this case, the URL parameter is ignored
    
    
• text: The text to show as a tooltip when the cursor is inside the link area. If omitted, the tooltip isn't displayed (default)
  
  
• font: The font used to draw the tooltip text. See the Fonts section below. The default is Arial
  
  
• bold: A boolean value that indicates whether the tooltip font is bold or not. The default is true
  
  
• size: The tooltip's font size. The default is 12
  
  
• color: The tooltip's font color. This must be a string holding triple hexadecimal values representing the red, green, and blue components for a color. The default is "000000" (black)
  
  
• background_color: The tooltip's background color. If omitted, the tooltip has no background. This must be a string holding triple hexadecimal values representing the red, green, and blue components for a color. The default is omitted (no background)
  
  
• alpha: The tooltip's transparency. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 80
  
  
• stop_sound: If the link's target is set to update, this parameter determines whether to stop previous sounds with the update or not. The default is false (don't stop previous sounds)

If link areas overlap, the first link area has the highest priority, and the last has the lowest.

Links Over Buttons

Place links over design elements that look like buttons to produce functional buttons (see the example below.) These buttons can do anything from printing, to jumping to other web pages, to changing anything in the gauge (like moving pointers, changing colors, removing or adding elements, etc.)

If you use the image function to import standard flash buttons (with roll-over, etc.) into your gauge, the links placed over them suspend the buttons' roll-over effect and their actions.

To combine roll-over buttons with links placed over them, design regular flash movie clips (not buttons) that respond to the mouse roll-over with actionscript.

Flash to Javascript Communication

To make a javascript function respond to a click on a gauge's link, omit the link's target parameter and set the url to:

javascript:function()

See the example below.

Javascript to Flash Communication

To send a message from Javascript to a gauge to trigger a update, use this function:

document.gauge.SetVariable ( "update_url", "http://your_server/update.xml" );

Replace the second parameter with the URL to request the update from.

To send XML code from Javascript to a gauge and update the gauge directly, use this function:

document.gauge.SetVariable ( "update_xml", "<gauge></gauge>" );

Replace the second parameter with a string containing the XML code to update the gauge.

Sending messages from Javascript to Flash (a gauge) isn't supported by all browsers, and some users might disable javascript on their browsers. Browsers supporting it are Netscape Navigator 3.0 - 4.7x, Netscape 6.2 or higher, Internet Explorer 3.0 or higher, Safari 2.0 or higher, and Firefox 1.5 or higher.

To create buttons that update a gauge, an alternative to javascript is to draw the buttons inside the chart, and use links to trigger updates (see the example below.)

Fonts

XML/SWF Gauge has the font Arial bold embedded in it. By setting the above font attribute to Arial, and the bold attribute to true, the embedded font makes the text look identical on all machines, regardless of whether the machine has this font or not. Other advantages of an embedded font is that it can be rotated, and it can be rendered transparently. The disadvantage is that it increases the size of the flash file, the reason why the tool only has one embedded font. (The gallery only uses this font.)

You may set the above font attribute to any other non-embedded font. If the local machine doesn't have the exact font, Flash uses whatever font most closely resembles it. Non-embedded fonts may look different than expected, but can be sharper and more legible than embedded fonts at small point sizes (below 10 points.)

When non-embedded fonts are used, any rotation and alpha attributes are ignored. Text using a non-embedded font is always displayed horizontally, and fully opaque.

One way to display any text without worrying about fonts is by including it as JPEG images or SWF flash files, using the image function.

Special Characters

To display special characters or languages other than English:

1. Type the special characters in the source file, and apply a font to it that can display the characters:

<area text='special_text' font='special_font'>

Replace special_font with the name of a font that can display the special characters. This must be a font other than Arial, and the font name must be typed exactly the way it is referred to by the operating system. Replace special_text with the text containing the special characters. The special characters must appear correctly here.

2. Save the source file with UTF-8 encoding.

3. View the gauge on a machine that has the same special font already installed.

Example

	
<gauge>

   <!-- draw buttons -->	
   <rect x='25' y='50' width='80' height='30' fill_color='88ff00' />
   <rect x='115' y='50' width='80' height='30' fill_color='88ff00' />
   <rect x='205' y='50' width='80' height='30' fill_color='88ff00' />
   <rect x='295' y='50' width='80' height='30' fill_color='88ff00' />
   <text x='25' y='55' width='80' height='30' align='center' size='12' color='ffffff'>google</text>
   <text x='115' y='55' width='80' height='30' align='center' size='12' color='ffffff'>print</text>
   <text x='205' y='55' width='80' height='30' align='center' size='12' color='ffffff'>update</text>
   <text x='295' y='55' width='80' height='30' align='center' size='12' color='ffffff'>javascript</text>

   <link>
      
      <!-- link to google -->	
      <area x='25' 
            y='50' 
            width='80'  
            height='30' 
            url='http://www.google.com' 
            target='_self'
            text='google.com'
            background_color='ff0000' 
            alpha='75'
            />
           
     <!-- link to print -->	
      <area x='115' 
            y='50' 
            width='80'  
            height='30' 
            target='print'
            />

      <!-- link to update -->
      <area x='205' 
            y='50' 
            width='80'  
            height='30' 
            url='update.php' 
            target='update'
            />
                
      <!-- link to javascript -->
      <area x='295' 
            y='50' 
            width='80'  
            height='30' 
            url="javascript:alert('Hello World!')"
            />   
   </link>
   
</gauge>
	

< previous

next >