ケータイFlashサイトをボタンで制御するには

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

過去の記事に対するご質問への回答を兼ねてご紹介します。
→参照:「ケータイFlashで縦スクロールするページを作ってみよう(3ボタン制御編」
 
以前ご紹介した手法は、ボタンを全て隠しボタンにする方法でしたが、
下記の制限条件内であれば、別に隠しボタンにする必要はなく、
ステージ上に配置したボタンにそのまま画面のスクロールなどアクションを指定したりリンク先を指定したりすることができます。
 
 

制限条件

・画面が大きくスクロールしない
→一番下までスクロールしても上のボタンがステージ内に表示されているのであれば大丈夫です。
→ステージ外に出てしまうとステージ内にあるボタンの範囲でスクロールしますので意図しない動作になることがあります。
 
・ボタンの配置が縦横のいずれかにまっすぐ、もしくは右斜め下に向かって並んでいる
→上下キーで操作する場合、基本的に上から下、左から右の順にフォーカスしますのでそれを前提にボタンが並んでいれば問題ありません。
→デザイン上の問題で特殊な配置にする場合は隠しボタンによるスクロールを使った方がよいです。
 
・下から上のボタンへのスクロールは必ず行われる
→ボタンをそのままスクロールに使いますので特にFlashLite1.1の場合はフォーカスを制御できません。
 
 

仕様

・メニューが5つあり、それぞれフォーカスすると右側のボックスに説明が表示されます。
 
・各ボタンでクリックするとそれぞれのリンク先に移動します。
 
 

制作手順

・スクロール用のメニュームービークリップを用意し、その中で画面を作成します。
ムービークリップの名前は「menu」とします。
 
・フォーカスさせるボタンを作成して配置します。
 
・各ボタンには下記のようにActionを記述します。
1つめのボタン

on (rollOver) {
    pageY = 0;
    comment = "メニュー1の説明です。\n***************************************";
}
on (press) {
    getURL("link1.html");
}

※ボタンにフォーカスすると右側のダイナミックテキストがcommentの部分に記述した内容に書き変わります。
「\n」は改行です。
 
2つめのボタン

on (rollOver) {
    pageY = -10;
    comment = "メニュー2の説明です。\n***************************************";
}
on (press) {
    getURL("link2.html");
}

以下5つ目のボタンまで記述します。(詳細は省略します)
 
・右側にテキストフィールドをダイナミックテキストとして配置し、プロパティの変数名を「comment」とします。
 
・menuムービークリップのフレームを2つに分けて下記アクションを記述します。
1フレーム目

_y += (pageY-_y)/3;

 
2フレーム目

gotoAndPlay(1);

 
・ルートのフレームアクションに下記アクションを記述します。
1フレーム目

_focusrect = false;
stop();

 
 

制作時のポイント

・ボタンフォーカスはOFFにする

_focusrect = false;

隠しボタンではありませんのでどちらでもよいです。
デザイン上の問題ですのでフォーカスがあった方がよいという場合はOFFにしないというのもアリです。
 
・スクロールした結果、ボタンが画面外に移動してしまわないように注意
画面内のボタンにしかフォーカスしませんので画面外に出るまでスクロールさせると一番下のボタンから一番上のボタンにフォーカスを移動する時に途中のボタンにフォーカスしてしまったりします。
全てのボタンを画面内に抑えるようなデザインにしてしまうのが一番楽です。
スクロールの移動距離をなるべく小さくしておくとよいです。
 
・各ボタンにアクションの記述が必要
ボタンがたくさんあるとスクリプトの管理が大変です。
反面、構造は単純ですので初心者には優しい造りではあります。
 
・スクロールさせるメニュームービークリップはステージサイズより大きめに用意しておく
 
 

実行例

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

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

サンプルファイル

sample4665.zip
上記サンプルのFlashファイル一式です。
 
 

関連ページ

ケータイFlash関連の記事一覧