«
»

ケータイFlashでエリア選択メニューを作ってみよう

By ookura - 09/03/13 - このエントリをはてなブックマークに追加このエントリをYahoo!ブックマークに追加このエントリをdel.icio.usに追加このエントリをFC2ブックマークに追加

今回は階層型メニューの応用で地図からエリアを選択するメニューの作り方について説明します。
※今回のサンプルはFlashLite1.1対応です。
　
階層型の作成については以前紹介させていただいた以下のサンプルを参考にして下さい。
参照：ケータイFlashで階層型メニューを作ってみよう
　

画面イメージ


　

　
　

サンプルページ


→URLをメールで送る
http://ookura.tanikaze.com/Sample/post2863/
　
　

flaファイルサンプル

sample2863.zip※Flash8形式
　
　

エリア選択メニューについて

ケータイFlashで視覚的なメニューを用意することで単純にリンクで一覧表示していた店舗検索ページをリッチなデザインに一変させることができます。
　
グラフィカルなエリア選択メニューを設置している例としてはホットペッパーのケータイ版サイトがあります。
ホットペッパーケータイサイト

→URLをメールで送る
http://hotpepper.jp/
エリアで探す→全国
　
こういったメニューを用意しているサイトはPCサイトではよくありますが、ケータイサイトではまだ珍しいです。
　
　
　

エリア選択メニューを作成するには

エリア選択メニューは階層型メニューを改良すれば作成可能です。
時間がかかる部分があるとすればエリアごとの地図を用意する部分かと思います。
　
作例では地図をトレースしていますが時間がかかる作業になりますので、丸や四角形でも良いかと思います。
　
　

手順

今回は作成手順は省略させて頂きます。flaファイルをご参照下さい。
　
スクリプトだけ載せておきます。
　
１番目のボタン

on (rollOver) {
    currentBtn = 1;
    pressKey = "";
    call("select");
}
on (press, keyPress "<Enter>") {
    pressKey = "";
    call("press");
}

　
２番目のボタン

on (rollOver) {
    currentBtn = 2;
    pressKey = "";
    call("select");
}

　
３番目のボタン

on (rollOver) {
    currentBtn = 3;
    pressKey = "";
    call("select");
}

　
１フレーム目

// 初期アクション
// フォーカス枠を表示しない
_focusrect = false;
// レンダリング画質を「高」にする
fscommand2("SetQuality", "high");
// 最初は未選択なので初期ボタン番号は0
btnNo = 0;
// 選択番号は1とする
mainSelectNo = 0;
subSelectNo = 0;
// サブウィンドウの初期値は0
subWindow = 0;
// メインメニューの最大値は9
main_menu_max = 9;
// サブメニューの最大値はメニュー5件＋CLOSE1件で6
sub_menu2_max = 7;
sub_menu3_max = 9;
sub_menu4_max = 6;
sub_menu5_max = 5;
sub_menu6_max = 7;
sub_menu7_max = 6;
sub_menu8_max = 5;
sub_menu9_max = 9;
// 各地域の都道府県番号を指定
dist_2_1 = 2;
dist_2_2 = 3;
dist_2_3 = 4;
dist_2_4 = 5;
dist_2_5 = 6;
dist_2_6 = 7;
dist_3_1 = 8;
dist_3_2 = 9;
dist_3_3 = 10;
dist_3_4 = 11;
dist_3_5 = 12;
dist_3_6 = 13;
dist_3_7 = 14;
dist_3_8 = 19;
dist_4_1 = 15;
dist_4_2 = 16;
dist_4_3 = 17;
dist_4_4 = 18;
dist_4_5 = 20;
dist_5_1 = 21;
dist_5_2 = 22;
dist_5_3 = 23;
dist_5_4 = 24;
dist_6_1 = 25;
dist_6_2 = 26;
dist_6_3 = 27;
dist_6_4 = 28;
dist_6_5 = 29;
dist_6_6 = 30;
dist_7_1 = 31;
dist_7_2 = 32;
dist_7_3 = 33;
dist_7_4 = 34;
dist_7_5 = 35;
dist_8_1 = 36;
dist_8_2 = 37;
dist_8_3 = 38;
dist_8_4 = 39;
dist_9_1 = 40;
dist_9_2 = 41;
dist_9_3 = 42;
dist_9_4 = 43;
dist_9_5 = 44;
dist_9_6 = 45;
dist_9_7 = 46;
dist_9_8 = 47;
// 都道府県のリンク先指定
pref_1_url = '/Sample/post2863/link/pref/1/';
pref_2_url = '/Sample/post2863/link/pref/2/';
pref_3_url = '/Sample/post2863/link/pref/3/';
pref_4_url = '/Sample/post2863/link/pref/4/';
pref_5_url = '/Sample/post2863/link/pref/5/';
pref_6_url = '/Sample/post2863/link/pref/6/';
pref_7_url = '/Sample/post2863/link/pref/7/';
pref_8_url = '/Sample/post2863/link/pref/8/';
pref_9_url = '/Sample/post2863/link/pref/9/';
pref_10_url = '/Sample/post2863/link/pref/10/';
pref_11_url = '/Sample/post2863/link/pref/11/';
pref_12_url = '/Sample/post2863/link/pref/12/';
pref_13_url = '/Sample/post2863/link/pref/13/';
pref_14_url = '/Sample/post2863/link/pref/14/';
pref_15_url = '/Sample/post2863/link/pref/15/';
pref_16_url = '/Sample/post2863/link/pref/16/';
pref_17_url = '/Sample/post2863/link/pref/17/';
pref_18_url = '/Sample/post2863/link/pref/18/';
pref_19_url = '/Sample/post2863/link/pref/19/';
pref_20_url = '/Sample/post2863/link/pref/20/';
pref_21_url = '/Sample/post2863/link/pref/21/';
pref_22_url = '/Sample/post2863/link/pref/22/';
pref_23_url = '/Sample/post2863/link/pref/23/';
pref_24_url = '/Sample/post2863/link/pref/24/';
pref_25_url = '/Sample/post2863/link/pref/25/';
pref_26_url = '/Sample/post2863/link/pref/26/';
pref_27_url = '/Sample/post2863/link/pref/27/';
pref_28_url = '/Sample/post2863/link/pref/28/';
pref_29_url = '/Sample/post2863/link/pref/29/';
pref_30_url = '/Sample/post2863/link/pref/30/';
pref_31_url = '/Sample/post2863/link/pref/31/';
pref_32_url = '/Sample/post2863/link/pref/32/';
pref_33_url = '/Sample/post2863/link/pref/33/';
pref_34_url = '/Sample/post2863/link/pref/34/';
pref_35_url = '/Sample/post2863/link/pref/35/';
pref_36_url = '/Sample/post2863/link/pref/36/';
pref_37_url = '/Sample/post2863/link/pref/37/';
pref_38_url = '/Sample/post2863/link/pref/38/';
pref_39_url = '/Sample/post2863/link/pref/39/';
pref_40_url = '/Sample/post2863/link/pref/40/';
pref_41_url = '/Sample/post2863/link/pref/41/';
pref_42_url = '/Sample/post2863/link/pref/42/';
pref_43_url = '/Sample/post2863/link/pref/43/';
pref_44_url = '/Sample/post2863/link/pref/44/';
pref_45_url = '/Sample/post2863/link/pref/45/';
pref_46_url = '/Sample/post2863/link/pref/46/';
pref_47_url = '/Sample/post2863/link/pref/47/';
stop();

　
２フレーム目

// ロールオーバーしたときのアクション
// 1番目のボタンにフォーカスしている場合
if (currentBtn == 1) {
    if (btnNo == 2) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    // 2番目のボタンにフォーカスしている場合
} else if (currentBtn == 2) {
    if (btnNo == 3) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    // 3番目のボタンにフォーカスしている場合
} else if (currentBtn == 3) {
    if (btnNo == 0) {
        btnDir = "up";
    } else if (btnNo == 1) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
}
// サブウィンドウを閉じている時       
if (subWindow == 0) {
    // ボタンの上下移動を元にスクロール番号を増減 
    if (btnDir eq "up") {
        mainSelectNo--;
    }
    if (btnDir eq "down") {
        mainSelectNo++;
    }
    // スクロール番号が端まで達したら反対側にループさせる          
    if (mainSelectNo>1) {
        mainSelectNo = main_menu_max;
    } else if (mainSelectNo>main_menu_max) {
        mainSelectNo = 1;
    }
    for (i=1; i>=main_menu_max; i++) {
        if (mainSelectNo == i) {
            tellTarget ("japan_group_mc/dist_" add i add "_mc") {
                gotoAndStop(2);
            }
        } else {
            tellTarget ("japan_group_mc/dist_" add i add "_mc") {
                gotoAndStop(1);
            }
        }
    }
    // スクロール処理をループ実行する
    gotoAndPlay("scroll");
    // サブウィンドウを開いている時
} else {
    // ボタンの上下移動を元にスクロール番号を増減 
    if (btnDir eq "up") {
        subSelectNo--;
    }
    if (btnDir eq "down") {
        subSelectNo++;
    }
    // スクロール番号はループさせる          
    if (subSelectNo>1) {
        subSelectNo = eval("sub_menu" add mainSelectNo add "_max");
    } else if (subSelectNo>eval("sub_menu" add mainSelectNo add "_max")) {
        subSelectNo = 1;
    }
    for (i=1; i>=eval("sub_menu" add mainSelectNo add "_max"); i++) {
        if (subSelectNo == i) {
            tellTarget ("dist_group_mc/dist_" add mainSelectNo add "_group_mc/pref_" add eval("dist_" add mainSelectNo add "_" add i) add "_mc") {
                gotoAndStop(2);
            }
        } else {
            tellTarget ("dist_group_mc/dist_" add mainSelectNo add "_group_mc/pref_" add eval("dist_" add mainSelectNo add "_" add i) add "_mc") {
                gotoAndStop(1);
            }
        }
    }
    if (subSelectNo == eval("sub_menu" add mainSelectNo add "_max")) {
        tellTarget ("dist_group_mc/return_mc") {
            gotoAndStop(2);
        }
    } else {
        tellTarget ("dist_group_mc/return_mc") {
            gotoAndStop(1);
        }
    }
}
// ボタン番号を更新する
btnNo = currentBtn;

　
３フレーム目

// ボタンを押したときのアクション
// サブウィンドウを閉じているとき
if (subWindow == 0) {
    // メインメニューが選択されている時
    if (mainSelectNo != 0) {
        // 北海道の場合は直接リンクする
        if (mainSelectNo == 1) {
            getURL(eval("pref_1_url"));
        } else {
            // サブウィンドウは1とする
            subWindow = 1;
            tellTarget ("dist_group_mc") {
                gotoAndStop(eval("/:mainSelectNo"));
                _x = 0;
                _y = 0;
                targetAlpha = 100;
            }
            // スクロールを実行
            gotoAndPlay("scroll");
            // サブウィンドウを開いているとき 
        }
    }
} else {
    // 閉じるを選択している場合
    if (subSelectNo == eval("sub_menu" add mainSelectNo add "_max")) {
        // サブウィンドウは0とする
        subWindow = 0;
        // サブメニュー番号を初期化
        subSelectNo = 0;
        // サブウィンドウの格納座標を指定
        tellTarget ("dist_group_mc") {
            _x = 250;
            _y = 0;
            targetAlpha = 0;
        }
        // 全国に戻るボタンを初期化
        tellTarget ("dist_group_mc/return_mc") {
            gotoAndStop(1);
        }
    } else {
        // 都道府県のページにリンク
        getURL(eval("pref_" add eval("dist_" add mainSelectNo add "_" add subSelectNo) add "_url"));
    }
}

　
４フレーム目

// ループしてアルファチャンネルを制御
tellTarget ("dist_group_mc") {
    _alpha += (targetAlpha-_alpha)/2;
}

　
５フレーム目

// scrollフレームに戻ってループ
gotoAndPlay("scroll");

　
　

備考

選択順は一般的な都道府県の順番に沿っています。
　
応用としては都市圏の地域まで階層を深くしたり選択が不要な地域を選択できなくするなどが考えられます。
　
仕様によってはエリアの分け方を変更する必要が出てくるかも知れません。
　

Posted in Flash • Tags: , , , , • Top Of Page

Copyright © 2009 スマホサイト・アプリをつくろう。

サービス： セルバモバイルSEO　 不動産モバイルSEO　 美容モバイルSEO　 店舗GPS検索　 まめの木｜モバイルSEO見積ツール
株式会社セルバは携帯サイト作成・制作、メール配信、店舗検索など、携帯サイトの様々なサービスをご提供しています