Adding a drop shadow to a custom chrome window in AIR 2

I've read a comment on a solution of mine published on the Adobe Cookbook (as part of O'Reilly's Flex 4 Cookbook):

Adding a drop shadow to a custom chrome window

I've updated the example and tested it against Flash Builder 4 and AIR 2.0 SDK.

Problem

You want to add a drop shadow to the border of a window that has custom chrome applied.

Solution

Pass a DropShadowFilter instance to the filters Array of the NativeWindow instance, or set the dropShadowEnabled and dropShadowColor styles.

Detailed explanation

A window that has custom chrome applied can have a drop shadow around its borders. This window can be your main application window or any other window in the application. When you want to add a shadow around your main application window, make sure to set the transparency of this window using the systemChrome and transparent attributes in the application descriptor file:

<systemChrome>none</systemChrome> 

<transparent>true</transparent>

You can then add a drop shadow to your window in two ways. The first way is to instantiate a DropShadowFilter (a subclass of the BitmapFilter class) object and set the properties you want for the drop shadow. Every DisplayObject has a filters Array property where you can store BitmapFilter instances you want to use on that DisplayObject. For the DropShadowFilter, you can define many properties, such as color, alpha, blurX, blurY, distance, and angle, to customize the look and feel of your drop shadow.The following example is a basic AIR application with custom chrome applied (Figure 20-1). Actually, the chrome consists of just three Canvas components from the Flex Framework.

The drop shadow is configured as follows:

shadowFilter = new DropShadowFilter();

shadowFilter.color = 0xFF0000;

shadowFilter.alpha = 0.75;

shadowFilter.blurX = 5;

shadowFilter.blurY = 5;

shadowFilter.distance = 5;

shadowFilter.angle = 90;

To cast the drop shadow on the window's transparent background, assign the shadowFilter instance to the filters Array of the WindowedApplication instance. In this example, the keyword refers to the WindowedApplication instance:

this.filters = [shadowFilter];

Here is the complete MXML code for the example:

<?xml version="1.0" encoding="utf-8"?> 

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 

         xmlns:s="library://ns.adobe.com/flex/spark" 

         xmlns:mx="library://ns.adobe.com/flex/mx" 

         applicationComplete="init()" 

         backgroundAlpha="0" 

         showStatusBar="false" 

         title="Main window"> 

   

  <s:layout> 

    

      <s:BasicLayout/> 

    

  </s:layout> 

   

  <fx:Declarations> 

    

      <!-- Place nonvisual elements (e.g., services, value objects) here --> 

    

  </fx:Declarations> 

   

  <fx:Style> 

  

      @namespace "library://ns.adobe.com/flex/spark"; 

    

      WindowedApplication { 

     

    padding-right:"5"; 

     

    padding-left:"5"; 

     

    padding-top:"5"; 

     

    padding-bottom:"5"; 

     

    show-flex-chrome:false; 

     

      } 

    

      BorderContainer.BgCanvas { 

     

    background-color:"0xE6E6E6"; 

     

    border-style:solid; 

     

    border-color:"0xFFFFFF"; 

     

    border-thickness:10; 

     

    corner-radius:20; 

  

     

      } 

    

  </fx:Style> 

   

   

  <fx:Script> 

  

      <![CDATA[ 

    import flash.display.NativeWindowSystemChrome; 

    import flash.filters.DropShadowFilter; 

    import flash.filters.BitmapFilterQuality; 

     

    private var shadowFilter:DropShadowFilter; 

     

    private function init() : void 

    { 

      

        stage.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown ); 

  

        var color:Number = 0x000000; 

        var angle:Number = 45; 

        var alpha:Number = 0.5; 

        var blurX:Number = 6; 

        var blurY:Number = 6; 

        var distance:Number = 10; 

        var strength:Number = 0.65; 

        var inner:Boolean = false; 

        var knockout:Boolean = false; 

        var quality:Number = BitmapFilterQuality.HIGH; 

      

        shadowFilter =  new DropShadowFilter(distance, 

      angle, 

      color, 

      alpha, 

      blurX, 

      blurY, 

      strength, 

      quality, 

      inner, 

      knockout); 

      

        applyShadow(this.bgWindow); 

      

    } 

     

    private function applyShadow(comp:DisplayObject):void 

    { 

        comp.filters = [this.shadowFilter]; 

    } 

     

    private function closeWindow( event : MouseEvent ) : void 

    { 

      

        this.nativeWindow.close(); 

      

    } 

     

    private function onMouseDown( event : MouseEvent ) : void 

    { 

      

        this.nativeWindow.startMove(); 

      

    } 

      ]]> 

    

  </fx:Script> 

   

  <s:BorderContainer styleName="BgCanvas" id="bgWindow" 

         right="20" 

         bottom="20" 

         top="20" 

         left="20"> 

    

      <s:HGroup y="0" 

       right="15" 

       left="5" 

       verticalAlign="middle" 

       direction="ltr" 

       width="100%"> 

     

    <mx:Spacer width="100%"/> 

     

    <mx:LinkButton label="close" 

          click="closeWindow(event)"/> 

     

      </s:HGroup> 

    

      <s:Label text="I can have a drop shadow " 

      horizontalCenter="0" 

      verticalCenter="0" 

      fontSize="12"/> 

    

  </s:BorderContainer> 

   

</s:WindowedApplication>

Comments

[艳虹]

A window that has custom chrome applied can have a drop shadow around its borders. www.buy-jerseys.org

[艳虹]

useful information for me. www.jerseysfornba.org

[艳虹]

We are professional information website of Adidas basketball jerseys, here what you want to www.b-basketballjerseys.com know is available and it’s the place that you can know where to jerseys.