こんにちは。オシャレな女性向けSNS(男性も可)に登録してみて居場所のなさを思い知った安藤です。

Flexにおいて、例えば子Objectが親Canvasの表示領域を超えてしまった時などに表示されるスクロールバー。このスクロールバーのスキンを変更してみましょう。

まず始めに、今回のFlexプロジェクトのフォルダ構成は以下のようになっています。

090922_directory.png

./imageフォルダ内にあるkirin.jpgがスクロールさせる縦長の画像です。

kirin.jpg

scrollThumb.pngが、スクロールバーのthumb用カスタムスキンとして利用されます。

scrollThumb.png

次にmxmlファイルのコーディングです。
 

<?xml version = "1.0" encoding = "utf-8"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute">
	<mx:Style source = "./myStyles.css" />

	<mx:Canvas width = "200"
		height = "150"
		borderColor = "0xff0000"
		borderStyle = "solid"
		verticalScrollPolicy = "on"
		horizontalScrollPolicy = "off"
		verticalScrollBarStyleName = "vScrollBarStyle">
		<mx:Image source = "@Embed('./image/kirin.jpg')" />
	</mx:Canvas>
</mx:Application>

まず<mx:Style>タグ内でスクロールバーのスキンが定義されたスタイルシートを指定します。
その下では<mx:Canvas>内にてキリンの画像を表示しています。
では次にスタイルシートmyStyles.cssファイルを見てみます。

.vScrollBarStyle{
	thumbOverSkin: Embed("./image/scrollThumb.png", scaleGridLeft="3", scaleGridRight="17", scaleGridTop="12", scaleGridBottom="48");
	thumbUpSkin: Embed("./image/scrollThumb.png", scaleGridLeft="3", scaleGridRight="17", scaleGridTop="12", scaleGridBottom="48");
	thumbDownSkin: Embed("./image/scrollThumb.png", scaleGridLeft="3", scaleGridRight="17", scaleGridTop="12", scaleGridBottom="48");
}

thumbOverSkin、thumbUpSkin、thumbDownSkinそれぞれに先ほどのscrollThumb.pngを指定しています。

さらにscaleGridを指定しています。スクロールバーのthumbはスクロールする内容(今回はキリンの画像)とコンテナオブジェクトの幅によって、厳密に計算されてスケールされます。スクロールする幅が大きいとthumbは小さくなり、逆にそれほどスクロールしない時は大きいthumbになります。そのためthumbのスキンに画像を指定する場合、scale9Gridのようにスライスするポイントを指定してスケールされても見栄えが悪くならないようにしてやる必要があります。

以上のコーディングでFlexを実行すると以下のようになります。

FlexTest.swf

Canvasのheightを変更しても、スクロールバーのthumbは綺麗にスケールされているのが確認できるかと思います。YATTA!

HTML5飯