8

flex初心者なのですが、HSliderのイメージをこんな感じに変更したいです

ここに画像の説明を入力

どうすればいいですか？簡単な例を教えてください。

4

2 に答える 2

12

@RIAstarは素晴らしい答えを出しました。しかし、少し問題があります-親指の前のこのオレンジ色の部分。このようなスキンを作成する最も簡単な方法は、HSliderスキンに長方形またはより複雑な図形を追加することです。これにより、親指のx座標に応じて幅が変更されます。

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100" 
          tabEnabled="false"
          skinClass="spark.skins.spark.HSliderTrackSkin" />

<s:Rect width="{thumb.x + thumb.width/2}" height="{track.height}">
    <s:fill>
        <s:SolidColor color="0x00FF00" />
    </s:fill>
</s:Rect>

<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
          tabEnabled="false"
          skinClass="spark.skins.spark.HSliderThumbSkin" />
于 2012-05-04T09:19:38.840 に答える
9

カスタムスキンを作成する必要があります。さて、HSlider は、スキニング可能なサブコンポーネントをいくつか持っているという点で少し特殊です。実際には、次の 3 つのカスタム スキンを作成する必要があります。

  • HSlider 自体の 1 つ (このスキンにはツールチップが含まれます)
  • トラック用の 1 つ (写真の黄色/茶色のゾーン)
  • そして親指用

トラックと親指は実際には両方ともボタンであるため、これらのスキンはボタン スキンである必要があります。

プロセス全体を説明すると、この回答が長く具体的になりすぎるため、始めてみましょう。そこからわかるはずです。また、FlashBuilder を IDE として使用していると仮定します。

メインスキンの作成

skinClassにスタイルを設定し、HSliderAlt+Space を押します。これによりコード補完が表示されますが、[Create Skin...] を選択することもできます。

ここに画像の説明を入力

それを選択すると、ウィザードが表示されます。次のように入力します。デフォルトの Spark HSlider スキンのコピーを作成していることに注意してください。このようなカスタマイズされたスキンでは必要ないため、スタイリング コードを削除します。

ここに画像の説明を入力

トラックとサムのスキンを作成する

この新しいスキン クラスを開き、一番下までスクロールします。2 つButtonの s が表示されます。1 つは idtrackで、もう 1 つは idthumbです。それらの skinClass スタイルは、これらのボタンのデフォルトのスパーク スキンに設定されます。コンテンツを削除し、前の手順 (新しいスキンの作成) の操作を繰り返します。今回のみ、のコピーを作成しHSliderTrackSkin、HSliderThumbSkin

スキンを編集する

これで、HSlider のデフォルトの Spark スキンの正確なコピーが作成されました (スタイリングを削除した場合を除く)。これで、編集を開始できます。色の変更、形状の変更などです。Flex グラフィックについてさらに詳しい情報が必要な場合は、FXG で Google を検索することをお勧めします。ただし、デフォルトのスキンをいじって、どこで入手できるかを確認することもできます.

于 2012-05-04T08:46:13.240 に答える