Flex でいろいろ使えるスクロールバー コンポーネント（RichScrollBar.swc）をつくりました。
スクロールさせたい target オブジェクトと mask となるオブジェクトを指定することでいろんなものをスクロールできます。

特徴

・スクロールバーのデザインは、fla ファイルを編集することで可能。
・fla ファイルのシンボルを Flex コンポーネントに変換できます。
・mask の大きさにあわせてスクロールバーの位置や高さを自動でセットします。
・Mac マウスホイール対応。（MacMouseWheel 使用）

【デモ】

【ダウンロード】
バグがあったので修正しました。2010/01/07 よりも前にダウンロードされた方はお手数ですが、再度ダウンロードをおねがいします。

Tweener と MacMouseWheel をそれぞれ別途ダウンロードしてください。

使い方

RichScrollBar.swc を Flex ビルドパス（ライブラリパス）libs に通します。

MXML

<mx:Canvas x="100" y="100">
	<mx:Box id="maskBox" width="500" height="200" backgroundColor="#ffffff"/>
	<mx:Box id="targetBox" backgroundColor="#ffffff">
		<mx:Image id="myImage" source="@Embed('sky.jpg')"/>
	</mx:Box>
	<local:ScrollBar id="myScrollbar"/>
</mx:Canvas>
<local:RichScrollBar id="myRichScrollBar"/>

AS

// スクロール設定
myRichScrollBar.baseStage = stage; // ステージ
myRichScrollBar.targetObj = targetBox; // スクロールするターゲット
myRichScrollBar.maskObj = maskBox; // スクロール表示するマスク
myRichScrollBar.scrollBar = myScrollbar; // スクロールバー
myRichScrollBar.scrollPar = 0.5; // スクロールさせるパーセント（ 1 のときマスクの高さ分ターゲットをスクロール）
myRichScrollBar.hitTestFlg = true; // マスク領域にマウスがヒットしているときだけ、スクロールをする: true, スクロールしない: false
// スクロール機能開始
myRichScrollBar.start();

スクロールバー スキン カスタマイズ

スクロールバーのデザインは、fla ファイルを編集することで可能です。

up、down ボタンを PhotoShop や Illustrator で作成した素材に差し替えたりすることで簡単にスキンをカスタマイズできます。

今後のバージョンアップとしては、
・スクロールボタンをクリック時のデザイン変化
・横方向スクロールに対応。VRichScrollBar、HRichScrollBar

ソースも一式ダウンロードできますのでご自由にカスタマイズしてお使いください。