tmdf.net | Flash / ActionScript

数カ月ぶりの投稿。もうすぐCS5.5が出るので必要な方は限られると思いますが、Adobe Flash Professional CS5を使ってFlashPlayer10.2のAPIを使ったswfを書き出す方法です。何か不具合があっても自己責任でお願いします。

「Rhuno Flash Blog > How to compile for Flash Player 10.2 with Flash CS5」を日本語訳しただけだと思ってください。簡単な英語が読める方は、上記のリンク先ページの最後の方に、必要なファイルと手順をまとめてくれているzipファイルがあるのでそれを使うと楽です。コメント欄に追記があるのでちゃんと見てください。

そうでない方は以下の手順。
元のページがWin向けだったので、ここではMac向けに書きます。

1. FlexSDKのダウンロード

ここからFlexSDK（2011.5.13時点では4.5.0.20967が最新）をダウンロード。「Adobe Flex SDK」で大丈夫です。

2. playerglobal.swcのコピー

「/アプリケーション/Adobe Flash CS5/Common/Configuration/ActionScript 3.0」に「FP10.2」フォルダを作成し、その中に先ほどダウンロードした「flex_sdk_4.5.0.20967/frameworks/libs/player/10.2/playerglobal.swc」をコピーして下さい。

3. XMLファイルを作成

「/アプリケーション/Adobe Flash CS5/Common/Configuration/Players」の「FlashPlayer10_1.xml」をコピーして、ファイル名を「FlashPlayer10_2.xml」に変更。このXMLファイルをテキストエディタなどで開き、以下の行を変更。
3行目　playerノード　”FlashPlayer10″ を “FlashPlayer10.2″ にして、さらにversion を “11″ に変更
4行目　nameノード　”Flash Player 10.2″ に変更
8行目　playerDefinitionPath の as3= 以降を “$(AppConfig)/ActionScript 3.0/FP10.2/playerglobal.swc” に変更

4. FlashPlayerを更新

これは参考サイトに書かれていなかったのですが、ここから最新のFlashPlayerをダウンロードして「/アプリケーション/Adobe Flash CS5/Players」内の各Player（DebugやReleaseも）を最新のもので上書きした方がいいと思います。

5. 動作確認

Flashを再起動後、パブリッシュ設定に「FlashPlayer10.2」が追加されているはずです。てきとうなファイルを作り、動作確認してください。

6. 注意事項

一部のAPI（StageVideoなど？）を使うと、プレビューではエラーが出たりする場合があるようです。今のところデバッグやパブリッシュでは問題なく動きましたが、自分も今日したばっかりなのであまり検証していません。以上です。

マウスの座標をオリジナルクラスの二次元配列で保存し白線を描画、1秒後配列から削除します。

package {
	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.utils.getTimer;

	public class Main extends MovieClip {

		private var tracks:Vector.<Vector.<Track>>;

		public function Main():void {

			//初期化
			tracks = new Vector.<Vector.<Track>>();

			//リスナー登録
			this.addEventListener(Event.ENTER_FRAME, Draw);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, Begin);
		}

		//ドラッグ開始
		private function Begin(e:MouseEvent):void {

			//更新
			Update(mouseX, mouseY, getTimer(), true);

			//リスナー登録
			stage.addEventListener(Event.ENTER_FRAME, Move);
			stage.addEventListener(MouseEvent.MOUSE_UP, Finish);
		}

		//ドラッグ中
		private function Move(e:Event):void {

			//更新
			Update(mouseX, mouseY, getTimer(), false);
		}

		//ドラッグ終了
		private function Finish(e:MouseEvent):void {

			//更新
			Update(mouseX, mouseY, getTimer(), false);

			//リスナー解除
			stage.removeEventListener(Event.ENTER_FRAME, Move);
			stage.removeEventListener(MouseEvent.MOUSE_UP, Finish);
		}

		//更新
		private function Update(_x:int, _y:int, _t:int, _s:Boolean):void {

			//データ追加
			if (!_s) _s = Boolean(tracks.length == 0);
			if (_s) tracks.unshift(new Vector.<Track>());
			tracks[0].unshift(new Track(_x, _y, _t));
		}

		//描画
		private function Draw(e:Event):void {

			//変数
			var t:uint = getTimer();
			var a:int = tracks.length;
			var b:int;
			var c:Boolean;
			var i:int;
			var j:int;
			var g:Graphics = this.graphics;

			//描画
			g.clear();
			if (a > 0) {
				for (i = a - 1; i >= 0; i --) {
					b = tracks[i].length;
					c = true;
					if (b > 0) {
						for (j = b - 1; j >= 0; j --) {
							if (t - tracks[i][j].t > 1000) {
								tracks[i].splice(j, 1);
								if (j == 0) tracks.splice(i, 1);
							}
							else {
								if (c) {
									c = false;
									g.lineStyle();
									g.moveTo(tracks[i][j].x, tracks[i][j].y);
									g.beginFill(0xFFFFFF, 1.0);
									g.drawCircle(tracks[i][j].x, tracks[i][j].y, 3);
									g.endFill();
									g.lineStyle(6, 0xFFFFFF, 1.0, false);
								}
								g.lineTo(tracks[i][j].x, tracks[i][j].y);
							}
						}
					}
				}
			}
		}
	}
}

//軌跡クラス
class Track {
	public var x:int;
	public var y:int;
	public var t:int;
	public function Track(_x:int, _y:int, _t:int):void {
		x = _x;
		y = _y;
		t = _t;
	}
}

Tweener ver.1.33.74（それ以外は未確認）でaddCallerを使う時の注意点。addCallerでtransitionを無指定のままにしておくとなぜか遅延されます。下記swfはキーボードの「1」を押した時がtransition指定無し、「2」「3」を押したときは指定有りでaddCallerを呼び、イベントが発生するたびに円を右に動かします。

//Main.as

package {
	import caurina.transitions.Tweener;
	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;

	public class Main extends MovieClip {

		private var Circle_mc:MovieClip;

		public function Main():void {

			//円
			Circle_mc = new MovieClip();
			Circle_mc.graphics.beginFill(0x999999, 1);
			Circle_mc.graphics.drawCircle(0, 0, 50);
			Circle_mc.x = 170;
			Circle_mc.y = stage.stageHeight / 2;
			this.addChild(Circle_mc);

			//説明文
			var Text_tf:TextField = new TextField();
			Text_tf.textColor = 0xFFFFFF;
			Text_tf.text = "KeyDown (ON/OFF)n1 : nonen2 : linearn3 : easeInOutCubic";
			Text_tf.x = Text_tf.y = 10;
			Text_tf.autoSize = TextFieldAutoSize.LEFT;
			this.addChild(Text_tf);

			//リスナー登録
			stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDown);
		}

		//キーボードが押された場合
		private function KeyDown(e:KeyboardEvent):void {

			//移動
			if (e.keyCode == 49 || e.keyCode == 97) Move("");
			else if (e.keyCode == 50 || e.keyCode == 98) Move("linear");
			else if (e.keyCode == 51 || e.keyCode == 99) Move("easeInOutCubic");
		}

		//移動
		private function Move(_type:String):void {

			//初期化
			Tweener.removeTweens(this);
			Circle_mc.x = 170;

			//トランジションが指定されている場合
			if (_type != "") {
				Tweener.addCaller(this, {
					count		:30,
					time		:3.0,
					transition	:_type,
					onUpdate	:Update
				});
			}

			//トランジションが無指定の場合
			else {
				Tweener.addCaller(this, {
					count		:30,
					time		:3.0,
					onUpdate	:Update
				});
			}

			//トゥイーン中
			function Update():void {
				Circle_mc.x += 10;
			}
		}
	}
}

自分が好きな感じのタイプがなかったのでキーボードのグラフィック上にkeyCodeをマッピングしたグラフィックを作りました。ActionScript（Flash）でKeyboardEventを大量に使う時に便利なはず。編集可能なPDFなので好きなようにいじって使ってください。間違えてないはずだけど、間違えてたら直すのでコメントで教えてください。

Download Keycode.pdf

TweenerのremoveTweensについてあまり書かれていないのでメモ。オブジェクトにaddTweenしたプロパティの一部だけを止めたい場合は、「Tweener.removeTweens(オブジェクト, プロパティ);」といった書き方をします。プロパティ名はStringで指定し、複数ある場合はカンマ区切りで続けて書きます。プロパティ部分を省略するとすべてトゥイーンが止まります。

//Main.as

package {
	import caurina.transitions.Tweener;
	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;

	public class Main extends MovieClip {

		private var Circle_mc:MovieClip;
		private var fade:Boolean;
		private var move:Boolean;

		public function Main():void {

			//円
			Circle_mc = new MovieClip();
			Circle_mc.graphics.beginFill(0xFFFFFF, 1);
			Circle_mc.graphics.drawCircle(0, 0, 60);
			Circle_mc.x = 100;
			Circle_mc.y = stage.stageHeight / 2;
			this.addChild(Circle_mc);

			//説明文
			var Text_tf:TextField = new TextField();
			Text_tf.textColor = 0xFFFFFF;
			Text_tf.text = "KeyDown (ON/OFF)n1 : Moven2 : Alphan3 : Both";
			Text_tf.x = Text_tf.y = 10;
			Text_tf.autoSize = TextFieldAutoSize.LEFT;
			this.addChild(Text_tf);

			//動作
			Change("fade", true);
			Change("move", true);

			//リスナー登録
			stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDown);
		}

		//キーボードが押された場合
		private function KeyDown(e:KeyboardEvent):void {

			//フェードイン（アウト） トグル
			if (e.keyCode == 49 || e.keyCode == 97) Change("fade", !fade);

			//x軸移動 トグル
			else if (e.keyCode == 50 || e.keyCode == 98) Change("move", !move);

			//3 停止（どちらも停止中の場合は開始）
			else if (e.keyCode == 51 || e.keyCode == 99) {
				if (!fade && !move) {
					Change("fade", true);
					Change("move", true);
				}
				else Change("both");
			}
		}

		//動作
		private function Change(_type:String, _value:Boolean = false):void {

			//フェードイン（アウト） 停止
			if (_type == "fade" && !_value) {
				fade = false;
				Tweener.removeTweens(Circle_mc, "alpha");
			}

			//フェードイン（アウト） 開始
			else if (_type == "fade" && _value) {
				fade = true;
				Tweener.addTween(Circle_mc, {
					alpha				:1.0,
					time				:0.5
				});
				Tweener.addTween(Circle_mc, {
					alpha				:0.2,
					delay				:0.5,
					time				:0.5,
					onComplete			:Change,
					onCompleteParams	:["fade", true]
				});
			}

			//x軸移動 停止
			else if (_type == "move" && !_value) {
				move = false;
				Tweener.removeTweens(Circle_mc, "x");
			}

			//x軸移動 開始
			else if (_type == "move" && _value) {
				move = true;
				Tweener.addTween(Circle_mc, {
					x					:stage.stageWidth - 100,
					time				:2.5
				});
				Tweener.addTween(Circle_mc, {
					x					:100,
					delay				:2.5,
					time				:2.5,
					onComplete			:Change,
					onCompleteParams	:["move", true]
				});
			}

			//両方 停止
			else if (_type == "both") {
				fade = false;
				move = false;
				Tweener.removeTweens(Circle_mc, "alpha", "x");
			}
		}
	}
}

ActionScript3で数値配列内の任意のインデックス位置の数値が、配列全体で何番目に小さい（または大きい）値なのかを調べるためのコード。ダイレクトな関数がなかったので作ってみました。けっこう高速に処理してくれてると思います。

//Main.as

package {
	import flash.display.MovieClip;

	public class Main extends MovieClip {

		public function Main():void {

			//数値配列「num」を作成
			var l:uint = 100000;
			var num:Vector.<Number> = new Vector.<Number>();
			for (var i:uint = 0; i < l; i ++) {
				num[i] = Math.random() * l;
			}

			//インデックス位置と数値を記憶する配列を作成
			var sort:Array = new Array();
			for (i = 0; i < l; i ++) {
				sort[i] = {id:i, value:num[i]};
			}

			//元のインデックス位置が4285のデータを記憶
			var search:Object = sort[4285];

			//数値の小さい順に並び替え
			sort.sortOn("value", Array.NUMERIC);

			//元のインデックス位置が4285のデータが何番目に小さい値か？
			trace(sort.indexOf(search));

			//1365番目に小さい値の元のインデックス位置はどこか？
			trace(sort[1365].id);
		}
	}
}

久しぶりにFlashネタ。複数の子mcを配置した親mcを透過させると、各子mcの透明度が変化し、自分の意図した状態と違った表示になる場合があります。これの解決方法。

キーダウン 「1」
単純に親mcをフェードアウトした場合。本来なら円が重なったところはそのままの状態でフェードアウトして欲しいのですが、子mcに透明度が別々に割り当てられるせいで、見せたくない部分（青と重なっている緑など）まで透けて見えます。

キーダウン 「2」
「1」をビットマップキャッシュ化した場合。これでうまくいくと思っていたのですが、結果は「1」と変わりません。

キーダウン 「3」
自分の希望はこのタイプ。親mcをそのままビットマップデータに描画、親mcと同階層にそのビットマップを配置。もともとの親mcは非表示にし、ビットマップをフェードアウトさせ、完了と同時にビットマップ（データ）を削除（メモリ開放）しています。

細かい部分は下記コード、または「FadeOut.zip」を参照して下さい。連打した場合の処理はしていません。

もっとスマートな処理がありそうなので、思いついたら追記したいと思います。また、今回のように単純に黒ベタ背景でフェードアウトする場合は、逆に黒ベタを親mcの前面にフェードインさせるのが一番楽です。

//Sample.as

package {
	import caurina.transitions.Tweener;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.KeyboardEvent;

	public class Sample extends MovieClip {

		//起動時
		public function Sample():void {

			//リスナー登録
			this.addEventListener(Event.ADDED_TO_STAGE, Init);
		}

		//初期化
		private function Init(e:Event):void {

			//リスナー登録
			this.removeEventListener(Event.ADDED_TO_STAGE, Init);

			//オブジェクト生成
			var g:Graphics;

			//赤
			var Red_mc:MovieClip = new MovieClip();
			g = Red_mc.graphics;
			g.beginFill(0xCC0000);
			g.drawCircle(0, 0, 100);
			this.addChild(Red_mc);
			Red_mc.x = 185;
			Red_mc.y = 150;

			//緑
			var Green_mc:MovieClip = new MovieClip();
			g = Green_mc.graphics;
			g.beginFill(0x33CC00);
			g.drawCircle(0, 0, 100);
			this.addChild(Green_mc);
			Green_mc.x = 285;
			Green_mc.y = 150;

			//青
			var Blue_mc:MovieClip = new MovieClip();
			g = Blue_mc.graphics;
			g.beginFill(0x0033CC);
			g.drawCircle(0, 0, 100);
			this.addChild(Blue_mc);
			Blue_mc.x = 385;
			Blue_mc.y = 150;

			//リスナー解除
			stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDown);
		}

		//キーボードが押された場合
		private function KeyDown(e:KeyboardEvent):void {

			//1～3
			if (e.keyCode == 49 || e.keyCode == 97) NormalFadeOut(false);
			else if (e.keyCode == 50 || e.keyCode == 98) NormalFadeOut(true);
			else if (e.keyCode == 51 || e.keyCode == 99) CustomFadeOut();
		}

		//ノーマル フェードアウト
		private function NormalFadeOut(_cache:Boolean):void {

			//キャッシュ
			this.cacheAsBitmap = _cache;

			//トゥイーン
			Tweener.addTween(this, {
				alpha		:0,
				time		:1.0,
				onComplete	:Reset
			});

			//フェードアウト
			function Reset():void {
				this.alpha = 1.0;
			}
		}

		//カスタム フェードアウト
		private function CustomFadeOut():void {

			//表示オブジェクトをビットマップ化
			var Copy_bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x00000000);
			Copy_bmd.draw(this);
			var Copy_bmp:Bitmap = new Bitmap(Copy_bmd, "auto", false);

			//親オブジェクトに配置、レイヤー調整
			this.parent.addChild(Copy_bmp);
			this.parent.setChildIndex(DisplayObject(Copy_bmp), this.parent.getChildIndex(DisplayObject(this)));

			//自身を非表示
			this.alpha = 0.0;

			//親オブジェクトに配置したコピーをフェードアウト
			Tweener.addTween(Copy_bmp, {
				alpha				:0,
				time				:1.0,
				onComplete			:Reset,
				onCompleteParams	:[this]
			});

			//リセット
			function Reset(_this:Sample):void {
				_this.alpha = 1.0;
				_this.parent.removeChild(Copy_bmp);
				Copy_bmp = null;
				Copy_bmd.dispose();
				Copy_bmd = null;
			}
		}
	}
}

CENTURYのUSB接続モニタ「LCD-8000U」「LCD-8000UD」に、swf（exe）ファイルをフルスクリーンで表示すると描画が更新されないバグがあるみたいです。WindowsXP SP3 と FlashPlayer 10.0 r32 、DisplayLinkのドライバは5.2.22663 の環境で起きました。同じドライバを使う「LCD-4300U」でも起きるかもしれません。

解決方法ですが、「パブリッシュ設定」-「ハードウェアアクセラレーション」を「レベル2 – GPU」にするとちゃんと動きます。また、cmd（ctrl）+Fでフルスクリーンと通常の表示方法を10回くらい切り替えていると、何故かちゃんと動き出したりします。

WindowsのFlash（※Macでは未検証）では、高負荷なビットマップ操作を行うと、マスク処理を無視する場合があります。
例えばA、B、Cの3枚の画像を、ブレンドモードで重ね、できた画像をビットマップDとみなし、他の画像Eのグラデーションマスクに使うといったときに、処理が重たい（画像が大きい）と、画像Eのマスク処理を無視し（単純にEがマスクされない）描画されます。

また、Flash IDE上のライブラリに登録してビットマップ画像を配置・操作するよりも、プログラムのLoaderを使って画像ファイルを外部から読み込んで操作した方が、大きい画像や重い処理を実行できる場合が多いです。

さらに、デバッグモードやプレビューモードで実行するより、コンパイルしたものの方が扱える画像が増える場合があります。PCのスペックに依存すると思いますが、Core2QuadのPCで100枚以上の1000×1000の24bitのPNG画像を読み込み、碁盤目状に配置し操作することはできました。さらに500×500の24bitのPNG画像を100枚読み込むと、コンパイルしたexeでは動作しますが、デバッグモードでは動かなかったです。エラーが出ない場合があるので注意が必要。

最近、ActionScript3で調べたことの参考サイトと自分なりのまとめ。

NUTSU 「2次ベジェ曲線の交点」
任意の2次ベジェ曲線同士の交点は、むりやり求めるしかない。かなりCPUに不可がかかるので、交点が100個以上とかある場合、毎フレーム実行させると処理落ちが発生する。また、上記リンク先で公開しているライブラリでは、ベジェ曲線を内包する短形が計算のベースになっているので、短形を描けない直線（コントロールポイントが2点の間にある）の場合は、別のスクリプトを書く必要がある。

memo 「ArgumentError: Error #2015: BitmapData が無効です。エラーの謎」
#2015のエラーが起こる場合、原因はnew BitmapData() によるメモリ不足が考えられるので
不要になったBitmapDataはdispose()で開放してあげなければいけない。それでもエラーが無くならない場合、PCのスペックを超過している恐れがある。しかし、ムービプレビューでエラーが起きても、デバッグモードやコンパイルした場合にはエラーが起きないこともあるので、限界ギリギリのパフォーマンスを求めるなら試してみる。