WebプログラミングT

 目次へ 前へ 次へ

2007/11/20 久米

3.ActionScriptの応用 ムービークリップの基本操作

演習 スロットマシンを作ってみよう ★★★★★

スロットを回す方法
  1. 右記のような2つの帯1と帯2を作る。
  2. メインのタイムライン上に上下くっつけて配置する。
  3. 帯1と帯2をonEnterFrameで下に移動する。
  4. 各帯はあらかじめ決めた位置より下に移動したら、
    上方に帯×2だけ瞬間移動する。
  5. これを繰り返すことによりスロットが回る

縦3駒分を表示する方法

  1. 3駒分のマスクを用意する

横3駒分を表示する方法

  1. 上記3セット(合計帯6個)用意する

帯1の推奨値(帯2も同様)

  1. (シンボルの基準点は左上で作成)
  2. 幅60ピクセル
  3. 高さ540ピクセル
  4. つまり駒の数9つ換算となる
 
 

 

ポイント 帯に駒を描く方法はどうすればよいか

その1 帯のシンボルをクリックし、そこに駒画像を貼る

その2 帯のシンボルを複数複製し、それらに駒画像を貼る

その3 ひとつの帯のシンボルで、駒はgotoAndStop文で変える

帯シンボルのフレームアクション

/*___*/の箇所を埋めよ

//Obiのフレームアクション
this.stop();

var h=this._height;//全長
var koma=h/9;//一駒の高さ
var offset=_root.getOffset();//スロットの窓のy座標
var m = 50;//移動させる高さ
var obiState=0;//帯の状態。0 止まっている, 1 動いている, 2 停止指示された
var slotNo=0;//スロット番号。左側から0〜2。各フレームに記述する

this.onEnterFrame = function() {
    switch(obiState){
        case 0:
            break;
        case 1:
            _y = moveObi();
            break;
        case 2:
            var yy = moveObi();
            var yyy=koma*Math.floor((yy-offset)/koma)+offset;
            _y=yyy;
            obiState=0;
            judgeCenter();
            break;
        default:
            break;
    }
}

function moveObi(){
    var yy = _y;
    yy += m;
    if ((yy-offset)>(koma*6)) {//頭が下に6駒分はみ出たら上側に移動
        /*___*/
    }
    return yy;
}

function stopObi(){
    switch(obiState){
        case 0:
            break;
        case 1:
            obiState=2;
            break;
        case 2:
            break;
        default:
            break;
    }
}

function startObi(){
    switch(obiState){
        case 0:
            obiState=1;
            break;
        case 1:
            break;
        case 2:
            break;
        default:
            break;
    }
}

function judgeCenter(){//絵柄がなにか判定し、_rootのresult配列に設定
    var c="";
    var centerObi=-(Math.round((_y-offset)/koma))+1;
    if(centerObi<0 || centerObi>=9) return;
    c=zugara[centerObi];
    _root.setResult(slotNo, c);
    _root.finishSlot();
}


帯シンボルのフレームobi1のフレームアクション

this.stop();
slotNo=0;

zugara=new Array(
"saru",
"saru",
"todo",
"kara",
"ushi",
"saru",
"ushi",
"todo",
"saru");

ルートのフレームアクション

/*___*/___の箇所を埋めよ

//スロットマシン
//メインのフレームアクション
var finishCount=0;//停止スロットの数0〜3
var result=new Array("", "", "");//3つのスロットが停止したときの絵柄。
result_txt.text="スロットマシン";

obi1_mc.gotoAndStop("obi1");
obi2_mc.gotoAndStop("obi2");
/*____________*/
/*____________*/
/*____________*/
/*____________*/

start_mc.onRelease=function(){
    result_txt.text="   ";
    finishCount=0;
    result[0]="";
    result[1]="";
    result[2]="";
    obi1_mc.startObi();
    obi2_mc.startObi();
    /*________*/
    /*________*/
    /*________*/
    /*________*/
}

stop1_mc.onPress=function(){
    obi1_mc.stopObi();
    obi2_mc.stopObi();
    
}

stop2_mc.onPress=function(){
    /*________*/
    /*________*/
}

stop3_mc.onPress=function(){
    /*________*/
    /*________*/
}

function getOffset(){//窓のy座標
    return mado_mc._y;
}

function finishSlot(){//スロットが停止した時カウントアップさせる
    finishCount++;
    if(finishCount==3){
        judge();
    }
}

function setResult(a,b){//停止した時の絵柄をセット
    result[a]=b;
}

function judge(){//判定
    var a="";
    if(result[0]==result[1]&&result[0]==result[2]&&result[0]!="kara") a="___";
    else if(result[0]==result[1]&&result[0]!="kara") a="___";
    else if(result[0]==result[2]&&result[0]!="kara") a="___";
    else if(result[1]==result[2]&&result[1]!="kara") a="___";
    else a="___";
    result_txt.text=a;
}