actionscriptのスキニングボタン - 境界線を追加する

私はスキニングを始めたばかりで、他の何よりも難しいと感じています。フレックス4モバイル。私はflexモバイルボタンをスキンしようとしているので、actionscriptで行う必要があります。ここで私はこれまで持っているものです（それが唯一の背景色を変更、非常に少ないん）actionscriptのスキニングボタン - 境界線を追加する

package skins { 
    import flash.display.GradientType; 
    import flash.geom.Matrix; 
    import mx.utils.ColorUtil; 
    import spark.components.supportClasses.StyleableTextField; 
    import spark.skins.mobile.ButtonSkin; 
    import spark.skins.mobile.supportClasses.MobileSkin; 

public class CustomButtonSkin extends ButtonSkin { 

    public function CustomButtonSkin() { 
     super(); 
     layoutPaddingLeft = 10; 
     layoutPaddingRight = 10; 
     layoutPaddingTop = 2; 
     layoutPaddingBottom = 2; 
     layoutCornerEllipseSize = 1; 
    } 

    private static var colorMatrix:Matrix = new Matrix(); 
    private static const CHROME_COLOR_ALPHAS:Array = [1, 1]; 
    private static const CHROME_COLOR_RATIOS:Array = [0, 127.5];   

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

     var chromeColor:uint = getStyle("chromeColor"); 

     if (currentState == "up") { 
     graphics.beginFill(0x1C1C1C); 
     }   
     else{ 
     var colors:Array = []; 
     colorMatrix.createGradientBox(unscaledWidth, unscaledHeight,      Math.PI/2, 0, 0); 
     colors[0] = 0xFFFFFF;//ColorUtil.adjustBrightness2(chromeColor, 70); 
     colors[1] = 0xEEEEEE;//chromeColor;  
     graphics.beginGradientFill(GradientType.RADIAL, colors, CHROME_COLOR_ALPHAS, CHROME_COLOR_RATIOS, colorMatrix);   
     graphics.endFill(); 
     } 
    } 

    } 
}

ActionScriptで純粋のFlexモバイルコンポーネントをスキニングのマニュアルの方法で、多くのがあるように思えません。たとえば、ボーダーを追加するにはどうすればよいですか？もし誰かが自分のカスタムフレックスモバイルスキンを投稿できたら、それは大いに評価されるでしょう！

出典

2011-07-29 p_mcp

特にボーダーを描画するために、私はグラフィックスAPIを使用して手動で描画します。

this.graphics.lineStyle(1, color, alpha, true); 
this.graphics.drawRect(0, 0, width, height);

私はあなたを助けるかもしれないモバイルスキン/ itemRenderers構築についてのブログ記事/ポッドキャストの束があります

出典

2011-07-29 14:00:15 JeffryHouser

モバイル用に最適化されていないため、モバイルスキンにBorderContainerを追加しないでください。パフォーマンスが低下する可能性があります。最適化されたActionScriptスキンの場合は、グラフィックスオブジェクトに描画することをお勧めします。 –

@Steven Shongrunden良い点！ BorderContainerの提案を削除するために私の答えを修正しました。 – JeffryHouser

ButtonSkinあなたは、コンストラクタでグラフィックリソースをFXGに等しく設定しますプロパティupBorderSkinとdownBorderSkin、があります。

public function CustomButtonSkin() 
{ 
    super(); 
    // your padding settings here 

    upBorderSkin = path.to.fxg.resource.upBorder; 
    downBorderSkin = path.to.fxg.resource.downBorder; 
}

をそして、あなたは空の体ではなく、さらにsuper.drawBackgroundでdrawBackgroundをオーバーライドします（）：

override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void 
{ 

}

これは、カスタムスキンがデフォルトの背景を描画しないようにするためです。

状態の変化を検出して別のものを描画する必要はありません。境界線のスキンプロパティを指定することにより、ButtonSkin親クラスに状態の変化を検出させ、適切なグラフィックを描画させることになります。

特にfxgリソースを使用して詳細については、http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.htmlを参照してください。

出典

2012-11-28 02:07:36

actionscriptのスキニングボタン - 境界線を追加する

答えて

関連する問題