Flashでウィグラーみたいな効果をつけてみたかった #flash

タイムラインで表現しきれない思いが、我々にはある。
時にスクリプトにその思いをぶつけるわけだけれども、たいてい再利用できないクソコードが出来上がる。
しかし、現代、記すことができる。
まずはコードを貼り付ける。

import flash.geom.Transform;
import flash.geom.ColorTransform;

var trans:Transform = new Transform(bg);
var colorTrans:ColorTransform = new ColorTransform(1,1,1,1,0,0,0,0);

var w:int = bg.width;
var hh:int = bg.height;
var posiX:int = bg.x;
var posiY:int = bg.y;

bg.addEventListener(Event.ENTER_FRAME, bgclchange);

function bgclchange(evt):void{
    var go:int = Math.random() * 60;
    var ro:int = Math.random() * 255 * 2;
    var bo:int = Math.random() * 60;

    colorTrans.greenOffset = go;
    colorTrans.redOffset = ro;
    colorTrans.blueOffset = bo;

    if(ro > 140 && ro < 160){
        var vw:int = w * ro / 100;
        bg.width = vw;
        bg.x = posiX + ((w - vw) / 2);
    }else if(ro > 120 && ro < 140){
        var vh:int = hh * ro / 100;
        bg.height = vh;
        bg.y = posiY + ((hh - vh) / 2);

    }else if(ro > 200){
        var rand:int = Math.random() * 100;
        if(rand < 50){
            bg.x = posiX + ro/100;
            bg.y = posiY + ro/100;
        }else{
            bg.x = posiX - ro/100;
            bg.y = posiY - ro/100;
        }
    }else{
        bg.width = w;
        bg.x = posiX;
        bg.height = hh;
        bg.y = posiY;
    }
    trans.colorTransform = colorTrans;
}

もともとこんな長いものを書くつもりはなかったのだが、コードとは冗長になりがちである。

さて、ウィグラーとは何かということについて、
http://zero.ie-t.net/tutorials/basic/wiggler-motionblur/
今回は上記のURLのようにタイムラインにランダムなキーフレームを打ってくれるAfterEffectsの機能を指す。
Flashをやっていると、あまりのタイムラインの扱いのむつかしさから、上記のようなクソコードがしばしば錬成される。

今回は、bgというmovieClipを、一定のしきい値を設けて、大きさを変更したり、位置を変更したりしている。
常に色は変更している。
色の変更は、下記部分だ。

var go:int = Math.random() * 60;
var ro:int = Math.random() * 255 * 2;
var bo:int = Math.random() * 60;

colorTrans.greenOffset = go;
colorTrans.redOffset = ro;
colorTrans.blueOffset = bo;

いちいち変数に格納しているのは、後で値を使うかなーと思ったからだ。

var trans:Transform = new Transform(bg);
var colorTrans:ColorTransform = new ColorTransform(1,1,1,1,0,0,0,0);

~中略~

trans.colorTransform = colorTrans;

色の変更は上記コードを宣言後、ひとつ前のコードを呼ぶだけで行える。
TransFormなどについては自分で探してみてほしい。
今回は安直にbgにaddEventListenerをくっつけているのでフレーム毎にランダムな色に切り替わることになっている。
60fpsで試しているので本当にそうなのかわからない。（flashPlayerはコマ落ちしてないだろうか…）
アラートを意識したので、赤の変化量が大きい。

さて、スケールと、位置の調整だが、

if(ro > 140 && ro < 160){
    var vw:int = w * ro / 100;
    bg.width = vw;
    bg.x = posiX + ((w - vw) / 2);
}else if(ro > 120 && ro < 140){
    var vh:int = hh * ro / 100;
    bg.height = vh;
    bg.y = posiY + ((hh - vh) / 2);
}else if(ro > 200){
    var rand:int = Math.random() * 100;
    if(rand < 50){
        bg.x = posiX + ro/100;
        bg.y = posiY + ro/100;
    }else{
        bg.x = posiX - ro/100;
        bg.y = posiY - ro/100;
    }
}

赤のオフセットをキーとして、140より大きく160より小さい場合は幅を伸ばして、中心に来るようにxの値を調整。
120より大きく140より小さい場合は、高さを伸ばして、yの値を調整。
赤のオフセットが200を超えている場合は、ポジションをランダムに移動。
今回はランダムに値をとって、右上か左下に移動するように設定している。

これでウィグラーっぽい動きができたと感じている。

使うとは一言も言ってない。