Papervision3Dのオブジェクトに透明度つけたりフィルターかけたりしたいときはuseOwnContainerというプロパティをtrueにしなければならないのですが、useOwnContainer=trueにしたオブジェクトにaddChildしたら、そのオブジェクトはuseOwnContainer=trueにできないという話。
どちらかには効くのでやりたいことができない！ということはないと思うけど、知らなかったらはまるかもしれないのでメモ。
以下がwonderflで検証したもの。
左が普通のPlane。右はuseOwnContainer=trueにしたDisplayObject3DにaddChildしたPlane。
・_containerのalphaは変えることができる
・_container.useOwnContainer = true;をコメントアウトすれば_plane2のalphaを変えれるようになる。
・ちなみにalphaとかを有効にするのはuseOwnContainer以外に、ViewportLayerを使う方法もある。そっちのほうが軽いらしい。
何回使っても良くわからないFLVPlaybackに今回もどっぷりハマりました。
FLVPlaybackのSeekBarHandleはムービーの再生位置を示してくれるもの。ドラッグして左右に動かすとビデオの巻き戻しや早送りができます。自分でこの機能を実装しようと思ったら少々面倒くさい（というかできるかあんまり自信ない）ので、FLVPlayback備え付けのSeekBarHandleがちゃんと使えれば便利なのですが、このSeekBarHandle、ちゃんと指定しているのに出てこないことが度々あったのです。
その原因が今まで解明できていなかったので、SeekBarHandleを仕事で使うのは極力避けていたのですが、つい最近原因を解明せざるを得ない場面に遭遇したので、この機会にきちんとSeekBarHandleと向かい合ってみました。
まず以下のような、FLVPlaybackを使用してムービーを再生させるFlvPlayerクラスを作成しました。FLVPlaybackおよびPlayPauseButtonなど各FLVPlaybackカスタムUI コンポーネントをnewして、割り当てているだけのシンプルなものです。
[以下のページなどを参考に]
FLV Playback カスタム UI コンポーネントの使用
http://www.gcommerce.com/jp/devnet/flash/articles/custom_flvcomp_03.html
ACTIONSCRIPT:
-
package {
-
import flash.display.Sprite;
-
import flash.events.Event;
-
import flash.events.MouseEvent;
-
import fl.video.MetadataEvent;
-
import fl.video.FLVPlayback;
-
import fl.video.VideoEvent;
-
-
public class FlvPlayer extends Sprite {
-
private var _path:String;
-
private var flvplayback:FLVPlayback;
-
private var playpauseBtn:PlayPauseButton;
-
private var mutebtn:MuteButton;
-
private var seekbar:SeekBar;
-
-
public function FlvPlayer(path:String) {
-
_path = path;
-
addEventListener(Event.ADDED_TO_STAGE, _onAdded);
-
}
-
-
private function _onAdded(e:Event):void {
-
removeEventListener(Event.ADDED_TO_STAGE, _onAdded);
-
-
flvplayback = new FLVPlayback();
-
flvplayback.width = 400;
-
flvplayback.height = 300;
-
flvplayback.x = 50;
-
flvplayback.source = _path;
-
//自動再生
-
//flvplayback.autoPlay = false;
-
-
// playpauseBtn
-
playpauseBtn = new PlayPauseButton();
-
playpauseBtn.buttonMode = true;
-
playpauseBtn.x = 50;
-
playpauseBtn.y = 310;
-
//seekbar
-
seekbar = new SeekBar();
-
seekbar.x = 89;
-
seekbar.y = 317;
-
//mutebtn
-
mutebtn = new MuteButton();
-
mutebtn.buttonMode = true;
-
mutebtn.x = 427;
-
mutebtn.y = 310;
-
-
flvplayback.playPauseButton = playpauseBtn;
-
flvplayback.muteButton = mutebtn;
-
flvplayback.seekBar = seekbar;
-
-
addChild(playpauseBtn);
-
addChild(mutebtn);
-
addChild(seekbar);
-
addChild(flvplayback);
-
-
addEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
-
}
-
-
private function _onRemoved(e:Event):void {
-
removeEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
-
flvplayback.stop();
-
removeChild(seekbar);
-
removeChild(playpauseBtn);
-
removeChild(mutebtn);
-
removeChild(flvplayback);
-
seekbar = null;
-
playpauseBtn = null;
-
mutebtn = null;
-
flvplayback = null;
-
}
-
-
}
-
}
各コンポーネントはFlashデフォルトのものです。それぞれ1フレーム目に書き出す、にチェックをつけるのを忘れずに。
これでFlashの1フレーム目に以下を書いて書き出したものが
ACTIONSCRIPT:
-
var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
-
addChild(flvplayer);
Read more »
Papervision3Dでオブジェクトにビットマップ画像を貼り付けたとき、画像がゆがんでしまうのを回避するにはオブジェクトのセグメント数を上げるしかないと思っていたのですが、先日会社で隣の席に座っている@morikenさんにbitmapMaterialなどの引数“precise”をtrueにすることでもゆがみを解消できることを教わったので、せっかくだしちょっと比較検証してみることにしました。
まずは画像のゆがみの比較です。
一番左は、普通に貼り付けただけのもの。
真ん中はnew Plane(_material, _w, _h, 4, 4)のような感じでセグメントを4つずつ分割したもの、
一番右はnew BitmapMaterial(bitmap, true)のような感じで、2つ目の引数preciseをtrueにしたものです。
何もしてないのは論外として、真ん中と右を比べると、precise=trueの方が角度によって若干ガタつきが起こっていることが分かります。
スピード比較
大量にオブジェクトを作ってスピード比較してみました。上がPlaneのセグメント数を4,4にしたもの、下がmaterialのpreciseをtrueにしたものです。
あからさまにpreciseをtrueにしたものの方が速いことが分かります。
segmentの数を2,2まで減らせばprecise=trueにしたものより速くすることができますが、その場合はprecise=trueの方がゆがみが少なく、表示がきれいになります。
結論
ほとんどの場合、セグメント数を増やすよりprecise=trueを使う方が良さそうです。セグメント数を増やすのはprecise=trueにしたものよりさらにゆがみを少なくしたい場合でしょうか。スピードは犠牲にすることになりますが、４,４以上のセグメント数にすればprecise=trueより見た目を良くできます。
[追記 10/03/17]
soundkitchenさんが検証ソースをwonderflでも動くようにしてくれたので、実際に試してみたい方は以下からFork
ソースは以下。
Read more »
前の記事から一ヶ月以上経ってしまいました…。
AS3.0が少しだけわかってきたので、FLARToolKitとPapervision3Dをもうちょっとだけがんばってみる。
今までこのブログに載せていたFLARToolKitは、すべてFLARToolKitに備え付けのサンプル、SimpleCube.asをもとにしていて、認識したマーカーと常に同じ座標に3Dオブジェクトが表示されているというものでした。これをもう少しだけ変更して、3Dオブジェクトを常にマーカーと同期させるのではなく、マーカーの座標を利用しながら3Dオブジェクトの動きを変化させることができるようにしたいと思います。
言葉だけではわかりにくいですが、以下のようなことがしたいわけです。
今回もFLARToolKitのサンプル、SimpleCube.asをもとに変更していきます。
（SimpleCube.asの動かし方はSaqoosha.net :: FLARToolKit スタートガイドから）
SimpleCube.asの44行目
this._baseNode.addChild(this._cube);
を見ると、cubeが_baseNodeにaddChildされていることがわかります。
_baseNodeとは何かとPV3DARApp.asを見ると、57行目で_sceneにaddChildされており、その一行上で_sceneというのはただのScene3Dということがわかるので、この_baseNodeがマーカーを認識して座標を変更しているものなのだな、と推測することができます。
Read more »
いまさらな感じですが、12月のてら子で発表したFLARToolKitの使ったやつのソースを公開しました。
xmas_sample_flartoolkit.zip
FLARToolKitの中に入っているサンプルファイルとほとんど同じで、公開するほどのものでもない･･･て感じなのですが、以前解説したFlexBuilderでFLARToolKit動かす記事が古くなっててあまり参考にならないというのもあり、今回公開したソースファイルを動かすまでの手順を書いておきます。FLARToolKit備えつけのサンプルファイルも同じ手順で動かせます。
今回はFlexBuilderもFlashDevelopも使わず、Flash CS3単体で動かしてみます。
必要なライブラリのダウンロード
・FLARToolkit（TortoiseSVNなどでダウンロード）
・Papervison3D
・Tweener
FLARToolkitとPapervison3Dは必須です。Tweenerは、FLARToolKit備えつけのサンプルファイルでは必要ないですが、今回動かすソースで使っているのでダウンロードしてください。
FLARToolKitのtrunk以下をダウンロードすると以下のようになっています。
Read more »
