泡のアニメーション

bubble_action



水の中の泡のアニメーションです
ありがちですが、マウス位置で動きが変わるように多少工夫してあります
解説はつづきから






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





まずは背景を作成
400×300の矩形を描き、#2FB3DDから#013954の色でグラデーション





新規シンボルを作成
ActionScriptに書き出しにチェックを入れて、クラス名をBubbleに





画像のように泡を描く
大きい円は#FFFFFFから#CCCCCCのグラデーションで透明度30%
右上の楕円は#FFFFFFから#168AAFのグラデーションで透明度50%




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

var bubbles:Array = new Array();
var count:int = 60;    //泡の数

//泡設定・作成
for (var i:uint=0; i<count; i++) {
    var bubble:Bubble = new Bubble();

    //泡初期位置
    bubble.x = Math.random()*370;
    bubble.y = Math.random()*350+50;

    //マウス位置からステージの中心までの距離
    var dis:Number = mouseX - stage.stageWidth / 2;

    //泡の大きさ、透明度設定
    bubble.scaleX = bubble.scaleY = Math.random()*0.8+0.2;
    bubble.alpha = Math.random() + 0.5;

    addChild(bubble);    //泡設置
    bubbles.push(bubble);    //配列に格納

    //泡のY方向への初期速度
    bubbles[i].speedY = Math.random()*0.5;
    //泡のY方向への加速度
    bubbles[i].acceleration =  Math.random() * 0.1;

    //泡が左右にゆれて動くようにsinを使うのでそのときの角度設定
    //角度初期値
    bubbles[i].cAngle = Math.random() * Math.PI * 2;
    //加算されていく角度設定
    bubbles[i].sAngle = Math.random() * 0.1;
    //ゆれ幅設定
    bubbles[i].rad = Math.random() * 5;
}

addEventListener(Event.ENTER_FRAME,bubbleAction);
//泡の動き設定
function bubbleAction(evt:Event):void {
    dis = mouseX - stage.stageWidth / 2;
    //マウス位置によるX方向速度設定
    var xSpeed:Number = dis / 32;

    for (var i:uint=0; i<count; i++) {
        //Y方向速度を徐々に増加
        bubbles[i].speedY += bubbles[i].acceleration;
        //角度を増加
        bubbles[i].cAngle+=bubbles[i].sAngle;

        //sinの振幅運動とマウス位置で泡のX方向動作設定
        bubbles[i].x+=Math.sin(bubbles[i].cAngle)*bubbles[i].rad+xSpeed;
        //Y方向動作設定、徐々に速く
        bubbles[i].y -= bubbles[i].speedY;

        //泡がステージより上にいったときの設定
        if (bubbles[i].y+bubbles[i].height<0) {
            //X方向、ステージ幅でランダム、マウス位置によって補正
            bubbles[i].x=Math.random()*stage.stageWidth-dis*2;
            //Y方向、ステージの下に
            bubbles[i].y = 400+bubbles[i].height;
            //Y方向の速度を戻す
            bubbles[i].speedY = Math.random()*0.5;
        }
    }
}


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







以上、泡のアニメーションの作り方でした