前の記事 ≪:Webアプリ開発者向け Firefox拡張機能 34
次の記事 ≫:入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS&Ja...

Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」

2007年03月26日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Dynamic Page Flip v2 from shift control
Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files:

Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。
Webページだけど、本を見るみたいなUIにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなUIを実装するためのFlashサンプルが公開されました。
次の画像のように、マウスでページの右端をドラッグ&ドロップでページをめくれます。



本の中身は自由に書き換えることができるので、ダウンロードしたSWFファイルをそのまま使うことも出来ます。
中身の指定は次のようなXMLで簡単に行えます。

<content width="300" height="400" hcover="false" transparency="true" prepage="pages/prepage.swf">
 <page src="pages/page1.jpg" preLoad="true"/>
 <page src="pages/page2.jpg" canTear="true"/>
 <page src="pages/page3.jpg" preLoad="true"/>
 <page src="pages/page4.jpg" afterTear="someFunction,param1,'param2','param3'" preLoad="true"/>
</content>

画像の他、Flashムービーをページに指定することも出来るので、ページ内で動画を再生したり、物体を動かしたりとWEBならではの仕組みも盛り込めます。

ダウンロードファイルを解凍して sample.html を開けばその動作を確認できます。
FLAファイルまでダウンロードできるので、Flashによる実装部分の解析や改造などを行えそうです。

WEB屋さんなら、覚えておけば、こんなUIも作れますよ、という驚きをクライアントに与えたりすることができるかもしれませんね。

関連の記事検索:Flash, UI, Webデザイン, デザイン, actionscript, チュートリアル
スポンサード リンク

By.KJ : 2007年03月26日 07:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)