宇都宮ウエブ制作所

ほら、みて。こんなに違う

私はデザインする時、もっぱらFireWorksなんですが、今更ながら発見した便利tips。
FireWorks（以下 FW）で写真などの画像を拡大縮小するためには、「拡大・縮小ツール」を選ぶなどして変形ハンドルを出現させ、調整後Enter押すとそのサイズで確定するわけですが、
よくよくあるのが、後から「サイズをもっと大きめにして」などと修正が入っちゃうケース。

FWのイヤーな癖で、一旦Enterを押して確定させてしまうと、そのサイズで100％の画像に変換されてしまうため、少しでも大きくや小さくしようものなら画像がボケて使えたもんじゃありません。その度にデカい画像を再配置し、マスクの場合は解除してエフェクトもかけ直さなきゃ…と工程が多くてめんどくさいですよね。

で、そんなときに便利なのが「シンボル」。
予め（コレ後から微調整したいなーor入りそうだなー）という場合は、大きいサイズのままで画像選択した後に右クリックから「シンボルに変換」。
大きいままでサイズ100％としてシンボル化されるため、小さくするのもその後大きくするのも画質は綺麗なまま！もちろんシンボル元の大きさよりも大きくしてしまってはダメですが、かなり使える！！

※とはいえ、どんなに小さい画像でもそれだけ大きい画質の情報を持ってるってことなんで、あんまり一度に使いすぎるとPCが固まってしまうかもです。

こんな感じ

SPARK Projectに顔認識用のライブラリがあるので家庭教師のトライにトライしてみました（ややこしい）。

画面に直接マウスで落書きすると、顔の動きに落書きが追随します。

サンプルはこちらのページにあります

動作にはWEBカメラが必要。あとめちゃくちゃ重いです。

ライブラリを普通に使ってるだけで特別なことしてないのがバレバレで恥ずかしいですが以下はコードです。重くて泣きたくなる場合は37行目のコメントアウトを外して代わりに38行目をコメントアウトしてみて下さい。

ドキュメントクラス-Main.as

顔認識は全部ここに突っ込んだ

package {
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.geom.Matrix;
	import flash.geom.Rectangle;
	//
	import flash.events.Event;
	//
	import flash.media.Camera;
	import flash.media.Video;
	import flash.events.ActivityEvent;
	//
	import jp.maaash.ObjectDetection.ObjectDetector;
	import jp.maaash.ObjectDetection.ObjectDetectorOptions;
	import jp.maaash.ObjectDetection.ObjectDetectorEvent;
 
	public class Main extends Sprite {
		private const VIDEO_SCALE:Number = .8;
		private const DEFAULT_FACE_RECT:Number = 50;
		private var camera:Camera;
		private var video:Video;
		private var detector:ObjectDetector;
		private var options:ObjectDetectorOptions;
 
		private var raku:Raku;
		function Main():void {
			init();
			initDetector();
		}
		private function init():void {
			camera = Camera.getCamera();
			if (camera != null) {
				video = new Video(stage.stageWidth, stage.stageHeight);
				video.attachCamera(camera);
				//camera.addEventListener(ActivityEvent.ACTIVITY, onCameraActivityHandler);
				addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
				addChild(video);
			}
			var target:Sprite = new Sprite();
			var g:Graphics = target.graphics;
			g.beginFill(0x000000, 0);
			g.drawRect(0, 0, stage.stageHeight*2, stage.stageWidth*2)
			g.endFill();
			addChild(target)
			raku = new Raku(target);
			addChild(raku);
		}
		private function initDetector():void {
			detector = new ObjectDetector;
			detector.options = getDetectorOptions();
			detector.addEventListener(ObjectDetectorEvent.DETECTION_COMPLETE, onDetectorCompleteHandler);
			detector.loadHaarCascades( '/samples/kao/face.zip' );
		}
		private function onCameraActivityHandler(e:ActivityEvent):void {
			if (e.activating) {
				addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
			} else {
				removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
			}
		}
		private function onEnterFrameHandler(e:Event):void {
			var bitmap:Bitmap = new Bitmap(new BitmapData(video.width, video.height, false));
			var matrix:Matrix = new Matrix();
			matrix.scale(VIDEO_SCALE, VIDEO_SCALE);
			bitmap.bitmapData.draw(video,matrix);
			detector.detect(bitmap);
		}
		private function onDetectorCompleteHandler(e:ObjectDetectorEvent):void {
			if ( e.rects ) {
				e.rects.forEach( function( r :Rectangle, idx :int, arr :Array ) :void {
				raku.moveRaku( r.x/VIDEO_SCALE, r.y/VIDEO_SCALE, r.width/VIDEO_SCALE, r.height/VIDEO_SCALE );
				});
			}
		}
		private function getDetectorOptions():ObjectDetectorOptions {
			options = new ObjectDetectorOptions;
			options.min_size  = 50;
			options.startx    = ObjectDetectorOptions.INVALID_POS;
			options.starty    = ObjectDetectorOptions.INVALID_POS;
			options.endx      = ObjectDetectorOptions.INVALID_POS;
			options.endy      = ObjectDetectorOptions.INVALID_POS;
			return options;
		}
	}
}

落書きするクラス-Raku.as

顔認識で得た矩形に合わせて拡大縮小してるだけ

package {
 
	import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.events.MouseEvent;
	import flash.events.Event;
	public class Raku extends Sprite {
		private const DEFAULT_FACE_WIDTH:Number = 50;
		private const DEFAULT_FACE_HEIGHT:Number = 50;
 
		private var this_scale_x:Number = 1;
		private var this_scale_y:Number = 1;
		private var g:Graphics;
		private var target:Sprite;
		function Raku(mc:Sprite):void {
			target = mc;
			init();
		}
		private function init():void {
			target.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
			Sprite(target).stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
			g = graphics;
			g.lineStyle(2, 0x000000);
		}
		private function onMouseDownHandler(e:MouseEvent):void {
			target.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
			g.moveTo((e.stageX-x)/this_scale_x, (e.stageY-y)/this_scale_y);
		}
		private function onMouseUpHandler(e:MouseEvent):void {
			target.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
		}
		private function onMouseMoveHandler(e:MouseEvent):void {
			g.lineTo((e.stageX-x)/this_scale_x, (e.stageY-y)/this_scale_y);
		}
		public function moveRaku(_x:Number, _y:Number, _width:Number, _height:Number):void{
			this.x = _x;
			this.y = _y;
			this_scale_x = _width/DEFAULT_FACE_WIDTH;
			this_scale_y = _height/DEFAULT_FACE_HEIGHT;
			this.scaleX = this_scale_x
			this.scaleY = this_scale_y
		}
	}
}

このアプリはActionScript2以前で作られた昔のswfファイルをAIR化させる「補助」を行うツールです。
動作にはAdobe AIRランタイムが必要です。
また、通常のAIRアプリとは少し動作が違いますのでこのページの説明をよく読んで使用して下さい。
SWF2AIRのダウンロードはこのページの一番下にあります。

SWF2AIRってどんなアプリ

昔作ったSWF

図のように昔作ったようなふっる～いSWFファイルを何としてでもそのままAIRアプリにしたい！
そんなときに便利なアプリです。

これさえあればどんなSWFファイルでも無理矢理AIRアプリにできます！

AIRとして動作する！

注意

• AIRランタイム以外にAIR SDKも必要となります。お使いのOSにあわせたSDKをダウンロードして下さい。
• このアプリを使って作成されたAIRアプリは電子署名などかなりいい加減な作りとなっています。
• ActionScript2以前にはAIRで追加されたAPIは使えませんので、当然プロジェクタとして書き出したswf程度のことも出来ない(fscommandなど)、あんまり意味のないAIRアプリが作成されるはずです。
• OSの権限の問題などで正しく動作しない場合もあります。その際はお使いのPCの管理者に問い合わせてみて下さい。きっと迷惑がられます。
• このアプリを使って作成されたAIRアプリの動作に関しては一切責任を負いません。
• というわけで興味本位の実験などに使ってみて下さい。

更新履歴

• 08-10-17：すこしだけ使いやすくしました。
• 08-10-13：公開

使い方

AIR SDKからお使いのOSにあわせたSDKをダウンロードして下さい。
ダウンロードしたSDKは適当なフォルダに解凍しておいて下さい。
Adobe AIRランタイムをインストールしていない人はついでにインストールしておいて下さい。
このページの一番下からswf2air.airファイルをダウンロードしてインストールします。
swf2airを起動するとこんな画面が出てきます。

起動時

先ほどダウンロードしたAIR SDKの中からbin/adtというファイルを探してswf2airにドラッグ&ドロップします。

これ

ちなみに画面のようにMacではbin/adtですが、Windowsだとbin/adt.batというファイル名です。

次にAIR化したいswfファイルをswf2airにドラッグ＆ドロップします。
AIR SDKのadtファイルとswfファイルの二つがきちんとドラッグ＆ドロップされると次のような画面になります。

こんな画面にかわるよ

この時点で「AIR作成」というボタンが出来ていますんで、ボタンを押すとめでたくAIR完成！
とはいきませんで、何やらフォルダを選択する画面が出てきます。

※ちなみにこの時点で「システムクローム」とか書かれたところをいじるといろいろと変なことが出来ますが、普通はここらへんはいじらなくてもいいです。どうしてもいじりたい場合はこのページの下の方の「その他」の項目を読んでみて下さい。

これは”AIRを作成するためのファイル（以降「パッチファイル」と呼びます）”をどこに保存するか聞いてくるので、デフォルトではswfファイルと同じフォルダが選択されているはずなので、ここで特に問題無ければそのまま続けて下さい。

フォルダ選択ダイアログが表示されます

これでSWFファイルをAIR化する準備が整いました。

ここからMacとWindowsで手順が少し違うので、最初にWindowsのほうから説明していきます。

Windowsの場合

Windowsだと選択したフォルダに「swf2air.bat」というファイルが作られます。
このファイルをダブルクリックなどで実行して、しばらく何もしなければswfファイルと同じフォルダにAIRファイルがめでたく完成されます。
ちなみにswf2air.batを実行したときに現れる黒いウインドウに「続行するには何かキーを押して下さい」と表示されますが、これは僕が嘘をついているので何もキーを押さずにしばらく待っておいて下さい。

Macの場合

次にMacだと選択したフォルダに「swf2air.sh」というファイルが作られています。
アプリケーションフォルダから「ユーティリティ」へと進み、「ターミナル」を実行して下さい。
ターミナルに

chmod +x

と入力します。
「+x」の後には半角スペースを入れて下さい。
chmod＜半角スペース＞+x＜半角スペース＞
というふうに入力します。
そのままターミナルウインドウにswf2air.shファイルをドラッグ＆ドロップしてreturnキーを押します。
少しややこしいですがこれはswf2air.shファイルを確実に実行させるファイルにするための素敵なおまじないです。

素敵なおまじない

最後にもう一度ターミナルウインドウに（今度は何も入力せず）swf2air.shファイルをドラッグ＆ドロップしてreturnキーを押します。

もうひとがんばり

これでswf2air.shが実行され、少し待つとswfファイルと同じフォルダにAIRファイルが完成されます。

完成！

Windows、Macともにこれで完成です。
できたAIRを自分でインストールするなり、人に配りまくって迷惑がられるなりして楽しんで下さい。

できた！

その他

swf2airにjpegやpng、gifファイルをドラッグドロップするとAIR用のアイコンも自動的に作れます。

ほかにもウインドウの枠を取っ払いたいときは「カスタムクローム（透明）」などを選んで下さい。
ただし、AIR用に作られたわけではないSWFを無理矢理AIRにするわけなので、ウインドウを取っ払うとウインドウの位置を変更できなかったり終了しにくくなったりといろいろと大変だと思います。

ダウンロード

SWF2AIRをダウンロード

先日のイベント「FPS Lite vol.0」にてアンケートで”電子証明書の補足が必要”とのお声をいただいたので、せっかくなのでこの機会に電子証明書についてまとめてみたいと思います。

今回お話ししたAIRネタはあくまで「入門編」でして、FlashでAIRを作るときにひっかかりそうな電子証明書を「趣味や実験でAIRを作るレベル」を想定して説明しました。

作り方の詳しいプロセスはこちら→Flash CS3 ProfessionalでAIRを作成するための環境設定

この電子証明書は自分で自分を証明するためのものなので、いくらでも他人の名前やハンドルネームを語れるためAIRとしての信頼度は無いに等しいレベルです。

練習や趣味でAiRを作るぶんにはこれでも問題ないのですが、仕事などでは信頼できる電子証明書をAIRに埋め込む必要が出てきます。

僕が調べた中では日本ではグローバルサインというところがAIRの証明書を発行しているようです（海外にもいくつか似たようなサービスを行っている機関があるらしいですが英語が読めないのでわかりません）。

AIRを始めたばかりのときは全く知らなくてもいい情報ですが、もし今後お仕事などで必要となったとき予算や契約などの関係で覚えておいても損は無いと思います。

FlaherによるFlasherのためのAdobe AIR入門

• Flash CS3 ProfessionalでAIRを作成するための環境設定
• デスクトップマスコットのサンプル
• デスクトップ時計のサンプル

※10/12追記
Adobe AIR 電子証明書の補足

来る10月11日土曜日、17:00〜19:00にかけてFPS Lite vol.0を開催します！

詳細はこちら、

FPS Lite 10月11日に実施します！！

と

FPS Lite vol.0 追加情報！

をご覧ください。

このFPS Liteとはどういった催しなのかと言いますと、大阪FlashイベントであるFPSだけでは拾いきれないような小回りの利いたイベント開催を目的としたイベントとなっています。

FPSはおかげ様で固定ファンも沢山いらっしゃるほど人気のFlashイベントなのですが、どうしても開催までに期間的に間が空いてしまうことと、規模のわりに募集できる参加者の人数が少ないことが問題となっています。

これは運営母体であるわがFPS実行委員会の問題なのですが、我々もいちFlashファンとしてボランティア（というかみんな集まってFlash話で飲むのが好きなだけw）で動いている以上はどうしても解決の難しいところでもあります。

そこでFPSファンにとってはちょこちょこ開催することでより交流を深めるため、FPSには残念ながら参加できなかった方々には少しでもFPSを知ってもらうため、FPSよりも規模を小さくして小回りの利くイベントを繋げることでFPSそのものを補佐する目的で企画されたのがこの「FPS Lite」というわけです。

内部事情はこのくらいにしておいて、「Flash Lite vol.0は参加したらどういったメリットがあるの？」ということが参加をご検討されている方にとっては一番知りたいところだと思います。

特に今回は豪華な講師陣もいないため「あの講師の話が聞けるなら」といった期待も無いのでそれだけにセミナーとして見たときの質の高さも気になるところです。

今回vol.0は僕とミキチョクシによるトークと大喜利なんですが、FPS参加者は当日を振り返って、また参加できなかった方はFPSを知ってもらうための良い機会だと思っています。

そして、僕の大喜利ネタは、あの多彩な話題が魅力だったFPSでさえ拾いきれなかったAdobe AIRネタを行います。AIRに関してはテクニカルなセミナーや本はちょこちょこと出てきていますが、純粋にFlashのみに焦点を絞ったAIRネタは日本初じゃないかと自負しています。

スクリプトを多用すればすごいAIRアプリは作れますが、せっかくFlashでもAIRが作れるのでできるだけタイムラインとアイデアでAIRを作る方法の入門のところをお話ししたいと思っています。

「多様化するFlashの世界に、今後もどういった関わり方があるのか」、その多様性を是非ともFPS Lite vol.0で感じて下さい。

ちなみに現時点で席は余りまくっています（笑）ぜひとも参加のご検討お願いします！

結論から言いますと、

ExternalInterface.call Internet explorerでnullが返ってくる件 | _quality
こちらを参考にしてなんとか解決しました。

他のバージョンは分からないですが、SWFAddress2.1だと

SWFAddress.getValue();

でURLを取得できないのです。
何をどうやってもダメでして、サンプルとかWEBのチュートリアルとかではいとも簡単にSWFAddressを動かせてるのにオレはだめだめのだめ子さんだったわけですが、リンク先を試してみたところ動くようになりました！
それにしてもリンク先のeknさんはよく気がついたですね…。
この記事がなかったらと思うとぞっとします。