本をめくるアニメーションでスライドショー表示するFlash (Dynamic Page Flip )
2007年3月22日(木) 10:15
写真などを実際に本をめくるようにスライドショー表示するFlashが、Dynamic Page Flip。 表示したい内容をXML形式で設定ファイルとして作成する。表示可能なファイル形式は、JPEG、SWFのみとなっているが、SWF形式が利用できるので動画などもあらかじめ変換しておけば表示可能になる。
ページ端にマウスを重ねると、少しめくれるようなアニメーションが表示される。クリックすることで次のページを表示し、ドラッグ操作にも対応しており、リアルな動きを再現してくれる。Dynamic Page Flip v2で追加されたナビゲーションボタンでも同様の操作が可能になっている。
マウスでページめくり

動作サンプル
使用する画像ファイルなど、サイズを統一しておいたほうが良い。ページの内容を定義するXMLファイル中の<content タグで、表示領域のサイズを指定できる、画像のサイズが設定より小さい場合は、次のページが背景に表示されてしまうので、注意が必要。
ダウンロードファイルには実際に使用されているソースファイルのすべてが含まれている。写真のスライドショーのように利用するのであれば、サンプルを参考に、XMLのファイルを作成する程度で簡単に利用できるのが分かる、是非チャレンジしていただきたい。
関連する記事
- マウス操作で写真にズームするギャラリーswf(PostcardViewer)
- CSSとCanvasで描写するWeb用のUIフレームワーク(Mocha UI)
- 透明感のあるデザインをJavaScriptで実装する(glassbox.js)
- MP4、FLVなど再生するFlashプレーヤーswf (JW FLV MEDIA PLAYER)
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript(shadowbox)
- デザインが魅力的なスライドショー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)

