ActionScript３.0でランダムに落下するボールを作成

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; 
}

サンプル

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

オススメ本（既読）

読んでみたい本（未読）

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT PLEASE!!

トラックバック

「ActionScript３.0でランダムに落下するボールを作成」のトラックバックURL: Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/flash/fallball.html/trackback