Over a million developers have joined DZone.

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

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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>

 



Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Marco Casario, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}