< 次の5日分 | 前の5日分>

Papervision3D 3D座標→2D座標の変換メモ

FLASH勉強

2009年06月11日

pv3dに3D座標→2D座標の変換クラスがあるか探してたのですが、結局見つけることが出来ず途方にくれてたわけですが、
http://www.nabble.com/3D-%3E%3E-2D-coordinates-td14730886.html
こちらにそれらしきソースが!!

以下該当ソース

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!!」とかの文字をつけることが出来そうだ。

大阪てら子 22 「webカメラで遊ぼう!」に参加してきました

FLASH勉強

2009年05月31日

大阪てら子 22 「webカメラで遊ぼう!」に参加してきました。
毎度ながら、スイマセン!的な発表なんですが、今回もスイマセンです。

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

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

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

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

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

1、BitmapDataをエンコードしてサーバーへ送信
2、サーバー側で画像保存
※サーバーはローカルに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,"その他引数1","その他引数2");
		}
		
		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をもらう、返す 

シンプルな動体検知

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

動体検知判断の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で古い情報と新しい情報の差分を取得する方法のようです。その方法は全く思いつかなかった!!

DBD::mysqlのインストールメモ

PHP/システム関連

2009年04月23日

Movable Typeをローカル環境にインストールしようとした時に躓いたのでメモ。

※私のは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をインストール

MySQLDBD::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
Macが主流になってきました様より引用

ここで 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を解決しなくては。

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

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

1、用意する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完了

mtmysql.jpg

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

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

なぜこのサイトでモノを買ったのか?を考えてみた。

WEBデザインメモ

2009年04月08日

ネットで何かを買う時、何が決め手になるのか?を考えた。ターゲットは「自分」。

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

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

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

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

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

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

詳細情報が豊富。

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

Tシャツを購入した。

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

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

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

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

まとめ

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

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

Flashバナーのデザイン作成時の留意点

FLASH勉強

2009年03月24日

ポータル系サイトなどでよく見かけるFlashバナーですが、バナー制作規定にある「容量(swfファイルサイズ)」にたびたび泣かされます。何も考えずオーサリングすれば必ず容量オーバーするという悪夢。下手すりゃ構成案段階まで逆戻りして作り直しなんてことになるかもしれないので、「構成案とデザイン」時の留意点をメモしておこうと思います。
※オーサリング担当者からデザイン担当者へ向けての留意点という視点で。

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

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

bnrCreate_obj.jpg

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

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

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



■補足

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

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

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

背景を変える

bnrCreate_haikei1.jpg

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

背景を変えない

bnrCreate_haikei2.jpg

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



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

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

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

単色の背景の場合

bnrCreate_gradi2.jpg

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

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

bnrCreate_gradi1.jpg

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




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

< 次の5日分 | 前の5日分>
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付)
クラスで書けるようになった。配列のpushとかspliceとかsliceとかややこしい部分の辞書代わりにも使ってます。XML関係もこれで覚えた。
ActionScript 3.0 アニメーション
vx,Math,cos,sinとか???な数学的な部分をこの本で理解できた気がします。逃げたいジャンルだけどFLASHに必須なジャンルなのよね。。
Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
ActionScript応用への第一歩。ただこれを読む前に入門ノート1を先に読んでおいた方がよさそう。ASの世界が広がった気がする本です。
Flash Creative Workshop
FLASHを始めて右も左も分からない時に救世主となった本。FLASHサイト制作法がなるほど!っと。ActionScriptバリバリの人はスルー。
FLASH OOP for ActionScript 3.0
FLASHの「今の主流」を知ることが出来る本。筆者の方々は総勢10人以上でかつ現在活躍中の方々ばかりなんでミーハー的な読み方もありかも。