DUBFLASH: ActionScript3.0-Archive-

AS3 | DigiMask Effect from Pentagon

Post:2011年2月25日 14:52

●要 flashplayer10以上

4,5年前くらいに僕がFlashを触りだしたころにPentagon Studiosのサイトを見て（とゆうかまだ公開されてるとは）
このエフェクトどうやったら出来るものかと羨望の目でこのサイトを眺めていました。

●Pentagon Studios

このフィックスする瞬間ののビルのエフェクトをどうやってやっているのか知りたくて、
デコンパイルしてみて解析を試みたんですがその当時のスキルでは理解できず断念したものです。
4年の時を経てようやく再現（ちょっと我流で）出来たのでAS3で組んでみました。
（昔はコレをタイムラインアニメーション＋AS2で組んでいたのがすごい）

+ロジックのポイントはこんな感じ

・エフェクトターゲットのy座標値にある色値を取得しビットマップに縦に反復（引き延し）させる
・エフェクトターゲットのライン内で処理を見せる為にマスク処理を入れる

●DigiMask.as [ setup　method ]

/* 変数説明 */

target = エフェクトターゲット
tw       = target.width;
th       = target.height;

private function setup():void
{
	/*
	 * メイン表示用のコピーオブジェクト（※１）
	 */
	tempbmp = new BitmapData(tw, th, true, 0x808080);
	tempbmp.lock();
	tempbmp.draw(target);
	tempbmp.unlock();
	copy = tempbmp.clone();
        
	tempbm = new Bitmap(tempbmp);
	temp = new MovieClip();
	temp.addChild(tempbm);
	addChild(temp);
			
	tMask = new Sprite();
	tMask.graphics.beginFill(0, 1);
	tMask.graphics.drawRect(0, 0, tw, th);
	tMask.graphics.endFill();
	addChild(tMask);
	temp.mask = tMask;
	tMask.y = -th;

/*
	 * エフェクトオブジェクト格納コンテナ（※２）
	 */
	efContainer = new Sprite();
	addChild(efContainer);
            
	eMask1 = new Sprite();
	eMask1.graphics.beginFill(0, 1);
	eMask1.graphics.drawRect(0, 0, tw, th);
	eMask1.graphics.endFill();
	addChildAt(eMask1, 1);
	eMask1.y = 0;
	eMask1.scaleY = 0;
	efContainer.mask = eMask1; 
			
	/*
	 * ピクセルエフェクト用オブジェクト（※３）
	 */
	var eMc:Sprite = new Sprite();
	efContainer.addChild(eMc);
	source = new BitmapData(tw, 1, false, 0);
	bm = new Bitmap(source);
	bm.height = th;
	eMc.addChild(bm);
        
	eMask2 = new Sprite();
	ebmp = tempbmp.clone();
	ebm = new Bitmap(ebmp);
	eMask2.addChild(ebm);
	efContainer.addChild(eMask2);
         
	eMc.cacheAsBitmap = true;
	eMask2.cacheAsBitmap = true;
	eMc.mask = eMask2;
        
	/*
	 * 境界線ライン（※４）
	 */
	line = new Sprite();
	line.graphics.beginFill(0xffffff, 1);
	line.graphics.drawRect(0, 0, tw, 1);
	line.graphics.endFill();
	eMc.addChild(line);
         
	/*
	 * 表示オブジェクトのセットアップ（※５）
	 */
	with(this)
	{
		x 		= target.x;
		y 		= target.y;
		visible = visibleMode;
	}
	
	target.visible = false;
}

+ソース内（※１）
ここではエフェクトターゲットのデフォルト表示用のビットマップコピーインスタンスを生成します。
エフェクトが走る際、ピクセルエフェクトがかかりながらマスクスライドによってイメージが表示されていくので
その表示用のビットマップです。

+ソース内（※２）
ピクセルエフェクト表示用コンテナを生成します。
このコンテナ内に解析用ラインオブジェクトとエフェクト用オブジェクトを格納しています。

+ソース内（※３）
ピクセルエフェクト用のビットマップオブジェクトを生成します。
縦幅1pxのビットマップを生成し、それをターゲットオブジェクトの縦幅分にheightを引き延ばします。
引き延ばしたビットマップに取得したカラー情報を反映させます。
それとターゲットオブジェクトと同じエリアで表示させる為のマスクを適用させます。

+ソース内（※４）
ラインオブジェクトを生成します。
エフェクトエリアとイメージエリアの境目をわかりやすくするためのものであまり意味はないです。
ただこのラインのy座標を目安にコピービットマップのカラー情報を取得します。

+ソース内（※５）
表示設定です
エフェクトターゲットに座標を合わせます。
visibleModeはエフェクトターゲットを最初に表示しておくかどうかの真偽値です。

次にエフェクトを適用させる為の色情報を取得する為のメソッドを定義します。
縦幅1pxで生成したビットマップにターゲットの横幅分カラー情報を適用します。
このメソッドは引数に座標値をセットするとcopyビットマップ（解析用）の色情報を配列に格納し
sourceビットマップに適用させます。
addBubbleメソッドはおまけで取得座標値からランダムのx座標に四角いパーティクルを表示させるメソッドです。

●DigiMask.as [ setSourcePixel　method ]

あとはENTER_FRAMEを定義してエフェクトを実行します
先にエフェクトをマスクスライドさせ、追うようにして表示オブジェクトとラインをスライドさせます。
動作が終わったら表示を切り替えます。
あと、いまだにTweenerですいません。ラクなんです。

●DigiMask.as [ motionIn　method ]

で、完成がこちら
ちなみに使用してる画像は自分の原付です。

●digimask.swf

+ソースコード

[ 開発環境：fp10 , FDT3 ]

AS3.0 | 失敗しないリサイズ処理

Post:2010年4月 8日 15:50

だいぶご無沙汰してしまいました。。
前回のエントリ見たら1/14だったから、3か月ぶりってことか。
よーやく日々の生活の余裕を取り戻しつつあるので、ついでにこのテンションだだ下がりの状態から脱却すべく、ちまちま更新していきます。

んで、表題の通りリサイズネタです。

リサイズ処理は初めてフルフラをオーサリングした時から最近に至るまでかなり思考錯誤して色んな方法を試したんですが、その中で最近定着してきた方法を晒してみたいと思います。
今更リサイズのロジック的な部分ってのもアレなんで仕組みのみです。
とはいえこの方法がベストなのか晒すまでもないあたりまえの方法なのかいまいちよくわかりませんのでつまらなかったら読み飛ばしてください。

親子関係のルール決め

フルフラッシュでの実装の場合スクリプトを書く前にある程度設計をしておかないと
後で絶対めんどくさい処理に追われるはめになるので、
rootに配置されるパーツの親子関係などに簡単にルールを決めてMovieClip化します。

▼図1 : 親子関係

上記図1の通り親にあたるMovieClip(name : mc)に子Mc(name : base)、更にその内部にパーツMc(name : parts1,2,3)を配置します。
ヘッダー、フッター、イメージエリア等、各ブロックを上記方法で親子関係にします。
リサイズの細かい説明は置いといて、何故この階層を作ったかと言うとリサイズをかける際（リサイズじゃなくても）オブジェクトに対する数値代入処理がバッティングする可能性を防ぐ為で、リサイズ処理はすべて親Mc(mc)にして、モーションは子Mc以下にしましょうってことです。

▼図2 : 各Mcの役割

かなり初心者向け？っぽい内容な気もするけど間に一個MovieClip(base)を挟むだけで
まあラクです。なにかと。

稼働率でリサイズ動作幅を指定する

あと、稼働率のパーセンテージを取得してリサイズも結構使えます。
稼働率って多分よく使うのがテキストスライダーとか動画再生ハンドル。
それ以外にもモーション、リサイズにと幅広く応用できます。
パーセンテージから動作を組み立てていくだけなので扱いやすいです。

▼稼働率の算出

たとえば指定範囲内だけで動作させたい場合(mcのx座標をx:100～x:200間のみでとか)、
距離/動作幅で%を取得すれば100px分の稼働率が出ます。

▼稼働率の算出

AS3.0 | 立ち上る煙の表現手法

Post:2010年1月14日 15:44

前々記事で「ターゲット領域に合わせた炎を作成する」に引き続き
今回は煙（ケムリ）の表現に焦点を当ててみました。

●要FlashPlayer9以上

煙をas3.0で表現するにあたって自分的には2択だったんですがperlinNoiseを使用してのギミックか、
BlurFilterを使用して重ね合わせての表現。
今回は立ち上る煙を表現したかったので後者にしました。
perlineNoiseを使用する場合のメリットとしては広範囲エリアでのスモーキーな表現が可能で流動的な煙の流れを比較的簡単に表現できるかな、と。
デメリットとしては第一に広範囲でのperlinNoiseの使用は負荷が強いので負荷拡散がポイントになるところ。
あと、今回のテーマの「立ち上る煙」には不向きな気がします。（俺的にやりずらいだけ）
なので円形状のスプライトオブジェクトを複数生成して、ブラーフィルターを適用し、
それらを三角関数をうまく取り入れながらy座標を操作することで表現しました。

ソースは以下。
いつもながら我流スクリプトなんで細かいとこはお気になさらず。

●まずは表示コンテナのセットアップ

▼個々の円形オブジェクトにフィルターを適用すると負荷が強いのでコンテナ自体にブラーを適用します。

●煙の元となる円形状のスプライトオブジェクトを生成し、ENTER_FRAMEにてモーションを定義します

●あとは各トリガーを用意するだけ

▼汎用クラスにするのであればstartメソッド内変数を引数で持てるようにすると煙の詳細を個別に設定可能になります

wonderfl | 音 particlesSoundVisualizer

Post:2010年1月12日 17:16

●要 FlashPlayer9

音 SoundVisualizer - wonderfl build flash online

久しぶりにwonderflってみました。
ずっとSoundMixer.computeSpectrum 使ってサウンドビジュアライザー作ってみたかったので満足。

AS3.0 | ターゲット領域に合わせた炎を作成する

Post:2009年12月19日 19:12

flasherやってると、ちょいちょいエフェクティブな表現を求められます。
特に自然現象系のビットマップエフェクトはflasherとして必須で押さえておきたいところです。
ってことで炎の表現がすでにいっぱいある中なんとなく作ってみたんで簡単にですが紹介してみます。あくまで我流表現なんで細かい部分は気になさらずにどうぞ。

●要 flashplayer9以上

■まずimage1のような赤枠で囲まれたBitmapDataを作成したとします。
（BitmapDataを作成するまでの手順は割愛します）

●image1

■ターゲットとなるビットマップを作成したとこで更にビットマップデータをいくつか作成し各ビットマップ要素にDisplacementMapFilterとperlinNoiseを使用して炎の揺らめきを出していきます。

●DisplacementMapFilterとperlinNoiseを適用後

■炎となるベースを作成したら、次は質感をプラスする為に先ほど作成したベースビットマップをクローンし、重ね合わせ、ブラーとグロウの両フィルターを適用します

●各BitmapDataを適用後

■ここまでで、とりあえずは表現的にはクリアです。

▼ただこの状態だと範囲の小さいターゲットには十分スムーズに動作しますが、
大きすぎるビットマップターゲットにはperlinNoiseの負荷が大きすぎてあまり実用的ではありません。
ので実際に適用する炎を予め品質(width,height)を下げて放出し、原寸大に戻してやると負荷軽減が出来ます。
記事内上段のデモはBitmapDataの生成サイズを100%がdefaultだとしたら50%まで品質を落とした状態になります。この処理を追加することで各変数値を調整すればステージいっぱいに炎を生成しても大分負荷が軽減されるので、負荷の強いエフェクトにはかなり有効になります。

AS3.0 | よくあるローディング

Post:2009年12月 2日 17:59

なんか毎度毎度ローディング考えるのも面倒になってきた今日この頃なので
macやらいろんなとこで使われる無難なローディングパーツを作ったので晒してみます。
まあものすごい普通で必要最低限な内容です。

Loadparts01.as (2kb)

[使い方]

インスタンスの生成後、任意の場所にaddChild。

　　　　　↓

●Loadparts01.start()メソッド　>動作開始
●Loadparts01.stop()メソッド　>動作停止
※フェードイン・アウト、スケールイン・アウト等は各自ご自由に。

●Loadparts01.as

package net.load{
	
	import flash.display.*;
	import flash.events.*;
	import flash.utils.*;
	
	/* @author zawa aka dubfrog /* 
	
	/* project [ Loadparts01 ] */ 
	
	public class Loadparts01 extends Sprite{
		
		public function Loadparts01(_color:Number = 0x000000, _size:Number = 5):void{
			color = _color;
			size = _size;
			createLoader();
		}
		private function createLoader():void
		{
			var radian:Number = Math.PI / 180;
			var cutmax:Number = 12;
			var radius:Number = size;
			parts = [];
			for (var i = 0; i <= cutmax-1; i++)
			{
				var angle:Number = (360 / cutmax) * i;
				var mc:Sprite = partsRect();
				mc.x = Math.sin(radian * angle) * radius;
				mc.y = Math.cos(radian * angle) * radius;
				mc.rotation = -angle;
				mc.alpha = .3;
				addChild(mc);
				parts[i] = mc;
			}
		}
		private function partsRect():Sprite 
		{
			var mc:Sprite = new Sprite();
			mc.graphics.beginFill(color);
			mc.graphics.drawRoundRect(-(size / 4)/2, -(size / 1.5)/2, size / 4, size, size / 3);
			mc.graphics.endFill();
			return mc;
		}
		public function start():void
		{
			cnt = 0;
			bool = true;
			timer = new Timer(40, 0);
			timer.addEventListener(TimerEvent.TIMER, loading);
			timer.start();
		}
		private function reset():void
		{
			timer.stop();
			timer.removeEventListener(TimerEvent.TIMER, loading);
			timer = null;
			
			for (var i = 0; i <= parts.length - 1; i++) {
				parts[i].removeEventListener(Event.ENTER_FRAME, alphaup);
			}
		}
		private function loading(e:TimerEvent):void
		{
			if (bool)
			{
				parts[cnt].alpha = 1;
				parts[cnt].removeEventListener(Event.ENTER_FRAME, alphaup);
				parts[cnt].addEventListener(Event.ENTER_FRAME, alphaup);
				cnt--;
				if (cnt < 0) cnt = parts.length - 1;
			}
		}
		private function alphaup(e:Event):void
		{
			var target = e.target;
			target.alpha += (.3 - target.alpha) * .1;
		}
		public function stop():void
		{
			reset();
		}
		
		/*_Vars______________________________________________________________________________________*/
		
		private var color:Number;
		private var size:Number;
		private var bool:Boolean;
		private var parts:Array;
		private var timer:Timer;
		private var cnt:Number;
	}
}

AS3.0 | gotoAndStop直後の"null"回避手段

Post:2009年10月 9日 10:24

flashコンテンツを一つのswfのみで制作する際、自分はよく1フレーム目でローディング、2フレーム目でコアオブジェクトの表示をするんですが、

gotoAndStop(2)でフレーム移動した直後は"表示オブジェクト"がnullになってしまうので、表示オブジェクトを毎フレーム処理継続で監視して認識後に次のメソッドをコールするんですが、もっとスマートに認識監視が行えるRENDERイベントってのを最近はよく使ってます。

●ローディングイベント内

ローディング終了後、RENDERイベントにリスナー登録してinvalidateをコールすることでレンダリング後の参照をスマートに行えます。
invalidateを呼び出すと表示リストがレンダリングされる際、Flash Playerから登録されている各表示オブジェクトに,RENDERイベントを受け取るように対して送出されるみたいです。
しかし、大概アレ？って思ったら解決策って用意されてるもんですね・・・。

詳しくは下記で説明されていました。

参考元：● AS3のgotoAndStop()問題とEvent.RENDERの使い道 -level0.KAYAC

wonderfl | 宇宙 ParticlesSphere

Post:2009年9月29日 12:51

●要 FlashPlayer9

宇宙 ParticlesSphere - wonderfl build flash online

org.papervision3d.objects.specialディレクトリにParticleFieldってのがあったので使ってみた。
各パーティクルをSphereの頂点座標に動かすだけだけど、BlendMode.ADDとColorTransformを使うだけで結構キレイになるもんだな～。

wonderfl | Particles X (batu)

Post:2009年9月24日 17:04

●要 FlashPlayer9

Particles X (batu) - wonderfl build flash online

遅ればせながらwonderflやってみました。
すごいですね。wonderfl。
傍観サイドから参戦サイドに移行すると一気に刺激的になりました。
開発されたKAYACさんに大感謝。
wonderflのギャラリーサイトBeautiflってゆーのも出来てるし。
Clockmakerさん、すげえ。

追いつけ追い越せの精神でこれからもちょいちょい参戦してみたいと思います。

BulkLoader | 複数の外部ファイルのプログレス処理

Post:2009年8月27日 21:54

複数の外部ファイルを読み込む際にいちいちバイト数をまとめたりしなくても済むbulk-loaderというライブラリがあったので使ってみました。

●bulk-loader

中をざっと見たところ色々なシーンで使えそうな感じです。

通常複数のバイト数をまとめる際は下記のようにやっていましたが↓

・ImageLoader.as

package{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	public class ImageLoader extends EventDispatcher{
		public var loader:Loader;
		public var info:LoaderInfo;
		public var url:String;
		public var extra:Object;
		public var per:Number;
		public static const OPEN = "loadOpen";
		public static const PROGRESS = "loadProgress";
		public static const COMPLETE = "loadComplete";
		public static const INIT = "loadInit";
		public function ImageLoader(_url){
			extra = new Object();
			url = _url;
			loader = new Loader()
			loader.load(new URLRequest(url))
			info = loader.contentLoaderInfo;
			info.addEventListener(Event.OPEN,LOAD_OPEN)
			info.addEventListener(ProgressEvent.PROGRESS,LOAD_PROGRESS)
			info.addEventListener(Event.COMPLETE,LOAD_COMPLETE)
			info.addEventListener(Event.INIT,LOAD_INIT)
		}
		private function LOAD_OPEN(e:Event){
			info.removeEventListener(Event.OPEN,LOAD_OPEN)
			dispatchEvent(new Event(OPEN));
		}
		private function LOAD_PROGRESS(e:ProgressEvent){
			per = Math.floor(e.bytesLoaded/e.bytesTotal*100);
			dispatchEvent(new Event(PROGRESS));
		}
		private function LOAD_COMPLETE(e:Event) {
			info.removeEventListener(ProgressEvent.PROGRESS,LOAD_PROGRESS)
			info.removeEventListener(Event.COMPLETE,LOAD_COMPLETE)
			dispatchEvent(new Event(COMPLETE));
		}
		private function LOAD_INIT(e:Event) {
			info.removeEventListener(Event.INIT,LOAD_INIT)
			dispatchEvent(new Event(INIT));
		}
	}
}

・ドキュメントクラス

●BulkLoaderを使うとこんな感じ

うん。まだクラス内網羅してませんがなかなか使えるんじゃないでしょうか。
しかし、最近色んなライブラリ使ってるけど、ライブラリの乱用は技術力低下につながるような気がするなー。
ライブラリがなくても100%のパフォーマンスが出来るように気をつけねば・・・。
でもライブラリってラク。

下記参考にさせていただきました。
・ONE OP IXEL [AS3.0]複数の外部画像をまとめてローディング表示