How can I create a drop shadow like floating effect around a canvas component in flex?

Question

I want create a drop shadow around the canvas component in flex. Technically speaking it will not be a shadow, as I want it to wrap around the component giving the component a floating look. I may be able to do it with glow, but can anyone drop an line or two who has already done it?

Thanks in advance.

Answer 1

I actually solved it by doing this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
        width="780" height="100%" borderStyle="solid" borderColor="gray"
            creationComplete="init();" backgroundColor="white">

  <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;


            private function init():void {
                var glow:GlowFilter = new GlowFilter();
                glow.color = StyleManager.getColorName("gray");
                glow.alpha = 0.8;
                glow.blurX = 4;
                glow.blurY = 4;
                glow.strength = 6;
                glow.quality = BitmapFilterQuality.HIGH;

                this.filters = [glow];
            }
        ]]>
    </mx:Script>



</mx:Canvas>

Answer 2

You can use DropShadowFilter but it looks to be more or less the same thing:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="780" height="100%" borderStyle="solid" borderColor="gray"
    creationComplete="init();" backgroundColor="white" dropShadowEnabled="true">
    <mx:filters>
        <mx:DropShadowFilter
            quality="1"
            color="gray"
            alpha="0.8"
            distance="0"
            blurX="4"
            blurY="4"
            strength="6"
        />
    </mx:filters>
</mx:Canvas>

Answer 3

In flex 4 I'm using the following. I just wanted to post this because filters property should look like below in the image. (yes I know I'm using a spark filter on an mx object)

 <fx:Declarations>
    <s:GlowFilter
        id="glowBlack"
        alpha=".6"
        color="0x000000"
        inner="false"
        blurX="10"
        blurY="10"
        quality = "2"

        />

             <mx:Image id="rssIcon"
              height="70"
              filters="{[glowBlack]}"
              source="assets/rss/icon_rss.png"
              styleName="rssIconStyle"
              width="70"
              scaleContent="true"
              click="openRssSite(event)"
              "/>

Answer 4

If you want to define it outside of the canvas, you can do this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        width="780" height="100%">

   <mx:Canvas filters="[dropShadow]" width="200" height="200" backgroundColor="white"/>
   <mx:DropShadowFilter id="dropShadow" distance="0"/>

</mx:Application>

Answer 5

You might be able to do it with degrafa and skinning. Their docs are limited but you can watch one of the tutorial videos for how to create skins. Or look at their sample code. Just assign a degrafa programmatic skin to the border of your canvas and you can add all sorts of funky gradients, paths, shapes, whatever.

Answer 6

Depending on your needs you might be able to get away with:

<mx:Canvas ... dropShadowEnabled="true" shadowDirection="right">

There are caveats .. outlined here