ActionScript3を使用して、ランダムに落下するボールを作成します。

落下を表現するには通常「イージング」を使用したり、前回の投稿「クリックするとランダムに移動するBOX」にあるTweenerを使う方法があります。
今回はそれらを使用せず、もっと簡単にできる方法を紹介します。

ボールグラフィックの作成

まず最初に画面サイズですが、落下がわかるように300×400の縦長にします。
その後に数値をランダムにする設定をします。

ransu設定

落下するボールの色、サイズ、出現位置をランダムにするために必要な設定をします。

function ransu(a):Number {
var hensu = Math.random()*a;
return hensu;
}

これは前回のランダムに移動するBOXと同じ設定です。

やっとボールグラフィックの作成

これも前回のランダムに移動するBOXの時と同じで「Sprite」でグラフィックを作成します。
「drawCircle」を設定することで円ができます。ちなみに四角は「drawRect」です。

var ball = new Sprite();
ball.graphics.beginFill(ransu(1) * 0xFF0000); //色の設定
ball.graphics.drawCircle(ransu(300), -200, ransu(50)) //円のグラフィック設定
addChild(ball);

drawCircleの()内を解説しますと、(X軸の位置, Y軸の位置, サイズ)となります。

落下の設定

物が落下するときは一定の速度で落ちるのではなく、だんだん早くなりますのでその設定が大事です。

var yvel:Number = 4;
var yAcc:Number = 1;

addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
function onLoop(evt:Event):void {
ball.y += yvel;
yvel += yAcc;
}

上記のソースを解説しますと、addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);の設定はボールグラフィックが登場したときにイベントを発生させます。
function onLoop(evt:Event):voidはイベントをループさせて実行させます。
ball.y += yvel;はボールグラフィックに変数yvelの値「4」を代入します。+=にすることでY軸に「4」ずつボールグラフィックにプラスしています。
yvel += yAcc;を設定することで「4」の値をもつ変数yvelに「1」を代入します。この設定でyvelは「4」「5」「6」「7」…と増えていきます。これでボールグラフィックは加速してY軸を移動します。

実行するタイミングの設定

今までのソースでもランダムにボールが落下しますが、読み込み毎にしか実行されないのでボタンの設定をします。

ボタンのムービークリップの作成

Photoshopでボタンを作成して、それをFlashのライブラリに読み込ませます。そのボタンをムービークリップにします。そして、ライブラリ内で出来たムービークリップを右クリックしてリンケージ設定を行います。
「ActionScriptに書き出し」にチェックを入れ、クラス名を「Btn」にします。

ActionScriptでのボタンの設定

先程作成したボタンムービークリップをステージに配置します。その設定もActionScriptで行います。

var btn:MovieClip = new Btn();
btn.x = 100; //BtnムービークリップのX軸の位置
btn.y = 350; //BtnムービークリップのY軸の位置
btn.buttonMode = true; //リンクカーソル設定
addChild(btn);

最後の設定

作成したボールグラフィックの実行タイミングを設定すれば終わりです。
ボタンをクリックした際にランダムにボールが落下してくれるようにします。

btn.addEventListener(MouseEvent.CLICK, FallBall);

function FallBall(evt:Event) :void {
}

ボタンムービークリップが押された際に、「FallBall」の{}に記述したソースを実行します。
ここにはボールグラフィックと落下設定のソースを記述します。

全てのソース

今まで書いたことをまとめると下記のソースになります。

var btn:MovieClip = new Btn();
btn.x = 100; //BtnムービークリップのX軸の位置
btn.y = 350; //BtnムービークリップのY軸の位置
btn.buttonMode = true; //リンクカーソル設定
addChild(btn);


btn.addEventListener(MouseEvent.CLICK, FallBall);

function FallBall(evt:Event) :void {
	var ball = new Sprite();
	ball.graphics.beginFill(ransu(1) * 0xFF0000); //色の設定
	ball.graphics.drawCircle(ransu(300), -200, ransu(50)) //円のグラフィック設定
	addChild(ball);
	
	var yvel:Number = 4;
	var yAcc:Number = 1;
	
	addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
	function onLoop(evt:Event):void {
		ball.y += yvel;
		yvel += yAcc;
	}
}

function ransu(a):Number {
	var hensu = Math.random()*a; 
	return hensu; 
}

サンプル

1. Web-Parkのホーム > 
2. Flash > 
3. ActionScript３.0でランダムに落下するボールを作成