今回は(2)で配布したサンプルの解説をしようと思います。

ただ、Flash作成の知識があること前提で解説しますので、分からないことがある場合は、

Design Flash Wall Gallery様

の携帯向けActionScriptを参考にして下さい。

では解説を始めます。

用意したサンプルは５フレーム構成になっています。

・フレーム１

　フォーカスの取得とボタン情報グローバル変数の設定

・フレーム２

　Flash起動時からの経過msの取得

・フレーム３

　フォーカスの取得確認とFlash起動時からの経過msの確認

　フォーカスが取得されるか、１秒経過でフレーム４に移動

　そうでなければフレーム２に戻る

・フレーム４

　メインフレーム

・フレーム５

　フォーカスナンバー取得関数(FlashLite1.1ではfunctionが使用できないので、call関数でこのフレームを呼ぶ)

という流れになります。

ちなみに画像が小栗旬なのは、サンプル作成時にボンビーメンをたまたま視たからで特にファンでもありません(笑)

閑話休題。

メインフレームであるフレーム４はボタンイベントリスナとボタンインスタンス、背景画像から構成されています。

「key」が方向キーコントローラー、「srt」がショートカットキーのリスナです。

SH903iTVのメニューアイコンには９つの機能がありますので、ボタンの数も９つ作成してあります。

グレーの□インスタンスはカーソルです。

方向キーコントローラーのActionScriptを解説します。

詳細はコメントを読んで頂くとして、ポイントだけを説明しますね。

実行されている動作は実に単純で、キーイベントを取得した際に現在のフォーカスIDの取得とカーソルの移動＆scaleの変更を行っているだけです。

つまり、画面上で動作しているのはカーソルだけで、後は内部的にカーソルが移動したボタンに対するフォーカスIDを設定しなおしているだけなんです。

で、ここからがポイントなんですが、このサンプルをどう改造すれば自分の好きなようにメニューアイコンが作成できるのかってことなんですよね。

まず背景画像の差し替えですよね。小栗旬を草刈正雄にするのもあなたの自由です(笑)

次にボタンの画像を差し替えましょう。サンプルなので味気ない文字になっていますが、イカしたデザインのボタンに変身させてあげちゃってください。

ただし、ボタンの位置や大きさを変更した場合はフレーム１のActionScriptに変更を加える必要があります。

ボタンのインスタンス名と同じ名前の変数がありますので、コメントに従って変更しましょう。

違う機種用に変更した場合、機能の数に違いがある場合が多いので、ボタンの数を増減させる際にも上記の変更が必要となります。

そこで必要になるのが(3)でも使用した仕様書ですね。ここに機種ごとに必要な情報がのっています。

例えばSH903iTVのメニューアイコン部の機能とIDなどは以下のように記載されています。

また、機種ごとにピクト領域やガイダンス領域のために空けるべき大きさが違うので、それも仕様書を参照するようにして下さい。

といったところでしょうか。

ただ、このサンプルはあくまで一例です。

何といってもFlashファイルですので、改造の可能性は無限大です。

とりあえず作ってみることが上達の近道ですよ。

頑張ってみてくださいね～

今回は、(2)で紹介したDoCoMoから提供されているツールと仕様書の解説をします。

ではまず『きせかえツールスタジオ』の解説から。

きせかえツールスタジオをダウンロードした時に、プロファイルも一緒にダウンロードする必要があります。

プロファイル

これから作成しようとしている機種のものをダウンロードして下さい。

解凍すると、フォルダの中にHowToInstall.txtがあると思いますので、その指示に従ってプロファイルをインストールして下さい。この作業を行わないと、きせかえツールスタジオ内でその機種のプロジェクトが作成できません。

プロファイルのインストールが済んだら、きせかえツールスタジオを起動して下さい。

[ファイル]→[新規ワークスペース]を選択すると次のような画面になるかと思います。

総合開発環境に慣れている人なら分かると思いますが、

ワークスペース

┣プロジェクト１

┣プロジェクト２

┣…

┗プロジェクトN

という構成になりますので、作成場所はそのつもりで指定して下さい。

さて、作成を実行すると次のようなポップアップが出ますよね？

プロジェクト名とプロファイル名を好きな名前で指定します。

出力UCPファイル名はプロジェクトファイルに合わせて自動的に変更されます。

UCPファイルはビルドすると作成されるバイナリファイルです。

ま、特別な理由がない限りはプロジェクト名と同じままにしていた方がいいと思います。

というわけでプロジェクトが作成されました。

プロジェクトが開かれると以下のような画面になります。

で、きせかえツールはメニューアイコン以外にも色々と設定できるのですが、私が扱うのは基本的にFlashメニューアイコンだけとさせていただきますので、必要なところだけ解説させていただきます。

画面左側のツリーからパッケージ情報を選択すると、色々と設定する項目が画面右側に出てきたと思います。

それぞれの項目をクリックすると、解説が画面下部に出ると思うので、参考にして下さい。

ただ注意しないといけないのが、ダウンロードURLとフォーマットバージョンです。

ダウンロードURLは『./ファイル名』とカレントディレクトリを指すようにしておいて下さい。下手なURLを指定するとサーバー上にアップロードする場所を限定させてしまうことになってしまうからです。

で、次にフォーマットバージョンですが、仕様書に次のように載っています。

はい、ですからSH903iTVならフォーマットバージョンは100になるわけですね。

というように何か分からないことがあれば、常に仕様書を見る癖をつけておくほうがいいことが分かります。

というか、仕様書を見れば全部分かりますから、常にかたわらには仕様書を置いておいて下さい。

ではFlashメニューアイコンの設定にとりかかりましょう。

左のツリーから、今度は[Flashメニュー]→[トップメニュー]を選択して下さい。

すると、以下のような画面になるかと思います。

プロパティからトップメニューをクリックして、前回配布したサンプルSWFファイル、若しくは自分で作成したSWFを指定してください。

あとは、画面上部のビルドアイコンを押してビルドを実行すれば、UCPファイルとUCMファイルが作成されているはずです。

以上、きせかえツールスタジオの最低限の使い方を紹介しました。

では、次回はサンプルFlashの解説です、さよなら、さよなら。

きせかえツール作成(2)ではいきなりサンプルを配布します。

ただ、確認端末がSH903iTVしかありませんので、それ用に設定を合わせています。

また開発環境がFlash8なので配布するファイルはFlash8がないとおそらく動作しません。

FlashMX2004なら動くかもしれませんが…。さらにFlashLite1.1文法で書いておりますので、FlashLite2.0以降でしかActionScriptを組んだことがない人もまいっちんぐな状態になるかもしれませんね。

実際にソースの中にはコメントでくどいくらい説明はしていますが、次回以降の記事でソースの解説をしていくつもりですので、分からない場合もご安心を、と言ってもFlashの解説はしませんがw

また、SWFファイルが出来上がっただけではきせかえツールは動作しませんので、他にも必要なツールなどに、

ハイパーリンクを貼っておきますので、ダウンロードして下さい。

そのツールの使用法についても次回以降に解説したいと思います。

では以下にサンプルファイルと必要なツールのリンクを貼っておきますね。

サンプルファイル(Flash8-SH903iTV)

sample_d.zip(ver1.00)

めにゅアレ掲示板(SH903iTV)

URL

きせかえツールアプリ＆仕様書

DoCoMo公式内

では、また次回の記事でお会いしましょう♪

携帯ポータルサイト『わぎゃっ！』の中の１コンテンツ『めにゅアレ』を担当することになりました。

そんなわけで、きせかえツールの作り方を調査して作成できるようになったので、

自分用のきせかえツールを作りたいという人用、または自分のメモ用wにブログでも作っちゃうことにしました。

まぁ『わぎゃブログ』もあるのでそちらで公開しても良かったのですが、わぎゃブログって今PCには公開してないんですよねw、大人の事情ということでww

あ、そうそう、このブログを見て作成したきせかえツールはぜひ『めにゅアレ』に投稿して下さいね←ここ重要よ？

では、次回から作り方をご紹介します。