« Flash Creative Technique - vol.59
3次元のスパイラルを表現する(後編)
| DEEP KICK.com Blog | 「ハヤシカオルのFlash進化論」告知 »

2007年4月 6日

Flash Creative Technique - vol.60
回転ドア式のフォトギャラリー(前編)

このエントリーをはてなブックマークに追加

web creators 2007年5月号web creators 2007年5月号の「Flash Creative Technique」は「回転ドア式のフォトギャラリー」(前編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

今回の「Flash Creative Technique」から前編と後編の2回に分けて、回転ドア式の立体的フォトギャラリー「The revolving photo gallery version 0.1」の作成を解説します。本連載でこれまでに何度か解説してきた仮想的な3次元空間を移動するモーショングラフィック的要素とXMLドキュメントでのコンテンツ管理をミックスさせたウェブアプリケーションになります。

これまでこの連載を通して仮想的な3次元空間上を回転運動するモーションについて、何度か解説してきました。前回に解説した「The spiral driver」もそうですね。本サンプルはその応用とも言えます。ただ今回、ハヤシカオルなりに考えたのは、単に実験的にモーションするだけではなく、その動きを使って、もっと実用的に使えそうなサンプルを作ってみよう、という点でした。ただ実際問題、連載でアプリケーションの作成を書き下ろしで解説するのは、誌面の都合もあって、なかなか難しいんです。それなりの機能を持つアプリケーションは、それなりに時間がかかりますし、工程も複雑で、バグをつぶすのにもそれなりに。何か良いアイデアがないかなとたまたまiTunesで音楽を聴いていたわけですが、そこにヒントが隠されていました。アルバム画像がを横方向にスクロールするアレです。それを回転運動風にして、写真でも見せられないかなと。で、写真もXMLを使って、手軽に管理できないかなと。

はじまりは、だいたいそういう思いつきです。まず最低限必要な機能とインターフェイスをイメージします。次にそれが果たして本当にFlashで可能な話かどうかの調査も兼ねて、プロトタイプの作成にとりかかります。これがなかなかうまくいかない(笑)。これまでに制作したモノや知識を総動員し、行ったり来たりを繰り返しながら、少しずつプロトタイプをカタチにしていきます。楽しくもあり、非常に頭を使うので疲れる工程でもあります。そうこうするうちに原型ができあがってきます。

仮想空間の原点を中心にした円周上に、一定の角度ごとにオブジェクトを複製します。口でいうのは簡単なんですが、いろいろなやりかたがあって、試行錯誤しながら作っていきます。次に横方向の回転運動を生み出す動力を取り出す仕組みを考えます。これは土台となるオブジェクトをドラッガブルにして、リリースすると減速しながら、元の位置に戻りつつ停止するような仕組みを作り、距離に比例した動力を取り出すようにします。停止すると動力もゼロになるわけです。

今回たまたまワイヤーフレーム状態にしたオブジェクトを並べると、古代ローマのコロッセウムの模型のような円柱が現れました。動かしてみると、幾何学的な模様が非常に美しい。これはこれで別の何かに使えそうです。後編に続きます。

投稿者 kaoru : 2007年4月 6日 17:00

このエントリーをはてなブックマークに追加

contents
about
contact
Photo Gallery
blog
iPhone/iPad アプリ
Kindle book
portfolio