レイアウト編の続きです。
ボタンのデザインカスタマイズについて。

アイコン／画像をラベルにしたボタンの場合

前回のプロジェクトの際、「好きなデザインでボタン作りたいけどわからん」と訴えたらプログラマ氏が以下のサイトからソースを収集して「参考に」と送ってくれました。
Source of Sample-Flex4-Skinning-ButtonWithIcon
※ソースはマウス右クリック→「View Sourse」でダウンロードできます。

src/skins/にあるスキンを眺めて、「CloseButtonSkin.mxml」を編集してみました。

　↓ノーマルだとこんなボタンを

　↓こんなのにしたい

もちろん、ステート（マウスアップ／マウスオーバー　など）で背景色・ボーター色も変更されるように。→ボタンのデモ

◆作り方

1.画像を準備する

背景が透明の画像を用意します。

マウスオーバーなどに応じて画像も変更したい場合は、その分も用意してください。

2. スキンを編集する

上記の「CloseButtonSkin.mxml」をベースにします。
編集する場所は、じっくり眺めてるとわかってきます。

1

<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">

なんとなく背景に四角を敷いてると想像ができますよね。
「radiusX=”2″ radiusY=”2″」は角Rの大ききです。
その他、各要素については前記事にも書いた「Adobe® Flex® 4.1 リファレンスガイド」で確認できます。

グラデーションについては以下の記事がわかりやすかったです。

• 夢茶爺＆苦茶爺のPC奮戦備忘録

二度手間ですが、あらかじめボタンデザインはステートごとに画像で作って確認しておき、色等をメモしておくと編集がスムーズ。

画像は一番最後の要素「layer 8: text」以下のこの部分を変更します。

1

<s:BitmapFill source="@Embed('assets/icon_close16.png')"/>

この状態ではどのステートでも同じ画像です。
マウスオーバーで変更したいなら以下のように追加します。

1
2

<s:BitmapFill source="@Embed('assets/customButton.png')"
	source.over="@Embed('assets/customButton_over.png')"/>

また、このボタンはラベルごと画像なので、以下のラベル表示部分は念のためコメントアウトor削除しておきます。

1
2
3
4
5
6
7
8
9

<!--
<s:Label id="labelDisplay" 
	textAlign="center" 
	verticalAlign="middle" 
	maxDisplayedLines="1" 
	horizontalCenter="0" verticalCenter="1" 
	left="10" right="10" top="2" bottom="2">
</s:Label>
-->

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

1
2

<s:Button skinClass="components.customButton" 
	d:userLabel="custom" buttonMode="true"/>

上記は、「プロジェクトルート/src/components/customButton.mxml」として保存した場合の指定です。

完成！

まるごと画像で作るボタンの場合

　↓例えばこんなのとか

Flash Catalystで作ってFalsh Builder4に読み込む（笑）。これが一番簡単〜。
PhotoshopやIllustratorなどでステートごとの画像を作る必要は、もちろんありますが。

※Flash Catalystの操作方法は、Adobeのチュートリアル動画がわかりやすかったです。

Flash Catalystがない場合は…。
以下、upとdisabledの時に「customButton.png」、overとdownは「customButton-over.png」を指定した場合にFlash Catalystで書き出されたスキンです。
編集したらいけそうな感じが…。（すみません、動作未確認です）
「customButton-over.png」を上に重ねて読み込んで、upとdisabledのときに非表示にしてるのかな。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<s:BitmapImage smooth="true" 
		source="@Embed('assets/customButton.png')" 
		d:userLabel="custom" x="0" y="0"/>
	<s:BitmapImage smooth="true" 
		source="@Embed('assets/customButton-over.png')" 
		d:userLabel="custom-over" x="0" y="0" visible.up="false" 
		id="bitmapimage1" visible.disabled="false"/>
</s:Skin>

長くなったので、「チェックボックス／ラジオボタンのカスタマイズ」へ続きます。

• 
• Tweet