2 月 13 2009

CSSのz-indexを使ってFlashを背景表示する例

Posted by tanjo at 3:36 PM

CSSのz-indexを使ってFlashを背景表示する…ときの注意点とか、やってみて気づいたこと。

zindex

使ってみた例というのは、こないだ作ったサイトです。
» 多摩美術大学 グラフィックデザイン学科 卒業制作展 2009 [WOW]

やりかた

この方法、たぶん「HTMLのプルダウンメニューがFlash領域にかぶってしまうとき」なんかには割とよく使われるのでしょうか?私の例では、「HTMLページの背景余白にでっかいFlashを表示する」とかいう妙な使い方だけど。

HTML↓↓

<div id="content">
  <!-- ここにHTMLのページコンテンツ -->
  ほげほげ
</div>
<div id="flash">
  <!-- ここにFlashを(不)透明表示設定で挿入する。 -->
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
    <param name="movie" value="main.swf" />
    <param name="wmode" value="transparent" />
    <embed src="main.swf" wmode="transparent" type="application/x-shockwave-flash" />
  </object>
</div>

CSS↓↓

#content {
	position: relative;    /*通常どおりの位置に配置*/
	z-index: 1;
}
#flash {
	position: absolute;    /*#contentの後ろ側にW100%, H500pxで配置*/
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
}

とまあ、ソースはこんな感じです。z-index はブロックレベル要素の描画レイヤーの上下を設定できるプロパティです。(数字が大きいほど手前になる。)
注意点としては、

  • レイヤー関係を反映させるには、通常どおりの位置に表示させたい要素も、position: relative; と指定する。無指定(position: static)のままではダメ。
  • Flashを挿入するとき、<param>タグや表示用のJavaScriptで、wmode を transparent(または opaque)と設定すること。

この2つを満たさないと、奥にあるはずのFlashが手前に表示されてしまったりするようです。

マウスフォーカス

さて、ここまではトラブルなくできたんですが、今回の私の例だと、「実は背景Flash領域もクリッカブル。マウスのフォーカスってどうなるんだ?」という疑問がありました。
結論から書くと、「細かいところは環境依存」ぽいです。

HTML部分の方が手前にあるので、テキストの選択やリンクは問題なく動作しました。でも、行間でのクリックとか、右クリックのコンテキストメニュー(HTMLメニューかFlashメニューか)は、ブラウザと、それとOSによっても異なるみたいです。
一応上側に来るブロックレベル要素に背景色や背景画像をしてやると、Flashのクリック判定はなくなるようですが、Macだと右クリックはFlashメニューが表示されたりと、けっこういろいろ。

ま、マウス判定はちょっと微妙なところがありましたが、表示上は綺麗にレイヤー化してくれたので、HTMLテキストや透過GIFの後ろ側に動くFlashが表示されるというのはなんか新鮮で面白かったです。

誤動作?

確認済みの誤動作について。やっぱり妙な表現はあんまりするモンじゃありませんかね(^^;

  • IE6 だとFlash用のブロックレベル要素が表示されない。でもこれはz-index関連のトラブルではなくて、position: absolute; に対する IE6 独自のバグっぽい。詳しいことは調査中。
    » 解決しました。
  • Mac OSX 10.4 Firefox 3.0 にて、HTMLのリンクにカーソルを乗せると、一瞬だけFlashが上に描画されて画面がちらつくという報告が。10.4 Safari や 10.5 Firefox 3 では確認できず。??
  • とっても古いSafari(1.2とか)はz-index自体を解釈しないみたい。

1 月 25 2009

多摩美グラフィックデザイン学科 卒業制作展・告知

Posted by tanjo at 9:51 PM

ちょっと早いけど、卒制展の告知!
2009年2月28日(土)~3月1日(日)にラフォーレ原宿原宿クエストホールにて、グラフィックデザイン学科の卒業制作展を開催します。
総勢160人以上が出展する大規模な展覧会です。ちなみに入場は無料ですよ。

詳しくはこちらをどうぞ。
» 多摩美術大学 グラフィックデザイン学科 卒業制作展 2009 [WOW]

wow09

ホームページの制作は私が担当させていただきました。作るにあたって Box2D という物理ライブラリをちょろっと使ったんですけど、こりゃ面白いですね~。工夫次第でもっといろいろな表現ができそうだ。

最近は卒制委員の仕事で朝から晩まで学校にこもりっきりです(^^;

12 月 29 2008

Papervision3D 各バージョンのオンラインドキュメント

Posted by tanjo at 2:34 AM

拡張と改変が著しいPV3D。頼りのドキュメントが自分の使ってるバージョンと違ったりすると、思わぬ混乱を招いたりします(…しました)。
そんなわけで、各バージョンのオンラインドキュメントURLをまとめておきます。なお最近のリビジョンだと、ダウンロードしたライブラリの docs ディレクトリ以下にドキュメントが同梱されているようです。

12 月 26 2008

Flashのパブリッシュ先を相対パスで指定する

Posted by tanjo at 5:43 PM

OS、バージョンによっても違うかもしれませんが一応メモメモ。ちなみに私の環境は Windows Vista / Flash CS3 です。

publishconf

Flashのパブリッシュ設定でフォルダアイコンをクリックすると、書き出し先を任意のフォルダ(絶対パス)に指定できますよね。
実はその左のパス設定欄は直接入力が可能で、しかも相対パスでもOKみたいです。
書き出し先を相対パスにしてみたところ、パブリッシュもプロジェクト保存も問題なくできました。(「../」で上層フォルダにもアクセスできます。)

フォルダに階層をもたせながら、Flashの作業ファイルをやりとりするときにはちょっと便利、かも。そういう状況がよくあるかは、知らない(^^;

12 月 21 2008

PV3Dでレースゲーム制作 23 - UI作成

Posted by tanjo at 4:03 AM

レースゲームデモ画面

» ゲームをプレイする (要:Flash Player 9.0.124.0以降)

ナビゲーションを追加してみました。レースゲームらしくなってきたでしょうか?

Flash CS3でUIを作成

実は結構どうしようか迷ってたのがUIの作り方。
生産性を上げるために、3Dとか画像のファイルはすべて外部化、Flash CS3 は使わず FlashDevelop と Flex で開発…ってしてきたんだけど、ナビゲーション系はどう考えても Flash で作った方がやりやすい。。

調べてもどうしたらいいのかピンとこなかったので適当にやってみました。
それで結局、「UI専用のSWFをメインSWFに読み込んで、そのインスタンスからムービークリップを取り出して配置」という流れに。

外部SWFのライブラリにあるムービークリップへ、アクセス

UI用Flashファイルのドキュメントクラスで、ライブラリにあるムービークリップを一度インスタンス化して、それをゲッターで返すようにしておきます。その状態でSWFファイルにパブリッシュ!
一方メイン側では、UI用SWFを Object 型インスタンスとして読み込むと、「(インスタンス名).(ゲッター名)」でライブラリにあるムービークリップにアクセスできるわけです。分かりにくッ!

***

ええと、具体的には。
たとえばFlash CS3上にこんな感じの「map」っていうクラス名のムービークリップがあったとします。

mapmcmapmc

ドキュメントクラスでは「インスタンス化 → ゲッター」で外部からこのムービークリップを参照できるようにしておきます。

package
{
	import flash.display.*;
	public class UI extends Sprite
	{
		private var _mapMC:MovieClip
		public function UI()
		{
			_mapMC = new map();
		}
		public function get mapMC():MovieClip
		{
			return _mapMC;
		}
	}
}

そして今まで作ってたメインの方からは、_loader にSWFを読み込んだとして

var _ui:Object = Object(_loader.content);
var _mapMC:MovieClip = _ui.mapMC;
addChild(_mapMC);

という風にアクセスできました。
Loader.content で子SWFのルートにアクセスできるけど、ここではステージに配置せずにゲッターを使っているわけです。

さらに、先ほどのムービークリップに配置されていたマルポチが実は「myPoint」という名前のインスタンスだったとすると、

_mapMC.myPoint.x = 100;

のように階層化されたムービークリップも操作できます。

こうしておけば、UIを増やしたりデザインを修正するときはFlashのライブラリをいじってパブリッシュし直すだけ、制御系は今までどおりFlashDevelopからFlexコンパイルするだけ、とまあ、作業が別々になってわたし的には扱いやすくなってくれました、と。

(もっといい方法もあるのかなぁ。)

11 月 30 2008

PV3Dでレースゲーム制作 22 - デモ走行追加

Posted by tanjo at 5:18 PM

レースゲームデモ画面

» デモ走行を見る (要:Flash Player 9.0.124.0以降)

デモンストレーションが繰り返し再生されるサンプルです。

デモ走行追加

三人称カメラリプレイ再生車モデルの挙動 と作ってきました。
ということは、走行データを固定の外部ファイルから読み込むようにすれば、市販ゲームなんかによくある「デモ走行映像」が作れるぞ、と。

リプレイの時は操作入力の履歴を順に配列へ保存して、1フレームずつ shift で取り出して再生していました。ですのでデモ走行を作るには、「操作履歴を表す数字ばかりのファイルを用意」→「それを読み込んで配列に変換」→「リプレイ時と同様に再生」という流れでできそうです。

操作履歴ファイルの作成

まあこの辺はてきとうです。区切り文字「,」で数字が羅列したファイルを作ります。
ドライブすると drivingHistory という変数に履歴が記録されるようにしてあるので、実際に走ったあとそれをトレース&コピペしてテキストファイルを作成しました。

//ドライビングヒストリ出力
for (var i:int = 0; i < drivingHistory.length; i++)
{
	trace(drivingHistory[i] + ",");
}

ファイルを読み込み配列に変換

URLLoader.data でテキストファイルの内容をString型で取得できます。String.split() メソッドで文字列を配列に変換し、そして各要素を Number に型変換してやれば、必要な再生用配列の完成です。…もうちょっとスマートなやり方があるのかな。。

var drivingDemoString:String = String(myURLLoader.data);
var drivingDemo:Array = drivingDemoString.split(",");
drivingDemo = strToNumArray(drivingDemo);
function strToNumArray(array:Array):Array
{
	for (var i:int; i < array.length; i++)
	{
		array[i] = parseInt(array[i]);
	}
	return array;
}

配列を元に車の運転を再生するのは、リプレイモード搭載の回と同じやり方です。

11 月 25 2008

YouTubeにループ再生ボタンを追加するスクリプト

Posted by tanjo at 6:58 AM

Loopy for YouTube」というGreaseMonkeyスクリプトを使うと、YouTubeにループ再生ボタンを追加することができます。
ここで紹介されていて知りました。
» Youtubeのビデオを簡単にループ再生するためのGreasemonkeyスクリプト-Loopy for YouTube - 適宜覚書はてな異本

インストールするとYouTubeにアクセスしたとき、こんな感じのループ再生/解除ボタンが表示されるようになります。

loopy

Loopy for YouTubeのインストール

動作させるには、あらかじめFirefoxアドオン Greasemonkey が必要です。
» Mozilla Firefox のアドオンサイト
» 開発・配布元サイト : Greasespot

Loopy for YouTube は以下から入手できます。
インストールするには右上の [Install] ボタンを押すだけ!
» Loopy for YouTube for Greasemonkey - userscripts.org

11 月 23 2008

PV3Dでレースゲーム制作 21 - 車のモーション

Posted by tanjo at 5:04 AM

車のモデルをちゃんと作ります。直方体のままじゃあまりにも…なので。
今回はキャラクターとか乗り物に必要な、「パーツごとの動き」を追加してみました。

モデリング

モデリングは Lightwave 3D Modeler を使いました。

fdmodel

3Dオブジェクトを階層化

車モデルをそのまま1つの COLLADA で読み込むと、タイヤの回転とかが再現できません。
そこで、動かしたいパーツごとにモデルを分割して、ActionScript 側でインスタンスを再構成することで個別のモーションに対応させます。ちょうど Sprite を addChild で階層化して個別2Dアニメーションさせるのと同じようなやり方で、3Dオブジェクトも制御できちゃいます。

具体的にやりたいことは次のとおり。

  • 荷重移動でカウルが動く
  • 車の速度に応じてタイヤが回転する
  • 操作に合わせて前輪が左右に動く
  • 影は固定
  • 車全体がセットで移動する

最低限これくらいやっとけば車っぽく見えるでしょう。テールランプがあってもよかったけど。

というわけでパーツ分割は、カウル・タイヤ・影の3つなりました。
これらを包括した DisplayObject3D を作り、車全体が一緒に移動できるようにします。さらに前輪は、回転しながら左右に動かないといけないので、ここも階層化する必要がありそうです。
*DisplayObject3D は Collada のスーパークラスです。

シーン : Scene3D
+-コース : Collada
+-車 : DisplayObject3D
  +-カウル : Collada
  +-前輪 : DisplayObject3D
    +-タイヤ : Collada
  +-前輪 : DisplayObject3D
    +-タイヤ : Collada
  +-後輪 : DisplayObject3D
    +-タイヤ : Collada
    +-タイヤ : Collada
  +-影 : Collada

ソース。

//宣言---------------------------------------------------------------//
private var _scene:Scene3D;

private var _carObject:DisplayObject3D;
private var _cowl:Collada;
private var _tireFL:DisplayObject3D;
private var _tireFR:DisplayObject3D;
private var _tireR:DisplayObject3D;
private var _tire:Collada;
private var _shadow:Collada;

(略)

//カウル-------------------------------------------------------------//
//マテリアル
var cowlMaterials:Object = new Object();
cowlMaterials = {
	tx_front_jpg:new BitmapMaterial(txCarBitmap1.bitmapData),
	tx_side_jpg:new BitmapMaterial(txCarBitmap2.bitmapData),
	tx_back_jpg:new BitmapMaterial(txCarBitmap3.bitmapData),
	tx_under_png:new BitmapMaterial(txCarBitmap4.bitmapData)
};
//オブジェクト
_cowl = new Collada( cowlXML, new MaterialsList(cowlMaterials) );

//タイヤ-------------------------------------------------------------//
//マテリアル
var tireMaterials:Object = new Object();
tireMaterials = {
	tx_tire_jpg:new BitmapMaterial(txTireBitmap.bitmapData)
};
//オブジェクト
_tireFL = new DisplayObject3D();
_tire = new Collada( tireXML, new MaterialsList(tireMaterials) );
_tireFL.addChild(_tire, "tire");
_tireFL.x = -730;
_tireFL.y = 310;
_tireFL.z = 1280;

_tireFR = new DisplayObject3D();
_tire = new Collada( tireXML, new MaterialsList(tireMaterials) );
_tireFR.addChild(_tire, "tire");
_tireFR.x = 730;
_tireFR.y = 310;
_tireFR.z = 1280;

_tireR = new DisplayObject3D();
_tire = new Collada( tireXML, new MaterialsList(tireMaterials) );
_tire.x = -730;
_tireR.addChild(_tire);
_tire = new Collada( tireXML, new MaterialsList(tireMaterials) );
_tire.x = 730;
_tireR.addChild(_tire);
_tireR.y = 310;
_tireR.z = -1100;

//影-----------------------------------------------------------------//
//マテリアル
var shadowMaterials:Object = new Object();
shadowMaterials = {
	tx_shadow_png:new BitmapMaterial(txShadowBitmap.bitmapData)
};
//オブジェクト
_shadow = new Collada( shadowXML, new MaterialsList(shadowMaterials) );

//車-----------------------------------------------------------------//
_carObject = new DisplayObject3D();
_carObject.addChild(_cowl);
_carObject.addChild(_tireFL);
_carObject.addChild(_tireFR);
_carObject.addChild(_tireR);
_carObject.addChild(_shadow);

//3D登録-------------------------------------------------------------//
_scene.addChild(_carObject);

あとは車の動きに合わせて、各パーツの x, y, z, rotationX, rotationY, rotationZ あたりを操作してやればOK。この辺は理屈よりも「らしく見えるか」というセンスの問題にもなってきますね。微調整には試行錯誤しました。

デモ

レースゲームデモ画面

» ゲームをプレイする (要:Flash Player 9.0.124.0以降)

このゲームのソースファイル Main.as はこちらから参照できます。

1周走るか、ドライブ中に[C]キーを押すと、三人称カメラになって車の挙動を確認できます。

11 月 19 2008

多摩美・芸術祭展示の様子

Posted by tanjo at 3:16 PM

先日の多摩美術大学 芸術祭にて作品展示を行いました。
ホビーショップを模したブースに各々の作品を展示する「リンゴ堂」という団体を主催しました。
私の出展作品はもちろん、このブログで制作中のレースゲームです。

(って、芸術祭は11月1日~3日だぞ、なんと遅い事後報告。)

リンゴ堂ブースの様子。
まわりはグラフィックデザイン科らしいマジメな展示が多くて、良くも悪くも浮いた存在だったかも。

ringo01

ほとんどが手作りの作品です。(フィギュアは市販ものだけどね。)

ringo03

PV3D RACING。テレビとコントローラで遊ぶと臨場感が倍増!いい機会でした。

ringo02

最近ブログ更新が滞ってたのは、芸術祭のせいです(^^;
また制作進捗と制作記が大きくズレてしまった…。

10 月 20 2008

FlashDevelopでAstro開発できるようにセットアップ

Posted by tanjo at 6:43 AM

先日 Flash Player 10 が正式リリースされたこともあり、そろそろバージョン10(Astro)向けの開発ができるようにと Flex SDK と FlashDevelop をセットアップしておきました。

Flex SDK の入手

私が今まで使ってたのはAstro未対応のバージョンでした。まずは Flex SDK を更新します。
Adobe Open Source のページからいろいろなリビジョンの Flex 3 SDK が入手できます。
» Download Flex 3 - Flex SDK - Confluence

最新マイルストーン・リリースの 3.1.0 build 2710 を使うことにしました。Adobe 製品ページから入手できる Flex 3 SDK も現在はこのリビジョンみたいです。

が!なぜだか build 2710 の Adobe Flex SDK リリースには Astro 向けコンパイルに必要な playerglobal.swc が含まれていません!Open Source Flex SDK の方には含まれていたので、オープンソース版の frameworks/libs/player/10 フォルダをそのままコピーして追加しました。

frameworks/libs/player/10/playerglobal.swc がちゃんと含まれているリビジョンでは、もちろんこの作業は不要です。ちなみに公式のFAQによると、[Adobe版] = [オープンソース版] + [非オープンソースのコンポーネント] という構成らしいので、中身に違いはないはずなのに…。

Flex SDK の設定

ほとんど設定する必要ないみたいです(^^
以前は Flash Player 10 に対応するために frameworks/flex-config.xml を編集する必要があったようですが(» 解説ページ)、3.1.0.2710 ではセットアップ済みでした。
そういうわけで、追加クラス(Papervision3Dとか)を再設定してやるだけで、他はやることなし!

スタンドアロン版 Flash Player 10 の入手

Flex 3 SDK にもスタンドアロン・プレーヤーは含まれています。(runtimes/player 以下のフォルダ)
だけどせっかく Flash Player 10 の正式版がリリースされたことだし、そっちをインストールしておきます。
» Adobe Flash Player - Downloads

上記ページの Get older versions 項のリンク先から Flash Player 10 (debugger versions) (26 MB) をダウンロードしました。Windows では flashplayer10r12_36_win_sa_debug.exe というのがスタンドアロン・プレーヤーの実行ファイルです。

FlashDevelop の設定

FlashDevelop最新版は公式サイトから入手できます。以前インストールしたときのメモはこちら
» FlashDevelop.org

グローバル設定は変更する必要ありません。Flash Player 10 をターゲットにするプロジェクトの設定だけでOK。ちなみに FlashDevelop のバージョンは 3.0.0 Beta9 を使っています。
こんなふうに設定しました。

  • Project > Propaties の Output タブにて、Platform を「Flash Player 10」に設定。
  • 同じく Propaties の Compiler Options タブにて、Advanced > External Libraries の[...]をクリックして Astro 用 SWC ライブラリのパスを入力。

2つ目は、Astro で追加された新プロパティなどの入力補完をするための設定です。これで rotationX とかを補完してくれるようになります。設定しなくても、コンパイルはできるみたいですが。
ライブラリパスは、私の環境では C:\flex_sdk_3\frameworks\libs\player\10\playerglobal.swc でした。さっきオープンソース版から追加したファイルのことですね。

なお、入力補完用のクラス定義ファイルを作ってくれたかたがいるようです。お好みでこちらもどうぞ。
» FlashDevelop3 beta9 で Shader クラスのコードヒントを表示する - blog.seyself.com

« Prev - Next »