カテゴリ別記事リスト秋葉秀樹個人ブログ

女体をwonderflで。

秋葉秀樹 (2010年2月12日 03:55) | コメント(0) | トラックバック(0)

ParticleGirl !? - wonderfl build flash online

ちょっと前の投稿です。
実はこのデータ、POSERを元にLIGHTWAVEでデフォルメしまして、それをPapervision 3Dフレームワークで読み取りました。

頂点のデータだけにしたかったので、全部ポリゴンを外しました。
ああっ、、、ってアホな妄想をしながらColladaファイルに書きだしたんですが、中身を3次元座標データだけにまとめてあとは削除、もはやDAEではなくなって、読み込みソースも自前で作る羽目になりました。

ボディ、髪、オッパイ

この3つの3D座標を別々に読み取り、オッパイ部分は先に向かうほど揺れるようにしてみました。
しかしこれ、結構めんどうなのは、オッパイの先の座標から付け根の座標に向かって、Z座標の配列をソートしないといけなくて、まあ、もっと揺らしたい場合、あるパラメータを書き換えてFORKしてください、妄想しながら。。。
正直気持ち悪いくらい、ぶるんぶるん揺れてたのでわざと大人しくしてしまいました。
だめだなあ、ってか、、バカだなあ。

CSS Nite in OSAKAで三島さんが自己紹介に使っていたアレ

秋葉秀樹 (2009年7月22日 00:39) | コメント(0) | トラックバック(0)

CSS Nite in OSAKA, Vol.17でInVogueの三島さんが自己紹介に使っていた、Webカメラを使って、Flash Playerがバーコードのようなものを読み取り、絵を出していた例のアレ。

やってみなきゃ損だと思って、何から始めよう・・・と思いきや、さくーしゃさんの『FLARToolKit』から勉強しようと思い、チャレンジ。

おおっ！さすがだ！！すばらしい！！
Papervision3Dを触っていて良かった！

でもコレじゃオリジナリティが・・・そうだ！Colladaで3DCGファイルを作るぞ！
幸いLightWave3Dのバージョンが9.5くらいから、Callada出力できるので、早速モデリング開始、わずか3分でモデリング終了！なぜならスライムだから！！今クリアする手前なんだけど・・・（ドラクエ9）

テクスチャも貼っていよいよCollada書き出し！
DAEファイルを一度開いて、<init_from>の中身を相対パスに書き換え、テクスチャとなるJPEGファイルのパスを書き換えて保存。
サンプルファイルのSimpleCube.asにちょっと加えてみます。
DAEクラスを使ってprivate var _slime:DAE;と。

this._slime=new DAE();
this._slime.load("slime.dae");
_slime.scale=20;

くらいにした。相変わらず、モデリングでの寸法は適当です、悪いクセです、CG屋さんに怒られそう。

このスライムのオブジェクトを

_slime.rotationY=180;
_slime.rotationZ=-90;

で、向きを変えてあげる。

slime

わずか10分。
さすが、こんな凄いものを作るさくーしゃさん、恐るべし。もう、感服です。

ActionScript3.0 VectorクラスとdrawTrianglesメソッドを使ってみた

秋葉秀樹 (2009年7月 7日 05:34) | コメント(0) | トラックバック(0)

こちらでも

Flash Player 10に搭載された新機能、Vectorクラス、そして、Graphicsクラスの新メソッド、drawTriangles()で、Photoshopでいう、「指先ツール」のようなものを作ってみた。

そういえば今年の春先、Adobeのセミナーで、Flash Player10の新機能、というかFlashの新機能を紹介してはったなあ・・・なんか、じゅうたんにメッシュをかけて、あれをブラブラ揺らめかせられるんだよ！って、、、そんなこと言われてもユーザはどう使ったらいいか分からないじゃん。。と思いながらも、なんだか妙に印象的で記憶の片隅に残っていた。
ひょっとしてこのことなのかな？
Adobeのデベロッパーセンターサイトで「三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 1 」というタイトルで野中文雄さんがとっても分かりやすく説明しておられるので、ついつい手を出してしまった。

3DCGで最近仕事をしていたので、ポリゴンメッシュは三角形が良い！というのは何となく分かる気がするが、座標、uvマッピングなど、CGの開発者の大変さがコレをやることによって身にしみて分かる気がする。

さて、そのサイトの説明だが、三角形を「Z」型を描くように、左上・右上・左下・右下、とそれぞれX,Y座標を打ってやる必要がある。さらにそれを複数三角形を作る場合は、0,1,2 1,2,3 | 4,5,6 | 5,6,7・・・と隣り合わせの三角ポリゴンをつなぎ合わせてあげなければならない。そしてuv座標を指定する。

ただ、はじめての僕には連続する三角形がどのようにひも付けするのか・・・
ちょっと困惑しましたので、色々試した結果、
複雑で難しいと思われる方へ、、
Mesherクラスというものを作ってみました。
コンストラクタの第一引数に、JPGなどの画像ファイルのURLを。
第二引数に分割数を（サンプルでは32、なので、横、縦それぞれ32分割メッシュ）それぞれ入れて flaファイル側でインスタンス化してください。
よく考えたら、クラスファイルにするんだから、スライドバーとラジオボタンもスクリプトで作るべきだった。
良かったらflaファイルごとダウンロードして使ってください。
Mesher.lzh (884kb) ソース、さらしてみます。

package {

import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import fl.controls.Slider;
	import fl.events.SliderEvent;
	import fl.controls.RadioButton;
	
	public class Mesher extends Sprite {

private var mySprite:Sprite;
		private var myGraphics:Graphics;
		private var myTexture:BitmapData;
		private var vertices:Vector.<Number>;
		private var indices:Vector.<int>;
		private var uvtData:Vector.<Number>;
		private var thread:uint;
		private var dis:uint=10;
		private var mouseOldSpd:Vector.<int>;
		private var slider:Slider;
		private var mouseCircle:Shape;
		private var radioButton:RadioButton;
		private var meshVisible:Boolean;
		private var ins:uint=0;

public function Mesher(url:String , thread:uint):void {
			this.thread=thread;
			mouseOldSpd=new Vector.<int>();
			mouseOldSpd.push(0,0);
			mouseCircle=new Shape();
			addChild(mouseCircle);
			movePosition ();
			var loader:Loader = new Loader();
			loader.load(new URLRequest(url));
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,init);
		}
		
		private function init (e:Event):void {
			slider=parent.getChildByName("brushsize") as Slider;
			radioButton=parent.getChildByName("radio") as RadioButton;
			mySprite = new Sprite();
			myGraphics=mySprite.graphics;
			myTexture=e.target.content.bitmapData;
			meshApper ();//一旦マッピング

vertices = new Vector.<Number>();
			indices = new Vector.<int>();
			uvtData = new Vector.<Number>();
			addChildAt(mySprite,0);
			var _w:Number=e.target.content.width/thread;
			var _h:Number=e.target.content.height/thread;
			
			for (var ja:uint=0; ja<thread ; ja++){
				for (var ia:uint=0 ; ia<thread ; ia++){
				vertices.push(ia*_w, ja*_h);
				vertices.push(ia*_w+_w, ja*_h);
				vertices.push(ia*_w, ja*_h+_h);
				vertices.push(ia*_w+_w, ja*_h+_h);
				}
			}
			
			for (var jb:uint=0; jb<thread ; jb++){
				for (var ib:uint=0 ; ib<thread ; ib++){
					indices.push(ins+0, ins+1, ins+2);
					indices.push(ins+1, ins+2, ins+3);
					ins+=4;
				}
			}

for (var jc:uint=0; jc<thread ; jc++){
				for (var ic:uint=0 ; ic<thread ; ic++){
					var step:Number=1/thread;
					uvtData.push((ic)*step, (jc)*step);
					uvtData.push(((ic)*step)+step, (jc)*step);
					uvtData.push((ic)*step, ((jc)*step)+step);
					uvtData.push(((ic)*step)+step, ((jc)*step)+step);				
				}
			}

meshApper ();
			
			stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler);
			slider.addEventListener(SliderEvent.CHANGE,slideChangeHandler);
			mouseCircle.addEventListener(Event.ENTER_FRAME,mouseCircleHandler);
			radioButton.addEventListener(Event.CHANGE,radioButtonHandler);
		}
		
		function onMouseDownHandler(e:MouseEvent):void{
			stage.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
		}
		
		function onMouseUpHandler(e:MouseEvent):void{
			stage.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
		}
		
		function slideChangeHandler (e:SliderEvent):void{
			dis=slider.value;
			movePosition ();
		}
		
		function radioButtonHandler(e:Event):void {
			meshVisible=!meshVisible;
			meshApper ();
		}
		
		function mouseCircleHandler (e:Event):void{
			mouseCircle.x=mouseX,mouseCircle.y=mouseY;
		}
		
		function enterFrameHandler(e:Event):void {
				myGraphics.clear();
				var spdX:int=mouseOldSpd[0]-mouseX;
				var spdY:int=mouseOldSpd[1]-mouseY;
				
				for (var i:uint=0; i<vertices.length ; i++){
					if(i%2==0 && dis>=(Math.abs(vertices[i]-mouseX))){
							if(dis>=(Math.abs(vertices[i+1]-mouseY))){
							vertices[i]+=(mouseX-vertices[i])*0.1;
							vertices[i+1]+=(mouseY-vertices[i+1])*0.1;
						}
					}
				
				mouseOldSpd[0]=mouseX;
				mouseOldSpd[1]=mouseY;
				}
				meshApper ();
			}
			
		function movePosition ():void{
			mouseCircle.graphics.clear();
			mouseCircle.graphics.lineStyle(1,0x333333,1);
			mouseCircle.graphics.drawCircle(-dis/2,-dis/2,dis)
			mouseCircle.graphics.endFill();
		}
		
		function meshApper ():void {
				myGraphics.clear();
				myGraphics.beginBitmapFill(myTexture);
				if(meshVisible){
				myGraphics.lineStyle(1,0xcccccc,1);
				}
				myGraphics.drawTriangles(vertices, indices, uvtData);
		}
	}
}

web creators7月号には3ヶ所に記事を書きました

秋葉秀樹 (2009年6月22日 16:38) | コメント(0) | トラックバック(0)

エム・ディ・エヌ発行の書籍、「web creators」の7月号には、短期連載記事とトラブルネタ、合わせて3ヶ所（3記事）を書きました。

さらに次号、8月号も執筆しました。こないだやっと校了したんですが、韓国旅行直前の羽田空港から編集部とやり取りするほど結構大忙しでした〜汗
今度は本業に近い！？Photoshopネタを書いています。
また発売されたらブログに書きますね。29日発売予定です。

一つはCSS Niteでもしゃべった内容、「Movable TypeとFlash」の連携記事を92〜93ページに書きました。
なんだか、ActionScriptクラスベースで内容が入門者にはわかりずらいと言われてしまい、セミナーではフレームアクションで書きました。

さらに39ページでは、「イベントターゲットを表示オブジェクトで扱うとエラーになる」というもので、良くあるイベントハンドラで引数にターゲットプロパティをつなげると、DisplayObjectが返って来ないという、経験者にはなんて事無い話ですが、そもそも、Sprite(ターゲット)と書くのとas Spriteとつなげるこの違いってなんなの？っていうマニアック（そうでもないか...）な事を書いてます。

そして59ページでは、「フォルダ内のASクラスがエラーも出さずに実行もしない」を書きました、結局AS3ネタばっかりになっちゃいましたが、要は、ある間違いでエラーも実行もしないので気持ち悪かったので書きました。

CSS Nite in OSAKA, Vol.16 フォローアップ【秋葉秀樹】

秋葉秀樹 (2009年6月11日 12:59) | コメント(0) | トラックバック(0)

photo by おかだよういち http://s-style-arts.info/

6月9日、ロックの日に魂の叫びが（日頃のうっぷんが）爆発！アップルストア心斎橋で行われた、CSS Nite in OSAKA, Vol.16にワタクシ、秋葉秀樹が出演してきました。

何と大阪版始まって以来のアップルストア心斎橋での動員数、160人を突破したこのイベント、ついに無料版マンスリー終結を迎えました。多くのご来場、まことにありがとうございました。

今回私のトピックは「脱！やらず嫌い『MovableType×Flashでつくるフォトアルバム』-ノンプログラマ編-」（いつもながら長いタイトルだ・・・）と題しまして、web creators 7月号に寄稿した、MTとFlash連携での記事を、もっと入門者向けに設定してご説明、あと、ActionScriptのライブコーディングを行いました。

スライドはこちらからご覧いただけます。 http://www.akibahideki.com/blog/cssnite/cssniteosaka_16_akiba.pdf （PDF形式：8.6MB）

今回は最終回という事で、『アップルストアにぶっちゃけ、聞きたい事がある！』と、「オレたちロックだもんね♥」的なノリでストアの上島さんに「みんなも聞きたい質問」をぶつけました。来場者のみなさん、いかがだったでしょう？

ライブコーディングした内容です、執筆内容はActionScriptクラスファイルでしたが、フレームアクションで今回は書きました。

var yamada:URLLoader=new URLLoader();
//おーい山田君！
yamada.load(new URLRequest("http://works.akibahideki.com/web_creators/flash.xml"));
//山田君、外部のXMLをローディングしてよ！
yamada.addEventListener(Event.COMPLETE,init);
//山田君、XMLローディングが終わったらinitを呼んでね。

function init(e){//呼ばれるinitって関数
	var xml:XML=XML(yamada.data);
	//yamada.dataで、XMLの内容が全部返ってくるよ、変数xmlに入れとこっと
	for each(var oneEntry:XML in xml.entry){
		//繰り返し処理だ！1記事ずつ、<entry>タグごと抜いて変数oneEntryに入れよっと
		var sasaki:Loader=new Loader();
		//おーい！Loader部署の佐々木君〜
		sasaki.load(new URLRequest(oneEntry.picture.span.a.img.@src));
		//佐々木クーン、画像のURLが分かったから、jpeg画像をロードしてよ
		sasaki.contentLoaderInfo.addEventListener(Event.COMPLETE,loaded);
		//佐々木君、画像が読み終わってから次の処理、loadedを使ってね。
	}
}

function loaded(e:Event):void{//画像が読み込み終えたら・・・
	var photo:Loader=Loader(e.target.loader);
	//読んだjpeg画像を変数photoに入れとこ。
	addChild(photo);
	//さて、この場所（アクション書いてる場所）に表示だ！
	photo.x=Math.random()*550;
	//横軸X座標の乱数出して、（0から550pxの乱数）ランダム配置だ！
	photo.y=Math.random()*400;
	//縦軸Y座標の乱数出して、（0から400pxの乱数）ランダム配置だ！
	photo.rotation=Math.random()*360;
	//角度も乱数出して、（0から360度の乱数）ランダムな傾きだ！
}

web creators寄稿記事をCSS Nite in OSAKA, Vol.16でやります

秋葉秀樹 (2009年6月 2日 04:21) | コメント(0) | トラックバック(0)

連載の今回は3記事を寄稿しました。
で、6/9のCSS Nite in OSAKA@アップルストア心斎橋では、私、秋葉秀樹が出演します。
http://osaka.cssnite.jp/

内容は執筆記事をライブコーディングします。

なぜなら、ActionScriptクラスファイルの記事を書いていますが、入門者にはクラスの概念が分かりずらいということで、フレームアクションで書きながら一部をご説明って感じにします。

MTで書き出されたXMLをFLASHで読み込み、サムネイルをロード、表示まで、実際みなさまの前でActionScriptを書いて実行してお見せしながら解説します。

ただ、経験者にはツマラン内容となること間違い無し！です。

実行サンプルはこちらです、
http://works.akibahideki.com/web_creators/mt_flash.html

どうかよろしくお願いします。

SketchUpでPapervision3D

秋葉秀樹 (2009年3月19日 03:40) | コメント(0) | トラックバック(0)

↑↑↑読み込みに結構時間がかかります。

無償版で提供されているGoogle SketchUpを使って試してみました。
直感的に操作が出来て、直線的な3Dオブジェクトなら割と楽に使えそう・・・・と思いきや、完成し、書き出したらコレがちょっと微妙〜（さらに研究中）。

というわけで、今日はSketchUpで書き出したColladaファイルを普通にDAEクラスで使うという流れで進めていきたいです。（Sketchupクラスは調べてからにします。）

なお、このエントリーは4月に行われる勉強会「splaaaash! Vol.3」の予告編・・・だと思っておいて下さい。

まず、SketchUpを起動します。

そうするとこんな画面が

定規、邪魔ですね、選択してデリートします。

そして、四角形を書いてしまいます。

簡単に押し出せちゃいました。

その中に四角形を書いて、その大きさでくり抜くということも出来ます。

門を作ります、これもくり抜いちゃいます。

「写真を照会」コマンドで一気にJPG画像を貼付けるシーンです。
これで一旦書き出してみましょう。

↓フラッシュ上。いいんじゃないでしょうか。 ^O^

さらに直方体を作り・・・・

「写真を照会」で大理石を貼付けました。

曲線で切り込みを入れることも、押し出すことも出来ます。

看板でも作っとくか〜〜

さて、書き出しです。
「ファイル」→「書き出し」→「3Dモデル...」でこの画面。一旦kmz形式で書き出しました。

そのままだと、圧縮されたままなので、これを普通に解凍します、写真ではStuffIt Expanderへドラッグアンドドロップ！！するとdaeファイルやimagesフォルダの中には、テクスチャがしっかり分けて入れられてます。
ただ、これをswfファイルが読める場所に置かないといけないから、ちょっと、場所移動します。

あと、daeファイルの中身のファイルパスを書き換えてあげないといけないので注意が必要でした。

それでは結果は・・・ドキドキ。

あ、あれ？テクスチャが・・・・
続きは次回京都の「splaaaash!! Vol.3」で、みんなで遊びましょうっ。
ご予約はまもなく募集開始しま〜す。
ひとまず、mixiコミュニティー上から募集開始なので、
http://mixi.jp/view_community.pl?id=3997728
まで、コミュ参加をしておいて下さい〜〜。

詳細はそこからお伝えさせていただきますので！、ではお疲れさまでしたっ！！

getDefinitionByName()、定義されていないクラス名（ActionScript）

秋葉秀樹 (2009年2月21日 00:47) | コメント(0) | トラックバック(0)

動的なクラス名で参照する場合に使うgetDefinitionByName。
例えば、こんな感じ。

クラス名が「Class1〜Class30」みたいに連番になっている場合。
ループ処理で参照したくなる。

ところが、そもそもgetDefinitionByNameとは、swf内で定義されていないクラス名を参照しようとすると・・・

『　ReferenceError: Error #1065: 変数 Class1 は定義されていません。
at global/flash.utils::getDefinitionByName()　』

などと、怒られてしまう。

なんだ？と思いきや、結局リファレンスに書いてあるような

getDefinitionByName("flash.display.Sprite") as Class;

というのは、元々「flash.display.Sprite」が存在しているから、走るのです。

つまり、ActionScriptファイルであれば、しっかりとimportしてないもの、定義されてないものに関してはgetDefinitionByNameを使ったところで意味がなく、結局どこかでクラス名を定義しないといけないようです。

で、どう書くか・・・・？

こう書いたら動きました。なんか納得いかない！！

こんな書き方でいけるんだ。

splaaaash!! vol.2　みんなでPapervision！！！ inデジハリ大阪校

秋葉秀樹 (2009年2月 9日 23:20) | コメント(0) | トラックバック(0)

カーソルキーの　←　と　→　で、目線も変わるよ
まずは画面を1回クリックしてね

2009年2月22日（日）、17〜21時までの予定で行われる『splaaaash!! vol.2』のハンズオン体験講座！
デジタルハリウッド大阪校の全面協力によって、無料ハンズオンセミナーが実現しました。
http://mixi.jp/view_community.pl?id=3997728

せっかくいっぱい集まったから、ノンプログラマー、ノンスクリプター同士みんなで何か一つのモノを作るってのもオモシロいかもなって思って、Papervision3DのCubeクラスを使って、Photoshopなどと組み合わせてフラッシュを作ってみようと思っています。

続きを読む: splaaaash!! vol.2　みんなでPapervision！！！ inデジハリ大阪校

イラレからSVG形式で保存してPapervision3Dで読み込む

秋葉秀樹 (2009年1月30日 19:27) | コメント(0) | トラックバック(0)

Adobe Illustrator CS3から書き出したベクターデータ（svg形式）がvectorvisionで読める！papervision3Dで動かせる。すごい、軽くてきれいだし（ベクターだから当たり前か）割と簡単だったので、メモしときます。

画像は僕が主催で行っている、謎のクリエイター集団の勉強会、『Splaaaash!』のロゴマーク。
デザインはtommmmmmmmyさん。
次回の勉強会は2月、デジタルハリウッド大阪校で。

続きを読む: イラレからSVG形式で保存してPapervision3Dで読み込む

カテゴリ別：「Flash AS3 学習」の一覧