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

 < previousnext > 

 

Filter

 

<filter>

   <!-- shadow --/>
   <shadow id='string'
           distance='number'
           angle='number'
           color='string' 
           alpha='number'
           blurX='number' 
           blurY='number' 
           strength='number' 
           quality='number'  
           inner='boolean' 
           knockout='boolean' 
           hideObject='boolean' 
           />
   
   <!-- bevel --/>
   <bevel id='string'
          distance='number'
          angle='number'
          highlightColor='string' 
          highlightAlpha='number'
          shadowColor='string' 
          shadowAlpha='number' 
          blurX='number'  
          blurY='number' 
          strength='number' 
          quality='number' 
          type='string'
          knockout='boolean'
          />   
        
   <!-- glow --/>
   <glow id='string'
         color='string'
         alpha='number'
         blurX='number' 
         blurY='number'
         strength='number' 
         quality='number' 
         inner='boolean'  
         knockout='boolean' 
         />   
 
   <!-- blur --/>
   <blur id='string'
         blurX='number'  
         blurY='number' 
         quality='number' 
         />   

</filter>


Description

Filter defines any number of filters to enhance the look of graphic elements. Filters can be applied to circle, field, image, line, polygon, rect, text, linear numbers, linear ticks, radial numbers, radial ticks, tooltip, and to a whole object.

After defining filters, one or more can be applied to different graphic elements. For example, you can define one shadow and two bevel filters. You can apply just the shadow to one element, just the first bevel to a second element, and both the shadow and the second bevel to a third element.

The effects created with filters are not visible when printed.

The effects created with filters do not scale in full screen (a 5 pixels shadow stays 5 pixels even when the object casting the shadow is scaled up).

 


Shadow

The shadow filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID. If the same ID is used by multiple filters, then the last loaded filter replaces the existing one.

  • distance: The offset distance of the shadow in pixels. The default is 4.

  • angle: The angle of the shadow. Valid values are 0 to 360. Angle zero is at the 12 o'clock position. The default is 135.

  • color: The color of the shadow. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • alpha: The transparency value of the shadow color. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 0.5.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 8. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 8. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • strength: The strength of the shadow. The higher the value, the stronger the contrast between the shadow and the background. Valid values are 0 to 255. The default is 1.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

  • inner: Indicates whether the shadow is an inner shadow or not. A value of true specifies an inner shadow. The default is false, an outer shadow (around the outer edges of the object).

  • knockout: Applies a knockout effect (true), which makes the object invisible and reveals the background through it (see the red text below). The default is false (show the object).

  • hideObject: Indicates whether the object is hidden or not. A value of true indicates that the object itself is not drawn; only the shadow is visible. The default is false (show the object).

 


Bevel

The bevel filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID.

  • distance: The offset distance of the bevel in pixels. The default is 4.

  • angle: The angle of the shadow. Valid values are 0 to 360. Angle zero is at the 12 o'clock position. The default is 135.

  • highlightColor: The highlight color of the bevel. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "FFFFFF" (white).

  • highlightAlpha: The transparency value of the highlight color. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 0.2.

  • shadowColor: The shadow color of the bevel. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • shadowAlpha: The transparency value of the shadow color. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 0.2.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • strength: The strength of the bevel. The higher the value, the stronger the contrast between the bevel and the background. Valid values are 0 to 255. The default is 1.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

  • type: The type of bevel. Valid values are inner, outer, and full. The default value is inner.

  • knockout: Applies a knockout effect (true), which makes the object invisible and reveals the background through it. The default is false (show the object).

 


Glow

The glow filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID.

  • color: The color of the glow. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "88FF00" (green).

  • alpha: The transparency value of the glow color. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 0.2.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • strength: The strength of the glow. The higher the value, the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 1.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

  • inner: Indicates whether the glow is an inner glow or not. A value of true specifies an inner glow. The default is false, an outer glow (around the outer edges of the object).

  • knockout: Applies a knockout effect (true), which makes the object invisible and reveals the background through it (see the red text below). The default is false (show the object).

 


Blur

The blur filter has the following attributes:

  • id: Any unique ID to identify the filter. A filter is applied to an element by passing it this ID.

  • blurX: The amount of horizontal blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • blurY: The amount of vertical blur. Valid values are 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

  • quality: The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

 


Filter Scope

The filter tags can be placed within any object. However, they must be loaded with or before the object that makes use of them. Filters loaded by an object benefit both that object and its children, but filters loaded by a child object do not benefit its parent.

To make filters available to all objects, place the filter tags at the top level of the XML Source (outside of any <object> tags).

 

Example

<slickboard>

   <!-- define two bevel and one shadow filters -->
   <filter>
      <bevel id='bevel1' angle='140' blurX='20' blurY='20' highlightColor='88ff00' highlightAlpha='.5' shadowAlpha='.5' />
      <bevel id='bevel2' angle='150' blurX='3' blurY='3' distance='3' highlightAlpha='.5' />
      <shadow id='shadow1' distance='5' alpha='.5' blurX='10' blurY='10' />
   </filter>

   <!-- apply the first bevel and shadow to a rectangle -->
   <rect x='50' y='50' width='380' height='200' fill_color='8888ff' bevel='bevel1' shadow='shadow1' />
       
   <!-- apply the second bevel and the shadow to a text -->
   <text x='80' y='20' size='50' color='ff0000' bevel='bevel2' shadow='shadow1'>GRAPHIC</text>   

</slickboard>

 


<slickboard>
   
   <!-- draw an object with overlapping red and blue rectangles -->
   <!-- apply shadow independently to each rectangle -->
   <!-- notice that the shadows looks darker where they overlap -->
   <object>
      <rect x='50' y='50' width='250' height='50' fill_color='ff0000' shadow='low' />
      <rect x='190' y='50' width='250' height='50' fill_color='8888ff' shadow='low' />   
   </object>
   
   
   <!-- draw another object with overlapping red and blue rectangles -->
   <!-- apply shadow to the entire object -->
   <!-- notice that the shadow is uniform where the rectacgles overlap -->
   <object shadow='low'>
      <rect x='50' y='200' width='250' height='50' fill_color='ff0000' />
      <rect x='190' y='200' width='250' height='50' fill_color='8888ff' />
   </object>
  
         
   <filter>
      <shadow id='low' alpha='1' blurX='30' blurY='30' />
   </filter>  
           
</slickboard>

 


Shadow and glow effects are visible through transparent objects. To apply a shadow or a glow to a transparent object without affecting the transparent color, make an opaque duplicate of the object, place it below the transparent object, and then apply a filter to it with knockout set to true. This hides the opaque object and adds the filter without affecting the transparent color.

<slickboard>
   
   <!-- transparent rectangle -->
   <rect x='50' y='50' fill_color='FF0000' fill_alpha='.5' />
   
   <!-- transparent rectangle with a shadow -->
   <!-- (shadow is visible through the transparent rectangle) -->
   <rect x='190' y='50' fill_color='FF0000' fill_alpha='.5' shadow='shadow_1' />   

   <!-- two overlapping rectangles, one is a knocked-out, -->   
   <!-- opaque rectangle with a shadow, the other is transparent -->   
   <!-- (shadow is not visible through the transparent rectangle) -->
   <rect x='340' y='50' fill_color='000000' fill_alpha='1' shadow='shadow_2' />
   <rect x='340' y='50' fill_color='FF0000' fill_alpha='.5' />
   
   
   <filter>
      <shadow id='shadow_1' alpha='.75' blurX='20' blurY='20' />
      <shadow id='shadow_2' knockout='true' alpha='.75' blurX='20' blurY='20' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us