HTMLに動画を貼り付けるにはどうしたらいい？

Flash

HTMLに動画を貼り付けるにはどうしたらいいか？という疑問に答えて、FLVをHTML上に配置する３通りの方法を書いておきます。

(1)自分でFlashムービーを作る

普通にFLVの再生をするムービーを作ればいいので、Flashプログラマならこの方法でも問題なく作れるでしょう。この場合、多少特殊な仕様にも対応出来るというメリットがあります。FLVの再生に関しての知識が無ければ、調べるか本を買うか、何らかの勉強が必要です。

(2)できあいのFLVプレイヤーを設置する

もう一つの方法として、すでに存在するｆlvプレイヤーをhtmlに配置する方法もあります。
FLVプレイヤーをWebページへ埋め込めるFlashファイル「JW FLV MEDIA PLAYER」（窓の杜）
http://www.forest.impress.co.jp/article/2008/02/12/jwflvmediaplayer.html
上記以外にも、沢山のプレイヤーが公開されてます。

ムービーの再生だけが目的なら、配布している再生用ムービーを使ってもいいんじゃないでしょうか。プレイヤーによっては商用が有料だったり、著作権の表示が必要などの制限が有るかもしれませんので、ドキュメントをよく読んで目的にあったものを探してください。

(3)YouTubeに任せる。

ちなみに、私が個人的なムービーをHTMLに張りたい場合には、YouTubeにアップして貼り付け用のHTMLをコピぺします。

Android携帯がFlash対応

Flash

Android(アンドロイド)携帯が面白くなってきました。

http://code.google.com/intl/ja/android/
Android携帯とは、グーグルが基本ソフトを提供して沢山の会社が参加してケータイを作っていこうというオープンな規格です。日本でもドコモから夏以降に発売予定で、今後の動向が注目されています。

Android携帯 HTC Hero 正式発表、Flash対応(engadget日本版)

http://japanese.engadget.com/2009/06/24/android-htc-hero-flash/

HTCの新 Android携帯 Heroが正式発表され、AndroidがFlash対応したという、ちょっと興味深いニュースです。Flashで簡単にいろんなアプリが作れたりすると、楽しそうです。

Adobeで公開

HTC Hero: The first Android device with Flash(Adobe.com)
http://www.adobe.com/devnet/devices/articles/htchero.html

こちらはAdobeにあるページで、Androidで動くFlashのビデオが見られます。ビデオを見るかぎり、FlashLiteではなく、かなりPC版に近いようです。WEBサイトが普通に見られるというのはいいですね。

次世代のケータイと言えば、Androidの他にiPhoneがあります。しかし、iPhoneのプログラミングは結構大変です。

iPhoneにFlashが導入されれば、簡単にプログラミングできるのに、と思っていたらAndroidにはFlashが導入されるとうことで、沢山の面白いアプリが発表されると予想されます。

FlashLiteダイエット・グラフィック編

FlashLite

今回はグラフィック中心でスクリプトの無い場合のswfダイエットを書いておく。

写真の場合

・サイズを小さくする。
・色数を減らす。
・「ライブラリ」ウィンドウで、写真のプロパティを表示、「画質」をカスタムにして調整する。

トゥインについて

アニメーションの場合、モーショントゥインは容量を食うので、やめた方がいい。
キーフレーム化した方が容量が小さくなる場合がある。
このとき、単にキーフレームに変換するだけでなく、不要なキーフレームを作らないようにすること。

ベクター

ベクターのグラフィックデータはポイント数を減らす。

現状の把握

画面中のパーツを各イヤーにわけて、1つずつガイドレイヤーに変換すると、各レイヤーの容量がわかる。家庭でお金のやりくりをするには、家計簿をつけて、何にお金を使ってるか把握するが、同様に”現状を把握すること”が大切。

現状を把握して、「捨てる」あるいは「ベクターのものをbmpなどに作り直す」、「半分のデータを作りコピーして反転」、などなど、対処する方法を考える。

場合によっては「シンボルの使い回し」や「swf自体を2つに分ける」などの対策が有効な場合もある。

もぐらたたきのアイデアメモ

FlashLite

今回はゲームづくりの前段階のメモについて書きます。もぐらたたきを作った時のメモをアップして、解説します。

さて、ここでメモが1ページあります。メモはミスプリントの裏に書くときもあるし、ノートに書くときもあります。このメモは無印良品モバイルノートA5スリム158円(税込み)に書いたものです。
どんなキャラクターをどんな方針でゲームにするか、というのを考えるために「メモ」を書くというのは非常に有効な方法です。

左上のモグラは、WEBで調べた、いくつかのイラストをあわせて描いたものです。さすがにそのままではダメなので、自分なりのモグラを描きます。鼻の丸いモグラがオリジナルキャラクターです。茶色くて、穴から出て、黒いサングラス・・・まあ、マンガのモグラはこんな感じでしょう。
今回のゲームでは左を向いていた方が画面が落ち着きそうです。手は描き損ねて、そのままです。あったほうがモグラっぽいかも。

次の絵はムービークリップのフレームをどのように配置しようか？と考えているメモです。4フレームからアニメして、1フレームに戻る仕様かな？というメモです。この時点では、仕様がまだボンヤリしています。

さらに次の絵は、穴の重ね合わせを考えているメモです。このメモは”もくらたたき”の製作用とともに、このブログの記事の構成も考えているので、この重ねあわせについても解説する予定を立てています。

のこりの2つの図は、タイムラインの動きです。全体の構造をどんな風にすれば、やりたいことが実現できるかを考えているところです。制作前には、複数のモグラを動かす事も考えましたが、1つにすることで構造も単純になり、スピード感なども問題なくまとまったと思います。

作成時には紙1枚のメモですが、イラスト付きで考えをまとめておくと、全体が見渡せ、作りやすいと思います。

是非、試してみてください。

FlashLiteゲームをつくる（３）もぐらたたき

FlashLite サンプル

※著作権について
サンプルに使用しているグラフィックは流用禁止。
スクリプトは非営利流用可。営利目的使用はアフィリエイトを含めて要相談。

1.もぐらたたきをつくる

基本的なアクションゲームの見本として、「もぐらたたき」ゲームを作成する。

ゲーム中の基本的な流れは
・乱数で飛び出るモグラを決定。
・MCを切り替えて、飛び出る。
・押されたボタンが乱数と同じならヒットフレームに移動。
・時間が来たら、モグラを戻す。
・繰り返す。

という感じ。

構成としては
（１）タイトル
（２）ゲーム中
（３）ゲーム終わり
の3パートで構成される。

2．タイトル

変数の初期化をしておく。
また、今回はちょっとしたアニメーションを入れた。

loopct=20;
score=0;

初期化した変数は、全体のループ回数とスコア(得点)。

3.ゲーム中


ゲーム中は、乱数で飛び出るモグラを決定して、飛び出る表示を行う。
一定時間はキーを受け付け、その後、モグラを戻す処理。
また、一定時間あけて、先頭にもどり、モグラをだす。
loopctの回数ループしたら、ゲーム終了となる。

rr=random(9)+1;
//trace("cnt="add loopct add "/"add rr);

tmc="m" add rr;

tellTarget(tmc){
    gotoAndStop(2);
}

飛び出すモグラを乱数で決め、そのムービークリップに対して、飛び出す処理を行う。

モグラのムービークリップがm1〜m9まで9個ある。
モグラのフレームによって
(フレーム1)引っ込んだところ
(フレーム2)出たところ
(フレーム３)打たれたところ(今回使わない）
(フレーム４)打たれたところ＋ヒットマーク
以上の4つのパターンがフレームに配置してある。

戻す処理はこちら

tellTarget(tmc){
    gotoAndStop(1);
}

ゲーム中、キー入力が可能な部分ではボタンを配置し、キー入力を監視する。

on (keyPress "1") {
    if (rr == 1) {
        kk = 1;
        call("hitproc");
    }
}
on (keyPress "2") {
    if (rr == 2) {
        kk = 2;
        call("hitproc");
    }
}
【途中3〜8まで略】
on (keyPress "9") {
    if (rr == 9) {
        kk = 9;
        call("hitproc");
    }
}

ループの頭で決めた乱数とキーが同じなら、”モグラを叩けた”という処理を行う。
fla編集中の最後のフレームに、ｃａｌｌ用のキーフレームを用意し、そこにスクリプトのみを書き込むと、そのフレームのスクリプトをサブルーチンの用に呼ぶことが出来る。

score+=10;
tellTarget("m" add kk){
    gotoAndPlay(4);
}
gotoAndPlay("hit");

”モグラを叩けた”時には、ヒットマーク付きのモグラを表示し、メインのタイムラインは”ｈｉｔ”に移動。

loopct--;
if (loopct>0) {
	gotoAndPlay("main");
}

フレームで時間待ちをしてから、ループの最後にカウンタを減らして、次のループにはいる。

3．ゲーム終わり

得点を表示して、ゲーム終了。
記録をサーバーに送ったり、いろいろ工夫の余地はあるが、今回はサンプルなので、このへんで終わり。
0キーでトップへ戻るボタンを配置。

4．重ね合わせ

このゲームの一つのポイントはモグラが穴から出てくるアニメ。
完全に穴の下にモグラを置くと、飛び出た時に頭が穴からでないなどの不都合がある。

穴の手前はモグラより前、穴の後ろ側はモグラより後ろの表示順にしている。

穴の絵
モグラ
穴の手前の絵

という順番。
表示の順番はレイヤーの順番で決まる。

5．まとめ

FlashLiteでアクションゲームを作るときには、
・複数のボタンを押さない
・過度の連射をさせない
などを考慮したゲームのデザイン(企画）が必要。

また、ムービークリップの構造とスクリプトは連携しているので、今回のヒットマークのようなパターンを覚えていくと便利。

動作サンプルをこちら。

FlashLiteサイト[usuaji Games]

■FlashLiteのサンプル mogura1.swf

http://hspcenter.com/i/

※ケータイ用のサイト。PCで見ると10キーの並びが違うので、苦労する。

サンプルのflaファイルのダウンロードはこちら
http://hspcenter.com/i/fla/mogura1arc.zip

FlashLite雑感

FlashLite

1年半、ケータイ用のFlashを作ってみて感じたことをだらだら書くよ。
病み上がりでちょっと前の記憶を書いているので、間違ってたら突っ込んでください。

容量が小さい

1番はこれ。100kてなんじゃい？小さなjpegでも100ｋいくだろ！とか切れたりしても、何もかわらないので、奥歯をかみしめます。

情報が無い

基本は情報が無い。
でも、これに関してはWEBで公開してくれる人がいるので、改善してきている。本も何冊かはある。しかし、本はあまり参考にならず、メーカー発表のPDFとネットかな。

あとは実験で出来ることを確認しながら進むしかない。キャリアごと、機種ごとの差異もあるが、これを親切にまとめて無料で公開してるところなんて・・・あんまり無いよね。有料なら検索すればあるけど、それが欲しい情報とイコールかは保証できない。
最低でも画面サイズがわからないと仕事が始まらないので、そこから集めましょう。

エミュレータと動きが違う

なんとも、驚くことに、エミュれてないじゃん！という事が起きます。
エミュでは動くけど、実機ではNG。謎の暴走。フォントの大きさが予想しないデカさ。などなど。速度が違うくらいはあまり驚かない感じ。

エミュレータが暴走すると、Flash開発環境が暴走。

これが笑っちゃうというか、笑えない暴走。
そんな事がないようにflaファイルはこまめに保存しましょう。
なにかのトラブルで急に開けなくなったりするしね。

容量が小さいのを理由にできる

あんまり愚痴みたいになってたので、ちょっと良いところを書くよ。
なにか無理難題の仕様がやってきても、容量を理由に断りやすい。
断りすぎると、会社ならクビになるかも。

でも、本当に実現できない仕様は断っておかないと、双方が不幸なのでそのへんの判断は早めに必要。

また、ぎりぎりの容量で作り始めると、バグや仕様変更に対応できないということになりがち。

バージョン管理問題

完成して、WEBにアップロードして確認したら、flaとswfを保存しておく(多分）。
フォルダに入れて圧縮とかする。
で、また修正とかなるとfilename2.flaとかドンドンできてみたり悲惨なことになる。

その瞬間は覚えていても、翌日見たら、結局アップロードされているのはどのflaから作った、どのswfだ？という話になると仕事が進まない。バージョンの命名や管理については慎重にしないといけない。さらに複数のデザイナが絡んでたりするとバージョン管理はものすごいことになる。

一流企業の皆さんは一体なにで管理してるんだろうか？？？

3キャリア問題

そして、実機でチェックする時の問題。
大きな会社ならテスト用の実機が沢山あるだろうけど、個人ではあまり維持できない。
3キャリア分チェックが必要なら、経費で買うか、ケータイコンテンツテスト専用の会社でテスト機をレンタルすることになる。（専用の業者がちゃんとあります。すごいね。）

先方がどうしてもというリクエストなら、その分そろえるのもいいかも。
ま、単純なものは1台あればチェックできるけど、超複雑なのは結構用心した方がいい。FlashLiteはヤツを信用したら負け、という感じがある。

というわけで、まとまってない雑感ですが書いておきます。
何かの参考になれば幸いです。

FlashLiteでゲームをつくる（２）クイズ

FlashLite サンプル

※著作権について
サンプルに使用しているシルエットのグラフィックは素材集のデータで、流用禁止。
スクリプトは非営利流用可。営利目的使用はアフィリエイトを含めて要相談。

1.クイズをつくる

基本的なゲームの見本として、クイズゲームを作成する。

クイズには
・こたえを文字で入力
・ｎ択（3択、4択など）
・マルバツ
などがあるが、コンピュータ相手のクイズゲームでは、基本としてはｎ択が一般的。
文字を自由にいれて、正解不正解の判断できるほどコンピュータは賢くない。
マルバツもｎ択のバリエーションといえる。

クイズの構造は

１　タイトル(hajime)
２　問題表示(main)
３　キー入力
４　判定(hantei)
５　結果表示
６　問題数カウンタチェック・まだ終わりでないなら２に戻る(15フレーム)
７　全体の結果表示(owari)

このような構造。


タイムラインは機能別にわけておくと修正や再利用が楽。
また、仕事などで複数の人間が編集する可能性がある場合は、ライブラリの名称などにもわかりやすい名前をつけておいた方が、みんなが幸せ。

2.タイトル


最初にタイトル画面が表示される。
この時、変数の初期化もしておく。
FlashLite1.1は、変数を最初に使うときに勝手に初期化してくれるという昔ながらの仕様。
しかし、最初に明示的に書いておかないと混乱が起きるし、今回のように、最後の画面から何度も遊べる仕様の場合、変数が初期化できないと困る

stop();
//
_focusrect=false;
fscommand2("SetQuality","high");
//変数
mct=1; //現在の問題番号
mmax=5; //問題数
score=0; //得点
//データ
q1="問題1の内容"; //問題の内容
a1_1="回答1";    //回答１の内容
a1_2="回答2*";
a1_3="回答3";
a1_4="回答4";
a1=2; //正解の番号

q2="問題2の内容";
a2_1="回答1*";
a2_2="回答2";
a2_3="回答3";
a2_4="回答4";
a2=1;
（以下略）

本当は問題文も考えたかったところだが、それは後々書くとして、初期化のスクリプトはこのようにしてみた。
FlashLite1.1では配列が使えないが、そのかわりevalを使って変数名を作りながら参照できる。
方法は後で。
ちなみに*がついているのが、正解の選択肢。
正解の番号は問題ごとに指定している。

データはスクリプトに直に書くけど、まとめておけばちょっとだけ保守しやすい。

また、スタートボタンを配置して、そこにスクリプトを張っておく。

on (keyPress "0") {
    gotoAndPlay("main");
}

3.問題表示


問題を画面上に表示し、ボタンを用意してユーザーの入力を待つ。
問題表示用のテキストフィールドに問題を代入して問題を表示。

stop();

mondai=""add mct add ">" add eval("q" add mct);
kaitou1="1)" add eval("a" add mct add "_1");
kaitou2="2)" add eval("a" add mct add "_2");
kaitou3="3)" add eval("a" add mct add "_3");
kaitou4="4)" add eval("a" add mct add "_4");

これで、ステージ上のテキストフィールドに問題分と選択肢を表示する。
eval("q" add mct);
としているが、mct（問題番号）が1の時には、変数q1が参照される。

4.キー入力

キー入力のスクリプトは右下にあるボタンに書いてある。

on (keyPress "1") {
    sentaku=1;
    gotoAndPlay("hantei");
}
on (keyPress "2") {
    sentaku=2;
    gotoAndPlay("hantei");
}
on (keyPress "3") {
    sentaku=3;
    gotoAndPlay("hantei");
}
on (keyPress "4") {
    sentaku=4;
    gotoAndPlay("hantei");
}

1つのボタンにすべてを記述できる。
キー入力の結果を変数ｓｅｎｔａｋｕに代入して、ラベルhanteiに移動する。

5．判定


キー入力の結果を正解の変数と確認して、正解ならスコアを変更して、”○”を表示。
不正解なら”×”を表示。
このマルバツは1つのムービークリップのフレーム1と2。
”○”なら1フレームを指定、”×”なら2フレームを指定する。

trace("sentaku>" add sentaku);
seikai = eval("a" add mct);
if (sentaku == seikai) {
    score += 10;
    tellTarget("marubatsu"){
        gotoAndStop(1);
    }
} else {
        tellTarget("marubatsu"){
        gotoAndStop(2);
    }
}

6．問題数カウンタチェック

結果の表示を数フレームさせた後、次の動きを判断する。
最終問題ならラベルｏｗａｒｉへ移動。
まだ問題が残っているなら、問題表示に戻る。

if (mct == mmax) {
    gotoAndPlay("owari");
} else {
    mct++;
    gotoAndPlay("main");
}

7．全体の結果表示


最終的に得点は何点だったか？という表示。
フレームはstop();で止める。

ボタンを配置し、再度ゲームが遊べるようにしておく。

on (keyPress "0") {
    gotoAndPlay("hajime");
}

以上でクイズゲームの作成は終了。
クイズ系のゲームはスクリプトを少し変更するだけで対応出来る。

動作サンプルをこちら。

FlashLiteサイト[usuaji Games]
■FlashLiteのサンプル quiz_sample1.swf
http://hspcenter.com/i/

※ケータイ用のサイト
例として、問題入りの”動物クイズ(1)”を登録しました。

サンプルのflaファイルのダウンロードはこちら
http://hspcenter.com/i/fla/quiz1.zip