DUBFLASH

AS3 | DigiMask Effect from Pentagon

Fri, 25 Feb 2011 14:52:09 +0900

●要 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 ]

Alternativa3D 7.6 | Pv3dライクな初期設定＋PlaneTester

Mon, 14 Feb 2011 22:33:54 +0900

すっかり3Dライブラリを使用したコンテンツも当たり前になってきたこのご時世。
今後のFlashPlayerのリリースを期待せずにはいられませんね。

そんなワケで本格的にAlternativa3Dを弄くりだしていこうかなと思います。

ここ最近はAway3Dに頼りきりだったのでAlternativa3Dの知識は薄いですが昨年末に最新バージョンの7.6がリリースされていたみたいなのでこちらを使用します。

大体新しいクラスを触るときはExamplesをたよりに手を動かすんですが
今回ソースのみしか用意されてなかったのでまずは各Tipsをパブリッシュしました。
自分でパブリッシュするのめんどくせーよって方はこちらでご確認を。

■ AnimSpriteExample

■ ClippingExample

■ ContainersExample

■ DebugExample

■ DemoExample

■ GeometryExample

■ HelloAlternativa3D

■ IntersectRayExample

■ LODExample

■ MouseEventsExample

■ SortingExample

■ TextureMaterialExample

各ソースを見ているとpv3dやaway3dとは中身が異なっている部分が多く、
レンダリングアルゴリズムも「バイナリ空間分割」という手法を使用してるみたいです。

Alternativa3DのVer7についてのHowtoはnarutohyperさんが一番よく説明されていると思いますので気になる方は下記からどうぞ。

「Wonderfulで始めるAlternativa3D」　-丸林商店-

●Alternativa3D 7.6 [ 3Dシーンの基本設定 ]

7.6からなのか最初からなのかはよくわかりませんが、
角度の代入がラジアン度数じゃないと設定出来ません。（ソース内 ※1）

それと、一人で数時間悶々と基礎を学んだついでに作ったテスターがあるので、
これもアップしておきます。
スライダーとかはMinimalcompsを使用しましたがこれ便利ですね。

●Alternativa3D 7.6 [ PlaneTester ]

とりあえずPlaneを簡単に正しく正面を向かせるには、ということのみに注力したデモですので
たいした機能はないですが簡単な初期値がわかると思います。

次はもう少し楽しいデモでも作ってみます。

STROX 【ストロークス】始めました

Sun, 13 Feb 2011 16:02:28 +0900

本年度よりデザインユニット STROX 【ストロークス】としての活動を開始しました。

WEBコンテンツの企画、制作（design, flash）でご相談がございましたらinfo@strox.jpまでお気軽にお問い合わせ下さい。

[ strox -ご挨拶- ]

「突っ走って一休み」をスローガンに掲げたご挨拶用のコンテンツです。
たいしたインタラクションはないですが個人的にはうさぎが切り替わるときのパーツが3つに分離する瞬間が好きです。
ちなみにAway3Dにて実装しました。

Like | 放置プレイなのかもね

Wed, 10 Nov 2010 00:01:24 +0900

どうやら半年ぶりの更新。放置しすぎでゴメンナサイ
久しぶりにアクセスみたら意外とセッション数あって更新を試みてます

ってことでビールのお供におかず動画を探してたらvimeoでいい作品があったので紹介。

■Overture

独特の世界感で不思議な生き物を質のいいアニメーションでイラストを動かしつつ
モーションと音がシンクロしてる。　台詞はなくとも気持ちがツタわってくる感じ
とてもモーションセンスがよくて引き込まれる作品。ステキです。

01: A Memory

Bryum & Kapok 01: A Memory from Overture on Vimeo.

02: An Idea

Bryum & Kapok 02: An Idea from Overture on Vimeo.

■Etsuko Ichikawa

日本人の女性アーティスト。紙に熱したガラスを足らしその焦げた跡でアートを表現している
波紋のように焦げ跡が広がっていき練りアメのようなガラスで紋様が描かれていく
素晴らしい発想

Traces of the Molten State

Traces of the Molten State from Etsuko Ichikawa on Vimeo.

■SUPERNATURAL CREATOR 2

もはやなんか好きな感じ　ファミコン世代じゃなきゃわからない
カミサマの苦悩？をファミコンドットでストーリー展開していく。ラストあーやっぱり、ってなる

Traces of the Molten State

SUPERNATURAL CREATOR 2 from Mareike on Vimeo.

Away3D-Lite | CubeDivision

Tue, 13 Apr 2010 21:11:10 +0900

●要 flashplayer10以上

前エントリCube6を使ったデモを載せましたが懲りずにまたCube6でデモを作成しました。
ロジックとしては細胞分裂的なイメージで各キューブをクリックすると各キューブのサイズを保ったまま8分割され最終的にスケール値が1/8または1/16のサイズになった時点で各個体が消滅します。
全ての個体がリムーブされたらリセットされますが最大1/16まで分裂していくのでさすがに全て消すのは結構めんどいです。
前回と今回のパフォーマンステストをした感じ低セグメントでオブジェクトを生成する分には結構なポリゴン数まで耐えられますね。
今までpv3dや本家Away3d(本家はあんま触ってませんが)での控え目なパフォーマンスで負荷軽減と戦っていた分、思い切り遊べて楽しいです。

【Away3d-Lite】 CubeDivision - wonderfl build flash online

wonderflにアップしたのでソース見たい方ははこちらからどうぞ

Away3D-Lite | Cube6で6面イメージ張り付け

Fri, 09 Apr 2010 21:28:46 +0900

●要 flashplayer10以上

前から気になっていたAway3D-Liteをよーやくいじりだせました。
とりあえずCube6を使ってどれくらい耐えられるのか実験した際に6面別々のイメージの張り付け方法で迷ったので紹介してみます。

1枚の画像で6面分を2段に並べる

どうもpv3dのMaterialsListを使って各側面のイメージが指定するみたいなことが出来ないっぽいので、
思考錯誤してみたら下記図1の方法で出来ました。

▼図1 : 一枚の画像で6面分を並べる

とりあえずはスッキリしたんでまた次回なにかしらのデモをアップしたいと思います。

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

Thu, 08 Apr 2010 15:50:33 +0900

だいぶご無沙汰してしまいました。。
前回のエントリ見たら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 | 立ち上る煙の表現手法

Thu, 14 Jan 2010 15:44:58 +0900

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

●要FlashPlayer9以上

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

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

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

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

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

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

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

wonderfl | 音 particlesSoundVisualizer

Tue, 12 Jan 2010 17:16:02 +0900

●要 FlashPlayer9

音 SoundVisualizer - wonderfl build flash online

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

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

Sat, 19 Dec 2009 19:12:51 +0900

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

●要 flashplayer9以上

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

●image1

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

●DisplacementMapFilterとperlinNoiseを適用後

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

●各BitmapDataを適用後

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

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

Blogparts | Twitter連動ブログパーツ twitime!!

Thu, 10 Dec 2009 21:34:31 +0900

どうも。会社絡めての配布ですが今が旬のTwitterでブログパーツ作りました。
是非使ってやってください。
製作会社のいいところはひょんなアイディアをポンと形に出来ちゃうとこ。
それを出来る人間が集まってるからね。

今回はそんな感じでいいスピード感でした。

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

Wed, 02 Dec 2009 17:59:23 +0900

なんか毎度毎度ローディング考えるのも面倒になってきた今日この頃なので
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;
	}
}

Website | 全日本バーべイタム選手権

Mon, 16 Nov 2009 15:52:37 +0900

久しぶりにウェブサイトでハマった！秀逸だな～。
しかもすんげー楽しい。

●全日本バーべイタム選手権　Verbatim（バーベイタム）

漢字をクイズ形式に読み解いていくだけでオリジナルのメディアモンスターが作成され、
バトルを楽しめるサイト。
ただバトルを眺めているだけでなく3つのコマンドを使用してバトルすることが出来て、しかも
バトルするごとに記録され強くなっていく仕組み。

こちら俺の作成したメディアモンスター。
http://www.verbatim.jp/senshuken/?id=3251

diary | スタディアップアクションスクピプト

Fri, 16 Oct 2009 13:37:49 +0900

ほんとどーでもいー話ですが
当ブログのサブタイトルとして使用している"Studyup ActionScript"ですが、
先ほど職場のディレクターに「スペル間違ってるよ。」と指摘されスペルミスが発覚しましたorz

●修正前

●修正後

このブログやりだして一年弱ですがまるで気付かなかった・・・。
最初はちゃんとscriptって書いてたような・・イメージをブロックとしてしか見てなかったからなのか。
スクピプトってなんだ！？
俺は一年弱もアクションスクピプトブログを更新してたのか・・・
なにがどーなってスペルミスに気付かなかったのかさっぱりです。
自分を疑い出せばキリないですが、久々にはずかすぃー気持になりました。

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

Fri, 09 Oct 2009 10:24:09 +0900

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

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

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

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

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

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

DUBFLASH

AS3 | DigiMask Effect from Pentagon

Alternativa3D 7.6 | Pv3dライクな初期設定＋PlaneTester

STROX 【ストロークス】 始めました

Like | 放置プレイなのかもね

Away3D-Lite | CubeDivision

Away3D-Lite | Cube6で6面イメージ張り付け

1枚の画像で6面分を2段に並べる

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

親子関係のルール決め

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

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

wonderfl | 音 particlesSoundVisualizer

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

Blogparts | Twitter連動ブログパーツ twitime!!

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

Website | 全日本バーべイタム選手権

diary | スタディアップアクションスクピプト

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

STROX 【ストロークス】始めました