雪を降らせたり、桜を散らせたりする定番のひとつ。
泡の動きを表現したアニメーションの作り方をメモしておきます。
1.新規ファイルを用意する
600×400px、フレームレート30のステージを用意します。
そして背景画像を配置します。
2.新規シンボルを作成
○名前: Bubble
○種類: ムービークリップ
▼ActionScriptリンケージ
・ActionScript用に書き出し
・1フレーム目に書き出し
○クラス: Bubble
○基本クラス: flash.display.MovieClip
作成したシンボルの中身に「bubble.png」を配置。
3.ActionScriptを記述
シーン1に戻り、新規レイヤーを追加し以下のように、ActionScriptを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
var bubbles:Array = new Array(); var count:int = 100; //泡の数 //泡設定・作成 for (var i:uint=0; i<count; i++) { var bubble:Bubble = new Bubble(); //泡初期位置 bubble.x = Math.random()*550; 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() * 10; } addEventListener(Event.ENTER_FRAME,bubbleAction); //泡の動き設定 function bubbleAction(evt:Event):void { dis = mouseX - stage.stageWidth / 2; //マウス位置によるX方向速度設定 var xSpeed:Number = dis / 30; 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; } } } |
これで完成です。
泡の数や動きなどを調整したい場合は、ActionScript内をカスタマイズしてください。