北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」 が無事終了！

2008/09/06 北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」

先週、イベントが無事に終了しました！

多数の方にご参加いただきましてありがとうございます。
また、各関係者の方々、本当にお疲れさまでした！！

今回、個人的にはいろいろ課題が残る結果となってしまった感じです…orz
もちろん、大きなプレッシャーや緊張もあったのですが、何よりも、発表の時間配分が致命的にミスをしてしまったかなと。おかげで途中、めちゃめちゃ焦ってしまいバタバタな進行となってしまい大きく反省しています…（汗
今後、またこのような機会をいただけた時には、この反省点を活かし、より分かりやすくテンポの良い進行ができるよう努めていきたいと思います。

ただ、メインで発表させてもらった、携帯連動のFlash抽選会コンテンツ、こちらは特に大きな不具合もなく無事に終了。思ったよりも盛り上がったのかなーという印象でしたね。
※抽選コンテンツに関しては、別途、ラボにて、簡単な概要などを掲載。

また、発表時にお伝えしたとおり、3D空間内を数値テキストが動きまわるサンプルを早速公開します。

サンプル

Main.as

こちらがドキュメントクラス。メイン部分のスクリプト。
FIVe3D ライブラリを利用して、3D空間のベースやステージの設定を行い、その後、テキスト生成を行う感じです。

package {
	
	//クラス
	import TxtOrigin;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.display.Sprite;
	import flash.events.Event;
	
	//Tweener 1.31.71
	import caurina.transitions.Tweener;
	
	//FIVe3D v2.1
	import five3D.display.Scene3D;
	import five3D.display.Sprite3D;
	import five3D.display.Sprite2D;
	import five3D.utils.Drawing;
	
	//ドキュメントクラス
	public class Main extends Sprite {
		
		//変数
		private var sc3D:Scene3D;
		private var base3D:Sprite3D;
		private var NoTxt:TxtOrigin;
		private var test3D:Sprite3D;
		
		//コンストラクタ
		public function Main() {
			
			//オブジェクト初期設定
			initStage();
			init3D();
			
			//テキスト生成
			for (var j:uint = 1; j <= 20; j++ ) {
				NoTxt = new TxtOrigin(j, j/10);
				base3D.addChild(NoTxt);
			}
		}
		
		//3Dベース初期処理
		public function init3D():void {
			//シーン設定
			sc3D = new Scene3D();
			sc3D.x = stage.stageWidth / 2;
			sc3D.y = stage.stageHeight / 2;
			sc3D.viewDistance = 200;	//透視投影	
			addChild(sc3D);
			
			//ベースオブジェクト生成
			base3D = new Sprite3D();
			base3D.childrenSorted = true; //Z ソート
			base3D.y=150;
			base3D.z=0;
			sc3D.addChild(base3D);
		}
		
		//ステージ設定
		public function initStage():void {
			stage.showDefaultContextMenu = false;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.RESIZE, stageResizeListener);
		}
		
		//ステージサイズ変更処理
		public function stageResizeListener(e:Event):void {
			sc3D.x = stage.stageWidth / 2;
			sc3D.y = stage.stageHeight / 2;
		}
	}
}

TxtOrigin.as

FIVe3D にある Sprite2D というものをクラスを継承させ、オリジナルのクラスを生成。
この中で数値テキストを作成し、主に3D空間内を動きまわる動作制御を記述。

package {
	
	//クラス
	import flash.events.Event;
	import flash.text.TextFieldAutoSize;
	
	//Tweener 1.31.71
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.ColorShortcuts;
	
	//FIVe3D v2.1
	import five3D.display.Sprite2D;
	
	dynamic public class TxtOrigin extends Sprite2D {
		
		//変数一覧
		private var TXT:NoTxtOrigin;
		private var myNo:uint;
		private var divX:Number;
		private var divY:Number;
		private var divZ:Number;
		private var groundY:Number = 0;
		private var maxFrontZ:int = -50;
		private var maxInnerZ:int = 200;
		private var graPow:Number = 0.8;
		private var divBoundPow:Number = 0.99;
		private var divDifPow:Number = 0.8;
		
		//コンストラクタ
		public function TxtOrigin(no:uint, delayTime:Number)	{
			
			//Tweener初期設定
			ColorShortcuts.init();
			
			//自身のNo設定
			myNo = no;
			
			//テキスト生成
			TXT = new NoTxtOrigin();
			with (TXT) {
				autoSize = TextFieldAutoSize.CENTER;
				mainTxt.noTxt.text = myNo.toString();
				refTxt.noTxt.text = myNo.toString();
				refTxt.cacheAsBitmap = true;
				refMask.cacheAsBitmap = true;
				refTxt.mask = TXT.refMask;
				refTxt.visible = false;
			}
			addChild(TXT);
			
			//初期パワー設定
			divX = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
			divY = Math.random() * 5 + 15;
			divZ = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
			
			//初期位置
			scaleX = scaleY = Math.random() * 1 + 1;
			x = (Math.random() * 200) * ((Math.random() > 0.5) ? 1: -1);
			y = -50;
			z = -80;
			alpha = 0;
			
			//色
			var rR:uint = Math.round(Math.random() * 150);
			var rG:uint = Math.round(Math.random() * 150);
			var rB:uint = Math.round(Math.random() * 150);
			var Co:uint = uint("0x" + rR.toString(16) + rG.toString(16) + rB.toString(16));
			Tweener.addTween(this, {
				time:0,
				_color:Co
			})
				
			//初期モーション処理
			Tweener.addTween(this, {
				time:0,
				delay:delayTime,
				alpha:1,
				onComplete:function() { 
					Tweener.addTween(this, {
					time:1,
					x:(Math.random() * 200 / 2) * ((Math.random() > 0.5) ? 1: -1),
					//z:-80,
					z:0,
					scaleX:1,
					scaleY:1,
					transition:"easeOutSine",
					onComplete:function() { 
						TXT.refTxt.visible = true;
						addEventListener(Event.ENTER_FRAME, enterFrameListener);
					}
					})
					Tweener.addTween(this, {
						time:0.5,
						y:-(Math.random()*150+150),
						transition:"easeOutSine"
					})
					Tweener.addTween(this, {
						time:0.5,
						delay:0.5,
						y:10,
						transition:"easeInSine"
					})
				}
			})
		}
		
		//3Dモーション処理
		private function enterFrameListener(e:Event):void {
			
			//重力
			divY = divY + graPow;
			
			//各方向の移動量
			x += divX;
			y += divY;
			z += divZ;
			TXT.refTxt.y = -y;
			
			//Y方向の計算（バウンド）
			if (y > groundY) {
				divY = -divY * divBoundPow;
				y = groundY;
				TXT.refTxt.y = -y;
				if (Math.abs(divY) < 0.4) {
					//移動量復活
					divX = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
					divY = Math.random() * 5 + 15;
					divZ = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
				}
			}
			//X方向の計算
			if (x < -200) {
				divX = -divX * divDifPow;
				x = -200 + divX;
			} else if (x>200) {
				divX = -divX * divDifPow;
				x = 200 + divX;
			}
			//Z方向の計算
			if (z < maxFrontZ) {
				divZ = -divZ * divDifPow;
				z = maxFrontZ + divZ; 
			} else if (z > maxInnerZ) {
				divZ = -divZ * divDifPow;
				z = maxInnerZ + divZ;
			}
		}
	}
}

解説

//3Dベース初期処理
public function init3D():void {
	//シーン設定
	sc3D = new Scene3D();
	sc3D.x = stage.stageWidth / 2;
	sc3D.y = stage.stageHeight / 2;
	sc3D.viewDistance = 200;//透視投影
	addChild(sc3D);
	
	//ベースオブジェクト生成
	base3D = new Sprite3D();
	base3D.childrenSorted = true; //Z ソート
	base3D.y=150;
	base3D.z=0;
	sc3D.addChild(base3D);
}

↑
まずは、Main.as にて 3D のベースを作成。
ベースとなる Sprite3D には、childrenSorted を true にし、z ソートを自動的に計算させる。

//テキスト生成
for (var j:uint = 1; j <= 20; j++ ) {
	NoTxt = new TxtOrigin(j, j/10);
	base3D.addChild(NoTxt);
}

↑
テキストは、Main.as のコンストラクタ内の上記にて作成。Sprite2D をクラス化しているので、新しくオブジェクトを生成し必要な情報を引き渡す感じ。あとは、3Dのベースに addChild を行う。

//初期パワー設定
divX = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
divY = Math.random() * 5 + 15;
divZ = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
//初期位置
scaleX = scaleY = Math.random() * 1 + 1;
x = (Math.random() * 200) * ((Math.random() > 0.5) ? 1: -1);
y = -50;
z = -80;
alpha = 0;
//色
var rR:uint = Math.round(Math.random() * 150);
var rG:uint = Math.round(Math.random() * 150);
var rB:uint = Math.round(Math.random() * 150);
var Co:uint = uint("0x" + rR.toString(16) + rG.toString(16) + rB.toString(16));
Tweener.addTween(this, {
	time:0,
	_color:Co
})

↑
テキスト生成後は、TxtOrigin.as 内で文字の処理移動量や初期位置を計算。また、本来は数値の色は黒か赤にしているのだけども、ランダムで数値テキストの色が変わるような処理を追加してみた。

//初期モーション処理
Tweener.addTween(this, {
	time:0,
	delay:delayTime,
	alpha:1,
	onComplete:function() { 
		Tweener.addTween(this, {
		time:1,
		x:(Math.random() * 200 / 2) * ((Math.random() > 0.5) ? 1: -1),
		//z:-80,
		z:0,
		scaleX:1,
		scaleY:1,
		transition:"easeOutSine",
		onComplete:function() { 
			TXT.refTxt.visible = true;
			addEventListener(Event.ENTER_FRAME, enterFrameListener);
		}
		})
		Tweener.addTween(this, {
			time:0.5,
			y:-(Math.random()*150+150),
			transition:"easeOutSine"
		})
		Tweener.addTween(this, {
			time:0.5,
			delay:0.5,
			y:10,
			transition:"easeInSine"
		})
	}
})

↑
最初に、画面手前から3D空間内へアニメーションさせる動作。
初期アニメーションが終了したら、下記の enterFrame イベントを発生させています。

//3Dモーション処理
private function enterFrameListener(e:Event):void {
	
	//重力
	divY = divY + graPow;
	
	//各方向の移動量
	x += divX;
	y += divY;
	z += divZ;
	TXT.refTxt.y = -y;
	
	//Y方向の計算（バウンド）
	if (y > groundY) {
		divY = -divY * divBoundPow;
		y = groundY;
		TXT.refTxt.y = -y;
		if (Math.abs(divY) < 0.4) {
			//移動量復活
			divX = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
			divY = Math.random() * 5 + 15;
			divZ = (Math.random() * 3 + 3) * ((Math.random() > 0.5) ? 1: -1);
		}
	}
	//X方向の計算
	if (x < -200) {
		divX = -divX * divDifPow;
		x = -200 + divX;
	} else if (x>200) {
		divX = -divX * divDifPow;
		x = 200 + divX;
	}
	//Z方向の計算
	if (z < maxFrontZ) {
		divZ = -divZ * divDifPow;
		z = maxFrontZ + divZ; 
	} else if (z > maxInnerZ) {
		divZ = -divZ * divDifPow;
		z = maxInnerZ + divZ;
	}
}

↑
最終的には、enterFrame で 3D 空間内を動き回るようなモーションを記述。
バウンドする移動量が低くなったら、また移動量を復活させ、再度バウンドして動くようにしてみた。

ダウンロード

一応、ライブラリなど全てのファイルをまとめたものもダウンロードできるようにしてみました。
⇒全ファイルのダウンロードはこちら