ロールオーバー効果へのこだわり

「dajistudio」

サウンドデザイナー吉田健二様のポートフォリオサイト。有名な Web サイトの BGM もたくさん手掛けられていて、そのアーカイブを視聴することができます。
音楽再生時に、（曲調に合わせて？）背景で魚群のような対流のような、なんとも有機的な表現（マウスアクションとも連携されています）を見ることができ、ついうっとりとサイトを眺めてしまいます。まぁエフェクトをオフにしても聞き入ってしまいますので、やはりコンテンツが大事だなと思いつつも、ちょっと別の部分の表現も気になりました。

ボタンのトゥイーンアニメーションの付け方

曲を選ぶボタンのロールオーバー効果についてです。この「マウスアクションで棒（バー）状の矩形が横に伸縮する表現」は Flash ではよく使われる表現のひとつですし、Tweener ライブラリなどを使えば比較的簡単に作れることは以前 Webdesigning にもサンプル付きで書かせていただきました。

今回の「dajistudio」サイトでも使われていますが、さわっていてなんだか気持ちがよかったのです。何だろうと思って注目してみたところ、マウスオーバーで伸びる時のテンポが特徴的なのです。目視した感じでは、どうやらマウスオーバーの瞬間にバーをある程度の幅まで大きくし、そこからトゥイーンで伸縮表現をしているように見えます。

体験サンプル

前述のとおり、このボタン表現は比較的簡単に作れます。dajistudio さんを拝見すると、伸びる時の後半部分で急激に伸びるスピードが落ちていることから、Tweener ライブラリを使うとすると、イージングタイプ(※)は”easeOutExpo”ぐらいかなと見当をつけて、一番素直に作ると以下のようになります。

※参考：CBCNET – 土日 Flash のススメ(4)：動きをつけるということ（イージングについて考える）

ところが、今回の表現は以下のような感じです。

違いが分かるでしょうか？2つ目のサンプルの方が、マウスオーバーの瞬間のバーの伸び量が大きいですね。どちらが気持ちいいかと言えば、僕の場合は後者です。1つ目は自分がマウスオーバーしてからバーが伸びきるまでにタイムラグがあるように感じ、2つ目はマウスオーバータイミングで即反応してくれている印象だからです。実は両サンプルともバーが伸びきるまでの時間は同じ（0.7秒）です。ですがレスポンスの気持ち良さが違います。通例、マウスオーバー時のレスポンスは速い方がいい、一方マウスアウト時は、意識としては次の場所（カーソル位置）に行っているので、レスポンスはそれほど気にならないように感じるのではないでしょうか。dajistudio、および2つ目のサンプルはそれをくみ取り、マウスオーバー時は素早いレスポンス、マウスアウト時はインタラクションの余韻を楽しませることを念頭に作られています。

上記サンプルの作り方

Flash でヒットエリアとなる下地（薄いブルー）の上レイヤーに伸びるバー(bar)を重ねたボタンシンボル(btn)を作り、ステージ上に複数配置し、btn1～6のように連番で名付けておく。メインタイムラインに ActionScript を記述する。今回は Tweener ライブラリを利用しています。（ダウンロードファイルは記事末尾）

import caurina.transitions.Tweener;

for(var i:int = 1; i<=6; i++){
	//最初にバーの幅を0にしておく
	this["btn"+i].bar.width = 0;
	//マウスイベント設定
	this["btn"+i].addEventListener(MouseEvent.ROLL_OVER, rollOverListener);
	this["btn"+i].addEventListener(MouseEvent.ROLL_OUT, rollOutListener);
}
function rollOverListener(e:MouseEvent):void{
	Tweener.addTween(e.currentTarget.bar, {width:320, time:0.7, transition:"easeOutExpo"});
}
function rollOutListener(e:MouseEvent):void{
	Tweener.addTween(e.currentTarget.bar, {width:0, time:0.7, transition:"easeOutExpo"});
}

これが一番上のサンプルの ActionScript コードです。
これを2つ目のサンプルのようにするには、マウスオーバーの瞬間に所定のサイズまで一気に伸びていればいいから、rollOverListener の部分を

function rollOverListener(e:MouseEvent):void{
	e.currentTarget.bar.width = 300;
	Tweener.addTween(e.currentTarget.bar, {width:320, time:0.7, transition:"easeOutExpo"});
}

のようにします。幅を300にしているのは bar の縦幅が20pxなので正方形を意識して、下地 320px-20px=300px と算出した値です。

さらにここから、より気持ちよく感じるように、理詰め・感覚の両方から表現を調整していきます。例えば

• 伸びる時はバーの伸び幅は短いので、伸び時間も短くあるべきではないか？（rollOverListener 内を0.7→0.5秒に変更）
• 正方形を意識して300にしたけど、目視した感じ正方形に見えない。→数値ではなく、感覚的に280pxにしてみる。

上の2点を修正すると以下のサンプルようになりました。

2箇所をちょっといじっただけなので違いが分かりにくいかもしれませんが、プロのクリエイターさん達はこのあたりの気持ちよさの調整に時間をかけてらっしゃるでしょうし、こういったディティール作業の積み重ねが、「シンプルなんやけど何か気持ちいいんだよね。」とユーザを唸らせる結果になるのだと思います。

スゴイ人はもっとこだわってる

今回みたいなエントリを書いてしまうと、次から盲目的に2番目のアプローチを選んでしまいそうですが、1つ目の表現の方が気持ちいい人もいるだろうし、使う場所によっても変わってくるでしょう。dajistudio さんのボタン表現は、効果音、点線グリッド、三角矢印など、他にもいろんな要素が絡んでああいう気持ちよさに昇華しています。

そして僕のサンプルは手軽な Tweener を使いましたが、トゥイーンライブラリは他にもいろいろありますし、伸び具合を自分で算出設定する方法もあります。

レスポンスの速さとか時間設定についてはある程度言葉で理由を説明できますが、感覚的調整の部分を言語化するのは難しいことです。「1つ目はヒュワッって感じになってるんやけど、もうちょっとブワッとした感じに・・」というディレクションになるでしょうか。このやり取りが ArtDirector と Flasher の価値共有ができていないとなかなか大変だったりするのでしょうね。

今回のサンプルファイル一式（tweenBtn.zip – FlashCS3形式、Tweener同梱）

追記：続きがあります。さらなるこだわりがありました。
「ロールオーバー効果へのこだわり2」