Flash AS3 学習

マウスにゆっくりついてくるムービークリップ

2008年7月10日 10:59

var speed:Number=3;//変数定義、値は大きければ大きいほど遅くなる

my_mc.addEventListener(Event.ENTER_FRAME,myEnterFrame);

function myEnterFrame(event:Event):void{ 

var targetMC:MovieClip=MovieClip(event.target);//一旦ターゲットされているMCを変数定義

targetMC.x+=(stage.mouseX-targetMC.x)/speed;//X軸に差分を追加

targetMC.y+=(stage.mouseY-targetMC.y)/speed;//Y軸に差分を追加 

}

今のこの瞬間に位置しているムービークリップとマウスの位置を引いて、その差を毎フレームを変数speedの数だけ割る、結果徐々に間隔が狭くなります。

マウスにゆっくりついてくるムービークリップの続きを読む

マウスに慣性を持った動きで付いてくるムービークリップ

2008年7月10日 23:53


var spd:Number=0.55;

var moveX:Number=0;

var moveY:Number=0;



my_mc.addEventListener(Event.ENTER_FRAME,myEnterFrame);

function myEnterFrame(event:Event):void {

	var targetMC:MovieClip=MovieClip(event.target);//一旦ターゲットされているMCを変数定義

	moveX+=(stage.mouseX-targetMC.x);

	moveY+=(stage.mouseY-targetMC.y);

	moveX*=spd;

	moveY*=spd;

	targetMC.x+=moveX;

	targetMC.y+=moveY;

}

まるでゴムで引っ張っているような動きを見せるには、一旦X,Y座標ともに目的地までの座標との差分を変数に代入したあとに、ある数字を乗算してしまうと、目的座標を飛び越え、戻ろうとする。

マウスに慣性を持った動きで付いてくるムービークリップの続きを読む

ActionScript3.0,バネの動き、応用

2008年9月11日 02:55

ちょっと前の慣性を持った動きの応用で、四角形の四隅にマウスイベントを持たせて、ドラッグで引っ張られて戻るとき「ボヨヨン」なバネの動き。
今回はクラス分け。

『MyPoint.as』、『PointEvent.as』、『BasicSpring.as』の3ファイル。
先にスプライトをインスタンス化しておいて、それをコンテナにした上で、1フレーム目に・・・

で呼び出します。

MyPoint.as ↓↓↓↓↓↓↓↓↓

PointEvent.as ↓↓↓↓↓↓↓↓↓

package {
	import flash.display.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;

public class PointEvent {

private var sprite:MyPoint;
		private var base:DisplayObjectContainer;
		private var o_point:Point;
		private var spd:Number=0.5;
		private var moveX:Number=0;
		private var moveY:Number=0;

public function PointEvent(sprite:MyPoint) {
			this.sprite=sprite;
			base=sprite.parent;
			o_point=sprite.originalMyPoint;
			sprite.addEventListener(MouseEvent.MOUSE_OVER,mouseHit);
			sprite.addEventListener(MouseEvent.MOUSE_OUT,mouseHitout);
			sprite.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
			sprite.stage.addEventListener(MouseEvent.MOUSE_UP,dragStop);
		}
		private function mouseHit(event:MouseEvent):void {
			sprite.alpha=0.5;
		}
		private function mouseHitout(event:MouseEvent):void {
			sprite.alpha=1;
		}
		private function dragStart(event:MouseEvent):void {
			base.addEventListener(Event.ENTER_FRAME,xEnterFrames);
		}
		private function dragStop(event:MouseEvent):void {
			base.removeEventListener(Event.ENTER_FRAME,xEnterFrames);
			base.addEventListener(Event.ENTER_FRAME,returnEnterFrame);
		}
		private function xEnterFrames(event:Event):void {
			var globalPoint:Point=new Point(sprite.x,sprite.y);
			sprite.x+=((base.mouseX)-sprite.x)/2;
			sprite.y+=((base.mouseY)-sprite.y)/2;
		}
		private function returnEnterFrame(event:Event):void {
			var globalPoint:Point=new Point(event.target.x,event.target.y);
			moveX+=((o_point.x)-sprite.x);
			moveY+=((o_point.y)-sprite.y);
			moveX*=spd;
			moveY*=spd;
			sprite.x+=moveX;
			sprite.y+=moveY;

if (sprite.localToGlobal(globalPoint).x==o_point.x && sprite.localToGlobal(globalPoint).y==o_point.y) {
				base.removeEventListener(Event.ENTER_FRAME,returnEnterFrame);
			}
		}
	}
}

BasicSpring.as ↓↓↓↓↓↓↓↓↓

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;

public class BasicSpring {

private var container:Sprite;
		public var sprite:Sprite;
		public var myArray:Array;

public function BasicSpring(container:Sprite) {
			this.container=container;
			sprite=new Sprite();
			container.addChild(sprite);
			init();
			sprite.x=container.stage.stageWidth/2-sprite.width/2;
			sprite.y=container.stage.stageHeight/2-sprite.height/2;
		}
		public function init():void {

var pin1:MyPoint=new MyPoint(0,0);
			sprite.addChild(pin1);
			pin1.x=getPoint(pin1).x,pin1.y=getPoint(pin1).y;
			var listener1:PointEvent=new PointEvent(pin1);
			var pin2:MyPoint=new MyPoint(100,0);
			sprite.addChild(pin2);
			pin2.x=getPoint(pin2).x,pin2.y=getPoint(pin2).y;
			var listener2:PointEvent=new PointEvent(pin2);
			var pin3:MyPoint=new MyPoint(100,100);
			sprite.addChild(pin3);
			pin3.x=getPoint(pin3).x,pin3.y=getPoint(pin3).y;
			var listener3:PointEvent=new PointEvent(pin3);
			var pin4:MyPoint=new MyPoint(0,100);
			sprite.addChild(pin4);
			pin4.x=getPoint(pin4).x,pin4.y=getPoint(pin4).y;
			var listener4:PointEvent=new PointEvent(pin4);

myArray=[pin1,pin2,pin3,pin4];
			drawGraphics();
			container.addEventListener(Event.ENTER_FRAME,xDrawEnterFrame);
		}
		private function drawGraphics():void {

sprite.graphics.clear();
			sprite.graphics.beginFill(0x666666,1);
			sprite.graphics.moveTo((myArray[0]).x,(myArray[0]).y);
			sprite.graphics.lineTo((myArray[1]).x,(myArray[1]).y);
			sprite.graphics.lineTo((myArray[2]).x,(myArray[2]).y);
			sprite.graphics.lineTo((myArray[3]).x,(myArray[3]).y);
			sprite.graphics.lineTo(myArray[0].x,myArray[0].y);
			sprite.graphics.endFill();

}
		private function getPoint(pos:MyPoint):Point {
			return pos.originalMyPoint;
		}
		private function xDrawEnterFrame(event:Event):void {
			drawGraphics();
		}
	}
}

Box2DFlashAS3 2.0.1 を使ってFlashブログ

2008年9月12日 12:38

↑↑写真をダブルクリックしてください。

物理ライブラリ、Box2DFlashAS3 2.0.1を使ったフラッシュブログを作ってみました。
今は一覧の写真をダブルクリックするとタイトル、コメント、写真だけが表示されますが、もうちょっと工夫をこらしてみたいと思います。
ちなみにこのブログ記事の内容はMovableType4用に作っていますので、3だと、ちょっと仕様が違うので、検討が必要かな？
というのも、画像をアップロードした時の吐き出しタグ、画像の原寸とは別にサムネイルをMTが作ってくれるので、それを利用しない手は無い！と思って、デフォルトで吐き出されるソースを利用すれば、ユーザはわざわざサムネイルを別途作る必要も無いので、以下のソースをそのまま利用します。

以下がMovableTypeが吐き出すアップロードした画像のソースコード


<form mt:asset-id="148" class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="ここに原寸の画像のURLが吐き出される"><img alt="alt属性" src="ここにサムネイルの画像のURLが吐き出される" class="mt-image-none" style="" height="サムネイルの縦サイズ" width="サムネイルの横サイズ" /></a></form>

AS3側でXML分析に使うスクリプトの一部


public function parse():Array{
			var total:uint=xml.entry.length();
			〜中略〜
				MTArray[i].push(xml.entry[i].picture.span.a.img.@src);
				MTArray[i].push(xml.entry[i].picture.span.a.@href);
			〜中略〜
			return MTArray;
		}

xml.entry[i].picture.span.a.img.@src・・・でサムネイルのURL
xml.entry[i].picture.span.a.@href・・・で原寸画像のURL

AS3になってからXMLデータの絞り込みが楽になりました、ただ、気をつけないといけないのは、こういったHTMLソースをXMLファイルの中に入れて管理する場合は、Flashブログ用の言語はXHTMLをおススメします。
HTML 4.01以前の場合だとXML解析エラーが起こる場合があります。
それは<br><hr><img>といった「空要素」は、終了タグを省略しているのでAS3ではエラーが起きます、例えば<img>で始まって終了タグが無い場合、コンパイルエラーで『</img>が必要』みたいな事を言われます、なのですが、XHTMLのように、『<img />』なら問題ないので、こういったケースの場合、おススメというよりむしろXHTMLにするべきと言えるでしょう。

AS3 リンケージでクラスをSpriteにすると．．．(Flash ActionScript3.0 学習)

2008年9月17日 02:51

Flash ActionScript3.0で、リンケージでクラス化したシンボルの「基本クラス」いわゆるスーパークラスをデフォルトだとflash.display.MovieClipだけど、わざとflash.display.Spriteにしてみた。
このシンボル、Spriteがスーパークラスになったので、タイムラインにムービーを入れたから当然エラーが起こるかな？って思ってパブリッシュしました。
ところが意外に、エラーは無く、ただ、止まっている状態です。
おそらく、Spriteクラスなのでタイムライン機能が存在しないため、1フレーム目があってもいけないと思いますが調査してみよう。
単純に入れ子になったという意味ではDisplayObjectContainerの機能だけで充分だが、同名で基本クラスでリンケージできないです、MovieClipに戻ります。

AS3 リンケージでクラスをSpriteにすると．．．(Flash ActionScript3.0 学習)の続きを読む

WiiリモコンとFlash AS3でドラムプレイ！

2008年9月30日 14:29

今までチャレンジしてことごとく失敗したWiiリモコンとWiiFlashServerの連携ですが、MacBook Proを使う場合ウマく情報が受けられなかった点には理由があって、どうやらシステム環境設定のbluetoothにリモコンが登録されたりしてはダメだという点に今まで気がつかず、DarwiinRemoteも起動してないことが条件だったりします。
しかしこのドラムセット、まだテストしているので、スネアとハットのみ、それも右手のリモコンがハット、ヌンチャクがスネアを鳴らしているだけのお試し状態。
しかし結構、これだけでも楽しめます、昔バンドでドラムを叩いていたときを思い出したけど、このリモコンの振ったタイミングが鳴るタイミングと見事にずれてしまうし、2度鳴りを起こして、ギターのエフェクターでいう「フランジャー」みたいな気持ち悪いスネアになってしまう。でも、これでリモコンと連動できるようになったので、創作活動にやっと入れます。
まずはWiiFlashの独自のクラス、メソッド、プロパティを憶えるという地味なところから行きます、待っててね。（ちなみに写真ではフラッシュが立ち上がっていて、スネアとハットを鳴らしてます、音は外部ファイルを読んでます。）ちなみに以下がテストコードです。（適当な手抜きです、すいません）
フレームアクションにて

import org.wiiflash.Wiimote;
import org.wiiflash.events.ButtonEvent;
import org.wiiflash.events.WiimoteEvent;

var myWiimote:Wiimote = new Wiimote();

myWiimote.connect();
var snare:Sound=new Sound();
snare.load(new URLRequest("sound/snare.mp3"));

var hat:Sound=new Sound();
hat.load(new URLRequest("sound/hihat.mp3"));

var limitNunC:Number=0;
var limitRemo:Number=0;
myWiimote.addEventListener(WiimoteEvent.UPDATE,onUpdated);

myWiimote.addEventListener( WiimoteEvent.NUNCHUK_CONNECT, onNunchukConnected );
myWiimote.addEventListener( Event.CONNECT, onWiimoteConnect );
myWiimote.addEventListener( IOErrorEvent.IO_ERROR, onWiimoteConnectError );

function onNunchukConnected( pEvt:WiimoteEvent ):void {}

function onNunchukDisconnected( pEvt:WiimoteEvent ):void {}

function onCEvent( pEvt:ButtonEvent ):void {}

function onZEvent( pEvt:ButtonEvent ):void {}

function onCloseConnection( pEvent:Event ):void {}

function onWiimoteConnectError( pEvent:IOErrorEvent ):void {}

function onWiimoteConnect( pEvent:Event ):void {}

UMapでGoogleEarthみたいなレンダリングバー

2008年10月 7日 20:10

ActionScript 3.0の地図ライブラリ・・じゃなくて、コンポーネント、『UMap』。とても便利そうだし、表示させるだけならそんなに難しくないです。ただ、ダウンロードして使えるので、チャレンジしてみました。

これ、もしかしたらこんなタイトル入れていて、もしそういったクラスがあればすごい恥ずかしいんですが、GoogleEarthみたいなレンダリングバーが出来たら、仕事などで実装する場合、ユーザの目線で見たらいい感じなんじゃないかな？と思って。
やっぱり、待ってる間、タイルが出っぱなしだとカッコ悪いような気がして。

コンポーネントをダウンロード

ダウンロードしたら、Adobe Extention Managerで機能を拡張します。
そのあたりは書籍Flash OOP for ActionScript 3.0にも掲載されてました、ご一読をおススメします。

さて、一旦UMapコンポーネントをステージにドラッグして消して（ライブラリに登録して）すぐに表示される。簡単で、申し訳ないくらいです・・
しかも座標はGoogleMapと一緒だし、だからhttp://www.geocoding.jp/で分かるし。

ローディングイベントはMapLoadEventで！

LoaderInfoクラスを使ったProgressEventと同じ感覚です。
event.bytesLoadedの代わりにevent.currentTile
event.bytesTotalの代わりにevent.totalTiles
タイルなんですね！よく出来てる！！と思います。
なので、パーセンテージを調べるにはevent.currentTile/event.totalTilesでいいんですね。

UMapでGoogleEarthみたいなレンダリングバーの続きを読む

Papervision 3Dで浮遊するCSS Niteのロゴマーク

2008年10月 8日 03:07

Special Thanks CSS Nite様

Flash上で3Dレンダリングを行ってくれる有名なライブラリ、Papervision3D 2.0 Alpha - Great Whiteで、複数のPlaneのサブクラス、WiiPlane(!?)を配置して泳ぐように浮かんでいるCSS Niteのロゴマーク。
Papervision3D 2.0 Alpha - Great Whiteでは、BasicViewというクラスが存在しています、便利なんでしょうが、詳しく調べると、AbstractViewクラス、さらにその親クラスのSpriteを継承しているようです。
で、色々なサンプルを拝見させていただきましたら、いきなりsceneにprimitivesパッケージ内のオブジェクトをaddChildしているので、いったいどこでインスタンスを作ったんだ！？と悩んでいたんですが、AbstractViewクラスを確認してなかったですね、しっかりと

なんて書いてありますね、確認確認・・と。
なので、sceneという3D空間にPlaneのサブカスタムクラス、WiiPlaneクラスのインスタンスをaddChildしてます。
ロゴマークは外部ファイルとして置いていますので、BitmapFileMaterialクラスを使って外部ファイルを読み込みします、ただ、Cubeオブジェクトは6面体なので、MaterialsListを使わないといけないみたいです。
そんな訳でソースコード。

『CSSNite3D.as』

package {
	import flash.display.*;
	import flash.events.*;
	import org.papervision3d.view.*;
	import org.papervision3d.materials.*;
	import org.papervision3d.objects.primitives.*;

public class CSSNite3D extends BasicView {

var planeArray:Array=new Array();
		var plusRote:int;
		var r:int=1000;
		var total:int=10;
		var rad:Number=360/total;
		var cameraRote:Object={x:0,y:0,z:0};
		var wiiVelocity:Number=100;

public function CSSNite3D() {
			var material : BitmapFileMaterial = new BitmapFileMaterial( "./BoardView_img/logo_cssnite.png" );
			material.oneSide=false;
			//material.smooth = true;

for (var i:int=0; i<5; i++) {
				planeArray.push(i);
				planeArray[i]=new Array();
				for (var v:int=0; v<total; v++) {
					var board:WiiPlane = new WiiPlane(v,material,500,85,1,1,null);
					scene.addChild( board );
					planeArray[i].push(board);
					board.x=r*Math.cos(rad*v);
					board.y=r*Math.sin(rad*v);
					board.z=i*1000;
					board.rotationZ=Math.atan2(board.y,board.x)*180/Math.PI;
				}
			}
			camera.focus=100;
			startRendering();
		}
		override protected function onRenderTick(event:Event=null):void {
			for (var i:int=0; i<5; i++) {
				for (var v:int=0; v<total; v++) {
					planeArray[i][v].x=r*Math.cos((rad)*v+planeArray[i][v].plus()*Math.PI/180);
					planeArray[i][v].z=r*Math.sin((rad)*v+planeArray[i][v].plus()*Math.PI/180)+i*1000;
					planeArray[i][v].rotationY=Math.atan2(planeArray[i][v].y,planeArray[i][v].x)*180/Math.PI;
				}
			}
			cameraRote.x+=5;
			cameraRote.y+=5;
			cameraRote.z+=1;

camera.z = -1000+r*Math.tan(cameraRote.z*Math.PI/180);
			camera.y = -2000+r*Math.cos(cameraRote.y*Math.PI/180);
			camera.x = 2000+r*Math.sin(cameraRote.x*Math.PI/180);
			super.onRenderTick(event);
		}
	}
}

『WiiPlane.as』

ところで、なぜ、『WiiPlane』？？

Wiiと来たら！？

果たして、CSS Nite in Osakaまでに間に合うかどうか・・・。

※CSS Nite様のロゴの使用を許可していただきました、本当にありがとうございました。

CSS Nite in Osaka, Vol.12 終了（秋葉秀樹）/ スライド公開

2008年10月16日 03:08

本日アップルストア心斎橋にて行われました『CSS Nite in Osaka, Vol.12』に出演してきました。
皆様のご清聴のお陰で無事、セッションを終わらせる事が出来ました。平日の割には予想を上回る大勢の方にご参加いただきました。

ノンプログラマーとして、ノンプログラマーへのプレゼン的のようなActionScript 3.0のセッションでした。
プレゼン音声資料に関してはこちらもご参考ください。

足りないサンプルファイルがありましたので、現在選別して公開させていただいております、特に『写真アルバム』のAS3サンプルファイルがないというお声をいただいております、近日、必ずアップします。

あと、補足ですが、スライド内では『変数の型指定』については省略させていただきました。お配りした用紙をご参照ください。

撮影：岡田陽一

色々なご意見をいただきました。

「脱・やらず嫌い！Flash ActionScript3.0 入門以前編」アンケート統計結果

スライドを公開させていただきます。

スライド『「脱・やらず嫌い！Flash ActionScript3.0 入門以前編」swfファイル 8.1MB』はこちらから

折り込みプリントが足りなくて、お届け出来なかった方、入ってなかった方、PDFファイルで、公開させていただきます。
どうぞ、ご活用くださいますよう、よろしくお願い申し上げます。

折り込みに僕のプリントが入ってなかった方はこちら。PDF形式でダウンロードいただけます。

皆様のお声をまとめて、お返事させていただきました。

AS3から始めてもいいかな、と思うような内容でした	それで良いですよ！
感覚的にわかりやすい内容でした！つれが光GENJIのカー君に似てると言ってました。	むかしはジミー大西似だったんだけどね（笑）
スピードが速かったのもあってなかなか難しかった	反省点、ご意見参考にさせていただきます。
詳しく知りたい	またご一緒に勉強したいですね。
これを機に始めてみようと思いました。	僕にも始まりがありました、いいきっかけになれば良いのですが・・
やる気が出てきました。写真ブログのトップ作りたいです。	上達の半分はモチベーションかもしれません。
もっと聞きたかったです。	もっとしゃべりたかったです（苦笑）
入門講座にもっと参加したいと思います	僕にも出来る事があれば良いんですが・・
AS3の特徴の良く分かる解説だったと思います。	ちょっとマンガちっくだったんですがね〜
AS3の文法がどのようになっているか少し分かったと思います	スライドでは「型指定」を省略してます。お配りした用紙をご確認ください。
AS3勉強します！！でもすごく分かりやすかったです。	僕もお役に立てるよう、情報を増やします。
面白かった～中略～でも遊びよりお客さんに出せることを見たいですね。	遊び過ぎでしたね（汗）実用的な内容も欲しい、、確かに。
一度頑張って勉強してみます。	はい！何度でも！！
もっと聞きたいです。	何か機会を作りましょうか・・。
使ってみようと思います	じっくりあきらめずに。
これから勉強しようと思えました	それだけでこのセッションは大成功です。
プレゼンが分かりやすかった	かなり初学者に目線を向けました、本当はもっと盛り込みたかったんですが・・
てんこもりでよかったです。	最初はもっとてんこもりだったんですよ！
勉強します	がんばって！
やっぱりちょっと難しかったかも、でも話は分かりやすかったです。	そうですか、反省してさらにプレゼン能力を高めたいと思います、ご意見ありがとうごさいます。
HTML5+JavaScriptの動きも気になります	最近はJavaScriptを使ったリッチなサイト、流行ってますね、すごくいいと思いますよ。
スピード感があったけれど難しかった	なるべく早口にならないように、と、臨みましたが、今後の反省点と参考にさせていただきます。
何となく分かって挑戦してみようと思いました。	あせらずにやってみてください。
どんなものか一度触ってみたいです	興味をもつことも大事ですね、簡単なものから触ってみてください。
挑戦します！！	チャレンジ精神で！
もうちょっと踏み込んだAS3が聞きたかった、しかし入門であれば高いハードルが低く感じられるものでした。	そうなんですよ！あくまで「入門以前編」ということで、ご理解いただけたらと思います。
一度離れましたがこれを機会にトライしてみたい	そうですか、ぜひトライしてみてください。
少し難しかったので帰ってデモを触ってみようと思う	スライドだけだとなかなか難しいかもしれませんね、ぜひ手を動かして触ってみてください。
最近流行のライブラリについて聞けてよかった	ほんの一部、さわりだけでしたね。
2～3時間くらいのPCありの講座があったら行きたい	検討させてください。
ピンチになったら秋葉さんのスライドを読み直そうと思いました	あと、サンプルとお配りした用紙も見直してみて下さいね。

イメディオセミナーの講師をさせていただきます。

2008年10月21日 12:24

2008年11月26日（水）にアジア太平洋トレードセンター（ATC）内ITM棟6階　PCトレーニングルームにて、「『脱・やらず嫌い！』デザイナーのためのFlash ActionScript 3.0 ノンプログラマー編」という、CSS Nite in Osakaのセッションと似たタイトルで、セミナー講師をつとめさせていただきます。

主に、イベント取り扱いや表示オブジェクトの基礎操作、外部ローディング方法、XMLとの連携などの基礎的動作を実際にPCを触りながら体験しながら学べる内容となっております。

ただ、お堅い内容ばっかりでは面白くないから、この間CSS Nite in Osakaでお見せした、
『Papervision3DとWiiリモコンで遊んでみよう！』
という内容を『番外編』としてカリキュラムに入れました。
こちらもちょっとだけ、AS3を使ってWiiFlashServerと連携させてWiiリモコンのイベントを受けて『楽しむ』というお時間も設けようと思っております。

簡易だけど、初心者には濃い秋葉手作りのテキスト付きです。

なるべく楽しく、かつ、しっかりと学べるセミナーにしたいと思います。
今回の講義の受講スキルとしては、ASそのものが未経験、プログラミングにハードルを感じているデザイナー職の方など、Flashはアニメーションしか出来ないという初級入門編というレベルの方対象です。

詳細とお申し込みはイメディオのサイトから。
http://www.sansokan.jp/events/eve_detail.san?H_A_NO=09033

Papervision 3Dでシンプル立体迷路を作る勉強

2008年10月28日 20:15

カーソルキーで動かしてください。

あんまり複雑にならないように、立体迷路を作ります。

XMLを読んで、地図を解析する。
XML通りに壁を作っていく（Cubeクラス）
Cubeオブジェクトに貼るマテリアル（テクスチャ）には取り急ぎ1枚の画像で間に合わせる。
移動キャラにはこちらもまずは紙飛行機オブジェクト（PaperPlane）を使う
紙飛行機はカーソルキーで左右に向き（角度）を変える
紙飛行機の移動はカーソルキー上下で行う
カメラが紙飛行機の後を追従していく
カメラは角度も紙飛行機の方角を狙い続ける
紙飛行機が壁に衝突したらそれ以上進まないようにする

まず、XMLの読み方としては、多くの方がEventDispatcherクラスを継承したXMLを読み込み完了したイベントを知らせるクラスを経由した後に解析する事が多いですが、ひとまず簡単に省略してしまいました。

外部に配置されているXMLファイルはこんな感じです。

0が通路で1が壁。それだけで試してみます。
一度Scene3Dクラスでシーンを作成してカメラはCamera3Dクラスを使います。
Viewport3Dではレンダリングする範囲などを決定させるために、第1,2引数にはステージサイズを入れておいて画面いっぱいを表示範囲にしてしまいましょう。この3つのオブジェクトはレンダリングする時に必要な要素になります。

さて、それらをレンダリングするエンジンとなるオブジェクトを作成するためにBasicRenderEngineクラスを使う、先ほどの3つのオブジェクトはこれによって関連付けられます。

DisplayObject3DクラスのインスタンスrootNodeを一つ作ったら、その中に『表示3Dオブジェクト』を入れてあげると階層3D空間を作る事が出来ます。

インスタンスrootNodeの中に紙飛行機PaperPlaneクラスのインスタンスをaddChild、さらにXMLを読み終わったら解析をして、配列にCubeオブジェクトを作成しながら、こちらもインスタンスrootNodeにaddChildさせるだけです。

Cubeオブジェクトの場合テクスチャを貼る場合は他クラスとちょっと違ってMaterialsListで各面に何を貼るか？を設定出来るのですが、複雑さを避けるため全面同じ画像を貼ります。

あとは、2重ループで1個づつCubeを配置してずらしていきます、このとき、出来たらXMLで書いた通りの順番に配置していきたいので、for文はデクリメントで回していきます。
csvデータの様に、カンマ（,）区切りなので、splitして配列に直していきます。
6列×5行なので、合計30回のループですね。

後で衝突判定用に別途配列wallArrayを作成して、マスが0の場合通路なので、Cubeは作らずに

wallArrayにはnullを代入します。

カメラがターゲットの向きを向きっぱなしにしたいため、三角関数atan2を使ってやっと出来たんですが、Papervision 3Dにはカメラにtargetって便利なプロパティがあるのを知らず、一生懸命計算してました。

衝突判定でまずやるべき事は、紙飛行機にどの壁（Cube）が当たっているか、とりあえず最も簡単なやり方、hitTestObjectメソッド（物理的にはこれではいけない場合もあるかもしれません）でいきます、先ほど作り直した配列内のCubeに総当たりで衝突判定をします。if文の条件ですが、配列にはCubeかnullが入っているため、まず配列に入っているオブジェクトの型はCubeなのか（nullじゃ無いのか）、それと、そのCubeが紙飛行機と衝突しているか、この2つがtrueの場合のみ、変数hitWallBlockに当たってるCubeを代入して、degreeLimitterメソッドを実行し、breakでそこでループ処理を中断します。

今回の移動制限の方法として、まず三角関数Math.atan2によって、紙飛行機と衝突している壁の距離が解るので、そこから2者の角度を出して180度逆の方向をはじき出します。
通常の移動量の分だけ、逆の方向にX,Z座標を移動させておけば、壁を突き抜けないようになります。

あと、3Dオブジェクトの移動はDisplayObject3DクラスのmoveLeft()などが使えるらしいんだけど、今回はそれを知らずにx,y,zで移動してしまいました。今日はとりあえずここまで。次回はColladaオブジェクトで迷路を徘徊したいです。

package {
	import flash.display.*;
	import flash.events.*;
	import org.papervision3d.view.*;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.core.geom.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;

public class Maze1 extends BasicView {
		private var myScene:Scene3D;
		private var myCamera:Camera3D;
		private var myViewport:Viewport3D;
		private var myRenderer:BasicRenderEngine;
		private var rootNode:DisplayObject3D;
		var myChara:PaperPlane=new PaperPlane(null,1);
		var myRotation:int=0;
		var myZ:int=0;
		var movePow:int=10;
		var blockSize:int=300;
		var wallArray:Array=new Array();
		var mazeXML:XML=new XML();
		var hitWallBlock:Cube=null;//キャラに衝突してる壁

public function Maze1():void {
			myViewport = new Viewport3D(stage.stageWidth, stage.stageHeight, false, false);
			addChild(myViewport);
			myScene = new Scene3D();//シーン生成  
			myRenderer = new BasicRenderEngine();//レンダリング専用クラス  
			myCamera = new Camera3D;//カメラオブジェクト生成  
			myCamera.zoom = 1;//カメラズーム  
			myCamera.focus = 500;//カメラフォーカス  
			rootNode = new DisplayObject3D("rootNode");//ルートノード  
			myScene.addChild(rootNode);//ルートノードを使うと階層化できる
			//キャラクターを設置して配置（ちょっとずらす）
			rootNode.addChild(myChara);
			myChara.z=250;
			myChara.y=-100;
			myChara.rotationY=-90;
			//カメラをキャラの位置に合わせる
			myCamera.x=myChara.x;
			myCamera.y=myChara.y+100;
			myCamera.z=myChara.z;
			mazeData();//迷路を作成
			addEventListener(Event.ENTER_FRAME,onEnterFrames);//毎フレーム処理
			stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownHandler);//キーボードイベント
			stage.addEventListener(KeyboardEvent.KEY_UP,keyUpHandler);//キーボードイベント
		}
		private function makeField():void {
			var material:BitmapFileMaterial = new BitmapFileMaterial( "./mazedata/kakine.jpg" );
			var mList : MaterialsList = new MaterialsList( {all : material } );
			for (var i:int=mazeXML.block.length()-1 ; i>=0 ; i--) {
				var blocks:String=String((mazeXML.block[Number(i)]).toString());
				var blockArray:Array=blocks.split(",");
				wallArray[int(i)]=new Array();//ブロックの行を配列に
				for (var v:String=0 in blockArray) {
					if(blockArray[int(v)]=="1"){
					//迷路の壁を作成
					var wall:Cube=new Cube(mList,blockSize,blockSize,blockSize,1,1,1);
					rootNode.addChild(wall);
					wall.x=-blockSize*int(v);
					wall.z=-blockSize*int(i);
					wallArray[int(i)].push(wall);
					}else{
					wallArray[int(i)].push(null);
					}
				}
			}
		}
		
		private function keyDownHandler(event:KeyboardEvent):void{
			if(event.keyCode==39){
				myRotation=5;//右へ
			}else if(event.keyCode==37){
				myRotation=-5;//左へ
			}
			if(event.keyCode==38){
				myZ=movePow;
			}else if(event.keyCode==40){
				myZ-=movePow;
			}
		}
		
		private function keyUpHandler(event:KeyboardEvent):void{
			if(event.keyCode==39 || event.keyCode==37){
			myRotation=0;
			}
			if(event.keyCode==38 || event.keyCode==40){
			myZ=0;
			}
		}
		
		private function onEnterFrames(event:Event):void {
			myRenderer.renderScene(myScene, myCamera, myViewport);
			mover();
		}
		
		function mover():void {
		myChara.rotationY+=myRotation;
		myChara.x+=(myZ)*Math.cos((90-myChara.rotationY)*Math.PI/180);
		myChara.z+=(myZ)*Math.sin((90-myChara.rotationY)*Math.PI/180);
		
		//camera
		myCamera.x=-100*Math.cos((90-myChara.rotationY)*Math.PI/180)+myChara.x;
		myCamera.z=-100*Math.sin((90-myChara.rotationY)*Math.PI/180)+myChara.z;
		myCamera.target.x=myChara.x;
		myCamera.target.y=myChara.y;
		myCamera.target.z=myChara.z;
		
		//衝突判定
		for(var i:String in wallArray){
			for(var v:String in wallArray[int(i)]){
				//キャラクタと壁の衝突判定
				if(wallArray[int(i)][int(v)] is Cube && myChara.hitTestObject(Cube(wallArray[int(i)][int(v)]))){
					hitWallBlock=wallArray[int(i)][int(v)];
					degreeLimitter();
					break;
				}
			}
		}
		
		}

1ピクセルずつ粉になって落下していく画像

2008年10月31日 16:16

最近ブログを書くたびにHTMLの編集をして億劫です。
さてそんなわけで、今回はクリックすると粉になって落ちていくFlashを作ってみました。
仕組みはステージにオーサリング上で配置したムービークリップをBitmapDataでdrawしてそいつをgetPixels()メソッドでByteArray配列に入れてみる。
色ごとに入れられるようなので、ByteArray.positionで一旦0地点に戻してそこからARGBの4チャンネルを１ターンとして抜いた後に1ピクセル分のBitmapDataを作り直し、BitmapData.setPixel()で、ピクセルを設定したら、Bitmapのx,y座標を入れ直して、超重たい作業をしてみたら・・・。
激重でした。
約１万ピクセルを一斉に動かすのは負荷がかかり過ぎなので、1ピクセル分のBitmapクラスを継承させて新しいカスタムクラスを作ってそれを下から順に落としていく事で一斉には動かさずに済むので、まあ割とマシかもしれません。

プログラマの方たちはもっと効率よく組むんだろうな〜

なんか無駄が多いような気がしてなりません。

Papervision3D、PointLight3DとShadedMaterialの使い方

2008年11月13日 05:16

一度画面をクリックされた方がよろしいかと思われます。

ココ最近、どうもFlashの話題でブログを埋めてますが、ワタクシ、最近Autodesk Mayaを勉強し始めました。今までの3DCGでは、Lightwave 3D,Shade,Vueなど、割とソフトの価格も安い方のソフトを使い続けていました。
やはり3Dは面白いです！最近のPS3のゲームのクオリティを見ると、確かにゲーム性が悪い訳ではないんだけど、その洗練された3DCGグラフィックだけで、何度もプレイして一人で感動してます。
「自分には一生こんなの作れないんだろうな〜」と思いながらも、ついに、ハイエンドなAutodesk Mayaを勉強し始めてしまうことにしました、頑張るぞ。
さて、3Dネタで申し訳ないんだけど、このままFlashで表現しやすいライブラリと言えば一番ポピュラーなPapervision3Dですが、最近面白くてこちらもハマってます、本業がプログラマじゃないから、ホント、FLASHerなんて呼ばれている人にはちょっと恥ずかしい限りではありますが、本日勉強して学んだ事を綴ります。
なぜ、ブログに書くかと言うと、まず自分のためなんですね。
一番自分が見やすい場所に書き留めておくって、ブログがいいんですね。

さて、今回登場してくださるオブジェクトの一部をご紹介いたします。

前から気になっていた、ライティングという事がPapervision3D 2.0 GreatWhiteでは可能になりました。本当に進化していくライブラリですね。
さらに、僕もたまに作る、「バンプマップ」にもチャレンジしました、ここで、3DCGに触れた事の無い方、バンプマップですが、複雑なポリゴンで表面を作るんじゃなくて、白と黒だけの画像をJPGなどで保存して、表面の凹凸をこのバンプマップで表現出来ます、特に光が当たった時には非常に効果的な質感を醸し出してくれます。今回作ったのは以下の2枚、表面の材質のカラーマップと、そしてバンプマップ。
これをそれぞれFlashに埋め込んで使います。

↑表面材質になるカラーマップ

↑凹凸を表現してくれるバンプマップ

さて、画像が準備出来たところで、コーディングに入るのですが、今回は以下のオブジェクトを作りました。

・・・といった具合です。なぜViewport3Dが2個も要るかというと、一つは通常のレンダリング要素なんですが、もう一つは画面下に映りこんでいる鏡面の画像をこれで表示してしまおう、という事なんです、簡単に言うと、毎フレームレンダリングされた画像が、下に敷いてあるPlaneオブジェクトのマテリアル（テクスチャのようなもの）にする事が可能なんですね。
というわけで、この方法を使うと、水たまりなどの映り込みも表現出来そうですね。

なお、下から撮るカメラはFreeCamera3Dクラスにしました、名のごとく、か、分からないけど、結構使い勝手が良いように感じます。さて、コンストラクタに入ってからも新しいオブジェクトは作られますが、主に、先ほど画像を紹介したテクスチャが貼り込まれます。

それぞれ2枚の画像は埋め込んでおく方が楽なので、ライブラリに登録、リンケージ化して、クラス名を付けてバンプマップを「BmapClass」表面材質を「BallMapClass」としてBitmapクラスの子分として登録、スクリプトでそれぞれのオブジェクトに関連付けるというわけですが、特に注意したいのがこちら、PhongShaderクラス。

スペキュラマップとはバンプマップと似てるけど、鏡面の材質の効果を表現するようなものですが、あまり効果は感じられませんでした、調べときます。こういった場合、環境光をなるべく暗くするのが効果的ですね、光は闇でよく映えるわけです。

今までviewPortは1つだけ、なんて思っていましたが、そうじゃ無かったんですね、鏡のためのビューポート、そして全景のビューポートといった感じでしょうか。

package {

import org.papervision3d.view.*;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.shaders.*;
	import org.papervision3d.lights.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.cameras.*;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.objects.parsers.*;
	import flash.events.*;
	import flash.display.Sprite;

public class Test3d extends Sprite {
		var thisScene:Scene3D;//シーンオブジェクト
		var viewPort:Viewport3D;//本来のビューポート
		var mirrorViewPort:BitmapViewport3D;//鏡面用のビューポート
		var render:BasicRenderEngine;//レンダリング用
		var viewCamera:Camera3D=new Camera3D();//本来のカメラ
		var mirrorCamera:FreeCamera3D=new FreeCamera3D();//鏡面用カメラ
		var bitmapViewportMaterial:BitmapViewportMaterial;//鏡面に映し出すためのビューポート
		var rootNode:DisplayObject3D;//ルートノード
		var pointlight3D:PointLight3D=new PointLight3D(true,true);//ライトオブジェクト
		var ground:Sphere;//球体
		var mirror:Plane;//地面の鏡
		
		public function Test3d ():void {
			
			stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
			
			thisScene=new Scene3D();
			viewPort=new Viewport3D(stage.stageWidth,stage.stageHeight,false,false);
			addChild(viewPort);
			render=new BasicRenderEngine();
			rootNode=new DisplayObject3D("rootNode");
			
			rootNode.addChild(pointlight3D);
			pointlight3D.showLight=true;
			
			var bump:BmapClass=new BmapClass(400,200);
			var phong:PhongShader=new PhongShader(pointlight3D,0xFFFFFF, 0x111111 , 10 ,bump,bump);
		
			var greenTexture:BitmapMaterial=new BitmapMaterial(new BallMapClass(400,200));
			var material:ShadedMaterial = new ShadedMaterial(greenTexture,phong);
			ground=new Sphere(material,100,16,16);
			thisScene.addChild (rootNode);
			rootNode.addChild(ground);
			//pointlight3D.lookAt(ground);
			addEventListener(Event.ENTER_FRAME,allEnterFrames);
			
			//鏡面オブジェクト作成
			mirrorViewPort=new BitmapViewport3D();
			bitmapViewportMaterial=new BitmapViewportMaterial(mirrorViewPort,true);
			bitmapViewportMaterial.doubleSided = true;
			mirror=new Plane(bitmapViewportMaterial,600,600,1,1);
			rootNode.addChild(mirror);
			
			//鏡面の位置設定
			mirror.rotationX=90;
			mirror.y=-150;
			
			//鏡面用カメラの設定
			mirrorCamera.x=mirrorCamera.z=0;
			mirrorCamera.y=-140;
			mirrorCamera.rotationX=90;
			mirrorCamera.zoom=2;
			
			viewCamera.x=-500;
			viewCamera.y=500;
			viewCamera.z=-1000;
			}
		
		private function allEnterFrames(event:Event):void{
			render.renderScene(thisScene,mirrorCamera,mirrorViewPort);
			render.renderScene(thisScene,viewCamera,viewPort);
			updateJet();
		}
		
		var rad:Number=0;
		
		private function updateJet():void{
			
			ground.yaw((stage.stageWidth/2-mouseX)/40);
			ground.pitch((stage.stageHeight/2-mouseY)/40);
			if(!stage.hasEventListener(MouseEvent.MOUSE_MOVE)){
			if(rad>360){rad=0};
			rad+=5;
			pointlight3D.x=120*Math.cos(rad*Math.PI/180);
			pointlight3D.z=200*Math.sin(rad*Math.PI/180);
			}
		}
		
		private function mouseDownHandler(event:MouseEvent):void{
			stage.addEventListener(MouseEvent.MOUSE_MOVE,lightMove);
		}
		
		private function mouseUpHandler(event:MouseEvent):void{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,lightMove);
		}
		
		private function lightMove(event:MouseEvent):void{
			pointlight3D.x=stage.stageWidth/2-mouseX;
			pointlight3D.y=stage.stageHeight/2-mouseY;
		}
		
	}
}

AS3 DisplacementMapFilterで波紋を作る練習

2009年1月12日 00:54

僕の名刺です。チョイっとクリックしてみてください。

いつも縦の名刺ですが、今回ちょっと横向きなんてどうだろ？なんて思い、勝手にデザインを変えちゃいました、以外と僕の中では新鮮。
今回の勉強はDisplacementMapFilterクラスという、あんまり聞き慣れてなかったフィルターを使った練習をメモしておきます。
僕がよく生徒さんの前で講義に使うAdobe Photoshop等などには良く見かけるFilter機能ですが、これを使う事でワープ効果なんて表現も出来るらしい、ということで実験。
やってみると、波紋を出すポイントがずれて、最初は苦労したけどPointクラスとMatrixクラスをうまく使う事で座標をマウスクリックした座標に合わせる事が可能です。

これは単純にリンケージしたムービークリップシンボルのスーパークラスをわざとSpriteに定義しています。これが名刺の画像が入ったMCなわけです。そのままaddChildしときます。

続いて以下の定義というのは・・・

spriteはその中に波紋の元となる円をgraphics.drawCircleで3重丸を入れているSpriteで、これに対してまずベベルフィルタ（エンボスのようなもの）とフラーフィルタ（ぼかしフィルタ）をかける事で、波紋の形状が出来上がります。ただし、必要なのは、このSprite内の画像のBitmapData型の情報が必要なので、private var bm:BitmapDataを仮で定義しておきます。毎フレーム処理の時に、このBitmapdataにdrawすることで波紋の形状を更新しているわけです。
しかし厄介なのは、このdrawしている第二引数にMatrixで位置を移動させないと、円の真ん中から右下だけをdrawしてしまうので、このようにしています。

これによって波紋の円の左上から右下までしっかりとdrawしてくれるというワケです。
private var clickPoint:Pointにはクリックした瞬間のマウスの座標が入ります。これがDisplacementMapFilterクラスを実行している際に必要になってきます。
それでは本題のDisplacementMapFilter。

var pt:Point = 〜〜の部分はクリックされた地点を計算してPointオブジェクトに格納します。

さて毎フレームごとに上記のgetFilterメソッドが呼び出されます。
ここで一番ハマったのは、毎フレーム、呼び出しているはずなのに、波紋が大きく伸びていかない。なぜだ！？
で、さんざん試行錯誤したあげく、ヘルプにこんな事が書いていた。

フィルタ操作の潜在的な問題

なんじゃそりゃ？
で、調べてやっと解決の糸口が見えました、要はフィルタの中身を変形して更新するときは、一旦配列のコピーを作ってそれを適用させないといけない、ということで、

が要るというわけです。ちょっとまどろっこしいけど、一応これで解決してます。

DisplacementMapFilterコンストラクタへの引数はいっぱいあって、色々試してみましたが、一番しっくり来たのがこの値でした。ちなみに3,4引数のBitmapDataChannel.RED定数はBLUEでもGREENでも、結果はこの場合、同じでした。
5,6引数の100の値は大きいほど効果が目に見て現れやすいです。
DisplacementMapFilterModeは4つの定数の中で、CLAMPにしてみました。

あまり波紋が大きくなると、極端に重くなるので、波紋が広がっている間は次の波紋は出ないようにしてます。この辺は改良が出来そうです、研究しておきます。

package {
	import flash.display.*;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.filters.*;
	import flash.geom.*;

public class WaterWave extends Sprite {

private var spriteScale:int=1;
		private var bgImage:Sprite=new BGImage();
		private var sprite:Sprite=new Sprite();
		private var bm:BitmapData=new BitmapData(bgImage.width,bgImage.height,false, 0x7F7F7F);
		private var circle:BitmapData=circleMaker();
		private var clickPoint:Point=new Point();

public function WaterWave ():void {
			/*コンストラクタ*/
			addChild (bgImage);
			stage.addEventListener (MouseEvent.CLICK,onClickHandler);
		}
		private function getFilter ():void {
			var pt:Point = new Point(clickPoint.x-sprite.width/2,clickPoint.y-sprite.height/2);
			var copyFilter:Array=new Array();
			var filter:DisplacementMapFilter=new DisplacementMapFilter(circle,
			   pt,
			   BitmapDataChannel.RED,
			   BitmapDataChannel.RED,
			   100,
			   100,
			   DisplacementMapFilterMode.CLAMP,
			   0,
			   0
			   );
			copyFilter.push (filter);
			bgImage.filters=copyFilter;
		}
		function onClickHandler (event:MouseEvent):void {
			clickPoint.x=stage.mouseX;
			clickPoint.y=stage.mouseY;
			stage.addEventListener (Event.ENTER_FRAME,onEnterFrameHandler);
		}

function circleMaker ():BitmapData {
			spriteScale+=10;
			sprite.graphics.clear ();
			sprite.graphics.lineStyle (10,0xFF0000,1);
			sprite.graphics.drawCircle (0,0,40+spriteScale);
			sprite.graphics.endFill ();
			sprite.graphics.lineStyle (10,0xFF0000,1);
			sprite.graphics.drawCircle (0,0,70+spriteScale);
			sprite.graphics.endFill ();
			sprite.graphics.lineStyle (10,0xFF0000,1);
			sprite.graphics.drawCircle (0,0,100+spriteScale);
			sprite.graphics.endFill ();
			var bf:BlurFilter=new BlurFilter();
			var bevel:BevelFilter=new BevelFilter();
			bf.blurX=bf.blurY=8+spriteScale*0.1;
			bf.quality=BitmapFilterQuality.LOW;
			sprite.filters=[bevel,bf];
			bm.draw (sprite,new Matrix(1,0,0,1,sprite.width/2,sprite.height/2));
			return bm;
		}
	}
}

ヒトダマをビルボード手法で作ってみました

2009年1月22日 16:18

仕事サボってヒトダマを作って遊んでます、こんな大人をゆるしてください。
まだ、ゲーム機が今ほどスペックが高くなかった頃、3D表現に例えば「木」をいっぱい配置するとき、ポリゴン数の節約のため、1枚にの板ポリゴンに1枚の木の画像を貼って、常にカメラを向いておき、カメラが木の横に動いたとしても、ペラペラの木だってバレない様に、木自身のY軸（縦の軸）を回転させる手法が取られていた話は有名で、「ビルボード」なんて呼ばれてたらしいです。

そんなビルボードの手法、使ってみたくてと思いつつ、木を使うのもオモシロくないし、何か無いかな？って何気なくひらめいたのがヒトダマ。

炎って形がとくに決まってないから、ビルボードを使うにはもってこいだ！と思ったんですね。

さて、炎をどう作るか・・・最近乾燥してるから家の中で炎は燃やしたくないなあ〜火事は恐いし。
そうだ、ソフトを使おう、確かAppleのタイトルムービー作成ソフト「LiveType」を久しぶりに使ってみよう。
LiveTypeには炎が入っていたはず。というわけで
メディアブラウザ＞オブジェクト＞パイロ＞彗星にしてみる、なるほど、ヒトダマにも見えてきた。

アルファチャンネルを持ってるからそれごとmov形式にて書き出しました。
そのままFlash Video Encoder（最近名前が変わったよね）に持ってきてflvにエンコード。

そのまま同じ階層でいい、置いておこう。　名前は「hitodama.flv」。

さて、背景どうしよっかな？と考えたあげく、背景は暗い方がフンイキ出ますね。
そんなわけで天空のテクスチャを作ることにした、んだけど、球体にテクスチャを貼ると、そのままじゃ極座標に行くほど変に画像が歪むんです。QTVRとか作ってる人って上手ですね、そのあたり。

で、僕はそんなことまで出来ないので、自然景観ソフト「Vue」を使ってみることにしました、ありがたいことに、「空を書き出す」コマンドが用意されている。

月夜、いい感じです、またこのサムネイルがフンイキを醸し出しています。
でも残念なことに空の書き出しだけではVue5 infineteのバージョンだと、本当に空だけしか書き出せないです、何か方法ないかな？天空を自分で作る方法もあるけど、かなり熟練しないと厳しいので、また練習しとこう。

さて、jpegに書き出しする時は形式を「UV球」にしました。、するとQTVR風の画像に書き出してくれてます
書き出された画像はこの通り。

素材の準備ができたところでFlashへ。
今回はVideoStreamMaterialというPapervision3Dのクラスを使います、そうなんです、ビデオを扱うからですね。
普通、flvを扱うときって結構面倒です、少なくともVideoクラス、NetConnectionクラス、NetStreamクラスを使います、NetStreamは再生とか「今何秒？」とかを扱う役目で、再生したあとこれが制御役になるのです。

flvを読み込み、設定が終わったらVideoStreamMaterialへVideoとNetStreamを引数に渡すんですが・・・何だこりゃ？

アルファチャンネルが効いてない。

何か設定があるのか、と思い、まずはコンストラクタ、第三引数はprecise:Boolean = falseとなっていたので、trueにしても変わらず。
ヘルプを見ると気になるプロパティ「movieTransparent」が、継承元はMovieMaterial。
なにをいじってもダメでした。

GoogleCode調べてみると、なんだ、そうだったのか、こんなのがあった。
http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/materials/VideoStreamMaterial.as
VideoStreamMaterial(video:Video, stream:NetStream, precise:Boolean = false, transparent:Boolean = false)
と書いてあるので、バージョンの違いか、ひとまず修正。
中身を見てみると、うん確かに
super ( DisplayObject(video), transparent );
になってる。

カーソルキー上下で一応カメラポジションを変えてますが、もう少しいい動きを考えてみたいものです。
こんな感じで書いてみましたが、まだまだ勉強が必要ですね。

package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.ui.Keyboard;
	import flash.net.NetStream;
	import flash.media.Video;
	import flash.net.NetConnection;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.VideoStreamMaterial;
	import caurina.transitions.Tweener;

public class FireBall extends Sprite {
		private var planet:Sphere;
		private var view:Viewport3D;
		private var scene:Scene3D;
		private var camera:FreeCamera3D;
		private var renderer:BasicRenderEngine;
		private var fireVideo:Video=new Video(200,200);
		private var stream:NetStream;
		private var videoTime:Number;
		private var mouse_x:Number=0;
		private var mouse_y:Number=0;
		private var fireArray:Array=[];
		private var maxFire:int=10;

public function FireBall ():void {
			// ステージの設定
			stage.frameRate=30;
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.EXACT_FIT;
			//天球の設定
			var planetMaterial:BitmapFileMaterial=new BitmapFileMaterial("Atmosphere.jpg");
			planetMaterial.opposite=true;
			planet=new Sphere(planetMaterial,5000,50,50);
			//各3D用オブジェクト設定
			view=new Viewport3D();
			scene=new Scene3D();
			camera=new FreeCamera3D();
			renderer=new BasicRenderEngine();
			addChild (view);
			scene.addChild (camera);
			scene.addChild (planet);
			//イベントハンドラ
			addEventListener (Event.ENTER_FRAME,enterFrames);
			stage.addEventListener (MouseEvent.MOUSE_MOVE,onMouseMoveHandler);
			stage.addEventListener (KeyboardEvent.KEY_DOWN,onDownHandler);
			//ビデオの設定
			var connection:NetConnection=new NetConnection();
			connection.connect (null);
			stream=new NetStream(connection);
			fireVideo.attachNetStream (stream);
			stream.play ("hitodama.flv");
			//ビデオの繰り返しのために必要な設定
			var metaObj:Object=new Object();
			stream.client = metaObj;
			metaObj.onMetaData = function(param:Object){
			videoTime=param.duration;
			};
			//ヒトダマのマテリアル
			var fireMaterial:VideoStreamMaterial=new VideoStreamMaterial(fireVideo,stream,false,true);
			fireMaterial.opposite=true;
			//ループで10個つくり、配列にいれます。
			for (var i:int=0; i<maxFire; i++) {
				var hitodamaPlane:Plane=new Plane(fireMaterial,200,200,1,1);
				scene.addChild (hitodamaPlane);
				hitodamaPlane.x=rand(2000)-1000;
				hitodamaPlane.y=rand(500)-250;
				hitodamaPlane.z=rand(2000)-1000;
				fireArray.push (hitodamaPlane);
			}
			//カメラ接近
			camera.x=camera.y=0,camera.z=-4000;
			Tweener.addTween (camera,{z:0,time:3,transition:"easeOutQuart"});
			var tf:TextField=new TextField();
			tf.text="↑/↓:ZOOM";
			addChild (tf);
			tf.textColor=0xCCCCCC;
		}
		private function enterFrames (event:Event):void {
			//もしビデオが終わったら、繰り返し再生
			if (stream.time>=videoTime) {
				stream.play ("hitodama.flv");
			}
			//マウスの位置によりカメラの角度変更
			cameraRotation ();
			//「ビルボード手法」
			for (var i:int=0; i<maxFire; i++) {
				fireArray[i].lookAt (camera);
			}
			//レンダリング
			renderer.renderScene (scene,camera,view);
		}
		private function onMouseMoveHandler (event:MouseEvent):void {
			mouse_x=stage.mouseX-stage.stageWidth/2;
			mouse_y=stage.mouseY-stage.stageHeight/2;
		}
		private function onDownHandler (event:KeyboardEvent):void {
			switch (event.keyCode) {
				case Keyboard.UP :
					cameraMove (true);
					break;
				case Keyboard.DOWN :
					cameraMove (false);
					break;
			}
		}
		private function cameraMove (flag:Boolean):void {
			var target:Number;
			if (flag) {
				target=0;
			} else {
				target=-2000;
			}
			Tweener.addTween (camera,{x:target,z:target,rotationX:0,rotationY:0,rotationZ:0,time:1,transition:"easeInOutBack"});
		}
		private function cameraRotation ():void {
			camera.rotationY+=(mouse_x-camera.rotationY)/100;
			camera.rotationX+=(mouse_y-camera.rotationX)/100;
		}
		private function rand (num:int):int {
			return Math.random() * num;
		}

}

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

2009年1月30日 19:27

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

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

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

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

2009年2月 9日 23:20

カーソルキーの　←　と　→　で、目線も変わるよ
まずは画面を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デジハリ大阪校の続きを読む

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

2009年2月21日 00:47

動的なクラス名で参照する場合に使う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を使ったところで意味がなく、結局どこかでクラス名を定義しないといけないようです。

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

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

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

SketchUpでPapervision3D

2009年3月19日 03:40

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

無償版で提供されている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
まで、コミュ参加をしておいて下さい〜〜。

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

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

2009年6月 2日 04:21

連載の今回は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

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

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

2009年6月11日 12:59

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 creators7月号には3ヶ所に記事を書きました

2009年6月22日 16:38

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

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

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

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

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

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

2009年7月 7日 05:34

こちらでも

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);
		}
	}
}

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

2009年7月22日 00:39

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分。
さすが、こんな凄いものを作るさくーしゃさん、恐るべし。もう、感服です。

女体をwonderflで。

2010年2月12日 03:55

ParticleGirl !? - wonderfl build flash online

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

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

ボディ、髪、オッパイ

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

デザイナー、秋葉秀樹のブログ

『Flash AS3 学習』