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

今回は３つのボタンでスクロールを制御する方法について説明します。
※今回のサンプルはFlashLite1.1対応です。
　
以前紹介させていただいたスクロールごとにボタンを用意する方法の他に、ボタン３つだけで複数のスクロールポイントを制御する方法があります。
参照：ケータイFlashで縦スクロールするページを作ってみよう
　
スクロールごとにボタンを用意する方法には単純なので理解しやすいというメリットがありますが、
スクリプトが複数のボタンに分散して管理が大変なのと、スクロールポイントが多い場合にボタン配置に限界があるという問題点があります。
　
ボタン３つだけで複数のスクロールを制御する方法はボタンの配置を少なくすることができ、スクリプトもまとめて記述することができます。
また、メニューの数が変わってもスクリプトを変更するだけで対応できます。
　
　

３ボタンでスクロールを制御するしくみ

　
ボタンにロールオーバーした時の動きは以下の通りです。
　
１．ボタン番号からどの方向から移動したかを確認します。
　例：ボタン1→ボタン2なら上から下に移動していると判断できます。
　
２．call関数でmotionフレームのアクションを実行します。
　
３．移動方向を元に現在のスクロール番号を計算します。
　　スクロール番号が上限・下限をオーバーした場合の処理もつけておきます。
　
４．スクロール番号を元にスクロールとカーソルの目標座標を決めます。
　
５．call関数の実行内容が終了したらボタンアクションに戻ります。
　
６．ボタンアクションでフォーカスが定められているボタンの番号を記録します。
　
　
ボタンを押した時の動きは以下の通りです。
１．call関数でlinkフレームのアクションを実行します。
　
２．現在のスクロール番号からリンク先を選んでページ移動します。
　
　

swfファイルを用意する

swfファイルの作り方を説明していきます。
　
今回は以前作成したFlashを再利用して変更を加えていきます。
参照：ケータイFlashで縦スクロールするページを作ってみよう
　
まずボタンを減らして３つだけにします。
ボタンのシェイプはヒット領域だけに設定しているため、最終的に見えなくなりますので、buttonレイヤーをpageレイヤーの上に移動させた方がわかりやすくなると思います。
→[図77]
　
次に、キーフレームを追加してフレームラベル「link」を設定します。
→[図78]
　
それぞれのボタンに以下のようにアクションを設定します。
→[図79]
１番目のボタン

on (rollOver) {
    if (btnNo == 2) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    call("motion");
    btnNo = 1;
}
on (press) {
    call("link");
}

　

２番目のボタン

on (rollOver) {
    if (btnNo == 3) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    call("motion");
    btnNo = 2;
}
on (press) {
    call("link");
}

　

３番目のボタン

on (rollOver) {
    if (btnNo == 1) {
        btnDir = "up";
    } else {
        btnDir = "down";
    }
    call("motion");
    btnNo = 3;
}
on (press) {
    call("link");
}

　
それぞれのフレームに以下のようにアクションを設定します。
2フレーム目「motion」
→[図80]

// ボタンの上下移動を元にスクロール番号を増減
if (btnDir eq "up") {
    selectNo--;
}
if (btnDir eq "down") {
    selectNo++;
}
// スクロール番号の下限・上限を制限
// 上下端同士の移動を制限する場合
if (selectNo<1) {
    selectNo = 1;
} else if (selectNo>5) {
    selectNo = 5;
}
// 現在のスクロール番号を元に画面の縦座標とカーソルの座標を指定
if (selectNo == 1) {
    pageY = 0;
    main/cursor:_x = 10;
    main/cursor:_y = 91;
}
if (selectNo == 2) {
    pageY = -50;
    main/cursor:_x = 35;
    main/cursor:_y = 162;
}
if (selectNo == 3) {
    pageY = -100;
    main/cursor:_x = 55;
    main/cursor:_y = 233;
}
if (selectNo == 4) {
    pageY = -150;
    main/cursor:_x = 80;
    main/cursor:_y = 304;
}
if (selectNo == 5) {
    pageY = -200;
    main/cursor:_x = 102;
    main/cursor:_y = 375;
}

3フレーム目「link」
→[図81]

// 現在のスクロール番号によってリンク先を切り替え
if (selectNo == 1) {
    getURL("link1.html");
}
if (selectNo == 2) {
    getURL("link2.html");
}
if (selectNo == 3) {
    getURL("link3.html");
}
if (selectNo == 4) {
    getURL("link4.html");
}
if (selectNo == 5) {
    getURL("link5.html");
}

　
1フレーム目とmainムービークリップは特に変更しません。
　
ここまで完了したら、パブリッシュしてサーバーにアップロードします。
　
　

---

コラム

今回のサンプルでは一番上から一番下へ・一番下から一番上に移動しないようにしていますが、
motionフレームのアクションを以下のように変更すれば変更できます。

if (selectNo<1) {
    selectNo = 1;
} else if (selectNo>5) {
    selectNo = 5;
}

↓

if (selectNo<1) {
    selectNo = 5;
} else if (selectNo>5) {
    selectNo = 1;
}

　
　

---

まとめ

ボタンが減っただけで見た目は変わっていませんが、スクロールポイントを増やしたり、メニューを階層にしていったりするとこの方法の利点が分かってくるかと思います。
　
Flashインタフェースの作り方はアイデア次第で色々考えられますのでもっと画期的な方法があるかもしれません。
また、スクロールの方法や画面の見せ方は縦スクロール以外にも色々考えられます。
　
本サンプルは一例として参考にしていただければと思います。
　
　

---

flaファイルサンプル

sample2244.zip※Flash8形式
→こちらよりダウンロードしていただけます。
　
　

---

参考書籍

携帯Flashサイト&ゲーム制作入門
→こちらの書籍を参考にさせて頂きました。
本稿で紹介した内容より詳しく記述されています。
　
シリーズで出ている以下の書籍も参考になります。
　
携帯Flashスクリプト入門
→FlashLiteの文法や基本的なしくみについて詳しい解説があります。
　
携帯Flashサイトデザイン入門
→縦スクロール以外のスクロールデザインについてのバリエーションが豊富です。
　
　

---

実行例

実行例はこちらからご確認下さい。

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

---

Flashサイト動的生成関連の記事一覧

1.ケータイFlashの概要
　1-1 ケータイFlashの概要について
　
2.ケータイFlashのページ作成
　2-1 ケータイFlashのページを作ってみよう
　2-2 ケータイFlashで縦スクロールするページを作ってみよう
　2-3 ケータイFlashで縦スクロールするページを作ってみよう（３ボタン制御編）
　
3.swfmillでケータイFlashを動的生成
　3-1 swfmillでケータイFlashを動的生成してみよう（インストール編）
　3-2 swfmillでケータイFlashを動的生成してみよう（文字列置換編）
　3-3 swfmillでケータイFlashを動的生成してみよう（画像置換編）
　3-4 ケータイFlashのレイアウトを文章量に同期させよう
　
4.ActionScriptとPHPの連携
　4-1 ActionScriptで文字列をPHPから動的に取得しよう
　4-2 ケータイFlashでテキスト入力フォームを作ろう
　
　

---