Filters

From FHTML

Jump to: navigation, search

Contents


1 What's the samne as html?

1.1 box-shadow

  • Fhtml can apply filters in a CSS3-compliant way. This method is, however, limited to the dropShadow filter, which in CSS is called box-shadow.
  • While limiting, the dropShadow filter is a workhorse that allows you to do lots of cool things.
  • To apply multiple drop shadows, apply hideous CSS3 syntax multiple times, separated by commas.

<style type="text/fhtml">
    .container {
        background:none;
        border:none;
        box-orient:none;
        w:100%;
        h:100%;
    }
    div {
        x:center;
        y:center;
        w:300px;
        h:120px;  
        border:none;
        border-radius:50%;
    }
    .test {
        background:#F4F4F4;
        box-shadow:80px 80px 30px rgba(0,0,0, .5), inset 8px 8px 8px #999999, -80px -80px 30px rgba(0,0,255, .2);
    }
</style>
<div class="container" >
    <div class="test" />
</div>
View Example View Source

2 What's extra?

  • FluidHtml provides a variety of effects using the filter property.
  • Capabilities
    • The following filter types are supported: bevel, blur, colorMatrix, glow, gradientBevel, gradientGlow and pixelBender. Support for ConvolutionFilter is on the roadmap and relatively simple to achieve, albeit as ungainly to work with as it is in Actionscript.
    • Filters can be animated, of course. Example coming soon.
    • FluidHtml supports some interesting filters that are not available in Html5/CSS3.
  • To apply a filter
    • First define a filter asset.
    • Then point to that asset using the filter property in your CSS.
  • Here are some examples:

2.1 dropShadow

  • This example lists a few drop shadow filter definitions as assets, then uses them in CSS. Unlike the other examples on this page, the source code displayed here is a complete running example. Others display only what's relevant to the topic.
  • Note also how elements can be positioned around the center of a box.

<style type="xml/fhtmlassets" >
    <filter name="f1">
        <item filterType="dropShadow" distance="5"
                angle="45" color="#000000" alpha=".75"  
                strength="1" quality="1" />
    </filter>
    <filter name="f2">
        <item filterType="dropShadow" distance="15"
                angle="25" blurX="40" blurY="40"
                color="#000000" alpha=".75" strength="1"
                quality="1" />
    </filter>
    <filter name="f3">
        <item filterType="dropShadow" distance="15"
                angle="25" blurX="40" blurY="40"
                color="#000000" alpha=".75" strength="1"
                quality="20" />
    </filter>
    <filter name="f4">
        <item filterType="dropShadow" distance="30"
                angle="-25" blurX="20" blurY="20" color="#000000"
                alpha=".75" strength="1" quality="1" />
    </filter>
</style>
<style type="text/fhtml">
    div {
        w:100px;h:100px;  
        border-radius:20px;
        background:#F4F4F4;
    }
    .container {
        background:none;
        border:none;
        box-orient:none;
        w:100%;h:100%;
    }
    .topLeft {
        x:center|-100;y:center|-100;
        filter:f1;
    }
    .topRight {
        x:center|100;y:center|-100;
        filter:f2;
    }
    .bottomRight {
        x:center|100;y:center|100;
        filter:f3;
    }
    .bottomLeft {
        x:center|-100;y:center|100;
        filter:f4;
    }
</style>
<div class="container" >
    <div class="topLeft" />
    <div class="topRight" />
    <div class="bottomLeft" />
    <div class="bottomRight" />
</div>
View Example View Source

2.2 bevel

  • Use this to add beveled edges to elements.
  • What's especially cool about these bevels is that they match the shape of your object - they're not just rectangles...

<style type="xml/fhtmlassets" >
    <filter name="f1">
        <item filterType="bevel" distance="6"
            angle="90" highlightColor="#FFFFFF" highlightAlpha=".8"
            shadowColor="#666666" shadowAlpha="1" blurX="2" blurY="2"
            strength="1" quality="1" type="inner"/>
    </filter>
    <filter name="f2">
        <item filterType="bevel" distance="6"
            angle="0" highlightColor="#FFFFFF" highlightAlpha=".8"
            shadowColor="#666666" shadowAlpha="1" blurX="2" blurY="2"
            strength="1" quality="1" type="inner"/>
    </filter>
</style>
View Example View Source

2.3 glow

  • Glow filters are pretty similar to DropShadow filters. The differences are subtle. Notably, the angle parameter is not available.

<style type="xml/fhtmlassets" >
    <filter name="f1">
        <item filterType="glow" distance="5"
                color="#000000" alpha=".75"  
                strength="1" quality="1"
                blurX="20" blurY="2" />
    </filter>
    <filter name="f2">
        <item filterType="glow" distance="15"
                blurX="40" blurY="40"
                color="#000000" alpha=".75" strength="1"
                quality="1" />
    </filter>
    <filter name="f3">
        <item filterType="glow" color="#00ffff"
                alpha="100" blurX="10" blurY="10"            
                strength=".75" quality="10" inner="false"/>
    </filter>
    <filter name="f4">
        <item filterType="glow" distance="30"
                blurX="20" blurY="20" color="#000000"
                alpha=".75" strength="1" quality="1" inner="true" />
    </filter>
</style>
View Example View Source

2.4 blur

  • Blur filters are useful when moving things. Move an object animate its blur on; stop the object, animate blur off.
  • This example just shows how to apply a blur. We'll get to animating them later.

<style type="xml/fhtmlassets" >
    <filter name="f1">
        <item filterType="blur" blurX="0" blurY="60" quality="1" />
    </filter>
    <filter name="f2">
        <item filterType="blur" blurX="60" blurY="0" quality="1" />
    </filter>
</style>
View Example View Source

2.5 gradientBevel

  • The GradientBevel filter is useful for (among other things) applying beveled edges to elements.

<style type="xml/fhtmlassets" >
    <filter name="f1">
        <item name="gBevel" filterType="gradientBevel"
            distance="5" angle="225"
            colors="[#FFFFFF, #CCCCCC, #000000]"
            alphas="[.75, .25, .75]"
            ratios="[0, .5, 1]"
            blurX="8" blurY="8"
            strength="2"
            quality="3"  
            type="inner"
            knockout="false"
        />
    </filter>
</style>
View Example View Source

2.6 gradientGlow

<style type="xml/fhtmlassets" >
    <filter name="f1">
        <item
            name="gGlow"
            filterType="gradientGlow"
            distance="0"
            angle="45"
            colors="[#FFFFFF, #ff0000, #ffff00, #00CCFF]"
            alphas="[0, 1, 1, 1]"
            ratios="[0, .25, .50, 1]"
            blurX="50" blurY="50"
            strength="1"
            quality="20"  
            type="outer"
            knockout="true"
        />
    </filter>  
</style>
View Example View Source

2.7 colorMatrix

  • The ColorMatrixFilter as implemented by Fhtml, is useful for applying a tint to an element. This is useful because, unlike background:rgba(..., it allows the element to have whatever kind of background Fhtml supports(gradient, bitmap, pixelbender, swf, etc). The tint is applied to the whole element.
  • In this example we have a bitmap background and a sepia tint.
  • There are three ways to specify parameters for the ColorMatrix filter:
    • Separate red, green and blue attributes, using values from 0-1. Use this like a color mixer.
    • rgb attribute. Use this in conjunction with the alpha attribute to mix hex colors and an alpha value. This is a friendly way to work.
    • rgba attribute. This is powerful, but it's unusual to know the rgba hex (#OOFFGGHH, or whatever) for an RGBA value.

<style type="xml/fhtmlassets" >
    <filter name="sepia">
        <item filterType="colorMatrix" red="1.2" green="1"
          blue="1" alpha="1" />
    </filter>
</style>
View Example View Source

2.8 pixelBender

  • This example gets a little ahead of itself and actually animates a filter.
  • To learn how to apply a pixelBender filter, read comments in the source below.
  • Also, note how you can view custom properties of a pixelBender filter, which is useful if you want to know how to animate them! Note that FluidHtml currently only supports animation of float and float2 values. However, we will be adding the ability to animate float3 and float4 soon, as we really love pixelbender filters!

<script type="text/fhtml" >
    //This is how you can output params for a filter.
    function traceShaderParams() {
        var div = $('test');
        var pbf = div.filterManager.getFilter('pb');
        var params = pbf.outputFilterParams();
        trace(params);
    }
    traceShaderParams();  
</script>
<style type="xml/fhtmlassets" >
    <!--First, define a pixelbender asset-->
    <pixelbender name="warp" src="assets/pbf/warp.pbj" />

    <!--Then point to it in your filter using the 'data' attribute. Easy!
       Note that pixelbender filters will tend to have unfamiliar properties,
       as they are all custom, handmade things. Here we set 'verticalAxis'
       to 180. The point, really, is that you can set any of those custom
       properties just by adding an attribute on the node.
   -->
    <filter name="myPBF">
        <item name="pb" filterType="pixelBender"
           data="warp" verticalAxis="180"
       />
        <!--Adding a dropshadow as well-->
        <item filterType="dropShadow" distance="30"
           angle="-25" blurX="20" blurY="20" color="#000000"
           alpha=".75" strength="1" quality="1"
       />
    </filter>
View Example View Source

2.9 Combining Multiple Filters

  • Combining filters is really cool! Here be use a dropShadow and a bevel.

<style type="xml/fhtmlassets" >
    <filter name="f1">
        <item name="dropShadow" filterType="dropShadow" distance="11"
                angle="45" color="#333333" alpha="1" blurX="12" blurY="12"
                strength="1" quality="1"
        />
        <item name="topWhiteHighlight" filterType="bevel" distance="11"
                angle="45" highlightColor="#FFFFFF" highlightAlpha=".9"
                shadowColor="#000000" shadowAlpha="1"
                blurX="10" blurY="10" strength="1" quality="1" type="inner"
        />
    </filter>
View Example View Source

Retrieved from "http://www.fluidhtml.com/docs/index.php/Filters"

Contents

General
Javascript
Elements
Effects
Animation
Pages
Personal tools