アドアチーブ株式会社

アドアチーブ株式会社 オフィシャルブログ

2006.12.06アレっぽいFLASH

アドのWEBのページを変えました。

http://www.a-ac.jp/web/index.html

有機的な動きをするFLASHは以前から作ってみたかったので。

重くてすみません。。。

もうすこしアレっぽくしたかったのですが、

睡眠時間が。。また今度。

っていうかアレ、モーションランプって言うんですね。

調べるの大変でした。

ちなみにもしアレを作る場合、

今の延長ではない感じですね。

初期値、ランダム値を作る分では使えそうですが、

全体の量が変わらないはず。って所で工夫が要りそう。

またいつか、じっくり考えてみたいです。

これを作るうえで、参考にさせていただいたのが、

先日も紹介した

http://casualplay.net/blog/2005/11/post_3.htmlです。

ソースを公開しているとこが非常に参考になったので、

僕も公開しちゃいます。

GPLではないですけど。

import flash.display.*;

import flash.geom.*;

import flash.filters.BlurFilter;

var w:Number = Stage.width;

var h:Number = Stage.height;

var octaves:Number = 3;

//2つの雲をもつMC作成

var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());

//背景側

var bitmapData_1:BitmapData = new BitmapData(w, h, true, 0);

var mc_1:MovieClip = mc.createEmptyMovieClip("mc_1", mc.getNextHighestDepth());

mc.mc_1.attachBitmap(bitmapData_1, mc.getNextHighestDepth());

var randomNum:Number = Math.floor(Math.random()*10);

//前面側(ブレンドモード「加算」)

var bmp:BitmapData = new BitmapData(w, h, true, 0);

var mc_2:MovieClip = mc.createEmptyMovieClip("mc_2", mc.getNextHighestDepth());

mc.mc_2.attachBitmap(bmp, mc.getNextHighestDepth());

mc.mc_2.blendMode = 8;

mc.mc_2.cacheAsBitmap = true;

mc.mc_1.cacheAsBitmap = true;

//二つの動く距離指定

var offset:Array = new Array();

var speed:Array = new Array();

for (var i:Number = 0; i < octaves; i++) {

offset[i] = new Point(Math.random()*w, Math.random()*h);

speed[i] = new Point(0, 1.5);

}

var offset_1:Array = new Array();

var speed_1:Array = new Array();

for (var i:Number = 0; i < octaves; i++) {

offset_1[i] = new Point(Math.random()*w, Math.random()*h);

speed_1[i] = new Point(0,0.5);

}

var rdm:Number = Math.random()*1000;

//var clr:ColorTransform = new ColorTransform(1.5, 1.5, 2, 1, 0, 0, 0, -30);

//mcをビットマップ化したもの

var myBitmapData:BitmapData = new BitmapData(w, h, false, 0x00FFFFFF);

myBitmapData.fillRect(new Rectangle(0, 0, w,h), 0x00000000);

//mcをビットマップ化したものに閾値をかけたもの

var myBitmapData_1:BitmapData = new BitmapData(w, h, true, 0x00FFFFFF);

var mc_1:MovieClip = this.createEmptyMovieClip("mc_1", this.getNextHighestDepth());

mc_1.attachBitmap(myBitmapData_1, this.getNextHighestDepth());

myBitmapData_1.fillRect(new Rectangle(0, 0, w,h), 0x00000000);

var translateMatrix:Matrix = new Matrix();

var myColorTransform:ColorTransform = new ColorTransform();

mc_1.cacheAsBitmap = true;

//ぼかし

var blurX:Number = 2;

var blurY:Number = 2;

var quality:Number = 2;

var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);

var filterArray:Array = new Array();

filterArray.push(filter);

mc_1.filters = filterArray;

this.onEnterFrame = function():Void {

for (i = 0; i < octaves; i++) {

offset[i].x += speed[i].x;

offset[i].y += speed[i].y;

offset_1[i].x -= speed_1[i].x;

offset_1[i].y -= speed_1[i].y;

}

bmp.perlinNoise(w/3, h/2, octaves, rdm, false, true, 0, true, offset);

bitmapData_1.perlinNoise(w/3, h/2, octaves, rdm, false, true, 0, true, offset_1);

//mcの取り出し

myBitmapData.draw(mc, translateMatrix, myColorTransform, null, null, false);

//mcの単純色化(背景白)

myBitmapData_1.threshold(myBitmapData, new Rectangle(0, 0, w, h), new Point(0, 0), ">=", 0xFFCCCCCC, 0xFFFFFFFF, 0xFFFFFFFF, true);

//mcの単純色化(白で無いとこは赤)

myBitmapData_1.threshold(myBitmapData_1, new Rectangle(0, 0, w, h), new Point(0, 0), "<", 0xFFFFFFFF, 0xFFFF0000, 0xFFFFFFFF, true);

//bmp.colorTransform(bmp.rectangle, clr);

};

もうちょいスマートなやり方、

いい変数名がありそうなのはご愛嬌ということで。

原理的には

流れる雲でやっている、perlinNoiseのスクロールを2つ重ねて

1つのMCの中に入れます。

このとき、上のビットマップにフィルタで「加算」をかけます。

そうやって出来たMCを閾値で分けます。

グレー50%以上なら黒、以下なら白

みたいな感じでチョコチョコ調整しながら、

この位?と思う値にして色をつけます。

閾値でわけると、なかりギジャギジャな見た目になりますので、

適当にぼかします。

動き方とかは適度に調整しました。

という具合で。

ステージサイズにフィットしますので、

でかくなると多分動かなくなります。

ボカシレベルやらノイズのoctavesやら調整すれば多少いけるかも?

著作権とかはいい刺激を与えて頂いた作者様に習います。

http://casualplay.net/blog/2005/11/post_2.html

この記事へのトラックバック

トラックバックURL:  http://www.adachieve.com/~mt/mt334/mt-tb.cgi/778


この記事へのコメント

1. Posted by 櫛部@esrise   2006年12月07日 18:31

「アレ」というより、

「アメーバ」に見えた櫛部です(笑)

いつも楽しく拝見しております。

師走ということも手伝って

本当にお仕事お忙しそうですが、

お体をお大事にして

がんばってください♪

先日、GooglePageRankの話題がコチラに出ていましたが、

Googleのツールバーを付けているので、私もかなり気になってしまいます。

最後にどうでもいい話をひとつ。

GooglePageRankのPageは、Webページのページではなくて、

グーグルの創設者の1人ラリー・ページ(Lary Page)氏のファミリーネームのページらしいですよ♪

本当にどうでもいいですね・・・

2. Posted by ad   2006年12月07日 18:47

お気遣い頂き、ありがとうございます。櫛部様もお体にはお気をつけ下さいませ。

アメーバ説、鋭いッス!

本当は顕微鏡のイラストを入れたかったのですが。。

睡眠時間が!

ページの由来は実は知ってました。。

でも、どうでもいい情報、僕は大好きです◎

本町東のエレベータ前のカーペットが実は結構気になってます。


名前:
E-mail:
URL:
  情報を記憶: