サンプル製作 その１

swfAdvを使ったコンテンツ作成の過程を晒していくことにする。
wikiには一応ヘルプ（らしき）ものを書いているが、具体的に何をしているのかの情報があると良いと思うので随時リンクを貼っていく。
物語の原稿製作はテキストで書くものとして、過程は省く。ここでは、画像製作やFlashオーサリング、swfAdv独自の設定ファイルなどについてを中心に扱うことにする。

まずは登場人物の絵を用意しよう。
最終的にはFlashで使える形式まで落とし込まなければならないが、その過程はもちろんどうしようとOK。
今回作業に使用するツールは以下の２つ。

・Adobe PhotoShop7.0
・葛城屋 「MagicTracer」：http://mt.azimech.net/

それでは以下に書く4工程と通じて、おいらの好きなメイドさんをヒロインキャラクタに仕立ててみた。




１．下書き
基本となる絵を描く。
この段階では汚くても、どうせ後に清書するので大雑把に書きなぐってもいい。
最終的にはPCで描かなければならないのでいきなりPC上で行ってもいいが、私はどうも手元に絵が見えないと落ち着かないので紙に描く派だ。

ちなみに道具は学生の頃から使っている製図用シャーペンを愛用。




２．線画化

次にPCへスキャンして取り込んだ下書きを線画にする。この工程は人によって画像補正で上手に済ませたり様々だが、自分はペン入れが綺麗にできないので線画ツールを使っている。




３．彩色
Youtubeでも見ながら塗る。この作業が最も長時間となるので、やりながらできる息抜きがあると良いだろう（笑）





４．ファイル出力
最後に、Flashで素材として使える形式に保存する。
アドベンチャーゲームをやったことのある人なら知っているであろうが、立ち絵とは背景の上から被さるように表示し、キャラクタの体がマスクキングされて表示される。Flashでもマスク処理はできないこともないのだが手間がかかるので、swfAdvは初めから不必要な部分を透過できるファイル形式を使うことにしている。

「Web用に保存」からPNG-24を選択。透明部分のチェックボックスをオンにして保存。GIFでも透過画像ができるが、直線的な絵でなければpngにする方が望ましい。




以上で作業を完了とする。
複数の表情や仕草を用意するならば、同様の作業を枚数文行えば良い。

細かいところ改修

http://www22.atwiki.jp/swfadv/

いくつかメニュー周りの機能追加とバグ修正。

• 修正点

・プルダウンメニュー追加。
画面右上にカーソル翳すとプルダウンメニュー表示。セーブできたりロードできたり。
・どうしても要るものだけ残し、flaからはas撤廃。
・セーブ/ロード周りがかなり腐ってたので手入れ。パラメータが本当に保持されているかは実際にシナリオ容易してから検証する。


そろそろ別の作業が入りそうなので、致命的なバグでなければ一旦開発を中断しサンプルゲームの製作に入ろうと思います。

blog貼り付け 改修

ExternalInterfaeの返り値を取れない不具合修正。
以下の点が原因だった。

１．のタグが不足。
貼り付けHTMLタグのセキュリティ指定を記述していなかった。基本的にFlashの仕様では、同じドメイン内からのアクセスで動くものとされており、今回のように外部ドメインから呼び出す場合はセキュリティ設定する必要がある。外部サーバからもAPI使用を許可するにはにする。

２．複数のFlashが貼られているページにおいて、

Youtube動画のように、blogにタグを書き込めばベコッと貼り付けるようにすると面白そうなので検討をしてみる。

シナリオファイルに記述するのはあくまで相対パスで済むようにしておき、内部的には素材ファイルを公開元サーバから取得できるようにパスを解決させる。
トラフィック自体は呼び出し元にかかるので、製作者は自分のサーバの管理だけ気にすれば良い。
さらに、swfAdvを貼り付けるタグで使用するシナリオファイルを切り替えられる方が汎用的だろう。タグ内に値を持たせ、シナリオファイル名はそこから取得するようにした。

ざっくりと改修が終わったのでblogに貼り付けてみた。
http://blog.livedoor.jp/swfadv/

現在この開発blogで使用しているはてなダイアリーはswfを貼るためのobjectタグに対応していないので、代わりのHTMLを直接書き込めるblogを用意する必要があった。あまり好きではないのだが、livedoor blogを採用した。
ここのブログのスタイルシートは非常にクオリティが低く、ちょっと大きな画像や、半角英数の文字をダーッを書くと（URLコピペするとよく起きるよね）致命的にレイアウトが崩れてしまう。
現状開発版のswfAdvが800x600でデザインされているため、レイアウトからはみ出てしまい、案の定大きく崩れてしまった。仕方ないので、タグからサイズを無理矢理縮小して貼り付けてた。歪んでいるのはそのせいです。

結果、一応パスをちゃんと通すことができて、シナリオと画像が読み込めることを確認することができた。しかし、今度は別の問題が起こってしまった。
外部APIを使用するために使っているflash.external.ExternalInterfaceの返り値が取れなくなってしまった模様。分岐イベントの条件式解決に使っているjavascriptのeval関数の結果が取れないので、どれを選んでも同じ分岐に進んでしまう。
元サイトではちゃんと機能しているので、外部サーバからの呼び出しに何らかの原因があると思われる。Flashのセキュリティの問題なのか・・・詳しく調べなければならない。

とりあえず今日はここまで。

かねてよりswfAdvの演出素材としてYoutube等の動画サービスにアップされているflvファイルを使えないか検討していた。結果からすると、各サービスの規約的にも、技術的にもあまりやらないほうがいいと結論づいたが、この試みで知った様々なことをメモとして残しておく。

• Youtubeのflv特定の仕様について

多くの動画サービスは、見たい動画の特定のためにそれぞれ割り振られている「動画ID」＋キーとなるパラメータ変数が必要。
ユーザーが閲覧するフロント部分では動画IDのみが判明でき、キーは内部的にHTMLに埋め込まれていたり見えにくいようにしている。
さらにセキュリティがしっかりしていれば、キーを定期的に更新かける等をしている。
YoutubeのAPIはflvの直リンクをサポートしていないため、これら値の取得を自力でやる必要があった。
その手段については、「flvダウンロード方法」当を謳うサイトにて詳細に書かれている記事が既にあるので割愛する。


上記を、ActionScriptなり別のサーバスクリプトなりで実現すればflvのURLを取得できるだろう。
しかし、ここで基サイトの利用規約の問題が出てくる。Youtubeは動画ファイルの直リンクを明確に禁止している。
これはある意味当然のことで、このような利用方法をされては、Youtubeにとってみると用意された様々なサービスを無視した単なる動画置き場としてしか使われていない、付加がかかるだけで何の貢献もしてくれないサービスだということになる。
勘違いしてはならないが、「ネットは何でもアリ」というイメージは相互に利益があることを前提で有効。現実と同じなのだ。
実験でコッソリやっているぶんには大目に見てくれるかもしれないが、何か問題が起きた時にリスクが高いと言える。
アクセス制限がかけられただけでも即利用できなくなる。


また、Youtubeはしばしば仕様変更を行っているため、その毎に対応アップデートを考えないとならないようでは汎用性に欠く。




以上の理由により、flvを直接触っても笑って許してくれる奇特な動画サービスサイトが誕生するのを待つか、知的好奇心を満たす程度に留めておくことと結論付けた。

• 参考資料

[Z]ZAPAブロ〜グ2.0 - ニコニコ動画みたいなものを作ってみるテストと問題点
http://zapanet.info/blog/item/931

http://www22.atwiki.jp/swfadv/pub/as2/swfAdv.html

指定した外部のmp3ファイルを、MediaPlaybackコンポーネントで再生する。
MediaPlaybackで設定したボリューム値はクライアントPCに保存され、次回起動時にも再現される。

• BGMコマンド仕様

タグ名:bgm
要素:
action : コマンドの動作種別{open:再生, stop:停止}

・再生
[MP3ファイル名]

・停止

• 備考

・ボリュームコントロールについて
コンポーネントの仕様なのか、mp3ファイルを読む前にボリューム変更しても再生音量に反映されない挙動が見られた。（画面上ではルーラーの位置がちゃんと変わっている）
そこで、ファイルを読む毎にボリューム値をセットするようなロジックに変えた。すると、今度は再生開始時にほんの一瞬音がブッと途切れるようになった。
最終的には、バッファ処理時に自動再生するのを止めさせて、ロード->ボリューム変更->プレイの流れにすることでやっと解決。なんつー面倒。

・TODO
制御が楽なのでコンポーネントを使ったが、UI的にどうだろうか？
ゲーム内にコントローラを表示して、直接再生/一時停止や音量調節ができる試みは新しいのかも。ただ、プレイ中は邪魔だろうからボタンなりで隠せるような仕様にした方が親切と思われる。
（是非コメントに感想聞かせていただきたい。）

http://www22.atwiki.jp/swfadv/pub/as2/swfAdv.html
・TEXTイベントにキャラクター指定追加
　　キャラクターID指定で、テキストアニメーション中に対象キャラクターが口パクする。
・linkイベント追加
　　シナリオファイル名で現在のシナリオを終了し、新たなシナリオを再生する。
・セーブ時に確認ダイアログ表示
　　シナリオファイルから（saveイベントから）起動時に、セーブするかどうかのダイアログを表示。

• ExternalInterfaceについて修正

分岐処理にExternalInterface.callでJavaScriptのeval関数と連携して数式解決していたのだが、IEで閲覧すると全部nullが返っていたみたい。原因を探すと、以下の記事を見つけた。

・_quality | ExternalInterface.call Internet explorerでnullが返ってくる件
http://quality.ekndesign.com/archives/2006/07/externalinterfa.html
以下引用
>SWF貼り付けのobjectタグのID名に "external"を入れると動作する。

原因は、Flash8がパブリッシュしたHTMLをそのまま使った場合idに何かが入っているので問題ないが、IE6になったとき騒ぎになったActiveX問題の対応の為にHTMLを書き換えていたので起きた不具合。タグを書き換えて修正。
・FLASH-JP.COM - Internet Explorerの仕様変更でFlashサイトを開くとメッセージが
http://www.flash-jp.com/modules/newbb/viewtopic.php?topic_id=4709&forum=11