何か記事を書かねばと思いはや数日。
ここはやっぱりこれですかね。

ハッタリ企画解体新書。

リニューアルに併せてハッタリなコンテンツを作ろうとなったのが2月末。
3月末までにハッタリコンテンツと称して「キテレツWEB2.015」なる群れを用意しました。

・虚勢を張ってみよう。
・キテレツ忍者ハッタリくん
・おまけのキテレツボット
・さらにおまけのキテレツ時計

その中でも@tonka氏より解体依頼がありました”キテレツ忍者ハッタリくん”を解体してみようかしら。。。

まず、この記事はFlashの基本は抑えているものとしております旨、ご了承ください。
基本から抑えたい場合は下記のサイトをご参照ください。

Flashゲーム講座 & アクションスクリプトサンプル集（いろんな方もリスペクトしている神サイトです）
http://hakuhin.jp/as.html

ざっとしたパート構成案を考察

■タイトル
■名前等入力画面
■ゲーム部分
■結果
■ランキング

【前提】
ほぼすべての動きをAS化させて軽量にする。
シームレス感を持たす。

相撲鳥人間の際も軽量化はしていましたがどうしてもランキングやデータ登録周りでシームレス感がなかったことへの反省です。
ということで今回は登録まわりも含めた全編Flashでいくことにしました。

スクリプトバージョンはFlashプレーヤーバージョン9を鑑みてAS2を利用。
（AS3わからないのは内緒⇒この後、キテレツ時計のためにAS3に踏み込んだのも内緒）

大まかな流れを決めればパーツの作成へ移行

■タイトル
この時点でハイスコアとプレイNOを取得します。
プレイNOはデータ管理のために利用しているのと後述のランキング更新判定にも利用しています。
loadVariables()

■名前入力
名前・目標ちくわの設定画面で特に解説の必要はないかと。
名前の漢字NG設定とちくわ入力は最大999までに設定しているくらいです。
restrict

■ゲーム部分
ちくわを発生させてキャラクターとの当たり判定、ちくわ数等を取得する重要パートです。

①ちくわオブジェクトの動き
http://hakuhin.jp/as/move.html#MOVE_05
放物線を描く自由落下の動きにランダム要素を追加

②ちくわオブジェクトをランダムで鉄アレイ化

③キャラオブジェクトとの当たり判定
http://hakuhin.jp/as/hittest.html#HITTEST_04
当たり判定を取得して、ちくわ数と裏で実行している鉄アレイ指数を計算。
hitTest()
Key.○○○()

④ちくわオブジェクトの複製
http://hakuhin.jp/as/movieclip.html#MOVIECLIP_07
①で作ったちくわを複製します。複製回数の指定も含みます。
複製したちくわに個別のプロパティを持たす必要が発生するところで激しくツマリましたが・・・
attachMovie()関数内にてonEnterFrameで個別処理！他にもやり方はあるでしょうが・・・（eval関数が使えるなら他のやり方もありますが）
attachMovie()

■結果
ハッタリ指数という訳のわからない指数の計算と結果を登録する重要パートです。
ハッタリ指数とは目標ちくわ数に設定された基礎倍率と目標に対する取得ちくわの達成率を掛けたモノです。

①ハッタリ指数の計算式を導入

②ハッタリ指数に対するコメントとコメンテーターを決められた値に準じてランダムに表示。

③phpに取得ちくわ、ハッタリ指数、名前をシームレスに引き渡す。
sendAndLoad()

■ランキング
ゲーム後、すぐにランキングに反映しないといけないのでどのタイミングでデータを取得するのかがキモのパートでした。
結局、ランキングフェイズに行くたびにランクデータを取得するので都度ローディングしています。

①ハイハッタリ順にソートしておいた上位10件のデータをロード

②ハイスコア時のカラー変更のために現在のプレイNOとロードしたデータに記録しているNOのつき合せ処理。合致した場合、カラーが変更される。

■バックグランド
http://hakuhin.jp/as/sound.html#SOUND_00
全セクションでサウンドの外部読み込みとI/Oの切り替え実装。
sound_obj.setVolume();

細かいパート解説とかいるようならflaファイル公開してもいいか、質問あればブロック単位で回答してもいいかとか、
とも考えてますが、みなさんの要望次第でどうするかまた考えます。

ということで、ハッタリくんFlashパート解体新書でした。（phpパートはまったく別ものなので要望あれば解体します。）

感想としては・・・やってる処理に対してできあがりの印象が本当にしょぼいのがステキ。クソゲー作ろうの趣旨にはバッチリだと思います！

以上、長々となりましたが解体新書でした。

P.S　Flashは161KBに抑えました！

まだまだバグ・修正箇所はありますが、とりあえずの段階でFlashフローティングブログパーツのお目見えとなりました。

Flashフローティングブログパーツの作り方の説明はまた後日に回すとしまして、簡単な説明を。

• 1、キテレツ荘のスタッフを逃がしてあげてください。（日頃うっぷんも溜まっていると思いますので。）
• 2、逃がしといてなんですが、捕まえましょうｗ（捕まえるとスタッフの記事が読めるようになります。）
• 3、見事全員捕まえることができましたら、今回制作しましたブログパーツの元データがダウンロードできます。
  （アクセス拒否してないので、直でURL叩けば落とせますｗ（誰か.htaccessの書き方おせーて））
  ※flaファイルはありません。てかasが汚すぎて見せれません。。。。

以上です。

制作時のポイントとしましては、最近あっしが購入したiPhoneの実寸大をモデルにしたため、ムダにデカイというところです。
あと右上に【×】ボタンあるんですが、小さすぎました。

今回のFlashフローティングブログパーツはJavascriptのリロードを多用しておりますので、読み込みの際、ちゃんと読み込まれないことがある or 前回の処理が残ったままになっているとかいろいろへんなところありますし、他、追加していきたい処理とかもありますので、時間あるときに徐々に修正していきたいと思います。

子供が作ったおふざけやさかい、許しておくんなまし。

相も変わらずふざけたことに注力している自分になさけなくなりましたが、ちょいとした興味で貼り付けてやってください。

ブログ貼り付け用のコードは下記。

これからもキテレツ荘のご支援よろしくお願いします。

でもまだ記事にするほどのノウハウもないので
備忘録的メモ。コメント不要。

まずProgression概念メモ。（多くは技評の記事 http://gihyo.jp/dev/feature/01/progressionを参考）

• ProgressionはFlash用フレームワーク。
• HTMLのページのようにシーンを用意して、それらを入れ替えることで簡単にページベースのサイトが作れる。
• ページ固有のURLや右クリック対応やマウスホイール対応など、めんどいことを勝手にやってくれる。
• 固有の概念として「シーン」「キャスト」「コマンド」がある。
• 「シーン」はHTMLでいうところの「ページ的概念」、映画で例えたら「舞台」。
• 「キャスト」はHTMLでいうところの「画像や文字などの要素」、映画で例えたら「俳優」。
• 「コマンド」はHTMLでいうとなんだろ？「ソース＋JSなどの処理文？」、映画で例えたら「台本」。
• とりあえず舞台（シーン）を必要な分、俳優（キャスト）を必要な分、用意する（自動的に吐き出されるテンプレートをコピーして準備）。
• それぞれの舞台にいつ誰が登場し、どんな時に場面転換するか（コマンド）を書き込む。また俳優（キャスト）に登場したときにどんな振る舞いをするか、どのように去るか（コマンド）を書き込む。
• 開発スタイルには「クラス」「コンポーネント」「タイムライン」があるが、がっつりフル機能でやるなら「クラス」で開発。

んでスクリプトのお作法的メモ。

• 結構お作法を覚える必要あり。
• Progression用関数山盛り出てくる。でも普段のActionscript ももちろん併用できる。
• コマンドは書いた順に実行していってくれる（非同期処理）。この辺はタイマーやトゥイーンなどの処理のとき、めーちゃ楽。例えばタイマーコマンドの後に別 のコマンドを書けば、タイマー経過後、別のコマンド処理が始まる。わざわざTimerEventListenerを書いてイベントを見張る必要なし。
• この順番に実行するコマンドを「シリアルコマンド」という。別に同時に複数のコマンドを実行したいときは［］でコマンドをくくってやる。すると［］でくくられたコマンドが同時に実行する。これを「パラレルコマンド」という。
• シーンにどのタイミングでどんなキャストが出てきて、どのタイミングでキャストが去っていくか、何をされたときにシーンが変わるのか、という処理が基本、な気がする。
• XMLを読み込んだりできる。
• XMLから自動でシーンを作ったりもできる。
• new Trace(“hogehoge”)でトレース
• new Wait(1000)で１秒待ち
• new DoTweener(some,{ x:100, transition:” easeOut “,time:1 });でsomeをトゥイーン。などなど。

んでシーンのメモ。

• 最初のシーンとして「IndexScene」が用意されている。これがサイトのrootとなる。
• シーンは通常のHTMLページのように階層を持てる。
• それぞれのシーンには「onLoad」、「onInit」、「onGoto」、「onUnload」という状況が用意されている（onDescendとかonAscendもあるが今は無視）。その状況ごとにどのように振る舞うかをコマンドで記述する。
• 「onLoad」はそのシーン自身に到着、もしくはそのシーンの子階層に到着したとき。
• 「onInit」そのシーン自身に到着したとき。
• 「onUnload」はそのシーンから移動（ただし親階層方向への移動、つまり戻る的ニュアンス）したとき。
• 「onGoto」はそのシーンから移動したとき。
• 基本的には「onLoad」に登場させるキャストやらを記述する。
• 「onUnload」に消すキャストやらを記述する
• その２つ以外はあんまり使わないって「むらけん」さんが言ってる。

キャストのメモ。

• シーンやキャストは「クラス」という概念で作られている。必要な場合、手作業でテンプレートからコピーして用意するが、スクリプトで作る（複製する）こともできる。
• キャストは「ボタン型」「スプライト型」「ムービークリップ型」「ビットマップ型」などよく使うものがテンプレートとして用意されている。
• Index.flaにあるライブラリにある要素（ムービークリップなど）をキャストに関連づけてやる（リンケージする）とライブラリの要素を自由に扱える。
• テンプレートをコピーしてクラスを用意した場合は、状況に応じてパッケージ名の修正、およびファイル名、クラス名、コンストラクタを共通に修正する。
• キャストは登場するシーンのコンストラクタ内でインスタンス化しておき、必要な状況（まぁOnLoad）でnew AddChild(addChildしたいコンテナ,addChildしたいキャスト)する。
• ルートとなる表示オブジェクトのコンテナは「progression.container」ぽい。

とりあえずそんな感じ。もうちょっとちゃんと分かってきたら解説します。

大阪てら子に行ってきました。
寺子屋タラコさんではなくFLASHerの勉強会イベントの方です。

大阪てら子は世界のSaqooshaさんをはじめ、
日々俺が読んでるFLASHerブログの主たちがぞろぞろ参加している
魑魅魍魎の異世界の雰囲気がぷんぷん漂う勉強会で、
とても一人では行けないと思い悩んでたんですが
STARRYWORKSのキム兄さん（俺のFlash師匠）が誘ってくれたのでこれ幸いと行ってきました。

今回のテーマが「webカメラで遊ぼう！」だったので、新しい「動体検知」作品と
プラスおまけで前の「ちらしの裏」（未完成だけど）を持っていきました。

で、作品発表してきました。
ずーーーーーっとおなかグルグルゆーてました。

「ちらしの裏」は前の記事を参考にしてもらうとして、新しい動体検知作品の解説を簡単にしておきます。

http://www.a-knot.sakura.ne.jp/works/cameraui/cameraUI.html
要webカメラ。

テーマは「SF映画に出てくるようなユーザーインターフェイス（UI）をwebカメラの動体検知を使って実現できないかな～」的画像ビューアーです。

• 使い方：
• [最初]：画面の前で両手を適当に動かしてください。そのうち認識します。
• [画像選択画面]：右ポインターを動かし画像を選び、左ポインターを一番上のエリアに上げると画像が選択されます。
• [画像詳細画面]：画像の右上と左下にポインタを持っていくと画像を持つことができます。多少、傾けたり引き伸ばしたりできます。元の画面に戻るときはポインタを左下、右下に持っていってください。

まぁやってみると分かりますが、慣れるまで難しい…。バグ多いし。
適時修正していきます。

webカメラない人用に動画とってみました。こんな感じ。
※「demo」みたいなメッセージは無視したらいいんちゃうかな。

[ちょっとだけ解説]
動体検知のあたりは定番の方法です。
※ちょっと会場の明るさにあわせて感度を変更できるよう
裏で仕込んでます…。

ポインタはwebカメラの左右の情報をコピーしたBitmapDataから
動いている箇所（動体検知で白くなる部分）の矩形を取得し、
その中心の何コマかの平均をとっています。

//急遽追加した閾値変化機能。ボタン押すごとに閾値が変化。動きが悪いときにどうぞ
var shikii_a:Array = new Array(0xff555555,0xff444444,0xff333333,0xff222222,0xff111111);
var shikiiArray_num:uint=0;
stage.addEventListener(KeyboardEvent.KEY_UP,shikiiChange);

function shikiiChange(e:KeyboardEvent){
if(shikiiArray_num<4){
shikiiArray_num++;
}else{
shikiiArray_num = 0;
}
}

function cameraAndPointerCol(e:Event){
if(right_leng_flg ==true &&left_leng_flg==true&&first_flg==false){

//ポインタの平均値がとれるまで待ち状態。とれたら「OK」表示
message_sp.gotoAndPlay("ok");
//そっから画像読み込みスタート
start_func();
first_flg=true;

}
//カメラ映像をドロウ
defaultCamera_bmd.draw(cameraVideo);
//現在のビデオをまずコピー
ugokiCamrera_bmd.copyPixels(defaultCamera_bmd,rect,pt);
//ブレンドモードDIFFERENCEで以前記憶した記録と動いた箇所の差分をチェック
ugokiCamrera_bmd.draw(beforeCamera_bmd, null, null, BlendMode.DIFFERENCE);
//閾値以上を白色に変化（動体検知）
ugokiCamrera_bmd.threshold(ugokiCamrera_bmd, rect, pt, ">“, shikii_a[shikiiArray_num], 0xffffffff);
//次のブレンド用にビフォーを記録
beforeCamera_bmd.copyPixels(defaultCamera_bmd,rect,pt);
//動体検知の左側をコピー
leftCamera_bmd.copyPixels(ugokiCamrera_bmd,left_rect,pt);
//動体検知の右側をコピー
rightCamera_bmd.copyPixels(ugokiCamrera_bmd,right_rect,pt);

//動体検知の左側の動いている場所を矩形化
leftMove_rect = leftCamera_bmd.getColorBoundsRect(maskColor, icchiColor, true);
//動体検知の左側の動いている場所を矩形化
rightMove_rect = rightCamera_bmd.getColorBoundsRect(maskColor, icchiColor, true);

pointerCal(); //ポインタの位置計算
selectPointSencer(); //ポインタの選択してるもののチェック

}

つかんだときに画像を回転、拡大するのは、この前勉強した三角関数が役に立ちました。趣旨は同じで距離と角度を随時計算しています。

//つかんだ画像の拡大縮小回転計算を初期化
function detailBigImg(){
detaiMode_flag = true; //つかんでいるモード
WW = 800 * bigImg_sp.scaleX; //800pxの幅の画像
HH = 470 * bigImg_sp.scaleX; //470pxの高さの画像
def_dg = (Math.atan( WW / HH)) * 180 / Math.PI; //その画像の対角線の角度を求める(これがデフォルト角度)
bigImg_sp.y = 0;
bigImg_sp.x = 0;
stage.addEventListener(Event.ENTER_FRAME,detailCal);
}

function detailCal(e:Event){
leftX = leftPointer.x; //左ポインタx
leftY = leftPointer.y; //左ポインタy

rightX = rightPointer.x; //右ポインタx
rightY = rightPointer.y; //右ポインタy

bigImg_cont.x = rightX; //画像のx
bigImg_cont.y = rightY; //画像のy
//三平方の定理で元のサイズと現在のポインタの対角線の長さの比を出して拡大縮小
bigImg_cont.scaleX = bigImg_cont.scaleY = Math.sqrt(Math.pow(rightX-leftX,2) + Math.pow(rightY-leftY,2)) / Math.sqrt(WW * WW+ HH * HH);

//現在のポインタの対角線の角度を求める
var dg:Number = (Math.atan( (rightY – leftY ) / (rightX – leftX ))) * 180 / Math.PI;
//そこからデフォルトの角度を差し引いて現在の角度に置き換える
bigImg_cont.rotation = dg -(90 – def_dg);
}

だいたいこんな感じ。ソースはここ置いときますね。

いやー、はじめてのてら子でホント逃げ出したいぐらい緊張してたんですが
皆さんめーちゃいい人で、
気遣いフォローやら業界アドバイスやらいろいろお話聞かせてもらいました。
とってもいい刺激をもらえたので、
これからもモニョモニョ作っていきたいと思います。
ありがとうございました。

でも、緯度経度から距離を算出するってよく分からなかったのでいろいろ調べてたところ、

轍　〜自転車的なる日記〜 緯度・経度から距離を求める方法

なるサイト様の情報が簡易でかつ実用的っぽいので
この式で計算してみることにしました。

ただ、自分的にちょっと理解が追いつかなかったので
備忘録として行程を一個いっこ追いながら、phpおよびas3にまで落とし込むまでを記しておきます。

※取得した緯度経度が「度分秒の60進法」の場合、「10進法」にあらかじめ直してください。直し方は以下リンク参照
　経度・緯度を60進法から10進法へ変換 – F.Ko-Jiの「一秒後は未来」

では始めます。

A点、大阪（緯度 = aIdoとします：34.701909, 経度 = aKeidoとします：135.494977）と
B点、東京（緯度 = bIdoとします：35.681382, 経度 = bKeidoとします：139.766084）の
２点間の距離（dとします・単位km）を求めます。

距離を求める場合は、東京と大阪を結ぶ線を引いて、その線の長さが分かればよいのです。

その線の長さを求めるために、
大阪と東京の東西の距離差と南北の距離差が分かれば
ピタゴラスの定理
xの2乗 + yの2乗 = 求める距離の2乗
により距離が計算できます！

ではどうやって東西の距離（touzaiKyoriとします）、南北の距離（nanbokuKyoriとします）を求めればよいのか。

その前に緯度経度って概念がごっちゃになりやすいので簡単に緯度経度についてのおさらいです。

●緯度（横ライン）：
赤道が緯度0度、北極が90度、南極が-90度とする
「地球の中心（核）」を起点とした角度。
世界地図（メルカトル図法時）では水平方向に線が引かれます。
当然、赤道で一番円周が大きくなり（つまり地球の直径）
赤道から距離が離れるたびに緯度ラインの直径は小さくなっていきます。

●経度（縦ライン）：
ロンドンのグリニッジ天文台を通る大円が経度0度
（大円：ある地点と北極と南極を通る大きな円）
「地球の地軸」を起点とした角度。
世界地図（メルカトル図法時）では垂直方向に線が引かれます。
円周は常に同じです（常に地球の直径）。

ポイント
・緯度は場所によって円周の長さ、半径が違う！※経度は常に円周の長さ常には同じ。
・緯度経度は座標のxyだと思うとこんがらがるので、あくまで地球の基準点からの角度と考える！

地球は丸いので東京と大阪の東西の距離、南北の距離は
地球の円周上にそっています。
よって円弧の長さを求めることになります。

●円弧の長さの求め方
小学校で習った式は
円弧の長さ =直径×π×円弧の角度／360
だったと思いますが、もっと簡単にする方法があります。
ラジアンという角度の単位を使う方法です。
円弧の長さ = 半径×円弧の角度をラジアンに変換した値

一般的な角度をラジアンという角度に変換するには
1度 = π / 180 = 約0.017ラジアン
1ラジアン = 180 / π = 約52.3度
で計算すればよいです。
※phpならわざわざ計算しなくても角度をラジアンに変換する関数があります。

ちなみにラジアンとは：
・角度の単位。
・1ラジアン (約57度)のとき半径と弧の長さが等しい。
・360度 = 2πラジアン
・弧の長さを計算するのにめっちゃ分かりやすい。

では東西の距離（touzaiKyori）、南北の距離（nanbokuKyori）を求めてみます。
計算には円弧の角度の他に地球の半径が必要となるのでwikipediaで地球の半径を調べてみました。
●地球の半径（earth_rとします ）：約6378.137km

●で、緯度経度にそった円弧の角度
大阪東京の緯度の差（idoSaとします）： bIdo – aIdo
大阪東京の経度の差（keidoSaとします）： bKeido – aKeido

この緯度の角度差、経度の角度差をラジアンに変換した値と地球の半径を利用して
円弧の長さを求めます。

ただし、南北の距離を計算するための半径は、すなわち地球の半径ですが、
東西方向の距離を計算するための半径は、測定値の緯度により、異なります。
（日本は赤道ラインよりずいぶん上に位置していますので
その緯度の半径は赤道の半径より当然小さくなります）

測定位置の緯度ラインの半径は三角関数の計算により求められます。
直角三角形は角度が一定であれば3辺の長さの比も一定という性質を利用します。

コサインθとは比率に基づく値にすぎません。
三角形の角度がθ（ここではすなわちaIdo）度のときの
底辺（ここでいう測定地の緯度の半径） ÷ 斜辺（ここでいう地球の中心から測定値の距離） の値のことです。
斜辺（地球の中心から測定値の距離） = 地球の半径（earth_r）なので
底辺（測定地の緯度の半径）= cosθ × earth_r
となります。
※phpやactionscriptだとコサインを計算してくれる関数があります。
ただし求めたい角度θの単位を一度ラジアンに変換する必要があります。

これで式が揃いました。

東西の距離（touzaiKyori）= 測定値（大阪）の緯度の半径 × 大阪東京の緯度の差（idoSa）
= コサインaIdo × 地球の半径（earth_r）× 大阪東京の緯度の差（idoSa）

南北の距離（nanbokuKyori）= 地球の半径（earth_r） × 大阪東京の経度の差（keidoSa）

この二つが求まれば
xの2乗 + yの2乗 = 求める距離の2乗
となり、その平方根をもとめることで距離dが求まります。

よってPHPで書くと以下の通り

<?php
$aIdo = 34.701909;					//  A点（大阪）の緯度
$aKeido = 135.4949770;		 //  A点（大阪）の経度

$bIdo = 35.681382;				//  B点（東京）の緯度
$bKeido = 139.766084;		//  B点（東京）の経度

$earth_r = 6378.137;		//	地球の半径

$idoSa = deg2rad($bIdo - $aIdo);	//緯度差をラジアンに
$keidoSa = deg2rad($bKeido - $aKeido);	//経度差をラジアンに

$nanbokuKyori =  $earth_r * $idoSa;		//南北の距離
$touzaiKyori = cos(deg2rad($aIdo)) * $earth_r * $keidoSa;		//東西の距離

$d = sqrt(pow($touzaiKyori,2) + pow( $nanbokuKyori,2));			//三平方の定理でdを求める
?>

またactionscript3.0で書くと

var aIdo:Number = 34.701909; // A点（大阪）の緯度
var aKeido:Number = 135.4949770; // A点（大阪）の経度

var bIdo:Number = 35.681382; // B点（東京）の緯度
var bKeido:Number = 139.766084; // B点（東京）の経度

const earth_r:Number = 6378.137; // 地球の半径

var idoSa:Number = Math.PI / 180 * (bIdo – aIdo); //緯度差をラジアンに
var keidoSa:Number = Math.PI / 180 * (bKeido – aKeido); //経度差をラジアンに

var nanbokuKyori:Number = earth_r * idoSa; //南北の距離
var touzaiKyori:Number = Math.cos( Math.PI / 180 * aIdo) * earth_r * keidoSa; //東西の距離

var d:Number = Math.sqrt(Math.pow(touzaiKyori,2) + Math.pow(nanbokuKyori,2)); //三平方の定理でdを求める

となります。
ちなみに求められる値dは405.807810663 kmとなります。
検証のために以下のサイトで大阪駅東京駅間を測ってみましたが、ほぼほぼ同じ値でした。
LatLng2Distance:::緯度経度から距離算出API: