画面を隙間なく埋める

fill block



ステージ上を隙間なく、重なりあうことなく埋める配置の仕方です
ついでにちょっと動きもつけてます
解説はつづきから






今回はBetweenAS3というトゥイーンライブラリを使います
詳しくは開発者のBeInteractive!さんのページや、使い方を解説したFountainさんのページをご覧下さい


ダウンロードしたファイルを解凍してできたorgフォルダを今回つくるflaファイルと同じ場所に設置します
そしてflaファイルを作成します




新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30





新規シンボル作成からActionScriptに書き出しにチェックを入れて、クラス名をBoxに





幅4、高さ300の矩形を描き基準点を左上に
線なし、色は上が#003366、下が#000000のグラデーション




シーン1に戻ってActionScriptを記述

//BetweenAS3をインポート
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.easing.*;
import org.libspark.betweenas3.tweens.ITween;

var stageW = 400;    //ステージの横幅
var boxW = 4;    //Boxの横幅
var total = stageW/boxW;    //全体を覆うのに必要なBoxの総数

//Boxの総数分だけ番号を配列に格納
var list:Array = new Array();
for (var i = 0; i < total; i++) {
    list.push(i);
}

//タイマー設定、イベント追加
var timer:Timer = new Timer(100);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();

//タイマーイベント設定
function timerHandler(e:Event):void {
    //配列に番号が入ってる時
    if (list.length) {

        //配列の中の番号からランダムで1つ選択
        var rnd:int = Math.random()*list.length;
        var num:int = list[rnd];
        //選択された番号を配列から削除
        list.splice(rnd,1);

        var box:Box = new Box();
        box.x = num*boxW;    //選択された番号でBoxの位置決定
        box.y = 300;
        addChild(box);

        //トゥイーン設定
        BetweenAS3.tween(box,{y:0},null,2.0,Bounce.easeOut).play();

        //ボタンモードとクリックイベント解除
        this.buttonMode = false;
        stage.removeEventListener(MouseEvent.CLICK, clickHandler);

    //配列に何も入ってないとき
    } else {

        //ボタンモードON、クリックイベント追加
        this.buttonMode = true;
        stage.addEventListener(MouseEvent.CLICK, clickHandler);
    }
}

//クリックイベント設定
function clickHandler(e:MouseEvent):void {

    //ステージ上のMC削除
    while (numChildren > 0) {
        removeChildAt(0);
    }
    //配列に再び番号を格納
    for (i = 0; i < total; i++) {
        list.push(i);
    }
}


これでムービープレビューすると以下のようになってるかと思います







以上、画面を隙間なく埋めるアクションの作り方でした