噴水のようなアニメーション

habu0242009-06-04



今回はボールをたくさん動かして噴水のようになっているアニメーションを作ります




まずはステージ設定
サイズは400×300、フレームレートは30にします


レイヤー1の1フレーム目をクリックし、アクションパネルを開きます


まずはボールの作成と配置から記述していきます

var count:uint = 100;    //ボールの数

//ボールの作成、初期設定
for (var i = 0; i < count; i++) {
  var ball:MovieClip = new MovieClip();
  ball.graphics.beginFill(0xffffff *  Math.random());    //ボールの塗り設定(色ランダム)
  ball.graphics.drawCircle(0, 0, 3);    //ボールの座標、半径
  ball.graphics.endFill();    //塗りの適用

  //ボールの初期位置
  ball.x = stage.stageWidth / 2;
  ball.y = stage.stageHeight;

  addChild(ball);    	//ボール設置
}



ムービープレビューで確認すると、少しわかりづらいですが、真中の下のほうにボールが配置されました


次はこのボールに動きを設定していきます

var count:uint = 100;    //ボールの数
var gravity:Number = 0.5;    //重力加速度

//ボールの作成、初期設定
for (var i = 0; i < count; i++) {
  var ball:MovieClip = new MovieClip();
  ball.graphics.beginFill(0xffffff *  Math.random());    //ボールの塗り設定(色ランダム)
  ball.graphics.drawCircle(0, 0, 3);    //ボールの座標、半径
  ball.graphics.endFill();    //塗りの適用

  //ボールの初期位置
  ball.x = stage.stageWidth / 2;
  ball.y = stage.stageHeight;

  //ボールの初期速度
  ball.speedX = Math.random() * 10 - 5;
  ball.speedY = Math.random() * -8 - 5;

  addChild(ball);    	//ボール設置

  //ボールの動きを実行
  ball.addEventListener(Event.ENTER_FRAME, moveBall);
}

//ボールの動き設定
function moveBall(evt:Event):void {

  var ball:MovieClip = MovieClip(evt.target);    //ボールをローカル変数に変換

  ball.speedY += gravity;    //重力の適用

  //ボールに新たな速度適用
  ball.x += ball.speedX;
  ball.y += ball.speedY;
}

ボールに動きがつきましたが、下に落ちたら終わってしまいます

その後の設定をしていきます

var count:uint = 100;    //ボールの数
var gravity:Number = 0.5;    //重力加速度

//ボールの作成、初期設定
for (var i = 0; i < count; i++) {
  var ball:MovieClip = new MovieClip();
  ball.graphics.beginFill(0xffffff *  Math.random());    //ボールの塗り設定(色ランダム)
  ball.graphics.drawCircle(0, 0, 3);    //ボールの座標、半径
  ball.graphics.endFill();    //塗りの適用

  //ボールの初期位置
  ball.x = stage.stageWidth / 2;
  ball.y = stage.stageHeight;

  //ボールの初期速度
  ball.speedX = Math.random() * 10 - 5;
  ball.speedY = Math.random() * -8 - 5;

  addChild(ball);    	//ボール設置

  //ボールの動きを実行
  ball.addEventListener(Event.ENTER_FRAME, moveBall);
}

//ボールの動き設定
function moveBall(evt:Event):void {

  var ball:MovieClip = MovieClip(evt.target);    //ボールをローカル変数に変換

  ball.speedY += gravity;    //重力の適用

  //ボールに新たな速度適用
  ball.x += ball.speedX;
  ball.y += ball.speedY;

  //ボールが下に落ちた後の設定
  if (ball.y > stage.stageHeight) {

    //マウス位置によってY方向速度を変える
    var mouseHeight:Number = stage.stageHeight - mouseY;
    var newSpeedY = Math.random() * (-mouseHeight * 0.03) - 10;

    //ボールの位置設定
    ball.x = stage.stageWidth / 2;
    ball.y = stage.stageHeight;

    //ボールの新たな速度設定
    ball.speedX = Math.random() * 10 - 5;
    ball.speedY = newSpeedY;
  }
}

ボールがステージよりも下の位置にいったときに新たな速度設定をすることによって、いつまでも繰り返すアニメーションになりました
さらにマウスの位置によってY方向の速度も変えるように設定しました



以上、噴水のようなアニメーションの作り方でした