英語版ブログの記事に合わせて、以前作成したFLARToolKit関連のデモを一つ、
フルスクリーンで使えるようにしてみた。それなりに難しかったので、メモしておく。
フルスクリーン実現のために、2箇所のコーディングを行う必要がある。
- メインクラスのASファイル
- ASを表示するHTMLファイル
ASファイルのコーディング
まず、適当なタイミングでフルスクリーンモードになってやる必要がある。
今回は、画面の何処でもいいので、とりあえずクリックしたらフルスクリーン、
もう一回クリックしたら元に戻るということにしてみる。
まず、メインクラスのコンストラクタ内に、イベントリスナーを作ってやる。
- this.addEventListener(MouseEvent.CLICK, onClick);
で、イベントハンドラonClickをこんな風に実装。
- private function onClick(e:MouseEvent):void
- {
- if (this.stage.displayState == StageDisplayState.FULL_SCREEN) {
- this.stage.displayState = StageDisplayState.NORMAL;
- } else {
- this.stage.displayState = StageDisplayState.FULL_SCREEN;
- }
- }
このように、stage.displayStateに入れる値が鍵となる。
フルスクリーンモードならStageDisplayState.FULL_SCREEN、
普通モードならStageDisplayState.NORMALだ。
ただし、フルスクリーンモードだとキー入力が効かないらしい。
AIRだと、フルスクリーンかつキー入力が効くモードがある。
StageDisplayStateのAPIドキュメントを参照して欲しい。
HTMLのコーディング
ASだけでは、フルスクリーンモードにならない。
HTMLの方で、フルスクリーンかを許してやる必要がある。
FlashVarsにフルスクリーン許可用の変数allowFullScreenがあるので、
コイツをtrueにする。
FlashVarsに値を入れる方法は様々だが、
例えばSWFObjectとかなら、以下のようにする。
- addParam("allowfullscreen", "true");
英語ブログの方は、WordPressの「Shadowbox JS」てのを使ってて、
それだとFlashVarsの指定方法が全く分からなかった。
仕方がないので、Shadowbox JS内のコードを書き換えて対応した。
js\shadowbox-2.0.jsの6行目のこの部分を
- children:[{tag:"param",name:"movie",value:this.obj.content},{tag:"param",name:"bgcolor",value:C}]
こう書き換え、無理矢理フルスクリーン可能にしてみた。
- children:[{tag:"param",name:"movie",value:this.obj.content},{tag:"param",name:"bgcolor",value:C},{tag:"param",name:"allowfullscreen",value:"true"}]
ただ、これだと全コンテンツが影響有りなんだよね。
本来なら、Shadowbox用のAタグで対応したい。
と言うか、コード書き換え無しで対応したいんだが、
そうなるとより深く理解を進めなくてはならず、難しい。
