カテゴリー: FLASH

Papervision3Dを使ってみるためのイロイロ備忘録その1

Papervision3Dとは、Flash(ActionScript)で3D描画を行うASの拡張ライブラリ。

つまり、このパッケージをダウンロードしてきて自身で作成しているFLASHのASコードに連携させることで、複雑なASコードを最初から書かなくても、用意されているクラスを利用して、複雑な動作や表現ができるってことです。ちなみにPV3D(Papervision3D)は2DであるFLASH内で擬似3D表現を可能にするソースコードのパッケージです。

他にも代替ライブラリや違う表現機能を持ったライブラリが色々オープンソースでも出ているけど、PV3Dは、人気があって有名で、AR(Augmented Reality)的なイロイロを作成するときに、便利なFLARtoolKitというSaqooshaさんのソースパッケージと連動させて使うことができるので(ネットでサンプルとかチュートリアルとか豊富)これを使ってイロイロやってみることにする。

できることイロイロ。
フラッシュ内で3D的なものが作れる。
例えば、プリミティブな図形(球や立方体や円柱、飛行機など)をスクリプト制御で動的に生成してテクスチャをつけるとか、それを見ている3D空間の擬似カメラの視点や視野角を調整するとか、さらにマウスアクションに連動させて、そういうオブジェクトを自由に動かすとか、3Dハイパーなテキストを動的に出すとか、ま~、3Dアニメーションで簡単にやりたいようなフラッシュ的な面白い物をイロイロ作れるってことでしょかね。

どういう風に機能するかっていうと。
まずこちらでいろんな動きとかを作っていくAS3(フラッシュのアクションスクリプトVer.3)を書いていき、そのコードに書いた内容を表示するための空のFLAファイル(ドキュメントルートに、その実行するASを設定しておく)を用意しておきます。
んっで、そのASのコードから、PV3Dのクラス(うんっと。要は、いろんな動きとかオブジェクトを作成するコードのグループ化した塊ね。“四角形生成~”とか“3Dカメラを置く”とか“90度回す”とかそういうのを実現するコードのグループ。通じます?説明悪くてごめんなさい;)を呼び出してあげますと、そのイロイロな複雑なことを実行するコードグループはPV3Dのパッケージの中にグループごとに入っているので、こちらで作成したASコードには、「PV3Dの1番コードを実行。」って感じで書いとけば、そのグループに含まれる複雑な処理は全部を書かなくても自動的にPV3Dの中身が呼び出されて処理してくれる、というわけです。
私たちは、PV3Dでは、「PV3Dの1番コードを実行。」っていうのを、なんて書いてあげればいいかだけを考えればよくなるんですね。

ちなみに、アクションスクリプトはバージョン色々あって、2も使えますけど、動作の安定性と表示処理の速さとか色々な都合を考えると、PV3Dを扱うときには、3にするのがベストだそうです。3Dレンダリングってマシンに結構な負荷かけますから。ココはさくっとその通りAS3使いましょう。

そいじゃ。

動かすために、PV3Dをどういう風にローカルマシンに配置してやればいいかとかどうやってDLするかとか、その辺ですけど。

PV3Dは、ローカルマシンの好きな場所に一式を保存して、フラッシュの編集メニュー→環境設定からActionScriptのタブの中のActionScript3設定を開いて、「ソースパス:」という項目で+ボタンをクリック。さらにフォルダのマークの参照ボタンをクリックして、ダウンロードしてきたPV3Dの「\papervision3d\as3\trunk\src」という階層を選択してOKしましょう。
これで、いつでも任意のAS3コードからPV3Dのアクションスクリプトを参照して利用できるようになりました。
たまたま1台のテストマシーンで使ってみたいとか、設定が面倒だから、あんまり考えたくない、みたいな時には、DLしてきたPV3Dの「\papervision3d\as3\trunk\src」の中にある、「org」フォルダと「nochump」フォルダを、これから作成・編集するASファイルとFLAファイルを保存した同じところにコピーしておけば、上記の設定をしなくてもPV3Dを利用できます。

どっちでもいいです。使いやすいほうで。いっぱい作るなら設定しちゃったほうがバージョンアップとかも同一管理でできるから便利だし、チュートリアルを試すくらいなら、ファイルフォルダをコピペしてきて使うってのもわかりやすいだろうし。

さて。ちょっと戻りますが、上記を踏まえて、PV3DをDLします。
PV3Dは、ZIPファイルとSWCファイルでDLすることもできますが、開発コードのアップグレードが結構頻繁に行われていますので、そういう差分までを管理しているSubversionシステムから管理用のアプリケーションを使ってDLするのがいいと思います。常に新しいのは、Subversionシステムにアップロードされているソースコードのほうです。

アーカイブをDLする場合は、ココから最新をどうぞ。
http://code.google.com/p/papervision3d/downloads/list

SubversionシステムからDLする場合は、SubversionクライアントソフトであるTortoiseSVNをDLして利用してください。(他にも、Subversionクライアントソフトはあります。WINで一番ポピュラーなのがこれなだけです)

簡単にSubversionの取得のやり方。
1)TortoiseSVNをマシンにインストールしておく。
2)PV3Dを保存したいディレクトリにフォルダを作って右クリック。すると、右クリックのメニューに「SVN checkout」と言うメニュー項目ができていると思うので、そのメニューをクリックして選択。
3)表示されるCHECKOUTのウインドウで「URL of repository:」のフォームの中に、「http://papervision3d.googlecode.com/svn/trunk/」と入力してOKをクリック。
4)横長の別ウインドウが出てきて、ダウンロードが始まります。完了したら、OKボタンをクリックして終了。
これで、PV3Dの最新コード全てがDLされますが、AS3を使うなら、必要なのは、\as3\trunk\の中身だけなので、それだけをDLしてもかまいません。

これで一応、フラッシュのアクションスクリプトで、PV3Dのクラスが使えるようになりました。

今日のところはこれでおしまい。次は基本機能とか、イロイロ。

フラッシュでできる楽しい表現「Papervision3D」

http://www.smashingmagazine.com/2009/08/10/discovering-papervision3d-best-design-practices-and-tutorials/

久しぶりすぎる更新で、見慣れた人には、すでに古いネタですね;

いまさらですが、PV3D。フラッシュで3D的な表現を可能にするソースパッケージです。
最近注目のAR(augmented reality)とかその手の流れの一環で再び注目を集めているようです。

上記のサイトでは、チュートリアルやステキな作例を紹介しています。

通販サイトとか企業サイトとか、業務で制作するようなWEBサイトで使うことって全然無いので、この手の情報はもっぱら趣味の道。

でも、消えたり浮かんだりしながら、サイバー世界に生きる人たちってやっぱりCGっぽいCGの表現って結構好き、ですよね。私も好きです。

昔と違うのは、3DCGなんかでできることって表現は以外とそんなに大きくは変わらないのに、浮かび上がってくる度にやり方が簡単に少ないツールや費用の掛からない方法でできるようになってくるってことですかね?

手軽にフラッシュボタンをつけるとっても便利なFlashEngine

なんちゃってWEBデザイナーは、手軽にカッコエエ~フラッシュボタンを付けたい。フラッシュって、ガッツリいくならありだけど、ページもいっぱい作んなきゃだし、正直めんどくさい。

大体トップのメインとこくらいしか使わないし。

時々バナー作るだけだし。

手軽に、楽に、いきたい。ほんと。

んで、見つけました。

これ、便利。

気に入った!

Flash Engine Series

画像を用意して、リンク位置とか設定するだけで、カッコエエ効果の付いたフラッシュビジュアルが作れるエンジン。

フラッシュファイルとXMLとかJSがセットになってて、こちらでは、ベースになる画像とマウスオーバー時の画像なんかを用意するだけ。

んで、ちょっと座標とかちょこちょこ設定すると。。。

あ~ら、不思議。なんか、えらい凝ったフラッシュできた!みたいな感じになってますけど。

これ、トップページのフラッシュまで予算取れないときとか、ECサイトなんかで、結構いいですね。(^^)//