flashHOMEFLARToolKitとPapervision3Dをもうちょっとだけがんばってみる2009-05-11flash前の記事から一ヶ月以上経ってしまいました...。AS3.0が少しだけわかってきたので、FLARToolKitとPapervision3Dをもうちょっとだけがんばってみる。今までこのブログに載せていたFLARToolKitは、すべてFLARToolKitに備え付けのサンプル、SimpleCube.asをもとにしていて、認識したマーカーと常に同じ座標に3Dオブジェクトが表示されているというものでした。これをもう少しだけ変更して、3Dオブジェクトを常にマーカーと同期させるのではなく、マーカーの座標を利用しながら3Dオブジェクトの動きを変化させることができるようにしたいと思います。言葉だけではわかりにくいですが、以下のようなことがしたいわけです。今回もFLARToolKitのサンプル、SimpleCube.asをもとに変更していきます。スタートガイドから)SimpleCube.asの44行目this._baseNode.addChild(this._cube);を見ると、cubeが_baseNodeにaddChildされていることがわかります。_baseNodeとは何かとPV3DARApp.asを見ると、57行目で_sceneにaddChildされており、その一行上で_sceneというのはただのScene3Dということがわかるので、この_baseNodeがマーカーを認識して座標を変更しているものなのだな、と推測することができます。1PermalinkこのあいだのFLARToolKit使ったやつのソースと、その動かし方の解説2009-01-26flashいまさらな感じですが、12月のてら子で発表したFLARToolKitの使ったやつのソースを公開しました。xmas_sample_flartoolkit.zipFLARToolKitの中に入っているサンプルファイルとほとんど同じで、公開するほどのものでもない・・・て感じなのですが、以前解説したFlexBuilderでFLARToolKit動かす記事が古くなっててあまり参考にならないというのもあり、今回公開したソースファイルを動かすまでの手順を書いておきます。FLARToolKit備えつけのサンプルファイルも同じ手順で動かせます。CS3単体で動かしてみます。必要なライブラリのダウンロード・FLARToolkit(TortoiseSVNなどでダウンロード)・Papervison3D・TweenerFLARToolkitとPapervison3Dは必須です。Tweenerは、FLARToolKit備えつけのサンプルファイルでは必要ないですが、今回動かすソースで使っているのでダウンロードしてください。FLARToolKitのtrunk以下をダウンロードすると以下のようになっています。flashBlenderで作ったアニメーションを、Papervision3Dで使う方法の解説です。Flashで3Dアニメーション付きのファイルを扱う場合、3DソフトはフリーソフトのBlender、FlashはPapervision3Dのライブラリを使用するのがポピュラーみたいです。Papervison3Dでアニメーション付きの3Dファイルを読み込む場合は、Collada形式(拡張子.dae)のファイルを使用するのですが、BlenderからPapervision3Dで使えるdaeファイルを書き出すのが、ちょっといやかなりやっかいで、この工程が作業の中で一番のポイントとなります。私もうまくいくまでほんと何度も失敗しました。試行錯誤した結果、重要だったのは以下の2点でした。・Blenderの最新安定版(12月18日現在2.48a)をインストールすること・Python2.5.2(←最新版ではないので注意)をインストールすること↑の環境以外では以下に記述するとおり作業を進めても、daeファイルをエクスポートできません。逆に言えばこの2点を押さえておけばできたも同然です。注意:BlenderもPapervision3Dもしょっちゅうバージョンアップされるので1~2ヶ月も経てば最適な環境は変わってくると思います。気が付いた時点で追記していくつもりですが、新しいバージョンが出てる場合はそちらを試してください。それでは以下から順を追って説明していきます。12月号、連載「ActionScriptライブラリ」のTeraClock編で、TeraClock使用例として、他のTeraClockerさん達の作品とともに、ホネホネ・クロックを紹介していただきました。Webサイトにも載っけていただいてる様子・・・。さんという方が移植してくださっていて、AS2でも使えます。AS2版の使い方が解説されてなく、使ってみたときにちょっととまどったのでメモしておきます。AS2版のダウンロードは以下から。http://www.libspark.org/svn/as2/TeraClock/使い方と言っても使い方はAS3版とほとんど同じです。違うのは1箇所だけ!TeraClockインスタンスを作成する際に引数としてMovieClipを渡すことです。シンプルな書き方は以下のような感じでしょうか。TeraClock(this);ただTeraClockAS2版は、渡したMovieClipに対してonEnterFrameを使うので、その後this.onEnterFrameを使ってしまうとTeraClockが動かなくなります。thisを渡すよりは、TeraClock専用のMovieClipを作ってそれを渡す方が無難でしょう。AS3版に付いているサンプルコードと同じようなことをAS2版でする場合のスクリプトは以下のようになります。{trace(clock.seconds+"秒です。{trace(clock.minutes+"分になったよ。{trace(clock.hours+"時になったよ。");}上記のスクリプトを、Flashファイルのフレームにコピペしてください。newする時以外はAS3版と全く同じ書き方で動くので、その他詳しい解説はTeraClock作者teraさんのブログの記事かWebDesigning12月号を参考にしましょう。「TeraClock」ライブラリ作りましたAS3版と同じでアナログ時計も作れるよAS2でもEventDispatcherというのを使えば、AS3と全く同じようにイベントリスナーが使えるんですね。本当に良く出来てます!その他AS3版に付いているアナログ時計の機能なども、まるコピーするだけで使えるようになります。そのコピペしただけのものをこっそりコミットしておいたので、アナログ時計を作りたい方は使ってみてください。(こんなのコミットしてもいいのだろうか。)使い方はAS3版と同じなので以下の記事か、WebDesigning12月号を参考に。layer」のエラーの原因(ライブラリのフォルダの中にあるシンボルを置き換え先として指定するとエラーが出る)を教えてもらったので、もしかしたら自分で直せるかなと思い、調べてみたら本当に簡単に直せたのでメモとして残しておきます。layerのjsflを探します。8\ja\Configuration\Commandsのような場所にあります。※フォルダオプションで「すべてのファイルとフォルダを表示する」にしておかないと見つかりません。Settingsとかから検索すればOK。jsflファイルが見つかったら、テキストエディタなどでjsflファイルを開きます。104行目を以下のように変更します。TEXTJAVASCRIPT:doc.swapElement(libItem.name);なんかこんな大げさに書くこともないというか、[0]を取るだけです。layerを使うと、ライブラリのフォルダ内のシンボルにも置き換えできるようになっていると思います。バージョンは8でもCS3でも同じです。修正は自己責任でお願いします。修正するにあたっては以下のPDFファイルを参考にしました。LABS修正したjsflファイルをmxpファイルにもしてみたのですが、mxpファイルの作り方は以下のブログの記事が参考になりました。