FlexLib

内容は主にFlex3の基本コンポーネントを拡張させた内容となっています。
今回はWindowShadeを使用しています。

以下のサイトからDL出来ます。
http://code.google.com/p/flexlib/

Degrafa

内容は主に描画関連(Graphics)のコンポーネントになっています。
今回はButton部分の描画に使用しています。

以下のサイトからDL出来ます。
http://www.degrafa.org/

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:containers="flexlib.containers.*" 
    xmlns:controls="flexlib.controls.*"
    xmlns:degrafa="com.degrafa.*"
    xmlns:paint="com.degrafa.paint.*"
    xmlns:geometry="com.degrafa.geometry.*">
    
    <mx:Style source="./shadow.css" />
    
    <containers:WindowShade id="shade" opened="false"
        openIcon="{null}" closeIcon="{null}" 
        paddingTop="0" headerLocation="bottom"
        headerRenderer="HeaderRenderer">

        <mx:Panel width="100%" height="100%" 
        	horizontalAlign="center" verticalAlign="middle">
        	<mx:Form>
        		<mx:FormItem label="ユーザ名">
					<controls:PromptingTextInput prompt="username" />        			
        		</mx:FormItem>
        		<mx:FormItem label="パスワード">
		            <controls:PromptingTextInput prompt="password" displayAsPassword="true" />
        		</mx:FormItem>
        		<mx:HBox width="100%" horizontalAlign="center">
					<mx:Button label="Login" />        			
        		</mx:HBox>
        	</mx:Form>
        </mx:Panel>
        
        <containers:filters>
            <mx:DropShadowFilter alpha=".3" angle="90" />
        </containers:filters>
    </containers:WindowShade>

</mx:Application>

HeaderRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<controls:CanvasButton xmlns:mx="http://www.adobe.com/2006/mxml"
	width="100%" height="20"
	xmlns:containers="flexlib.containers.*" 
	xmlns:controls="flexlib.controls.*"
	xmlns:degrafa="com.degrafa.*"
	xmlns:paint="com.degrafa.paint.*"
	xmlns:geometry="com.degrafa.geometry.*"
	skin="mx.skins.ProgrammaticSkin">

	<mx:Script>
	<![CDATA[
		import flexlib.containers.WindowShade;
	]]>
	</mx:Script>
	
	<mx:Box width="100%" horizontalAlign="center">
		<degrafa:Surface width="80">	  
			<degrafa:GeometryGroup>
				
				<!--ボタン 背景-->
				<geometry:RoundedRectangle width="80" height="15">
					<geometry:fill>
						<paint:GradientFillBase angle="90">
							<paint:GradientStop color="#000000" />
							<paint:GradientStop color="#333333" />
						</paint:GradientFillBase>
					</geometry:fill>
				</geometry:RoundedRectangle>
				
				<!--ボタン 矢印上-->
				<geometry:Polygon>
					<geometry:data>40,5 35,13 45,13</geometry:data>
					<geometry:stroke>
						<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 1 : 0}" weight="1" />
					</geometry:stroke>
					<geometry:fill>
						<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 1 : 0}" />
					</geometry:fill>
				</geometry:Polygon>
				
				<!--ボタン 矢印下-->
				<geometry:Polygon>
					<geometry:data>40,13 35,5 45,5</geometry:data>
					<geometry:stroke>
						<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 0 : 1}" weight="1" />
					</geometry:stroke>
					<geometry:fill>
						<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 0 : 1}" />
					</geometry:fill>
				</geometry:Polygon>
				
			</degrafa:GeometryGroup> 
		</degrafa:Surface>
	</mx:Box>
</controls:CanvasButton>

WindowShade

ボタンを表示させ、そのボタンをクリックすることでWindowShadeの内容を
表示・非表示するためのコンテナーです。
表示するボタンは「HeaderRenderer.mxml」で記載しています。

RoundedRectangle

WindowShadeで使用するボタンの背景部分を描画しています。
RoundedRectangleで四角形を描画し、fillで塗りつぶし(グラデーション)を行っています。

Polygon

ボタン上に描画する矢印(▲、▼)を描画しています。
dataの数値で描画する座標を指定しており、三角形を描画する際に
必要な3点の座標を指定しています。

　<!--ボタン 矢印上-->
　<geometry:data>40,5 35,13 45,13</geometry:data>
　<geometry:data>[x座標,y座標] [x座標,y座標] [x座標,y座標]</geometry:data>

SolidStroke

Polygonのdataで指定した座標の順で線を引きます。
alphaでは、親コンポーネント(WindowShade)のプロパティ(open)を参照し、
表示の時はalpha=0、非表示の時はalpha=1としています。

SolidFill

Polygonのdataで指定した座標内を塗りつぶしします。
SolidStrokeと同様に、alphaでは、親コンポーネント(WindowShade)の
プロパティ(open)を参照し、表示の時はalpha=0、非表示の時はalpha=1としています。


実行結果は以下のようになります


※ 実行結果はスタイルシートを適用させています。
以下のサイトにある「Shadow」のThemeを使用しています。
http://www.scalenine.com/
少しでも参考になれば応援お願いします。