FlashLite Tips – フォーカスを任意の順番で制御する

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

---

こんにちは。エンジニアの はる です。
今回はFlashLiteのTipsとして、FlashLiteでフォーカスを任意の順番で制御する方法についてご紹介したいと思います。（※サンプルファイル有り）

まずは、FlashLiteにおけるボタンのフォーカス仕様についてご説明します。

FlashLiteにおけるボタンのフォーカス仕様

図のようにステージにボタンが配置されている場合、
・下キーを数回押した場合：「1→2→3→4→5→1→2→…」
・上キーを数回押した場合：「5→4→3→2→1→5→4→…」
上記のように、”左から右、上から下”という順序でフォーカスが制御され、表示範囲外にあるボタン6は無視されます。

また、FlashLite1.1は、
・ボタンオブジェクトにインスタンス名を設定できない
・on(keyPress “”) や on(keyPress “”) 等で上下キーのイベントを取得することができない
といった仕様になっています。

こういった仕様・制限を考慮すると、
・上記のボタン制御順に縛られずにフォーカスを与えたい場合（※日本地図上の都道府県を選択するUIにしたい、等…）
・Flash内で画面スクロールを実装する等、表示範囲外のボタンを制御したい場合
・条件によって、ボタンの数や位置が変動する場合
上記のようなUIを実装する場合に一手間の工夫が必要となり、そこで、”擬似ボタン”を使用する方法がよく用いられています。

擬似ボタンとは？

擬似ボタンとは、ムービークリップにrollOver、rollOut時の表示パターンを設定することで擬似的にボタンのように見せる方法です。

それでは、擬似ボタンの実装方法について下記で具体的に解説していきます。

STEP 1：隠しボタン（※ボタンオブジェクト）の作成

(1) _rootのタイムラインの1フレーム目に下記のフレームアクション記述します。

stop();

//fromBtn、toBtnの初期化
/:fromBtn = 0; //選択されていた隠しボタンの番号
/:toBtn     = 0; //新たに選択した隠しボタンの番号

(2) _rootタイムライン上にボタンオブジェクトを3つ作成します。 

(3) 各ボタンオブジェクトのアクションに下記を記述します。（※ボタン毎にtoBtnに設定するIDを変更してください。）

on(rollOver){
  /:fromBtn = /:toBtn;
  /:toBtn = 1; //ボタン毎にIDを設定する
  call("rollOver");
}

ここでは、1, 2, 3 というIDをそれぞれのtoBtnの値として設定することとします。

(4) _rootタイムラインにラベル名を”rollOver”に設定したキーフレームを用意します。 

(5) rollOverラベルのフレームアクションに下記を記述します。

// fromBtn=0 は、初期表示時のフォーカスがどのボタンにも無い状態を示しています。
/*** 下キー判定 ***/
if [1]/:fromBtn==0 && /:toBtn==1)||
    (/:fromBtn==3 && /:toBtn==1)||
    (/:fromBtn==2 && /:toBtn==3)||
    (/:fromBtn==1 && /:toBtn==2{
    /:status = "down";
}
/*** 上キー判定 ***/
if [2]/:fromBtn==0 && /:toBtn==3)||
    (/:fromBtn==1 && /:toBtn==3)||
    (/:fromBtn==2 && /:toBtn==1)||
    (/:fromBtn==3 && /:toBtn==2{
    /:status = "up";
}

/*** 下キーが押された場合の処理 ***/
if(/:status eq "down"){
  trace("hoge");
}
/*** 上キーが押された場合の処理 ***/
if(/:status eq "up"){
  trace("fuga");
}

これで上キー・下キーが押された際のイベントを取得し、それに応じた処理を実行することができるようになります。

STEP 2：擬似ボタン（※ムービークリップ）の作成

擬似ボタンとなるムービークリップの実装方法は様々ありますが、参考までに私が以前に行った方法をご紹介します。

(1) _rootタイムライン上に表示上ボタンとして見せたいムービークリップを作成します。

　・1フレーム目にフォーカスが当たっていない際の表示を設置します。
　・2フレーム目にフォーカスが当たった際の表示を設置します。
　・フレームアクションは1フレーム目、2フレーム目ともに「stop();」のみです。

　■1フレーム目：フォーカスが当たっていない場合の表示

　■2フレーム目：フォーカスが当たっている場合の表示

(2) それぞれのムービークリップに”フォーカスを当てたい順”にインスタンス名を命名します。
今回は、ムービークリップの表記通り、”mc◯”という形式でインスタンス名をそれぞれ命名することとします。

(3) _rootのタイムライン1フレーム目のフレームアクションに「focusNoの初期化」を追記します。

stop();
//fromBtn、toBtn、focusNoの初期化
/:fromBtn = 0; //選択されていた隠しボタンの番号
/:toBtn     = 0; //新たに選択した隠しボタンの番号

/:focusNo = 0; //現在フォーカスが当たっている擬似ボタンの番号

(4) _rootタイムラインにラベル名を”focus”に設定したキーフレームを用意します。 

(5) focusラベルのフレームアクションに下記を記述します。

buttonSize = 5; //ボタン数を設定
oldFocusNo   = /:focusNo; //選択されていた擬似ボタンの番号
newFocusNo   = /:focusNo; //新たに選択した擬似ボタンの番号

if(/:status eq "up"){
  //最上位の擬似ボタンから最下位の擬似ボタンにフォーカスを移す
  if (oldFocusNo <= 1){
    newFocusNo = buttonSize;
  }else{
    newFocusNo = oldFocusNo - 1;
  }
}else if(/:status eq "down"){
  //最下位の擬似ボタンから最上位の擬似ボタンにフォーカスを移す
  if (oldFocusNo >= buttonSize){
    newFocusNo = 1;
  }else{
    newFocusNo = oldFocusNo + 1;
  }
}

/:focusNo = newFocusNo;

//選択されていた疑似ボタンのフォーカスをはずす
tellTarget("mc" add oldFocusNo){
  gotoAndStop(1);
}
//新たに選択した疑似ボタンにフォーカスを与える
tellTarget("mc" add newFocusNo){
  gotoAndStop(2);
}

(6) rollOverラベルのフレームアクションからfocusをcallするように修正します。

/*** 下キーが押された場合の処理 ***/
if(/:status eq "down"){
  call("focus");
}
/*** 上キーが押された場合の処理 ***/
if(/:status eq "up"){
  call("focus");
}

これで表示上は擬似ボタンがrollOver、rollOutをしているように見えるようになり、任意の順番でフォーカスを与えることができるようになります。

STEP 3：拡張について

今回ご紹介するのはここまでとなりますが、上述の仕組みをベースに
・on(press)時の制御
・擬似ボタンを動的に表示/非表示
・Flash内でのスクロール処理・ポップアップ処理
等々…の拡張を行うことができます。興味のある方は是非是非チャレンジしてみてください。

サンプル

・Flash8形式：focus_sample_fl8.fla をダウンロードする

・FlashCS3形式：focus_sample_cs3.fla をダウンロードする

・FlashCS4形式：focus_sample_cs4.fla をダウンロードする