今回は、怖くて手を出せなかった「マトリックス」を元に画像変形に挑戦してみました。
※アフィン変換や、射影変換と言われる変換方法を理解してから、actionscriptを書きたかったのですが、ちょっと理解不可能だったので、とりあえず、平行四辺形と台形の変形を実現することに力を注いでみた。

平行四辺形な変形

wonderflにUPしてみた

とりあえず、平行四辺形に変形してみた。Matrixのa,b,c,d,tx,tyのプロパティを以下のように設定し、画像に適応すると平行四辺形に変形します。

adobeのデベロッパーセンターに野中さんの記事より
a: 水平方向の伸縮率 = 変換後の幅/もとの幅
b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
tx: 水平方向の移動ピクセル数
ty: 垂直方向の移動ピクセル数

Matrix部分

private function _getTransformMatrix($pt0:Point, $pt1:Point, $pt2:Point):Matrix
{
	/*
	http://www.adobe.com/jp/devnet/flash/articles/matrix_class.html
	a: 水平方向の伸縮率 = 変換後の幅/もとの幅
	b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
	c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
	d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
	tx: 水平方向の移動ピクセル数
	ty: 垂直方向の移動ピクセル数
	*/
	var w:Number = _bmd.width;
	var h:Number = _bmd.height;
	var mat:Matrix = new Matrix();
	mat.a = ($pt1.x - $pt0.x) / w;
	mat.b = ($pt1.y - $pt0.y) / w;
	mat.c = ($pt2.x - $pt0.x) / h;
	mat.d = ($pt2.y - $pt0.y) / h;
	mat.tx = $pt0.x;
	mat.ty = $pt0.y;
	return mat;
}

Matrixを適応する部分

	_canvas.transform.matrix = newMatrix;

※_canvasに画像をaddChildしてます。 ※_canvasはSprite。

台形な変形

wonderflにUPしてみた

平行四辺形な変形は、どう頑張っても台形の変形は実現できません。ということで、三角形を２つ使用して台形を実現させます。
三角形？？何故に？？という方は以下の画像を！

三角形といえど、平行四辺形な変形と同様です。
多分ですが、この三角形はポリゴンと呼ばれるやつなのかもしれない。（推測）

Matrixを適応する部分

	_canvas.graphics.clear();
			
	//分割した１個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix1 );
	_canvas.graphics.moveTo(bP0.x , bP0.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();
			
	//分割した２個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix2 );
	_canvas.graphics.moveTo(bP3.x , bP3.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();

台形への描画は、ちょっと面倒くさいけど、beginBitmapFill とmoveToとlineToを使って描画してます。

上記の理解を元に遊んでみた

その１
その２

三角形の分割数を増やしたりで色んな表現ができそうな気がします。ただし、分割の方法や、ポイントの配置方法などがちょっと難しい。手探り状態なので色々試してみるしかないか。
view source

Saqooshaさんがソース公開する時によく使われていて、どうやっているんだろう？？と調べてみたら、いつも使っているFlex Builderの機能に存在していたという。全く知らなかった。

ViewSourceデモ

ViewSource

今までソース公開にzip化したファイルにリンクという方法でやってたのですが、断然、Publishing source codeで吐き出したHTMLファイルの方が手軽で見やすい。ピックアップしたいソースはjavascriptのSyntaxHighlighterでブログに直に書いて、全体ソースはViewSourceな感じがいいかな。

Publishing source codeの場所

プロジェクト - リリースビルドの書き出し - ソースの表示

１、プロジェクト - リリースビルドの書き出し

２、リリースビルドの書き出し - ソースの表示

ActionScriptソースをHTMLへ変換（コンバーター？）なものを探してたわけですが、ちょうどいいもん見つけれた。Flex Builderはやっぱり偉大だ。

以下該当ソース

private function getObj2DCords ( o:DisplayObject3D, camera:CameraObject3D,  offsetX:Number = 0, offsetY:Number = 0 ):Point
{
	var view:Matrix3D = o.view;
	var persp:Number = (camera.focus * camera.zoom) / (camera.focus + view.n34);
	return new Point ( (view.n14 * persp) + offsetX, (view.n24 * persp) + offsetY );
}

サンプルをwonderflに上げてみた。

※CameraType.DEBUGを使ってるので、マウスドラッグや方向キーでカメラが動きます。

3D空間にあるCubeの座標に2D座標の青い円を置いてみた。
これで、3Dオブジェクトに対して、簡単なコメントや「Click!!」とかの文字をつけることが出来そうだ。

今回やっておきたかったことは以下の２点。

• Webカメラで撮った画像を保存。
• シンプルな動体検知

こんなものを発表しました動画

Webカメラで撮った画像を保存

Flashのみで画像保存はFlash Player9の段階では不可能？みたいなので、サーバー側(php)で保存します。
※Flash Player10からはローカルファイルアクセス機能が出来るようになったので画像保存できるかもしれない。

１、BitmapDataをエンコードしてサーバーへ送信
２、サーバー側で画像保存
※サーバーはローカルにMAMPをインストールした環境を使用しました。（mac 0SX）

Flash→PHPの連携はパラメーターの引き渡しが簡単に出来るAMFPHPを使ってみました。エンコードに関しては、as3corelibよりPNGEncoderを使用しています。

主要部分のASスクリプト

package
{
	import com.adobe.images.PNGEncoder;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.net.NetConnection;
	import flash.net.Responder;
	import flash.utils.ByteArray;
	
	public class Test_amfphp extends Sprite
	{
		public function Test_amfphp()
		{
			//BitmapDataをエンコード
			var bmd:BitmapData = new BitmapData(100,100,false,0x0)
			var byteArray:ByteArray = PNGEncoder.encode(bmd);
			
			//AMFPHPのgateway.phpがある場所
			var gateway:String = "http://localhost/amfphp/gateway.php";
			
			//AMFPHPが返す値の受け皿を設定
			var responder:Responder = new Responder(_onResult,_onStatus);
			
			//つなげる。
			var connection:NetConnection = new NetConnection();
			connection.connect(gateway);
			
			//呼ぶ
			connection.call("PHPクラス名.メソッド名",responder,byteArray,"その他引数１","その他引数２");
		}
		
		private function _onResult($result:Object):void {
			trace("結果_" + $result);
		}
		
		private function _onStatus($status:Object):void {
			trace("ステータス_" + $status);
		}

	}
}

画像保存のphpスクリプト

class PngSave
{
    public function download($image,$dir)
    {
        $fileName = $dir."hae.png"; // ファイル名
        
        //方法1
        $fp = fopen($fileName, 'wb');
        fwrite($fp, $image->data);
        fclose($fp);
        
        //方法2 ブラウザからじゃないと上手くいかない？
        //$im = imagecreatefromstring ($image->data);
        //header('Content-Type: image/png');
        //header("Content-Disposition: attachment; filename=".$fileName);
        //imagepng($im);
        
        return $fileName;
    }
}

ActionScript側からAMFPHPにByteArrayを飛ばした時、$image->dataにデータが入ってます。※$imageと指定してハマりました。
参考：AMFPHP1.9b2でByteArrayをもらう、返す　

シンプルな動体検知

動体検知ですが、検知する場所を決めて、その場所のピクセルの色が一つ前の色と最新の色とで、 どれだけ変化しているか？で判断しています。
今回の場合、画面の左、上、右の３カ所に検知するポイントを置いて、そこのピクセルの色が一定以上変化したかどうか？で動体検知を行いました。

動体検知判断のASスクリプト

package
{
	import flash.display.Sprite;
	
	public class Test_ColorDiff extends Sprite
	{
		public function Test_ColorDiff()
		{
			//古い色と最新の色
			var color_old:uint = 0xFFFFFF;
			var color_new:uint = 0xFFFF00;
			
			//古い色をR,G,Bに分ける
			var color_old_arr:Array = [ 
				color_old >> 16 , 
				color_old >> 8 & 0xFF ,
				color_old & 0xFF ,
				];
			trace("old-R_" + color_old_arr[0]); //255
			trace("old-G_" + color_old_arr[1]); //255
			trace("old-B_" + color_old_arr[2]); //255
			
			//新しいい色をR,G,Bに分ける
			var color_new_arr:Array = [ 
				color_new >> 16 , 
				color_new >> 8 & 0xFF ,
				color_new & 0xFF ,
				];
			trace("new-R_" + color_new_arr[0]); //255
			trace("new-G_" + color_new_arr[1]); //255
			trace("new-B_" + color_new_arr[2]); //0
			
			//R,G,Bそれぞれ古い色と新しい色を比較し、threshold_valueの値以上に差が出たら「動いた」と見なす。
			var threshold_value:Number = 20;
			for(var i:Number = 0;i <= 2;i++ ){
				if(Math.abs(color_old_arr[i] - color_new_arr[i]) > threshold_value ) {
					trace("動いた！");
				}
			}
			
		}
	}
}

てな感じです。

大阪てら子 22 「webカメラで遊ぼう！」の感想

世の中広いわけで、凄いスクリプトを書く人、とても良いアイデアを持っている人を目のあたりにすると、 危機感というか、やべー状態になりました。

ということでこれからも精進していこうと思います。

USKさんが今回の様子をしっかりまとめてくださっています。

大阪てら子 22 「webカメラで遊ぼう！」@trace

それと、トンカさんが同様に動体検知されてました。
てら子に行ってきた！～大阪てら子 22 「webカメラで遊ぼう！」～@キテレツ荘
動体検知方法は、BlendMode.DIFFERENCEで古い情報と新しい情報の差分を取得する方法のようです。その方法は全く思いつかなかった！！

※私のはMac OS10.5.6にMAMPをインストールした環境です。

DBD::mysqlがインストールされてない

ローカルにMovable Typeを解凍&設置し、mt-check.cgiを走らせたところ、

サーバーにDBD::mysqlがインストールされていないか、DBD::mysqlに必要なモジュールがインストールされていません DBIとDBD::mysqlは、MySQLを使ってブログのデータを管理するために必要です。 DBD::mysqlをインストールする場合は、インストール手順を参照してください。

なエラーが。MAMPはデフォでMySQLをインストールしてくれるので、DBD::mysqlとはperlとMySQLをつないでくれる便利なモノと予想。まあ、それはどうでもよくて、DBD::mysqlをインストールすることに。

DBD::mysqlをインストール

MySQLとDBD::mysqlが必要となるのでダウンロードし解凍しとく。

以下を実行

1. mysql_configを探す。（私の場合は /Applications/MAMP/Library/bin/ にある）

2. MAMPと同じバージョンのMySQLをダウンロードして、解凍する。
　（訳注．mySQLのサイトからでもよし、MAMPのサイトでソース版をダウンロードしてもよし）

3. includeディレクトリを /Applications/MAMP/Library/ディレクトリの下に移動する。

4. libディレクトリの内容を /Applications/MAMP/Library/lib/mysql/ディレクトリにコピーする。

5. ターミナルを起動し、DBD::mysqlを解凍したディレクトリに移動

6. make file を作る:
sudo Perl Makefile.PL --mysql_config=/Applications/MAMP/Library/bin/mysql_config
　（訳注．mysql_configを指定することによって、この環境用のコンパイル引数を調べて設定してくれる）
※自分の場合、このままでは無理でした。当エントリの下の方参照
7. sudo make

8. sudo make install

ここで make コマンドが使えない

-bash: make: command not found

makeコマンドを使用できるようDeveloper Toolをインスト

appleのADC member siteより、Xcode (最新ver) Developer ToolsをDL＆インストール

※DLにメンバー登録が必要です。（無料）

Device Centralが起動するか心配

Xcodeがあると、Device Central CS3が起動しないという症状があり、以前Xcodeをアンインストールしました。→Device Central CS3起動するようになった。

で、今回、Xcode 3.1.2をインストールしたところ、Device Central CS3も無事起動！！

makeコマンドも無事使用可能に

ということで、makeコマンドが通り、無事にDBD::mysqlがインストールされ、かつMac0S 10.5.6 & Movable Type + MySQL環境が構築できました。おわり。

嘘です。MySQLを選ぶところでこんなエラーが。(apache_error_logより)

[Thu Apr 23 23:40:17 2009] [notice] Digest: generating secret for digest authentication ...
[Thu Apr 23 23:40:17 2009] [notice] Digest: done
[Thu Apr 23 23:40:17 2009] [notice] Apache/2.0.59 (Unix) PHP/5.2.6 DAV/2 configured -- resuming normal operations
[Thu Apr 23 23:40:26 2009] [error] [client ::1] dyld: lazy symbol binding failed: Symbol not found: _mysql_init, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Expected in: dynamic lookup, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] , referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] dyld: Symbol not found: _mysql_init, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1]   Expected in: dynamic lookup, referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] , referer: http://localhost/mt/mt-wizard.cgi
[Thu Apr 23 23:40:26 2009] [error] [client ::1] Premature end of script headers: mt-wizard.cgi, referer: http://localhost/mt/mt-wizard.cgi

perlからMySQLへアクセスするスクリプトを試す

※mt425っていうデータベースとユーザはphpMyadminより作成してあります。

use DBI;

$user = 'hoge';
$passwd = 'hoge';
#$db = DBI->connect('DBI:mysql:hoge:localhost', $user, $passwd);
$db = DBI->connect('DBI:mysql:mt425:localhost:mysql_socket=/Applications/MAMP/tmp/mysql/mysql.sock', $user, $passwd);
$sth = $db->prepare("SELECT cd, nm FROM test");
$sth->execute;
$num_rows = $sth->rows;
print "該当 $num_rows 件\n";
for ($i=0; $i<$num_rows; $i++) {
    @a = $sth->fetchrow_array;
    print "cd=$a[0], nm=$a[1] \n";
}
$sth->finish;
$db->disconnect;

結果

dyld: lazy symbol binding failed: Symbol not found: _mysql_init
  Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle
  Expected in: dynamic lookup

dyld: Symbol not found: _mysql_init
  Referenced from: /Library/Perl/5.8.8/darwin-thread-multi-2level/auto/DBD/mysql/mysql.bundle
  Expected in: dynamic lookup

Trace/BPT trap

同じようなエラーが出たんで、Movable Typeはひとまず置いといて、perl&MySQLを解決しなくては。

追加(次の日)　寝て頭すっきりさせたらエラーがなくなった。

弄くりまわしてごちゃごちゃしたらエラーがなくなった。その過程を覚えてる範囲で記載しておきます。

１、用意するMySQLのバージョン

MAMPにはすでにMySQLが入っているのだけど、どうも完全体ではないみたいなので、MySQLをDLしてきて、おいしいところだけチョイスする。その時に「Mac OS X 10.5 (x86)」と「Mac OS X 10.5 (x86_64)」があるわけだが、x86の方を選んだ。※最初はx86_64を選んでいてエラーでてた。ただし、結果的にエラーがなくなっただけで、これが原因かどうかは分かりません。

perl Makefile.PLの設定

perl Makefile.PL --libs="-L/Applications/MAMP/Library/lib/mysql/lib -lmysqlclient" --mysql_config=/Applications/MAMP/Library/bin/mysql_config --testdb=mt425 --testhost=localhost -testuser=mt425 -testpassword=admin

※一行で
※mt425っていうデータベースとユーザはphpMyadminより作成してあります。

自分の場合、
/Applications/MAMP/Library/lib/mysql/lib
にDLしてきたMySQL（Mac OS X 10.5 (x86)）のlibファイルをコピペして、Makefile.PL時に設定しました。

後は、 sudo make
sudo make test
sudo make install
です。

make test時にエラーが

/tmp/mysql.sockが無いYO!みたいなエラーが出たけど、これは無視！
※perlでのアクセス時や、movable typeインストール時にmysql.sockの位置を指定できため。

export PATH=$PATH:/Applications/MAMP/Library/bin あと上記のようなコマンドを打ったけど、意味は全然わかっていなかったりする。

OS10.5.6 & Movable Type & MySQL完了

データベースソケットのところにmysql.sockの位置を指定。データベースポートは無視。

これで多分完了。ローカルにmt環境作るだけなんて簡単よ！とか思ってたけど全くそんなことなかった。サーバー弄くれる人尊敬します。

パソコンデスクを購入した。

購入したサイトは以下。
ガラージ

購入を決断した決め手、その１

写真がかっこいい。WEBデザインが好み。

写真（CG）とWEBデザインが、自分好みな感じで、見た瞬間「これいいかも？」と思った。「デスク」でぐぐると色々なサイトが見れるのですが、ガラージのサイトは他と比べて、ひと味違う空気感というかデザインな気がした。他のサイトの大概が「楽天」的なデザインでモノに関係なく興味を持つことがなかった。

購入を決断した決め手、その２

詳細情報が豊富。

写真で興味を持った僕は、デスクの詳細を読んでいった。写真と文字でしっかり説明されていて購入後の配置や用途など想像することが容易に出来た。

Tシャツを購入した。

購入したサイトは以下。
UPSOLD

購入を決断した決め手、その１

写真が見やすい。1ページに表示する商品数がちょうどいい。

商品くり抜きの単色背景によって、他の羅列されたTシャツとの区別がつきやすい。こういうTシャツ販売サイトは、大量に商品があるので、以下に数多くの商品を瞬時に見れるかが大事だと思う。

まとめ

デザインはとても大事だと思う。
WEBページを開いた時、一番に人の感覚を左右するのはデザインだと思います。その次に文字などによる情報が目に入ってくる。「なんかイイナ〜」や「イマイチだな」などの視覚による感覚はとても大事で、購入するかしないかまで関係してくることもある。
商品自体はイマイチでも、WEBデザインが素晴らしければ、僕はその商品を購入してしまうかもしれない。

とまあ、自分はデザインよりコーディング系ばっかりやってるんですが、デザインの勉強はしっかりやっておこうと思った次第でございます。

オブジェクト数に気をつける

オブジェクト数と比例して容量が増える

異なるオブジェクト１個配置より異なるオブジェクト３個配置の方が容量が大きい。
※同じ形のオブジェクトであれば、Flashオーサリング時にシンボルとして扱えるので問題なしです。

オブジェクトの大きさにもよるが、単純な考え方として、異なるオブジェクトが増えるとその分、Flashに配置する素材が増えるので、swf容量も大きくなる。

訴求したいものを絞るとオブジェクト数も減るはず。

■補足

ビットマップの場合は、面積(大きさ)が大きくなるほどと容量が増える。「10px × 10px」のビットマップ３個と「100px × 100px」の画像１個なら、後者の方が容量が大きい。

ベクターの場合は、パスの複雑差などが容量に関係してくる。

背景とかカットシーン数に気をつける

背景を変える

単純に背景を変えるとその分、Flashに配置する素材が増えるので容量が増える。

背景を変えない

背景を統一すると容量が少なくて済む。

シーンをどのようにカット割りするかが大事。出来る限り少ないカットシーン数で済む表現方法を考えるのが大事。かもしれない

単色の背景を用いる＆色数を少なくする

オブジェクト（↓ではキャラクター）の容量について。

単色の背景の場合

アルファチャンネル(透明エリア)を保持しないgif形式を使用することにより、容量が小さくて済む。また、gif書き出しの時に色数を削ることが出来るので更に容量を減らすことが出来る。

単色の背景でない場合（グラデーションとか）

アルファチャンネル(透明エリア)を保持するpng形式となるので、容量が大きくなる。一つや二つのオブジェクトなら構わないが、数が膨れ上がると容量の差は歴然となってくる。。かもしれない。

気がついたら書き足し&修正していきます。

Javascript Super Mario

Wario Land: Shake It

仕事でもFlashで作った後で、javascriptで作ればよかった！って思うことがたまにあるんで少しずつjavascriptに慣れていこうと思います。
※簡単ながらも細かな修正が何回もやってきて、Flashでコンパイルするのがめんどくさい。などなど。

aptanaとjQueryでやっちゃおう

aptana

aptanaとはEclipseベースのWebオーサリングツールです。javascriptやらphpやらhtmlやら色々カバーしてて便利のようです。※個人的にEclipseベースのFlex Builderに慣れてしまってるので使いやすいだろう！という願望。

jQuery

jQueryとはJavaScriptライブラリの1つのようです。まだ使い慣れてないけど、jQueryを使えば簡単にjavascriptが組める！＆ブラウザの互換性が保てる！ってな部分を期待してみます。
※aptanaをインストールすればjQueryをインポートできるのでDLする必要なし。

aptanaでjQueryをインポート

プロジェクトウィンドウの該当プロジェクトを右クリックより、

【インポート】 > 【Ajaxライブラリ・インポート・ウィザード】

からjQueryのcheckboxをチェックすればOK

aptanaでjQueryのコードアシストを設定

メニュー部分の【ウィンドウ】>【設定】より、

【Aptana】 > 【エディター】 > 【JavaScript】 > 【コードアシスト】

と選択し、jQueryのチェックボックスをcheckすればOK

$と打ってコード補完されていればOK!

Flex BuilderやFlash DevelopでActionscriptを書く時もそうだけど、コードアシストによってエディタ様様様が言語をご教授してくれる気がします。良いエディタを使えばより勉強になると思います。コードアシストは自分にとって生命線なんです。。

さてjavascriptを勉強しようか！

下記２つの記事を見たら、javascript恐怖症が少し和らいだのでメモ

jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]

javascript初級者のオブジェクト指向とかプロトタイプとか

色々と勉強になる質問が飛び交い、先生達が勉強になる解答を示してくれて、私にとって、とっても有意義な時間になりました。

自分はinterface（インターフェース）について質問させてもらったんで、その内容をちょちょいとまとめておきます。

インターフェースってなに？

抽象的なクラスです。っと説明つきにくいので、↓を参照してください。

Java入門 | インタフェース

Javaの資料ですが、概念はActionScriptでもほとんど変わらないはずです。自分もモヤモヤっとしか理解してません。。。

もう少し具体的にどういう時に使うの？

インターフェースを実装 (implements)したクラスはインターフェースで定義されたメソッドを必ず実装しなければならない。（しなければコンパイルできない）

ってことは、複数人でコードを書く時にインターフェースを決めておけば、クラスが綺麗に統一されていくよー。みたいなことはググっていけば何となく理解できました。

ただし、システムのように大人数で開発することは余りなく、一人で実装することが多いFlashでは、インターフェースは必須ではないんじゃない？って疑問がふつふつと。

ということで、別な部分での利点を教えてください！

っていうことを質問したわけであります。

で、そのまとめを文章で説明しにくいので以下のasを！！

※車に無理矢理例えてみた。
※メソッドのok_wakattaYo1とok_wakattaYo2を見てなるほど！っと道が開ければ。。

teraco_osiete.as

package {
	import flash.display.DisplayObject;
	import flash.display.Sprite;

	public class teraco_osiete extends Sprite
	{
		public function teraco_osiete() {
			ok_wakattaYo1();
			ok_wakattaYo2();
		}
		
		public function ok_wakattaYo1():void {
			//var car:Car = new Car();
			//っとするところを抽象的に
			//var car:IMachine と変数宣言してみる。
			var car:IMachine = new Car();
			
			//そのままcarをaddChildするとIMachineはDisplayObjectでは
			//ないので怒られる。なんでキャストする。
			addChild(DisplayObject(car));
			
			//上記２つと同様。
			var carlogo:IMachine = new CarLogo();
			addChild(DisplayObject(carlogo));
		}
		
		public function ok_wakattaYo2():void {
			//Car(Sprite)とCarLogo(TextField)をインスタンス化して、配列にぶっこむ。
			var machines:Array = [];
			var car:Car = new Car();
			var carlogo:CarLogo = new CarLogo();
			machines.push(car);
			machines.push(carlogo);
			
			//配列の中身をfor eachでまわす時、受け取る変数をIMachineと定義する。
			//IMachineにはdrawが定義されているので問題なくdrawできる。
			//※抽象クラスを使うことによりSpriteを継承しているCarでもTextFieldを継承しているCarLogoでも
			// 変数に格納できる。
			for each (var obj:IMachine in machines) {
				trace(obj);//１ループ目[object Car]　, ２ループ目[object CarLogo]
				obj.draw();
			}
		}
	}
}

import flash.display.Sprite;
import flash.text.TextField;
import machine1.IMachine;

/**
 * 抽象クラス「IMachine」を実装 (implements)したCarクラス
 */
class Car extends Sprite implements IMachine {
	public function draw():void {}
}

/**
 * 抽象クラス「IMachine」を実装 (implements)したCarLogoクラス
 */
class CarLogo extends TextField implements IMachine {
	public function draw():void {}
}

/**
 * 抽象クラス「IMachine」
 * 抽象メソッド「draw」のシグネチャを定義
 */
interface IMachine {
	function draw():void;
}

私と同じぐらいのas理解度の人はなるほどー！！ってなるはず。

がしかし、 shadowboxでHTML表示を行うことだけに約２、３時間ハマることに。。

失敗：'iframe'無し

成功：'iframe'有り

ここでいう、「iframe」の意味がいまいち分からないのだが、「iframe」つけたらshadowboxで上手くHTML表示が出来たのでめでたしめでたし。

Flash Player6書き出し＆透過png画像使用時に、Flashタイムライン上では綺麗に表示されているのにパブリッシュしたら汚くなってしまっていて多いにハマったのでメモ。

Flash Player6とFlash Player9での書き出し例

Flash Player6書き出し

左側問題なし、右側は汚い

Flash Player9書き出し

両方問題なし

使用したpng画像

詰め詰めで切り出ししたpng画像（汚くなる）

Flash Player7,8,9では問題なかったが、Flash Player6書き出しで画像が汚くなった。

1px間を空けてで切り出ししたpng画像（問題なし）

Flash Player6,7,8,9どれも問題なし

回避方法まとめ

Flash Player6（7もたまにあるかも？）書き出しにて、透過png画像を使用する時は、切り出し時に隙間を空けるべし。

ということで
テスト
してみた。

FirefoxとSafariでの結果

Firefox

Safari

実行したactionscript

結果を踏まえて

Event.ADDED_TO_STAGEでイベント待ちすればOKとか、 Event.ENTER_FRAMEを一回ループすればOKと思っていたのですが、 どちらもダメのようです。

stage.stageWidthが取得できるまで待ち、dispatchEventしたほうがよさげ。

SWFObject v2.1の問題な気もしますが、みんなどういう対処しているのかな。。

[プロジェクト]-[プロパティー]-[ActionScript コンパイラ]-[追加コンパイラ引数]に

-target-player=10.0.12

を追加

追記

オンライン上でFLASHをビルド出来るという画期的なサービスです。 FLASH界の中では名を馳せた人たちが、がんがんコードを投稿されています。 「Fork」という機能により人のソースを改造できたりするのですが、 自分はFlex Builderにソースをコピペして解析して勉強してます。

ちょうどActionScriptによるビュジュアル表現の幅を広げたい！と思ってた矢先なので嬉しい限りなサービスです。

※[mac 0SX 10.5.6] [Firefox3] [Flash Player9]な環境ではエラーで見れないものがちらほら。safariだと見れる模様（たまに見れないものあり）