7 月
25
2009
Volkswagen のプロモーションサイト GOLF GTI-TRACKS が凄いことになっています。
Flash もついにここまで来たか！という感じです。
ムービー（シナリオ）を挟みながら、1対1のレーシングゲームを勝ち抜いていく、というコンテンツ。
驚いたのは3Dの作り込み具合。まるで首都高バトルですね。ムービーにも結構気合いが入っているようです。以前、エコだ！動物園にも驚かされましたが、コレはコレでまた凄い。広大な3Dフィールドをドライブできるのはやっぱり楽しいですね。
ただ案の定、容量も相当あるみたいで、ロードにはかなり時間がかかりました。動作負荷も結構なもんなのでご注意を。
Alternativa3D
3Dライブラリには、Alternativa3D が使われているとのこと。このライブラリ、Papervision3D や Away3D ほどメジャーではありませんが、Astro にもいち早く対応していたし、ポテンシャルだったら他を凌いでいるかもしれません。
» Alternativa3D の実力がうかがえる FPS っぽいデモ
はぁ～、私が PV3D RACING の開発を中途半端なところでサボっている間にこんなコンテンツが出てきてしまうとは。先越された。。。いい加減ロンチに向けて手を打たねばっ！
技術ネタ |
3d, alternativa3d, flash, game |
2 月
13
2009
CSSのz-indexを使ってFlashを背景表示する…ときの注意点とか、やってみて気づいたこと。
使ってみた例というのは、こないだ作ったサイトです。
» 多摩美術大学 グラフィックデザイン学科 卒業制作展 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）と設定すること。
この２つを満たさないと、奥にあるはずの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自体を解釈しないみたい。
技術ネタ |
css, flash, html |
12 月
26
2008
OS、バージョンによっても違うかもしれませんが一応メモメモ。ちなみに私の環境は Windows Vista / Flash CS3 です。
Flashのパブリッシュ設定でフォルダアイコンをクリックすると、書き出し先を任意のフォルダ（絶対パス）に指定できますよね。
実はその左のパス設定欄は直接入力が可能で、しかも相対パスでもＯＫみたいです。
書き出し先を相対パスにしてみたところ、パブリッシュもプロジェクト保存も問題なくできました。（「../」で上層フォルダにもアクセスできます。）
フォルダに階層をもたせながら、Flashの作業ファイルをやりとりするときにはちょっと便利、かも。そういう状況がよくあるかは、知らない(^^;
技術ネタ |
flash |
12 月
21
2008
» ゲームをプレイする （要：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」っていうクラス名のムービークリップがあったとします。
ドキュメントクラスでは「インスタンス化 → ゲッター」で外部からこのムービークリップを参照できるようにしておきます。
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コンパイルするだけ、とまあ、作業が別々になってわたし的には扱いやすくなってくれました、と。
（もっといい方法もあるのかなぁ。）
レースゲーム制作記 |
actionscript3, flash |
10 月
19
2008
１０月１５日に、Flash Player 10（Astro）が正式にリリースされました。
現在、最新版のバージョンは 10.0.12.36 です。
ブラウザ用プラグインの入手はこちら。
» Adobe Flash Playerダウンロードセンター
アップデート、デバッガ版、スタンドアロン版、古いバージョン、…とかはこちら。
» Adobe Flash Player - Downloads
＊スタンドアロン版は、Get older versions のリンク先から入手できました。
技術ネタ |
astro, flash, flashplayer |
7 月
20
2008
HTMLに埋め込んだSWFコンテンツをブラウザで閲覧すると、Flashで設定されているフレームレートよりも遅く再生されてしまうことがあります。Flashの動作負荷にかかわらず15%くらいフレームレートが落ちているので、仕様的な問題なのでしょうか。
これを回避するには、HTMLの <embed> タグに wmode=”opaque” 属性を追加しましょう。
Adobe Flashを使っている場合は、パブリッシュ設定 の HTML > ウィンドウモード を「不透明表示」に変えることで対処できます。
この方法でIE6、IE7、Firefoxでは正常になりました。
が、Safariでは効果がありませんでした。う～ん…。
技術ネタ |
flash, flashplayer, html, swf |
6 月
30
2008
今回は、FLAファイルからActionScriptを分離させ、FlashDevelopでコーディング→Flash CS3でパブリッシュ、という連携の開発をしてみます。
実はtrick7.com blogさんの記事にて、丁寧にビデオ解説されているので、正直そちらを参照してねって感じなんですが、一応要点だけ書いておきましょう。
１．まず、FlashDevelopでプロジェクトを作成します。
Project > New Project から、ActionScript 3 - Flash IDE Project を選択し、新規プロジェクトを作成。
今回はプロジェクトフォルダがまだ空のままですね。
２．次にFLAの作成。
今度はFlash CS3で 新規作成 > Flash ファイル（AS 3.0） を作成し、プロパティウィンドウのドキュメントクラス欄にクラス名（たとえば、Main）と入力し、先ほどのプロジェクトフォルダ内にFLAファイルを保存します。
３．ActionScriptファイルの作成。
FlashDevelopに戻って、Projectウィンドウのプロジェクトフォルダを右クリック、Add > New Class を選択し、ASファイルを作成、ファイル名はドキュメントクラス名と同じものにします（Main.as）。
Flash CS3の出力を試してみようと、traceするスクリプトにしてみました。
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{
trace("Hello, World!");
}
}
}
４．そして、ムービープレビュー！
FlashDevelopで[F5]もしくは[F6]を押すと、自動でFlash CS3に切り替わり、ムービープレビュー（Flashの[Ctrl]+[Enter]のやつですね）ができます。
SWFファイルはプロジェクトフォルダ直下に作成されます。
…だいたいこんな流れですね。
文字だと分かりにくッ。
さてさて、最初の準備がちょっと面倒くさかったり、同一フォルダで管理しないといけなかったりはしますが、これなら、従来のデザイナー的制作手法で、FlashDevelopの強力なエディタ機能を利用できるようになりました。
ライブラリ管理とムービークリップ作成をFlashで行って、あとはスクリプトで制御する派（？）の人にはオススメです。
技術ネタ |
flash, flashdevelop |