以前、縦スクロールの方法について紹介しましたが、今回は任意の座標にスクロールさせる方法についてご紹介します。
→参照：「ケータイFlashで縦スクロールするページを作ってみよう（３ボタン制御編）」
実現方法
・スクロールする座標としてY座標（縦）だけでなくX座標（横）も用意しておきます。
・各selectNoに対して目標となる座標を設定しておけばOKです。
仕様
・メニュー（ページ）が９つあり、上下フォーカスの移動で指定したメニューに移動します。
・各メニュー（ページ）でクリックするとそれぞれのリンク先に移動します。
制作手順
・パブリッシュバージョンはFlashLite1.1とします。
・ステージサイズは240px×240pxとします。
・スクロール用のメニュームービークリップを用意し、その中で画面を作成します。
ムービークリップの名前は「menu」とします。
今回は各ページの範囲を360×360と仮定し、それを９つ配置しますので、ムービークリップのサイズを1080×1080pxで用意しました。
・menuムービークリップにそれぞれ９つシェイプとテキストを配置してメニューを作成します。
・ルートに戻ってフォーカスさせるボタンを作成して配置します。
・各ボタンには下記のようにActionを記述します。
１つめのボタン
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");
}
・menuムービークリップのフレームを２つに分けて下記アクションを記述します。
１フレーム目
_x += (../:pageX-_x)/10; _y += (../:pageY-_y)/10;
数値を変更することでスクロール速度を調整することができます。
今回は移動範囲が広いので遅めに設定しました。
２フレーム目
gotoAndPlay(1);
・ルートのフレームを３つに分けて、それぞれラベル名を「init」「motion」「link」とします。
・ルートのフレームアクションに下記アクションを記述します。
１フレーム目
_focusrect = false; pageX = -420; pageY = -420; selectNo = 0; btnNo = 1; stop();
２フレーム目
// ボタンの上下移動を元にスクロール番号を増減
if (btnDir eq "up") {
selectNo--;
}
if (btnDir eq "down") {
selectNo++;
}
// スクロール番号の状態によってスクロール番号を調整
if (selectNo<0) {
selectNo = 8;
} else if (selectNo<1) {
selectNo = 9;
} else if (selectNo>9) {
selectNo = 1;
}
// 現在のスクロール番号を元に画面の縦座標とカーソルの座標を指定
if (selectNo == 1) {
// 左上
pageX = -60;
pageY = -60;
}
if (selectNo == 2) {
// 右
pageX = -780;
pageY = -420;
}
if (selectNo == 3) {
// 左下
pageX = -60;
pageY = -780;
}
if (selectNo == 4) {
// 上
pageX = -420;
pageY = -60;
}
if (selectNo == 5) {
// 右下
pageX = -780;
pageY = -780;
}
if (selectNo == 6) {
// 左
pageX = -60;
pageY = -420;
}
if (selectNo == 7) {
// 右上
pageX = -780;
pageY = -60;
}
if (selectNo == 8) {
// 下
pageX = -420;
pageY = -780;
}
if (selectNo == 9) {
// 中央
pageX = -420;
pageY = -420;
}
３フレーム目
// 現在のスクロール番号によってリンク先を切り替え
if (selectNo == 1) {
linkUrl = "/Sample/post4685/link1/";
}
if (selectNo == 2) {
linkUrl = "/Sample/post4685/link2/";
}
if (selectNo == 3) {
linkUrl = "/Sample/post4685/link3/";
}
if (selectNo == 4) {
linkUrl = "/Sample/post4685/link4/";
}
if (selectNo == 5) {
linkUrl = "/Sample/post4685/link5/";
}
if (selectNo == 6) {
linkUrl = "/Sample/post4685/link6/";
}
if (selectNo == 7) {
linkUrl = "/Sample/post4685/link7/";
}
if (selectNo == 8) {
linkUrl = "/Sample/post4685/link8/";
}
getURL(linkUrl);
備考
・上下キーでメニュー移動が可能ですが、メニューが移動することやリンク先があることをユーザーインターフェース的にもう少しわかりやすくした方がよいかと思います。
・時計周りに移動させたりすごろくや地図画像の上を移動させたりと、いろいろなアイデアが考えられますね。
実行例
実行例はこちらからご確認下さい。
→URLをメールで送る
http://ookura.tanikaze.com/Sample/post4685/
サンプルファイル
sample4685.zip
上記サンプルのFlashファイル一式です。
