泡沫webディレクター お仕事日記
大阪と神戸でwebディレクター・デザイナー・その他色々やっている「Sponge Design スポンジデザイン」のブログです。

デザイナーのFlex画面デザイン・コーディング vol.2 Flash Builder 4の場合(3)チェックボックス/ラジオボタンカスタマイズ

ボタンカスタマイズ編の続きです。
今回ちょっと困ったのがチェックボックスとラジオボタン。
どちらも以下が条件です。

  1. ラベルが可変なので、配置するmxmlでサイズ指定をする
  2. ラベルの文字だけではなくて背景ごとマウスに反応させる
  3. 選択/未選択が判別できるように表示を変化させる

 ↓こんなのを作りたい
カスタムチェックボックス

条件1を実現するためには、Flash Catalystで作ったオリジナルのチェックボックス/ラジオボタンは使えません。
ラベルの文字ごと1つのスキンになってしまうのと、背景画像の幅と高さでサイズが固定されるからです。
角丸にしたかったので、サイズを変更すると角がいびつになってしまいます。

また、Flash Builderのチェックボックス/ラジオボタンコントロールを使うと、マウスに反応するのがラベルの文字上だけなので、条件2を実現できません。

うーん… と考えて、とりあえず前記事の「アイコン/画像をラベルにしたボタンの場合」と同じくスキンを編集してみることにしました。


まずはチェックボックスから。

チェックボックスの場合

1. 画像を準備する

チェックなしとチェックありの2枚です。
チェックありなし画像

2. スキンを編集する

背景色は前回同様に必要に応じて編集します。

今回はクリック時に枠線の色をハッキリ変えたかったので、枠線にダウンステートの設定をします。
線の指定は「layer 7: border」以降ですが、元ファイルにはステートの指定がないので追加します。アルファ(透明度)はお好みで。

1
2
3
4
5
6
7
8
<s:GradientEntry color="0xb3b3b3" 
	color.down="0x438c5f" 
	alpha="0.5" 
	alpha.down="0.8"/>
<s:GradientEntry color="0xb3b3b3" 
	color.down="0x438c5f" 
	alpha="0.75" 
	alpha.down="1"/>

ヤター、枠線の変更ができたです。

最後はラベルですが、今回は画像の横にラベルの文字も表示しなくてはなりません。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- layer 8: text -->
	<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
	<s:HGroup
		horizontalCenter="0" verticalCenter="2"
		left="20" right="5" 
		gap="10">	
		<s:BitmapImage source="@Embed('assets/chcek_off.png')" 
			source.down="@Embed('assets/chcek_on.png')" >
		<s:Label id="labelDisplay" textAlign="left" 
			verticalAlign="middle">
		</s:Label>
	</s:HGroup>

※画像横にラベルを表示する方法は「Buttonのラベルを改行したいの件で。in Flex4+アイコン表示」を参考にさせていただきました。
HGroupで画像とテキストを横に配置しているわけですね。

3. レイアウト用mxmlに配置する

1
2
3
<s:Button skinClass="components.CheckBoxSkin" 
	width="240" height="58" label="A. 1番上の選択肢" 
	buttonMode="true"/>

デキター!
とりあえず見た目は希望通りのボタンができました。

しかし、これは元々ボタン用スキンを編集しただけなので、クリックした時に変化してもマウスアップで元画像に戻ってしまいます。

4. チェックボックスにするには…

なんとなく、スキンファイルのここ変えたらどう?と思って
[HostComponent(“spark.components.Button”)]
 ↓
[HostComponent(“spark.components.CheckBox”)]
にしてみた!(笑)

配置したコントロール名も「s:CheckBox」に変更。

1
2
3
<s:CheckBox skinClass="components.CheckBoxSkin" 
	width="240" height="58" label="A. 1番上の選択肢" 
	buttonMode="true"/>

ビルドしたら「ステートが足りん」と怒られたので、言われた通りに書き足します。スキンの38行目ぐらいです。

1
2
3
4
5
6
7
8
9
10
11
<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
		<s:State name="disabledAndSelected" />
		<s:State name="downAndSelected" />
		<s:State name="overAndSelected" />
		<s:State name="upAndSelected" />
	</s:states>

これでビルドできました。チェックボックスと認められたっぽい。
ただし、この時点では追加ステート分の画像や枠線の指定をしていないのでボタンと挙動は同じです。
お好みの指定を追加すれば完成。→チェックボックスのデモ

チェックボックスができればラジオボタンは楽勝ですね。


Posted by sponge design on 3/10, 2011 :: Categories 仕事
Tags ::

コメントはこちらから↓  トラックバック

コメント

コメントは下のボックスにどうぞ: