Flex 4 - ButtonBarButtonのスキンとして使用する図形を描画する方法

Question

私はFlash Builder 4を使用しており、学習中です。

短くて簡単に説明し、私はこのように見えるのタブがあり、タブナビゲータたい：

を私はイメージベースのスキンを使用してこれを行うことが知っているが、私は考え出し（そして間違っている可能性があります）、プログラムで形状を描くとスケーラビリティが向上します。

私が探している結果が得られる限り、私はそれがmxかsparkかどうか私は本当に気にしないと思います。私はこれをやってみました：

主なアプリケーション：

<mx:ButtonBar dataProvider="{vsTabNav}" firstButtonStyle="firstButtonStyle"/> 

CSSファイル：

.firstButtonStyle { skinClass:ClassReference("assets.skins.ButtonBarFirstButtonSkin"); } 

ButtonBarFirstButtonSkin.as：

package assets.skins 
{ 
    import flash.display.Graphics; 
    import mx.skins.halo.ButtonBarButtonSkin; 
    import mx.graphics.RectangularDropShadow; 

    public class ButtonBarFirstButtonSkin extends ButtonBarButtonSkin 
    { 
     private var dropShadow:RectangularDropShadow; 

     public function ButtonBarFirstButtonSkin() 
     { 
      super(); 
     } 

     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      super.updateDisplayList(unscaledWidth, unscaledHeight); 

      var cornerRadius:Number = getStyle("cornerRadius"); 
      var backgroundColor:int = getStyle("backgroundColor"); 
      var backgroundAlpha:Number = getStyle("backgroundAlpha"); 
      graphics.clear(); 

      cornerRadius = 10; 
      backgroundColor = 0xFF0000; 
      backgroundAlpha = 1; 

      // Background 
      drawRoundRect(0, 0, unscaledWidth, unscaledHeight, {tl:1, tr:cornerRadius, bl:1, br:1}, backgroundColor, backgroundAlpha); 

      // Shadow 
      if (!dropShadow) 
       dropShadow = new RectangularDropShadow(); 

      dropShadow.distance = 8; 
      dropShadow.angle = 45; 
      dropShadow.color = 0; 
      dropShadow.alpha = 0.4; 
      dropShadow.tlRadius = 1; 
      dropShadow.trRadius = cornerRadius; 
      dropShadow.blRadius = 1; 
      dropShadow.brRadius = 1; 
      dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight); 
     } 

    } 
} 

これは、最初のボタンが赤くなり、右上隅が非常に丸くなることを意味します。代わりに、私はちょうどデフォルトのボタンを取得します。私が間違ってやっていることを確信していないが、それが最善の解決策でないなら、私はいくつかの助けが大好きだ。ありがとう！

Answer 1

まず、次にhttp://www.adobe.com/devnet/flex/articles/flex4_skinning.html

を見て、あなたがあなたのButtonBarButtonsボタンのための最初のスキンを作成したほうが良いでしょう、実現し、あなたのボタンバーは、そのボタンのためにそれらを使用して確認する必要があります。

また、Pathクラスを使用して図形を作成することもできます。あなたに似た形状を作成する例を次に示します。

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <s:Path x="10" y="10" 
      data="M 0 2 V 18 H 200 Q 190 3 170 0 H 2 L 0 2 Z" 
      width="200" height="20" > 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="0xFFFFFF" /> 
       <s:GradientEntry color="0xFDFDFD" ratio="0.6" /> 
       <s:GradientEntry color="0x8A8A8A" ratio="1" /> 
      </s:LinearGradient> 
     </s:fill> 
     <s:stroke> 
      <s:SolidColorStroke color="0x000000" /> 
     </s:stroke> 
    </s:Path> 

    <s:Path x="215" y="10" 
      data="M 30 0 Q 10 0 0 20 H 200 Q 190 3 170 0 H 30 Z" 
      width="200" height="20" > 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="0x8f8f8f" /> 
       <s:GradientEntry color="0x878787" ratio="0.6" /> 
       <s:GradientEntry color="0x5d5d5d" ratio="1" /> 
      </s:LinearGradient> 
     </s:fill> 
     <s:stroke> 
      <s:SolidColorStroke color="0x000000" /> 
     </s:stroke> 
    </s:Path> 
</s:Application> 

UPDATE： あなたはスケーリングをしたい場合は、パスのグラフィック要素に要素、およびセットアップそのscaleGridプロパティ置くことができます。

<s:Graphic scaleGridTop="1" scaleGridBottom="19" scaleGridLeft="10" scaleGridRight="170" 
      width="150" height="15" 
      x="10" y="10" 
      > 
    <s:Path 
      data="M 0 2 V 18 H 200 Q 190 3 170 0 H 2 L 0 2 Z" 
      width="200" height="20" > 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="0xFFFFFF" /> 
       <s:GradientEntry color="0xFDFDFD" ratio="0.6" /> 
       <s:GradientEntry color="0x8A8A8A" ratio="1" /> 
      </s:LinearGradient> 
     </s:fill> 
     <s:stroke> 
      <s:SolidColorStroke color="0x000000" /> 
     </s:stroke> 
    </s:Path> 
</s:Graphic> 

を

Answer 2

これはすべて達成したい場合です。CSSスタイルでコーナー半径の値を指定して移動することはできません（カスタムスキンなし）。

:)