申し遅れたのですが、5/1イラストACのユーザー登録の陰で、

Steppyというサービスをリリースしました。

 

写真を選ぶだけで、FLASHアニメーションができちゃうっていうサービスです。

コンセプトにしたのは「シンプルで簡単」なことです。
極力、機能をそぎ落としています。

こんなアニメーションができますよ。

 

FLASH Steppy

 

 

イラストはイラストACの「たけぴ」さんのイラストです。
かわいすぎる。。

 

 

よく使うASで、フェードがあります。
ボタン大量に並べて、アクションどうしよう？ってときに、
何かと便利だったりしますので、ちょっと公開。

アクション作るのめんどい時に
コピペして使っていただければ幸いです。

 

/*MCフェード*/
//（対称MC,アルファ初期値,アルファ最終値,速さ,スタートまでの時間）
function fade(mc,sa,ea,tmp,wait){
    eval(mc)._alpha = sa
    time = 0;
    wait = (wait == undefined)?0:wait;
    eval(mc).onEnterFrame = function(){
        time ++
        if(time > wait){
            if(sa>ea){
                eval(mc)._alpha -= tmp;
                if(eval(mc)._alpha < ea){
                    eval(mc)._alpha = ea;
                    delete eval(mc).onEnterFrame;
                }
            }else{
                eval(mc)._alpha += tmp;
                if(eval(mc)._alpha > ea){
                    eval(mc)._alpha = ea;
                    delete eval(mc).onEnterFrame;
                }
            }
        }
    }
}

 

var　してないので、
ライブラリとして見ないで下さい

でも、こうすれば効率がよくなる、俺はもっと多機能なのを使っている。
というツッ込み等、大歓迎です。

そういえばASライブラリってないんでしょうか？
prototype.jsみたいな。。
 

-----------------------------------------------------------

全然関係ないのですが、ユニオンジャックの
カウンターチェンジについて、今日始めて知りました。
バランス悪い！と突っ込んだら悪くて（センターがズレてて）正解とのこと。
歴史の重みに無知でした。。（恥）

久しぶりにFLASHの話です。

前々からしてみたいと思っていた全画面FLASHを作ることができました◎
なんだか最近クリエイティブから離れていた気がするので、
久しぶりにFLASHを触れて満足（？）です。

楽しいなぁ。こうゆうの。

 

全画面をするときに、ステージサイズをnoScaleにすると、
レイアウトが同じままなので、この_mcは左寄せ　とか、
この_mcはステージサイズに合わせて伸縮する　とか、
いちいち指定しなければなりません。

それをチョッとでも簡単にしようとあがいた結果、
下記のようなスクリプトが出来ました。

汚い書き方さらすのは恥ずかしいのですが…_root1フレーム目--------------------------------------------------------------------------- 

Stage.scaleMode="noScale";
Stage.align="TL";

var myListener:Object = new Object();
myListener.onResize = function () {
     designResize()
}
Stage.addListener(myListener);

stage_w = Stage.width;
stage_h = Stage.height;
//実際にはステージサイズを数字でいれないといけません。

function designResize(){
    for(var i in mc_array){
        //move
        mc= mc_array[i];
        if((eval(mc).m == "x") || (eval(mc).m == "xy")){
            eval(mc)._x = Stage.width-eval(mc).l;
        }
        if((eval(mc).m == "y") || (eval(mc).m == "xy")){
            eval(mc)._y = Stage.height-eval(mc).u;
        }
        //resize
        if((eval(mc).r == "x") || (eval(mc).r == "xy")){
            eval(mc)._width = (Stage.width - stage_w)+eval(mc).w;
        }
        if((eval(mc).r == "y") || (eval(mc).r == "xy")){
            eval(mc)._height = (Stage.height - stage_h)+eval(mc).h;
        }
    }
}

mc_array = new Array();
function coo(mc,mvSw,reSw){
    eval(mc).l=stage_w-eval(mc)._x
    eval(mc).u=stage_h-eval(mc)._y;
    eval(mc).w=eval(mc)._width;
    eval(mc).h=eval(mc)._height;
    eval(mc).m=((mvSw==undefined)||(mvSw==""))?false:mvSw;
    eval(mc).r=(reSw==undefined||(reSw==""))?false:reSw;
    mc_array.push(mc);
}

//coo(MCの名前,移動する方向,リサイズする方向)
coo("xxxxxx_mc","y","x")
designResize()

-----------------------------------------------------------------


coo("xxxxxx_mc","y","x")
っていう関数で、リサイズするときに動く（もしくは拡大する）_mcを指定しておけば
リサイズがあったときに座標（or大きさ）を再計算するよ。
っていう感じのアレです。

右上基準なので、センター寄せとか、
平均っていう考え方は無いのですが、
MC毎に動き方を指定するときなど、こんな感じに作っておくと、
後からだいぶ便利になるかも？

第2,3引数は yx って書いたらアウトです。ｗ
xy と。

何回かやっているのだけど
半年に一回くらいなので、すぐ忘れてしまうんです。

swfの動画を動画形式として書き出す方法。

flashにはmpg書き出しとか付いているんですが、
バージョンを下げないといけなくなり、
（FLASH 8想定してます）

ボカシやらブラーやら、
せっかく付いている
美味しい機能を表現できなくなってしまうんです。


で、探し回って見つけたのが、コレ。

「aviutl」

もともとは動画関係の専用ツールらしいのですが、
swfをきちんとサポートしてくれてます。
swf内に動画が埋め込んであってもOK。

フリーですが、良く使わせていただいてます。
作者様に感謝です。

aviに持ってこれれば後はどうとでもなります
iMovieとかでもいいですし、
adobe系のソフトを持っている人も編集に入れますよね。

ちなみに、swfからスクリーンセーバーを作ろうと
思ったらがLight Saverが便利です、

でも気になってしまうのが、
30fpsで再生できないのはwindowsのせい？
それともスクリプト重すぎ？

bitmap系ゴリゴリすると遅くなります。

業務として使ったことは無いので追求はしていませんが
お手軽にスクリーンセーバー作るときは重宝します◎

こちらも作者様に感謝です。

都合でFLASH MXを使っているのですが、

スクリプト中、なぜ？

というところがあり、これも少し躓いたのでメモ程度に。

actionScriptは、

変数の内容をきちんと指定することも出来るのですが、

横着も出来ます。

（3はダメですけど）

たまたま、ある変数に「001」とか、

そうゆう3桁の数字をストリングで入れてたんですね。

で、配列の番号指定で使おうと思ったわけです。

こんな感じで。

myArray = new Array(1,2,3,4,5);

st = "001";

st = Number(st);

myNumber = myArray[st];

「こんな書き方でもいけるでしょ。多分。」と思ったのです。

で、事実、001〜009位まではいけてたんですね。

ところが、010位から、なぜかうまくいかなくなってしまいました。

010 は　8

011　は　9

とかになってしまうんです。

どうやら

Numberは中身がストリングの場合、

指数表現を伴う10進数として解析しようとすることがあるとのこと。

HELPにも書いてあります。

（2007.12/18追記）----------------------------------
10進数として解析しようとするのはMXで
8は8進数としてかいしゃくするようです。
-----------------------------------------------------------------

FLASHでも正規表現が使えたらなぁ。とため息をもらしつつ、

myArray = new Array(1,2,3,4,5);

st = "001";

stToNum = (st.slice(0,1) == "0")?st.slice(1):st;

stToNum = (stToNum.slice(0,1) == "0")?stToNum.slice(1):stToNum;

myNumber = myArray[stToNum];

のように変更したら正しく動いてました。

FLASH MXで作ってましたが8でも同じです。

お伝えしたかったのは、

HELPに書いてあるようなことでも、

ごちゃごちゃになったスクリプトの中では

見つけるのが難しいですね。

ということです。

バグが発覚したときは、とてつもなく不可解な動きに見えました。

関数を何個もたどり、ループの中身を見直し、

デバッグ用に関数を作り、時間をかけて長いアニメーションを見て、ようやく発見。と。

アニメーションとスクリプトが入り乱れたタイムラインで、skip出来ない後ろの方にバグがあったら。

しかも、SWF単独では動作せず、何かのアプリの一部にSWFを組み込むようなものを作っていたら。

そして、最初は正しく動いていて、データ量が増えたら発覚するようなバグだったら。

本日はまたも、終わってみればしょうもない理由で、

膨大な時間がデバッグに消費されてしまいました。

最初から丁寧に書いていれば、そんなこと無かったろうに。と。

綺麗なスクリプトはやっぱり大事ですね。

長い目でみて、生産性の向上につながります。

常々心がけていきたいものです。

公式BLOGなのに年末年始のアナウンスをしていませんでした。

アドは年末12/29〜1/4までお休みをさせていただきます。

何卒ご理解、ご了承のほど、よろしくお願いいたします。

さて、本日は

「あ、いい◎」

と思ってしまったサイトをご紹介いたします。

コレだけで1日つぶせそうです。

http://direct.motorola.com/hellomoto/colors/

オープニングが終わったら、携帯を気にせず、

画面をドラッグしてみてください。

早くしたり、遅くしたり。

モトローラーのサイトはもちろん日本語版がありますし、

動画をふんだんに取り入れて、すごい良く出来ているんです。

でも、ちょっとこれは別格かも。

お絵かきスクリプトは書いたことがあります。

そんなに難しいものでもないです。

でも、ちょっとこれは別格かも。

ビジュアル的に近いデザインのサイトは見たことがあります。

静止画なら、アニメーションだけならありがちな感じです。

でも、ちょっとこれは別格かも。

アイデアだけなら出るんです。

こうゆうインタラクティブなの。

でも…以下略。

褒めちぎってますが、

いずれ何かの機会でアド風で再現してみたい

と思った今日この頃でした。

最近「COLOR」のキーワードでやばいクリエーターがいっぱい。。

アドの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

気が付けば今年ももう12月ですね。早いものです。

クリスマスやらお正月やらを控えて皆様本当に忙しそうですね。

僕もいっぱいいっぱいです。

まだまだ今年中にやらなければいけないことが。

差し迫って今週中にも。。

さて、久しぶりに大変擽られるサイトを発見したので、ご紹介いたします。

http://casualplay.net/blog/

FLASHのビットマップのエフェクトがすごいです。

AS3関係は本日現時点で無いですが、

こうゆう質の高いサンプルを置いてくれてるサイトは

ホント刺激になります。

普通のリファレンス的なサイトより、

ちゃんとモノにして一歩進ませてる辺が、

物凄くクリエータマインドを感じ、焦ります。

ここしばらく、ビットマップ関係触ってなかったので、

このサイトを見て、またいろいろやりたくなりました◎

とりあえず、アドの「WEB」のページをなんとかしたいです。泣

現状のページだと、

FLASHもつくれますよアピール

ビットマップもゴリゴリアピール

が無い…。

というか、このままではFLASHのバナーがかわいそう…。

ということで、近いうちになんとかします。

また、近いうちACシリーズも

新たにサイトオープン予定です。

・ポストカード

・包装紙

の専門サイトが今週中を目安に誕生します。

ショップのオーナーさま必見です◎

ご期待くださいませ。

本日は強制お食事会です。

スタッフを4つのグループに分けて、

お食事会をしよう。

というアレです。

目的は聞いておりませんが、

どのグループにも社長が入っていることから、

叱咤激励が待ち受けているのでは？と。

推測しています。

本題に入りますが

いつも大企業の割りに面白いことをしている

オリックスのWEBサイトが、

またちょっと面白いことをしてます。

http://orix-sumai.jp/

出てくるだろうな〜。とは思っていましたが

「FLASH BLOG」

BLOGがメインコンテンツになってないあたりが

小憎らしくていい感じです。予算の力を感じます。

SEO対策としてBLOGを使用しているサイトが多い中、これはなかなか。

良く見たらRSSでHTMLの記事へのリンクもあるので、あまり問題ないのかも。

でも個別記事でも

SEOとかあまり気にしている様子ないですね。

さすが大企業　笑

学ぶところは多くありますね。

コンセプトワークやデザイン、

モーションデザインとかもさることながら

画面遷移で画面全体を使ったトランジションだけど、

色数を抑えたシンプルな画面なので、

表示が遅いMACでもサクサク綺麗に動いてる。とか

（他にも工夫はありそうですね）

ＦＷＡなんかに出てくるサイトに比べると

派手さや、目新しさはそんなに無いですが

既に落ち着きつつある技術同士を綺麗に使ってる、

全体的にいい感じのサイトです。

洗練されててとても素敵。。。

くやしなんてないぞ！

オフィシャルのTOPページを変更しました。

一番下にFLASHのバナーがあるのにどこも動いて無いじゃん！

というご指摘が。。。

すみません。

多分特にMACのOS9とかの人は見るのが辛いかも。。

ちょっとだけオブジェクト指向にしてみました。

文字列のMCは最初に与えられたパラメーターにしたがって

それぞれ自分の値で動いています。

弊社のツールは全てお客様しだいなので（笑）

文字はさりげにマウスの方向に流れていきます。

以下が主なスクリプトです。

流用は自由ですが、このままコピペしても動きません。

もし、「やりたいっ！」って人がいたら、

rootにcir_mcを作って、中にmy_txt（ダイナミックテキストです）

を入れてください。

ダイナミックテキストに回転やらアルファやらかけちゃってるので

文字は埋め込まないと表示されません。

あとはrootの1フレーム目にコピペ。と。

init();

text_array = new Array("Web","Logo","Company Profile",

"Leaflet","Buisiness Card","Letter","Badge","Envelope",

"Bag","File","Illustration","Apparel","Agency","Office",

"Sign","DVD","CD Press","Uniform")

function init() {

var co = 0;

var my_len = -1;

this.onEnterFrame = function() {

co++;

if(my_len<=(text_array.length-2)){

my_len++;

}else{

my_len=0;

}

cir_mc.duplicateMovieClip("cir_"+co+"_mc", co);

eval("cir_"+co+"_mc")._x = Math.random()*Stage.width;

eval("cir_"+co+"_mc").tmp = 0.1;

eval("cir_"+co+"_mc").rota_ran = Math.random()*10-5;

eval("cir_"+co+"_mc").or_y = eval("cir_"+co+"_mc")._y;

eval("cir_"+co+"_mc").my_txt.text = text_array[my_len];

eval("cir_"+co+"_mc").scale_tmp = 1+(Math.random()*5)

eval("cir_"+co+"_mc").scale_tmp = (eval("cir_"+co+"_mc").scale_tmp>4.5)?50+eval("cir_"+co+"_mc").scale_tmp*1.8:eval("cir_"+co+"_mc").scale_tmp;

make_action(co);

};

}

function make_action(co) {

eval("cir_"+co+"_mc").onEnterFrame = function() {

eval("cir_"+co+"_mc")._y -= eval("cir_"+co+"_mc").tmp;

eval("cir_"+co+"_mc")._x += (_xmouse-eval("cir_"+co+"_mc")._x)/50

eval("cir_"+co+"_mc")._xscale = eval("cir_"+co+"_mc").scale_tmp*(eval("cir_"+co+"_mc")._y/Stage.height*100)

eval("cir_"+co+"_mc")._yscale = eval("cir_"+co+"_mc").scale_tmp*(eval("cir_"+co+"_mc")._y/Stage.height*100)

if(eval("cir_"+co+"_mc").scale_tmp>50){

eval("cir_"+co+"_mc")._alpha = 50;

}

eval("cir_"+co+"_mc")._rotation += eval("cir_"+co+"_mc").rota_ran/15;

eval("cir_"+co+"_mc").tmp = (eval("cir_"+co+"_mc").or_y-eval("cir_"+co+"_mc")._y)/10;

if (eval("cir_"+co+"_mc")._y<0) {

removeMovieClip("cir_"+co+"_mc");

}

};

}

initで初期値を与えて、

make_actionで動かしている感じですね。

eval("cir_"+co+"_mc").scale_tmp = (eval("cir_"+co+"_mc").scale_tmp>4.5)?50+eval("cir_"+co+"_mc").scale_tmp*1.8:eval("cir_"+co+"_mc").scale_tmp;

↑このあたりがデザイナーな要素です（笑）

もっとスマートな書き方あるでしょ！って気もしますが、

動けばいいじゃん。という葛藤と戦いながら作った訳ですね。

なにもFLASH8を使わないと出来ないわけではないのですが

（確か5位で出来たかと。。）

もっとFLASH PLAYER8のバナーにふさわしいTOPページを作れ！

という声が聞こえてきそうですね。笑

まぁまぁ。

でも、こゆのこそ

bitmap＠AS3で実装してみたい今日のごろです。

今遅くなってる原因のほとんどが

描画速度の問題やと思うので、

AS3だからといって解決しそうに無い気もしますけど。

FLASHのチップスを一つ。

FLASHの完成品

減速をスクリプトでアニメーションしようとすると、

だいたいこんな感じになります。

this.onEnterFrame = function(){

this._x += (230-this._x)/10;

}

目標値までの間を現在より1/10詰めなさい。

ってやつですね。

ここまではリファレンス本などに良く載っているかと思うのですが、

this.onEnterFrame = function(){

this._x += (230-this._x)/10;

if(Math.round(this._x) == 230){

trace('終わったよ')

delete this.onEnterFrame;

_parent.owari();

}

}

こんな感じにすることで、

減速の終了判定が出来ます。

1/10つめる

を繰り返しても延々と数字が細かくなるだけで、

目標値にはたどり着きません。

なので、Math.roundメソッドを使って、

「四捨五入して目標値なら達成したものとする」

というものです。

右から来ても、左から来ても判定出来るので便利です。

終了判定なら他にもいろんな方法がありますが、

スクリプトユーザビリティーとでもいうのでしょうか、

同じ処理でも延々と繰り返し続けると、ブラウザーには負荷がかかります。

そうゆうのは避けたいものですね。

ソースはこちら（FLASH　MXです）

本日の広告

契約とファイルはセットです。

不動産ファイルに限らず、お客様にとって大切な契約には

ac-file.comのファイルをご利用下さい。

http://www.ac-file.com/