iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
2007年8月23日(木) 07:45
iTuneの機能にCoverFlowがある。カバーアートが横にスライドするメニューだが、量が多い場合や写真などイメージから選択する際に、優れたインターフェースになっている。同様のメニューをWebコンテンツに実装することが出来るのがiTunes Coverflow。
Flashで出来ているため、導入は比較的簡単。表示するリストはXML形式で独自のフォーマットを採用している。また、表示させたい画像イメージは別途フォルダなどに格納しておき、XML中でファイル名とデレクトリ指定をする。

flaを少し修正してから使う
簡単なユーザー登録を済ませると、ダウンロードリンクが表示される。ダウンロードファイル(ver 1.12)に必要なファイルと、サンプルが含まれる。そのままで利用すると、余計な表示が含まれているので、付属のflaファイルを修正してパブリッシュした物を利用すると良い。
ActionScript等を修正して、自分好みの表示レイアウトに変更することも出来る。また、余分なコントロールなどを削除すると、よりCoverFlowに似た表示にすることも出来る。
中央に表示中のイメージをクリックしても何も反応がないので、こうした部分の実装は別途行う必要がある。そのまま利用するよりも、ソースコードを参考に好みのデザインで作成してみてはいかがだろうか。
※最新バージョン(ver 2.0)はflaファイルのみダウンロード
関連する記事
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)
- フォトショップで作る80種類のテキストエフェクト集 (photoshoproadmap.com)
- Flashで便利なTweenクラスのわかりやすい解説 (Tween Class Easing)
- CSSレイアウト情報をレイヤー表示するブックマーク (XRAY)
- Lightboxのような透過レイヤー表示の実装サンプル (Lightbox Effect)
- CSSデザインで綺麗なボタンを作成する (How to make sexy buttons with CSS)

