光が降り積もるアニメーション

light_drop



光の粒が落ちて下に溜まる様子を表現したアニメーションです
解説はつづきから






新規ファイル作成
ステージ設定はサイズを400×300、背景を黒、フレームレートを30に





まずは背景を作成
400×300の矩形を描き画像のように#5A3A01から#000000の色でグラデーション






新規レイヤーを作成し、400×5の矩形を描く
線はなし、塗りを#FFFFFF
ムービークリップシンボルに変換し、基準点を真中の下に
インスタンス名をboxにし、位置を画像のように





フィルタを画像のように3つかける
一つ目はグローで、ぼかしを水平、垂直30に、強度100%、カラーを#FFCC33
二つ目もグローで、ぼかしを水平、垂直40に、強度100%、カラーを#FFCC33でグロー(内側)にチェックをいれる
三つ目はぼかしで、水平0、垂直10に





次に新規シンボル作成から6×6の円を描き、画像のように#FFFFFFから#FFCC33の色でグラデーション





描いた円をさらにシンボル化
ActionScriptに書き出しにチェックを入れて、クラス名をLightに





Lightにフィルタ:グローをかける
ぼかしを水平、垂直8に、強度100%でカラーを#FFCC33




シーン1に戻って、新規レイヤー追加しActionScriptを記述

var lightBall:Light;

//光が発生しているかどうか
var droped:Boolean = false;

//ステージをクリックするのを他のものが
//邪魔するので反応しないように
stage.mouseChildren = false;

//タイマー間隔設定
var timer:Timer = new Timer(50);

//ステージをクリックして光の発生を切り替えるための設定
stage.addEventListener(MouseEvent.CLICK, outMouse);
function outMouse(e:MouseEvent):void {

    //光が発生しているとき
    if (droped) {
        Mouse.show();    //マウスカーソル出現
        droped = false;    //光の発生をオフに

        //光を発生するイベントを取り除く
        timer.removeEventListener(TimerEvent.TIMER, createLight);
        timer.stop();

    //光が発生していないとき
    } else {
        Mouse.hide();    //マウスカーソル隠す
        droped = true;    //光の発生をオンに

        //光を発生するイベントを追加
        timer.addEventListener(TimerEvent.TIMER, createLight);
        timer.start();
    }
}

//光を発生させる設定
function createLight(e:Event):void {
    lightBall = new Light();

    //光の位置をマウス位置の周辺ランダムに
    lightBall.x = mouseX + Math.random() * lightBall.width;
    lightBall.y = mouseY - Math.random() * lightBall.height;
    //光の大きさ設定
    lightBall.scaleX = lightBall.scaleY = Math.random()+0.5;
    addChild(lightBall);    //光追加

    //光の動きのイベント追加
    lightBall.addEventListener(Event.ENTER_FRAME, animate);
}

//光の動きの設定
function animate(e:Event):void {
    //光を徐々に透明に
    e.target.alpha -= 0.01;
    //光を徐々に小さく
    e.target.scaleX = e.target.scaleY -= 0.01;
    //光の位置を徐々に下へ
    e.target.y += 3;

    //光がboxとぶつかった時の設定
    if (e.target.hitTestObject(box)) {
        //光の動きのイベント除去
        e.target.removeEventListener(Event.ENTER_FRAME, animate);
        //光を除去
        removeChild(e.target as Sprite);
        //boxの高さを増やす
        box.height += 0.05;
        //一定値でboxの高さ固定
        if (box.height>200) {
            box.height = 200;
        }
    }
}


これでムービープレビューすると以下のようになってるかと思います







以上、光が降り積もるアニメーションの作り方でした