This page was last modified 10:00, 6 June 2008.
FlashLiteのトゥイーンクラスでメニューを作成する
From Forum Nokia Wiki
原文（英語）: Making a menu system with the tween class in flashlite
Contents |
はじめに
ここで示すのは、Flash Lite 2.xで静的なメニューシステムを作成するためのガイドです。ここでは全チュートリアルは示さず、サンプルコードと主な機能の簡単な説明を提供します。実習用コードを提供していますので、flaファイルの中を確認するのは容易です。
そのソースには、選択したバーのより自然な動きのためにトゥイーンアニメーションクラスを組み込んでおり、基本的なナビゲーションシステムのための幅広いアプリケーションで使うことができます。
サポートファイル
サポートファイルをダウンロードする場合、リンクをクリックします。 リンク
ファイル:
animatedMenu.fla
animatedMenu.swf
概要
ここでは、下記で提示した小さなメニューとナビゲーションシステムについて簡単に示します。Flash 8でファイルanimatedMenu.flaを開き、動きを確認するために端末エミュレータ中でそれをパブリッシュします。
ユーザ・エクスペリエンス
メイン画面では、メニューシステムを表示します。ラベルに示した通り、ソフトキー2はプログラムを終了します。上下キーは、各メニューアイテムを選択するため、ハイライト表示バーを上下します。選択ボタンは、ハイライト表示されている現在のメニューアイテムを選択します。ソフトキー2は、最後にハイライト表示したメニューアイテムを選択した状態で、メインメニューに戻ります。
内部構造(Behind the Scenes)
_rootタイムラインはフレームを1つだけ持ち、6つのコンテンツ用レイヤがあります(actionsレイヤを含めて、合計7レイヤ)。下記を参照ください。
タイムラインと要素
LogoBar, softBar, background2の各レイヤは、静的なグラフィックシェイプを持ちます。
softKeyTxtレイヤは、実行時に、現在のキーファンクションを表示するダイナミックテキストボックス(softKeyRight_txt)を持ちます。
menuMcレイヤは、メニューグラフィックと機能の全てを含むムービークリップ(mainMenu_mc)を持ちます。mainContentMcレイヤは、全てのコンテンツページを含むムービークリップ(content_mc)を持ちます。(タイムライン上でmenuMcレイヤを隠す場合、下記記載をご覧ください)
基本的な動作
アプリケーションをロードすると、mainMenu_mcが表示されます。content_mcはフレーム1で停止し、そこには何も表示されません。
ハイライトバーとメニュー入力は、mainMenu_mc中で入れ子になっている、見えない'key catcher'ボタンが制御しています。 バーが移動すると、それはメインタイムライン上で'section'と呼ばれる変数に変わり、選択したメニュー項目を登録します。
選択ボタンが押されると、content_mc中の関連コンテンツのフレームが呼ばれ、表示されます。それと同時に、メニューの _visible プロパティはfalseに設定され、ビューから隠されます。ムービークリップを隠す他の理由は、a) メニューに戻ってきた時にハイライトバーが同じ場所にあること b) _visibleプロパティをfalseに設定した時、上下キーや選択キーが押されてもkey catcherムービークリップはもはや機能せず、現在のページ中で別のkey catcherを設定できること、です。
'back'(右ソフトキー)ボタンを押した時、content_mcの_visibleプロパティはfalseに設定され、最初の何も表示されないフレームに戻され、mainManu_mcはtrueにセットされ、再度表示されます。
ActionScript
これらの制御用スクリプトは自明なもので、再使用可能な関数として書かれています。 ここではコードの全行を表示する代わりに、各関数とその機能について簡単に記述します。
メインタイムライン
- Flash Liteコマンド
これらは通常、デフォルト設定と同じです。例えば、qualityはhigh、フォーカス矩形は非表示、などです。
- アニメーションクラスのインポート
ここでは、mx.transitionsクラスから、トゥイーン、イージング関数をインポートします。これらは、ハイライトバーの移動を制御するmenuムービークリップ中で使用し、この先で説明します。プロジェクトを通して関数やプロパティにアクセスできるので、それらをここでインポートするのを習慣にしておくと良いです。
- 変数
メニュー中で現在の選択を定義するために使用する、主な変数が2つあります。
- 関数
使用するいくつかの関数を作成します。
mainMenuAppear() と hideContent() は、キーリスナーの中で呼ばれます。
updatePosition() は、menuムービークリップから呼ばれます。
- リスナー
ここでは、右ソフトキーのためにキーリスナー(softListener)を設定します。
コンテンツページを表示している場合、メインメニューへのbackキーとして振舞います。また、メインメニューを表示してる場合、アプリケーションを終了します。
- ランタイム
このフレームで、ムービーを停止します。(この例だと実際には不要ですが、習慣にしておくと良いです)
現在のリスナーオブジェクトを削除します。（ここもまた、この例だと実際には不要ですが、習慣にしておくと良いです。アプリケーション中で重大なエラーを引き起こす可能性のある、大量のリスナーのビルドを防げます。）
softListenerオブジェクトを追加します。
mainMenu_mc
Scene1:mainMenu_mc (フレーム1)
ここでは、このフレームをKeyCatcherボタンに関連付けたonKeyPressイベントにより呼ばれる関数を設定するために使用しています。
多くは自明ですが、いくつか注意点があります。
moveSelectionDown()とmoveSelectionUp()は、メニュー中でどの項目が選択されているかユーザーが確認するための、黄色のハイライトバーを制御します。
バーの移動は、現在の_y座標を基準にしています。メニューの「ボタン」を表す静的テキストは、y軸上できっちり15ピクセルで区切られています。それゆえ、ハイライトバーが中心に割り当てられたら、次の項目を得るためにy軸上で±15ピクセルの移動が起こります。次の項目に移動する時、_rootタイムラインで設定した_root.currentSelection変数に±1を加えることにより(defineSelection()関数を使用する)、現在位置を更新します。
コード if(selectionBar_mc._y == 23 || selectionBar_mc._y == 38 || ... の行は、アニメーション移動が止まる前にユーザーが上下キーを押しても、それが動かずにメニューアイテムの直下にある場合、バーはただ動くのみということを確認できます。もしこれが定位置にない場合、バーは素早く位置を外れ、ステージ上のランダムな位置に移動してしまいます。
new mx.transitions.Tween(selectionBar_mc, “_y”,Regular.easeOut, selectionBar_mc._y, selectionBar_mc._y + 15, .1, true);
上記コードは、トゥイーンクラスを使用してハイライトバーの移動を定義する行です。タイムラインアニメーションとは反対の方向に、ActionScript経由で移動を制御することにより、その移動にさらなる柔軟性を持たせることができ、バウンドなどといった移動を追加することもできます。
selectionBar_mc, “_y” - アニメーションを追加するムービークリップと、影響を与えるためのプロパティ
Regular.easeOut - イージングを追加し、移動が終了する時にスローダウンします。
selectionBar_mc._y, selectionBar_mc._y + 15 - 移動の開始・終了位置
.1 - アニメーションを完了するのにかかる、秒単位の時間
これらのプロパティを変更して実行すると、不思議な効果を体験することができます。
このクラスの機能を使用した詳細については、Flash 8のヘルプにある、トゥイーンクラスをご参照ください。
- 例題をさらに発展させる場合
アプリケーションとして動いているメニューを確認する場合、こちらのリンクをご覧ください。
このガイドが役に立つことを願ってやみません。何かお気づきの点がありましたら、修正をお願いいたします。
