大阪のデザイン事務所 アドアチーブ株式会社のオフィシャルブログ

大阪のデザイン事務所 アドアチーブ株式会社のオフィシャルブログ

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:
  情報を記憶:
 
 
 

▼ Advertisement ▼

ソファー卸通販店だから高級ソファーが安い!

最高のソファーをお求めなら価格も質も魅力的な当店で!サイトのかわいい雰囲気も大好評です!

高級なソファーをお手頃価格でご提供!かわいいソファーも取り揃えております。!

▼ Advertisement ▼

最適な税理士をご紹介!

税理士は、ご相談の内容やご希望に合った方を選ぶと効率的!貴社にそんな税理士をご紹介いたします!紹介料は無料です!


当社サービス一覧

Branding

制作実績

Design

ロゴマーク
キャラクター
名刺
封筒
便箋
クリアファイル
紙袋
不織布バッグ
リーフレット
会社案内
社章

販売促進

チラシ
DM
ポケットティッシュ
横断幕
シール
挨拶状

WEB

ホームページ作成

EC

Tシャツ
作業服
ル・コルビジェ

不動産会社向け

不動産契約書ファイル
宅建業者票

Etc.

税理士紹介
イラストダウンロード
カメラマン探しのフリカム
アンケート・統計調査