UI Archive

サムネイルをクリックすると大きい画像を表示します、という見せ方はよくあると思います。そのとき、大きい画像の出し方を考えるあまり、サムネイルの感触はお座成りになっていることがあるなぁ、と思うことがありました。
たとえば JS の Lightbox や Thickbox に代表される表現。あれは、拡大画像をいかにかっこよく見せるか、を考えられたものであって、サムネイルについては、いかに簡単にスクリプトを仕込むことができるか、という部分によって大事さが端折られてるようにも思えるのです。

まずはこれを見てください。

Continue reading

3Dテキストの実験です。

この文字、浮き出て見えません？
青い文字を読もうとすると赤い文字が、赤い文字を読もうとすると青い文字が浮き出て見え...る気がします。目の錯覚を利用しています。

どうだ。ダメか。

※モニタによるっぽいですね。

シークバーというと「時間を自由に前後できるUI」というイメージがあったんですが、べつにここにこだわる必要ないですね。ボリュームコントローラもそうだし、音量の左右のパンの調整もそうかもしれない。シーケンサーにたくさんついてるつまみもそうだし。
ということは、シークバーというUIは、「ある一定の範囲で数値を前後させることができるUI」という広義の解釈で使うのがよさそう。
つきつめると、大か小か。イチかゼロか。始まりか終わりか。です。

まぁ、広義解釈してしまうと「スクロールバー」という一言で終わっちゃうし、UIとしてはかなり古い時代からある（っていうかブラウザの右端についてるから誰でも使えるし誰も気にしない）モノになってしまいました。

ビデオのシークっていうのはジャンル的にかなり小さい範囲で、しかも扱うものがビデオだから、始まりと終わりを繋ぐバーっていうよりもその中間、バーの「現在」に気が向いてしまいがちですが、結局はイチかゼロか、です。ですっていうか僕は専門家じゃないけどそうだと思います。

このエントリはすっごく個人的な内容に終始しちゃうんですけど、シークバーをスクロールバーの一種として、さらに始まりと終わりを繋ぐ数直線状の一点を意識させるUI、っていう解釈にたどり着けたのは良かったと思います。

サイトには明示的に「終わり」があってもいいんじゃないだろうか、という妄想。

例えばキャンペーンサイトでは、[HOME][CONCEPT][GALLARY][DOWNLOAD][SECRET]みたいなメニューが並んでいて、まぁそれを端から見ていくんですが、全体を見てもやっぱりホームに戻ってくるだけ、という場合が多い。多いというかそれが普通なんでしょうけど。

でも、バスキュールに見られるように、サイトには明示的にコンテンツの終わりがあってもいいんじゃないかなぁ。

どうせホームに戻してメニューをきらきらさせるだけなら、画面を全部なくして「END」とでも表示して、もう一度見たいときはこちら、なんつってボタンを用意するとか。
ムービー系のサイトならホームに戻る必要すらないわけだし。

サイト内でループしなきゃいけない、というのはウェブを難しくしてる原因のひとつで、「すべて始まりがあれば終わりがある」とかのMATRIXの時代から言われているわけだし、玄関から入っても玄関から出なきゃいけないことはないよね。

ここ最近考えてる「シーク」と「時間の可視化」と、今日の「サイトの終わり」は、ひとつのヒントになったような…気がします。漠然と。

普通の人はFlashのアニメーションを見るのに「全体は何分で、今は何割進んでて、もうちょっと飛ばして見たいな」とか思わないのかな、と思いました。
そういえば僕は本は斜め読みだし、テレビはザッピングしまくるし、AVは飛ばすし、Flashは最初と中間と最後だけ見てみて、面白そうだったら全部見る、という習慣があるのかもしれません。
そのくせJOJOは何度も読み返したりして、時間が止まるだの吹っ飛ぶだのといったスタンドに憧れるわけです。

思うに、シークバーってのは短気な人のためのインタフェースで、普通の人や気の長い人に対しては、実は違う形のUIがあるんじゃないでしょうか。
Youtubeにはじまる動画系サイトは全てシークバーを実装しているけれど、リアルを見回せば、ビデオにはそんなものないし、映画はそもそも時計がないし、テレビは1時間番組のどこで面白いことをやるかわからないし、という意味では、シークする必要がないんじゃないか、と。

むしろそれよりも、最初と中間と最後のサムネイルを並べて、直感で分かるようにするのが映像を「観た」という感覚に近いのでしょうか。

アニメーションやビデオを再生するためのUIは、実はまだまだ発展途上なのではないでしょうか。
と思うのは僕だけか。
もっと違った形でインタラクションを実装したボタンを作れれば、ウェブtoリアルの理想に近づけるのかなぁ、どうすりゃいいんだろうなぁ、
という雑記、です。

結論：エロい奴ほどよくシクる。

via : MovieClipController(ver.2)のエントリ

外部ファイル読み込みに対応したver2.1です。
これはスマートじゃないんですが、こういう形で公開しておきます。本当はクラスの中に入れて使うと多少スマートになるんですが、そのとき使ったファイルからこのコントローラの部分だけを抜き出して公開するとなるとクラスに修正が入るのでメンドイなぁ、ダルいなぁ、マジダリーよダルビッシュだよ、ということになるのでこの形になります。まぁ公開するので好き勝手やってください。

flaを開くとわかるんですが、loadClipで読み込みファイルを指定しています。で、コントローラに最初に設定してあるプロパティを、外部ファイル読み込み後に設定してあげます。それだけ。

ダウンロードはこちら：（ver8 .fla形式をzipにしたもの）

コンポーネントのFLVPlaybackをそのまま使うと、シークバー自体をクリックしてシークするという機能がありません。つまみをドラッグしてシークするしかないので、不便です。しかも、現在再生しているのが全体のどの辺かを知るにはつまみの位置を見るしかなく、色で一瞬で判断できるわけでもありませんでした。

それをカバーしたのがこのサンプルです。シークバーを押すと、押された箇所の_xmouseを取得して、全体の位置とクリックされた位置の割合を計算して、その場所にシークする、という流れです。

//
//シークバーの幅を決定し、クリックシークを設定
SeekBar.onRelease = function() {
	flvpb.seek(Math.floor(this._xmouse*(sbw/100)*flvpb.totalTime)/sbw);
};

久しぶりに意味があるエントリになったと思います。素材ひとまとめにしたのはこちら。（ver8　.fla形式　zipでどうぞ）

ちなみに。
上記のサンプルFLVはこちらからお借りしました。サンプルビデオをダウンロードできますよ。

僕がよくFlashのテストで使ってるMovieClipControllerを公開します。
これは、Flashにシークバーとボリュームコントローラを簡単につけることができます。

まずはこちらを見てください。

使い方は簡単です。

基本は_rootに置きます。すると、_rootのフレーム数を取得して、FlashVideoを操作するかのようにMovieClipを操作できます。再生/停止、シーク。対象となるのはこの場合_rootですが、実際は、このmcコントローラを配置したmcです。

一番簡単な基本セットですが、お気軽にダウンロードしてください。一応クリエイティブコモンズライセンスってことにしておきます。by Ryow.netです。

今回公開したのはver2ですが、今後の展望としては、外部ファイル読み込み（loadMovieとかMovieClipLoaderとか）に対応してシークを可能にするver.2.1と、AS3に対応したver.2forAS3の公開、1フレームごとに戻る/進むに対応したver2.12、キーボードの上下左右に対応したver2.13も、反応を待って、しようと思います。どんだけあるんだ。っていうか↓のソース見れば誰でも書けます。むしろ「こう書いたほうがかっこいいよ！スムーズでスマートだよ！！」っていう書き方があったら教えてください。

問題点としては、フレームレートを取得できないのでAS内で直接指定しちゃってるところがあります。

2008.02　追記：ver2.1をこちらのエントリで公開しました。

そもそも何で公開すんのかっていうと、Flashにシークバーをつけるコンポーネントを開発公開してる人が僕の知る限りいないからです。どんどんFlex化していって、総フレーム数1でFlashを作ることが多くなりますが、やっぱりタイムライン職人はこういうのがあると嬉しいと思います。

っていうか、ナイトメアシティとかに代表される紅白Flashのムービーに、こういうコントローラがあるといいな、って単純に思ったからです。

タイムライン派こそ、こういうスクリプトとの共存共生をはかり、進化するべきなんじゃないかなぁ。

→ダウンロードはこちら(ver8 .flaファイル）