泡のアニメーション
水の中の泡のアニメーションです
ありがちですが、マウス位置で動きが変わるように多少工夫してあります
解説はつづきから
新規ファイル作成
ステージ設定はサイズを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; } } }
これでムービープレビューすると以下のようになってるかと思います
以上、泡のアニメーションの作り方でした