Adob​​e Flex Buttonアイコン - グレースケールに戻って

Question

これまで、無効なボタンのアイコンに対する私の解決策は、ボタンのがの値になっていることに基づいて2番目のグレースケールアイコンをスワップすることでした。明らかにこれは非常にハッキリです。

私はボタンのアイコンをドリルダウンして、ボタンが無効になっているときに何らかの種類のグレースケールフィルタを適用し、ボタンが再び有効になったときにフィルタを削除したいと思います。私はいくつかのことを試しましたが、実際に何をすべきかについての良いアイデアを得るためには、Flashグラフィックについて十分に知りません。

誰でも私にいくつかのポインタを教えてもらえますか？理想的には、私はFlex 3のソリューションを望んでいます（私のアプリのほとんどはまだmx/sparkが混在しているので）。しかし、Flex 4もOKです。

Answer 1

Flex3ソリューションです：ここでは基本的に効果を変更する状態とフィルタを使用し、やや似ています私たちの一つです。

mx:Buttonには、子としてのアイコンがあります。 updateDisplayList関数とenabledセッターをオーバーライドして、このアイコンを白黒にすることができます。

イメージを白黒にするには、カラーのRGB値を平均化する必要があります。ここでは、放送とテレビからの式である：あなたのケースでは

grey = R * 0.3 + b2 * 0.59 + b3 * 0.11 

アイコン上flash.filters.ColorMatrixFilterを使用することができますが、このフィルタは、ターゲットの色を変換します。フィルタのための黒と白の行列：

[ 0.3, 0.59, 0.11, 0, 
    0.3, 0.59, 0.11, 0, 
    0.3, 0.59, 0.11, 0, 
    0, 0, 1, 0 ] 

にあなたがより多くの緑、あなたのイメージがより赤くすることができますので、最後の列は、各色に加数を指定し、セピアなど

フィルタであり、

var filter = Filter(); 
component.filters.push(filter); // doesn't work, and not because null pointer 
component.filters = [filter]; // works 

それがそうでなければコンポーネントがそれを更新しないように、新しいフィルタを持つ配列を再割り当てすることが重要です：次のようにコンポーネントを表示するために適用されます。

Answer 2

スキンを使用してください！フレックス4では、スキンファイルを使用することでこれをはるかに簡単にし、ステートごとのプロパティを配置することができました。

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" width="28" height="28" xmlns:Common="UI.Common.*" xmlns:Controls="Core.Flex.Controls.*"> 
    <fx:Metadata>[HostComponent("Core.Flex.Controls.ToggleIcon")]</fx:Metadata> 
    <s:states> 
     <s:State name="up" /> 
     <s:State name="over" stateGroups="overStates" /> 
     <s:State name="down" stateGroups="downStates" /> 
     <s:State name="disabled" stateGroups="disabledStates" /> 
     <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" /> 
     <s:State name="overAndSelected" stateGroups="overStates, selectedStates" /> 
     <s:State name="downAndSelected" stateGroups="downStates, selectedStates" /> 
     <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" /> 
    </s:states> 

    <s:Group left="2" right="2" top="2" bottom="2" useHandCursor="true" buttonMode="true"> 
     <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" alpha=".8" radiusX="6" radiusY="6" includeIn="up, disabled"> 
      <Controls:filters> 
       <s:BevelFilter blurX="5" blurY="5" strength=".56" quality="3" distance="3"/> 
      </Controls:filters> 
     </Controls:ColorRect> 

     <Controls:ColorRect width="24" height="24" FillColor="#1C648E" StrokeColor="#FFFFFF" StrokeWeight="2" radiusX="6" radiusY="6" includeIn="over"> 
      <Controls:filters> 
       <s:BevelFilter blurX="5" blurY="5" strength=".87" quality="3" distance="3"/> 
      </Controls:filters> 
     </Controls:ColorRect> 

     <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" radiusX="6" radiusY="6" includeIn="down, selectedStates"> 
      <Controls:filters> 
       <s:BevelFilter blurX="5" blurY="5" strength=".1" quality="3" highlightColor="#000000" distance="3"/> 
      </Controls:filters> 
     </Controls:ColorRect> 

     <s:BitmapImage source="{hostComponent.Icon}" left="2" top="2" right="2" bottom="2" alpha=".9" alpha.over="1" alpha.selectedStates="1"/> 
    </s:Group> 

</s:SparkSkin>