こんにちは。このコラムもついに最終回です。
サムネイルをスクロールさせる。Flashでは多用される表現です。ユーザが触れる機会も多い重要な個所でもあります。
ということでじっくり考えてみましょう。
※スクロールの王道である「スクロールバー」を使ったスクロールについては今回は言及しません。SWFWheel ライブラリといった便利なライブラリもあったりするので別途お調べください。
サンプル１：単純なサムネイルスクロール
まずは基本として- 画面の両端のボタンにマウスをロールオーバーするとサムネイル全体がスクロールする。
- ボタンからマウスを放すとスクロール停止する。
- ボタンにロールオーバーしていても、サムネイルの端まできたらスクロール停止する。
※今回は ActionScript のコードも記載していきますが、実際やっていることは「この右端のサムネイル画像を、ここまでスクロールさせたら行きすぎだからその時は動きを止めて・・・」などとノートに落書きしながら、非常にアナログな発想でできあがっていますので、文章と併せて、コードにも興味を持っていただけましたら幸いです。
まずは下準備から。ステージ上に、"mc"というインスタンス名のムービークリップを置きます。この"mc"の中にはいろんな色の長方形が横に並べられて入っています。その"mc"に重ねるようにして左ボタン（leftBtn）、右ボタン（rightBtn）を置いています。下のビデオのような感じです。
ビデオ中にもありますが、それらのパーツを置いた階層のフレームスクリプトに、下のような ActionScript3.0 のコードを記述します。
//移動量を決めておく、最初はボタンに触っていないので移動量は0
var speed:int = 0;/*------------------------------------------------------------------------------
ボタン操作関連の設定
------------------------------------------------------------------------------*/
//左ボタンにロールオーバーした時には、（以下で設定している）"leftRollOver"という命令を実行する。
leftBtn.addEventListener(MouseEvent.ROLL_OVER, leftRollOver);
//左ボタンからロールアウトした時には"rollOut"という命令を実行する。
leftBtn.addEventListener(MouseEvent.ROLL_OUT, rollOut);
//右ボタンにロールオーバーした時には"rightRollOver"という命令を実行する。
rightBtn.addEventListener(MouseEvent.ROLL_OVER, rightRollOver);
//右ボタンからロールアウトした時には"rollOut"という命令を実行する。左ボタンのロールアウトと同じ命令でOK
rightBtn.addEventListener(MouseEvent.ROLL_OUT, rollOut);/*------------------------------------------------------------------------------
ボタンのロールオーバー・ロールアウト時に実行する命令たち
実際にmcを移動させているのではなく、何ピクセル移動させたいかという移動量だけ決めている。
※mcの移動作業はmotionという命令が担当している。
------------------------------------------------------------------------------*/
function leftRollOver(event:MouseEvent):void{
speed = 20;
}
function rightRollOver(event:MouseEvent):void{
speed = -20;
}
function rollOut(event:MouseEvent):void{
speed = 0;
}/*------------------------------------------------------------------------------
毎フレーム実行される"motion"という命令の設定
------------------------------------------------------------------------------*/
//motionという命令を動かし続ける。
addEventListener(Event.ENTER_FRAME, motion);
//motionで実行する内容
function motion(event:Event):void{
//mcのx座標を移動量ぶんだけ動かす。
mc.x += speed;
//でも、mcの各両端まできたら、スクロールを止めなくちゃいけない。
if(mc.x >= 0){
//もし、mcの左端が0以上になった時、強制的に0の位置に固定する
mc.x = 0
}else if(mc.x <= -mc.width + stage.stageWidth){
//あるいはもし、mcの右端がステージの右端より左に来る時、強制的にステージ右端の位置に固定する
mc.x = -mc.width + stage.stageWidth;
}
}
ボタンにマウスカーソルが乗ったら各プラスマイナス方向に20動かすというシンプルなスクリプトを書いて、あとは両端に到達したら強制的にストップしているわけですね。右端到達時の"-mc.width + stage.stageWidth"がわかりにくいかもしれませんが、なんてことはなく、下のような図をスケッチブックに書いて求めただけです。（stage.stageWidth-mc.widthとしたほうが分かりやすかったでしょうか？）
完成すると下のようになります。まずはこれを「通常のスクロール」としておきましょう。
サンプル２：減速させるサムネイルスクロール
amana.jp(http://amana.jp/) は写真サムネイルを縦スクロールさせるスタイルの Web サイトです。サムネイルメニューの上にあるスライダーバーと連動している部分も興味深いですが、それとは別に、サムネイルメニューの上下端にマウスカーソルを持っていくとサムネイルが上下スクロールされるようになっています。
このスクロール部分、さきほど作った単純なスクロールよりも気持ちよく感じるのではないでしょうか？なぜでしょう？
ではまず、この「ロールアウト時＆両端到達時にゆっくり減速するサムネイルスクロール」を作ってみます。
amanaサイトは縦スクロールでしたが、ここでは先ほど作ったサンプルを改造して、横スクロール版を作ってみます。フレームスクリプトを下のように書き換えます。
//移動量を決めておく、最初はボタンに触っていないので移動量は0
var speed:int = 0;
//減速する度合いを、後から変更しやすいようにここで設定しておく。0以上1以下の値をとる。
var friction:Number = 0.2;
/*------------------------------------------------------------------------------
ボタン操作関連の設定。通常版と同じ。
------------------------------------------------------------------------------*/
leftBtn.addEventListener(MouseEvent.ROLL_OVER, leftRollOver);
leftBtn.addEventListener(MouseEvent.ROLL_OUT, rollOut);
rightBtn.addEventListener(MouseEvent.ROLL_OVER, rightRollOver);
rightBtn.addEventListener(MouseEvent.ROLL_OUT, rollOut);
/*------------------------------------------------------------------------------
ボタンのロールオーバー・ロールアウト時に実行する命令たち。通常版と同じ。
------------------------------------------------------------------------------*/
function leftRollOver(event:MouseEvent):void{
speed = 20;
}
function rightRollOver(event:MouseEvent):void{
speed = -20;
}
function rollOut(event:MouseEvent):void{
speed = 0;
}/*------------------------------------------------------------------------------
毎フレーム実行される"motion"という命令の設定
次に何ピクセル移動できるかをあらかじめ計算しておき、その値をもとに減速移動させる手法。
------------------------------------------------------------------------------*/
addEventListener(Event.ENTER_FRAME, motion);
var goalX:Number = mc.x;
function motion(event:Event):void{
//次の移動を終えた瞬間に、mcがどの位置にいるかをあらかじめ計算しておく手法。
//以降はあくまで"goalX"という「仮の値」を計算算出しておき、実際のmcの移動は最後に減速させつつ実行する。
var nextX:Number = goalX + speed;
if(nextX<=0 && nextX >= -mc.width+stage.stageWidth){
//移動後もmcの両端が想定内の領域にきちんと収まっているのであれば、その量を移動させる予定。
goalX +=speed;
}else if(speed == 20){
//もし、mcの左端が0以上になった時は、強制的に0の位置に固定する予定
goalX = 0
}else{
//あるいはもし、mcの右端がステージの右端より左に来る時は、強制的にステージ右端の位置に固定する予定
goalX = -mc.width+stage.stageWidth;
}
//重要！減速する式を使って、「ここで実際に」mcのx座標を動かしている
mc.x += (goalX - mc.x)*friction;
}
下段の motion の部分が結構変わっていますね。考え方としては、減速させつつも両端ならストップさせるようにするために"次に進める移動量とその目標座標を先に予測しておいて、その座標に向かって減速させながら近づける"アプローチをとっています。完成品は下のようになります。
減速させることの気持ちよさは前々回のコラムでも書きましたが、スクロール終点に注目して考えてみると、僕は「エスカレーター」を想起します。エスカレーターには一般的な「斜め移動するエスカレーター」と、空港によくある「水平移動するエスカレーター」の2種類がありますが、水平移動エスカレーターって降りる時にちょっと気持悪くないでしょうか？僕は「急に投げ出された感じ」がして気持ち悪いのです。これはエスカレーターの移動量に起因していると考えました。斜めエスカレーターは終点間際では垂直方向の移動量はだんだん少なくなっていきます。一方、水平移動エスカレーターは途中も終点付近も同じ移動量で、そこからエスカレーターを降りると突然速度ゼロになります。突然なので、身体が「終わり」に対して準備できていません。
これと同様のことがWebサイトを見ているユーザーの「目」でも起こっているのだと思います。等間隔移動していて終点でいきなり動きが止まると「目」がつっかかる。対してamanaサイトのような「終点で減速するスクロール」は気持ちいいのだと思います。
こんな感じで、「なぜその UI が気持ちいいのか？」について自分なりに考えをまとめておくと良い訓練になと思います。そして気持ちよさのヒントは案外と普段の日常生活に隠されていることが多いかもしれません。いや、「万人のユーザーにとって気持ちのいい動き」を探すわけですから、デジタルにとらわれないところにヒントがあるというのはある意味当然かもしれませんね。
※サンプルファイル一式ダウンロード(FlashCS3形式:17KB)
こだわって作れば個性が出る
もちろんサムネイルをスクロールさせる方法は他にもいろいろあります。
http://www.trick7.com/blog/swf/coverSlow.html僕が昔 ActionScript2 で作ったサンプルです。ソースも公開しています。
- 左右サムネイルを押しっぱなしでスクロールし続ける。
- 最後まで進んだら、また最初のサムネイルが繋がって延々表示される。
この表現は iTunes の CoverFlow 表現の影響でしょうが、世界中の Flash 制作者が作っています。
http://www.weberdesignlabs.com/blog/?p=11これは、サムネイルの動きを下のスクロールバーと連動させたサンプル。僕のサンプルで盛り込んだ機能が無かったり、逆にこちらのサンプルにしかない機能があったりと、作り手それぞれの思いが実装に盛り込まれています。
http://lab.andre-michelle.com/cover-flow左右カーソルキーで操作できます。本家 CoverFlow が持つ「スピード感」がうまく実装されていますね。
http://labs.blitzagency.com/?p=3143Dライブラリ「Papervison3D」とトゥイーンライブラリ「Tweener」を組み合わせた作例。3Dライブラリを使うことで、よりリアルで調整しやすい空間表現になっています。
http://www.absolut.com/
極めつけはこれ！サムネイルの1枚1枚が紙のようにヒラヒラします。バーチャル操作感とリアル感がうまく融合して、目を納得させてくれる表現になっています。
いかがでしょうか？各自が CoverFlow についてじっくり考え、気持ち良いと思う表現を追及している様子が見れます。その各自の追及が個性となってコンテンツをより素敵なものにしてくれるのだと思います。
考えてみよう！
今回紹介した「サムネイルメニューの動きについて考える」という行為ですが、Flash 制作者の間でだけ楽しめるネタではありません。普段何気に目にしている動きに注目してみることは誰でもできますし、その中から自分の好みを選び・考えるのはきっと誰にとっても楽しい行為です。僕が勤務している会社でも、「動き」について話が盛り上がったことがあり、下のような具体例が挙がりました。
ルーレットのように加減速するサムネイル
ボードゲームの「人生ゲーム」のルーレットを思い出していただくと分かりやすいです。つまみを回すとギュイーンと加速しますが、各パイ（サムネイル）の間にはストッパー（減速要因）が挟まっているので、そこにひっかかって徐々に減速していく。終点時にはストッパーで少し跳ね返されたりすれば、よりリアルで面白いかと思います。
ぶら下がりサムネイル表現
このYouTube動画で提案されているメニューの気持ちいいポイントは、各サムネイルにぶら下がって付いているグラフィックが押しピンで一か所固定されている表現になっていて、スクロールが止まると揺れるところです。同じ表現を Flash のイージングだけで再現できるか、あるいは Box2D といったシミュレーションライブラリを利用するか、いずれにしても挑戦しがいのある気持ちいい表現です。
機器を傾けるとスクロールする
※筆者作品：Gainer ヘルメット
実際に機器を傾けることで、傾き方向にスクロールするというアイデアも実際に作ることができます。傾きセンサーを備えた MacBook や、Wii リモコン、iPhone などのデバイス、あるいは Gainer を使って自作してみるなどなど。実際に身体を動かすことになるので、より直感的な操作になり得ます。
なぜ跳ねる！？
http://rhfoundation.org.uk/
マウスの位置に応じてサムネイル平面全体が移動するという表現はよく見かけることができます。このサイトも概ねそうなのですが、なぜか移動途中でホップします。なぜなんだろう？気になる！個人的には印象に残るサイトになりました。
こういう「画面全体を動かすタイプのサムネイルスクロール」は直感的に操作できることもあり Flash サイトは多用されていますね。
（参考：「マウス追従でスクロールするインターフェイス | 5ive?.blog」）
サムネイルと情報を関連付ける
Olympic Medal Count Mapこのサイトでは、サムネイルの位置が国の位置、大きさでオリンピックメダル獲得数をあらわしています。
他にも、amaznode というサイトはサムネイルのつながり具合で、関連書籍同士の結びつきを見ることができます。
これらのサイトのように、サムネイルに「動き」だけでなく「情報」を可視化する役割を持たせる「情報の可視化（ヴィジュアライゼーション）」表現において、サムネイルが重要な要素として使われることもあります。
音も重要だよね
http://equation.laptop.org/
サムネイルの動きに連動して音を鳴らすことも、気持ちよさを表現するために大切ですね。
他にも、tutuanna サイトのように、サムネイル一つ一つに音を持たせ、組み合わせで音を作るしかけがそのままサイトの個性となっているような事例もあります。
こうやって「サムネイルの動き」について考えるだけで、いろんなことが気になってくるようでしたら、しめたものです。
作ってみよう！
もし、ご興味が湧きましたら、あとは皆さんでやってみてください。僕はたぶん ActionScript で頑張りますが、Flash でのタイムラインアニメーションや GIF アニメーション、AfterEffect での動画や 3D アニメーションソフト、人形を使ったコマ撮りアニメ（ストップモーション）などなど、自分のこだわりの「動き」を表現するフィールドはたくさんあります。ということで、6回の連載を通じて、日常生活の延長線上に創作のヒントがあるということ、パーソナルだからこそできる気軽に始めるクリエイティブ活動についての話題を書かせていただいたつもりです。
土日に時間があったらやってみてください。きっと素敵な趣味になると思います。
