Slider コンポーネントの部分部分のマウス当たり判定がとても小さく操作しにくいため、当たり判定を大きくするための手順を記述します。

手順

(1)前準備

Flash のコンポーネントウインドウから Slider コンポーネントを ライブラリに配置してください。

(2) fl.controls.Slider クラスの拡張

fl.controls.Slider クラスの configUI メソッド内で、スライダーの三角のボタン(thumb)とスライダーのバー(track)のインスタンスが生成されています。そして、各インスタンスは setSize メソッドにより表示サイズが設定されています。
thumb, track の各インスタンスは protected 設定されており外部クラスから操作できないため、Slider のサブクラスを作成し、外部から表示サイズを変更できるようにします。

package {

	import flash.display.Sprite;
	import flash.utils.getDefinitionByName;
	import fl.controls.Slider;
	
	public class CustomSlider extends Slider {

		override protected function configUI():void{
			
			super.configUI();

			//表示変更したい任意の大きさにする
			thumb.setSize(16, 52);
			track.setSize(80, 40);
		}
	}
}

thumb, track 各インスタンス内にはライブラリ内にある各種スキン用ムービークリップが配置されます。実際には以下のようなソースコードにすれば、スキン用ムービークリップの表示サイズそのままの大きさが各インスタンスに適用されるようになります。

package {

	import flash.display.Sprite;
	import flash.utils.getDefinitionByName;
	import fl.controls.Slider;
	
	public class CustomSlider extends Slider {

		override protected function configUI():void{
			
			super.configUI();
			
			var cls:Class;
			
			cls = getDefinitionByName("SliderThumb_upSkin") as Class;
			var tmpThumb:Sprite = new cls();
			thumb.setSize(tmpThumb.width, tmpThumb.height);
			
			cls = getDefinitionByName("SliderTrack_skin") as Class;
			var tmpTrack:Sprite = new cls();
			track.height = tmpTrack.height;
		}
	}
}

(3) クラス設定

上記 CustomSlider クラス作成後、ライブラリ内にある Slider コンポーネントのクラス設定を fl.controls.Slider から CustomSlider へ変更します。

(4) スキン変更

ライブラリ内にある以下のムービークリップシンボルを編集します。

Component Assets
　└ SliderSkins
　　│ 
　　├ SliderThumb_downSkin
　　├ SliderThumb_overSkin
　　├ SliderThumb_upSkin
　　│
　　└ SliderTrack_skin

サンプルでは、デフォルトのグラフィックほぼそのままで、当たり判定のみが広がるように透明のシェイプを hitArea というレイヤーに追加しています。

SliderTrack_skin には 9 スライス設定がされているので、編集には少々コツがいるかもしれません。後のサンプルファイルをご参考ください。

サンプルファイル

http://www.dango-itimi.com/blog/swf/86/slider.zip

追記) サンプルの fla ファイルを Flash CS3 からでも開けるようにしました

[ FLASH ] [ tips ] 投稿者 siratama : 2009年09月07日 23:29