haraです。
この４月よりカヤック閃光部にジョインいたしました。
よろしくお願いいたします。
先日のmatumuraのエントリでスクロールバーコンポーネントが紹介されていたので、
僕の方からはスクロールバーの仕組みそのものについて書いてみようと思います。
スクロールバーを作る時、できればホイールに合わせてススーッとコンテンツが移動してくれるような、エロいインタフェースにしたいと思うのが人情です。要はイージングをつけたいってことですね。
てことで今回は、ホイールスクロールにイージングをつける方法を解説します。
サンプルはこちら。スムーズですね。
（※すいません、Winの人専用です。しかもフルスクリーンしないとブラウザのスクロールに持って行かれます。Macの人はこちら右クリックでDLしてスタンドアロンで試してみてください）
では、中の処理の説明に入ります。
stage.addEventListener(MouseEvent.MOUSE_WHEEL, wheelHandler);
MouseEvent.MOUSE_WHEELで取得できます。ただし、これはWindowsのみで、Macの場合は別途javascriptでホイールイベントを受け取れるようにする必要があります。
Macでもホイールイベントしたい！という場合はSWFWheelがお手軽なので、おすすめです。
また、Progressionであれば標準でMacもホイールがきくようなjavascriptがついてきます。
これで、MouseEvent.deltaでホイールの回転数を取る事ができます。手前の回転が負、奥への回転が正の値で返されます。
今回はTweenerで移動させるのですが、そのTweenerで移動させる先を決めます。
とは言っても、ハンドルに関しては先ほど取得したホイールの回転値に一定数（今回はwSpeed=50)を乗算してあげるだけです。
ここで乗算する数値がスピードになります。
var targetY:Number; var wSpeed:Number = 50; paramY = _handle.y; //現在のハンドルy targetY = -de * wSpeed + paramY; if(targetY >= yMax) targetY = yMax; if(targetY <= yMin) targetY = yMin; var seekTime:Number = 1; //移動させる if(Tweener.isTweening(_handle))Tweener.removeTweens(_handle); if(Tweener.isTweening(targetMC))Tweener.removeTweens(targetMC); if(Tweener.isTweening(targetScaleMC))Tweener.removeTweens(targetScaleMC); Tweener.addTween( _handle, { y:targetY, time:seekTime, transition:"easeOutQuint" }); Tweener.addTween( targetMC, { y:culcBaseY( targetY ), time:seekTime, transition:"easeOutQuint" });
操作対象の目標地点を決める
スクロールで移動させたい相手の目標地点を決めます。
var targetBaseY:Number = targetBase.y - (targetMC.height-targetBase.height) * ( ( tY - yMin ) / (yMax-yMin));
ようするに、コンテンツの位置＝コンテンツ表示エリア × バーに対してのハンドルの現在の位置の割合 ということです。以上、これだけです。もっと難しいかと思っていたのですが、予想以上に簡単でした。
ちなみにドラッグも対応させてみました。
それにしてもスクロールってのは面白いです。
このような拡大縮小のUIとして使われることも多いですが、イージングをうまくきかせてズームできると気持ちいいでしょうね。
拡大縮小版はこんな感じです。
ホイール操作というのは対応の煩わしさもあってFlashコンテンツでは脇役的な立ち位置ですが、これがうまく使えると大分世界が広がります。
これだけでなく、もっと色々PCの操作方法が増えて、もっともっと世界が広がって行くとよいですね。FLAToolKitやGainerは世界を広げている例でしょう。わくわくします！
余談：kayacロゴは、Illustratorで直線でなぞる→SVG1.1のコードを表示→一番下のpolygonタグの中身を 配列に入れて作りました。Illustrator便利かも。
