Posts Tagged “UI”

FLVPlayback(AS2)をカスタマイズしてシークバー周辺を便利に

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

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

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

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

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

Flashをビデオのようにシーク、再生停止できるMovieClipController(ver.2)を公開

僕がよく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ファイル)

「ホームに戻る」リンクは必要か?

企業サイトとか作ってると、「ホームにもどる」ボタンを作るかどうかで悩みます。
作る場合は、グローバルナビがひとつ増えるわけで。富良野は寒いわけで。雪の時期はそろそろなわけで。画面を圧迫する要素がひとつ、しかも全ページ、ナビとしては一番上に、です。
こりゃあ、マジメに考えないといけません。
デザイナーというかコーダーで出来ることは全てできるようになって、Flasherになって、perl/phpをキモイと思いながら弄れるようになって、ディレクションをやるようになって、全部自分だけで作ってたときもあったんですが最近はちゃんと他のことは他のスタッフに任せるようにして、クオリティ管理を心がけるディレクター兼インフォメーションアーキテクトとしての時間を多くとるようにしているんですが、この「ホームに戻る」ボタンは毎回考えます。
企業サイトによっては、あったほうがよかったり(旧来のサイトに愛着がある場合)、ないほうがよかったり(新しい印象・イメージを与えたい場合、またはブランドが確立されていて、サイトロゴをクリックするとトップページに戻ることが明示的な場合)するんですが、最近だと「ゆうびんホームページ(郵便局)」は「ホーム」のリンクはないですね。
そもそも、「ホーム」が必要になるのはトップページ以外のページです。
そして、トップページ以外のページには「パンくずリスト」がついています。(ブレッドクラムとか言うとかっこいい:ホーム>製品紹介>製品AAA みたいなリンクのこと)
ブレッドクラムがあれば、「ホーム」をボタンにしなくても表示は可能です。
だからこそ、「ホーム」ボタンでトップページを汚したくない、というのが本音です。
僕が担当するのは「Webってなんじゃ?食えるのか?パソコンってなんじゃ?」みたいな爺さまばっかりなので、「ホーム」がナビに置いてないとトップページに戻れない人が多くて、「ホームページにはホームボタンはいるじゃろう」って当たり前のように言ってくる人が多いです。人というかお客様なんですけど。
そういう人に、「サイトのロゴをクリックするとトップページに戻れますよ。これはWebの標準的な作りなんですよ」と言っても、「そんな新しいモンの常識は知らん。ホームページにはホームボタンはいるじゃろう」ってそれさっき聞いたよ!っていう問答が繰り返されてしまい、僕のディレクターとしての未熟さが露呈してしまうわけです。
今日は1日じゅう、「ホーム」ボタンの是非を考え続けていました。
デザイナーさんでも、意外に当たり前のようにナビゲーションに「ホーム」を並べていることがあって、うーん、それ、マジで? って思ってしまいます。
そういうときのために、IAとしての僕がデザインを頼む前に一頑張りしておかなければいけないんですね。
「何うんうん考え込んでんだ。手を動かせ!」みたいな空気があるので、「情報を整理する」ことに時間がかかることはなかなか理解されないような気がします。
それでも、ディレクターとして、IAとして、開発者として、デザイナーとして、コーダー(マークアップエンジニア)として、何でもやっちゃるぜ! やってやんよ! という気持ちで頑張るのです。
あ、マジで日記というか雑記になっちゃった。