- 2006-11-16 (木) 4:40
- fuse kit
毎日少しずつ改良している「Macでもマウスホイールできるスクロールバーのサンプル」ですが、呼称として「WheelScrollBar」と名付けてみました。
コンセプトはシンプルで「スライダーのy座標に応じてコンテンツのy座標を移動させる」です。とにかくスライダーを動かして、インスタンスメソッド”setPosition”を呼べば、期待通りの結果になるように設計したつもりです。（パーツ同士の比率とか、スクロール範囲といった面倒な処理をクラス内で完結させているのが便利かと。）
今回はFuseKitと連携させてみました。
WheelScrollBarクラスには、新たに、
- コンストラクタに上下カーソルを渡す事で、カーソルボタンにも対応しました。
- getterメソッドを追加。インスタンスプロパティ”top”でスクロール範囲の上限のy座標、”bottom”で下限にアクセスできます。
- ホイールとカーソルボタンでのスクロール速度を、（現状はクラス内で）設定可能。
といった機能を追加しました。これにFuseKitを使って実験したのが下のサンプル。
最初にオートで、スクロール下端までFuseトゥイーン、折り返しトゥイーンして停止。オートスクロール中にスライダーにマウスオーバーした時はFuseトゥイーンをストップします。
fuseWheel.swf
Macの場合、ブラウザのフォーカスをswfに渡したまま戻らなくなるので、以降のブラウザのホイールが効かなくなる現象があります。対応策を勉強中ですが、とりあえず現状はページのリロードなどで対応してください。
ソースは以下
//setting WheelScrollBar
import com.trick7.ui.WheelScrollBar;
var wsb:WheelScrollBar = new WheelScrollBar(content_mc,
mask_mc,
bar_mc,
slider_mc,
cursorUp_mc,
cursorDown_mc);
//setting Fuse
import com.mosesSupposes.fuse.*;
import mx.transitions.easing.*;
ZigoEngine.register(Fuse);
var f:Fuse = new Fuse();
f.push({target:slider_mc,
start_y:wsb.top,
y:wsb.bottom,
ease:Strong.easeInOut,
seconds:3,
cycles:2,
updfunc:"updContentPos"});
f.start();
function updContentPos() {
wsb.setPosition(slider_mc._y);
}
slider_mc.onRollOver=function(){
f.stop();
}
Fuseトゥイーン中、描画が更新されたタイミングで”updfunc”の内容を実行してくれるのが便利。（※他にも、トゥイーン開始時に呼び出す”startfunc”や、終了時に呼び出す”func”があります。）
あとはFuseKitの許すがままに、
- コンテンツが透明な状態から、スクロールアップしながら登場するエフェクト。
- WheelScrollBarクラスを横スクロールに改造。オートで往復し続ける、スライダーにマウスが乗った時はコントロール可能、ロールアウトで再び往復するギャラリー。FCの「魔界村（？）」みたいに、開始時に全景を見せる効果もできますね。
- 明度やブラーエフェクトの利用。
- コンテンツ中にロードする外部記事ごとにcreateTextFieldやcreateEmptyMovieClip。その座標を記憶させ、Fuseトゥイーンに渡すことで、チャプター機能を再現。
いろいろ面白い事ができそうです。
- Newer: Webデザインノート
- Older: ActionScript3.0とFlex2関連書籍の出荷状況
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://www.trick7.com/blog/2006/11/16-044052.php/trackback
- Listed below are links to weblogs that reference
- FuseKit + WheelScrollBar from trick7
![Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]](http://ecx.images-amazon.com/images/I/617sNhK9P9L._SL75_.jpg)
![FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]](http://ecx.images-amazon.com/images/I/51915J1BG6L._SL75_.jpg)
