W32H　メニューアイコン　作成

用意するもの
■Photoshopなどのレイヤー機能のあるグラフィックアプリケーションソフト
■Fiora
■Fiora　W32H用設定ファイル[w32h.ini/管理人作]
■諦めない根性「重要」

Photoshopによる画像操作と準備

W32H用メニューアイコン作成方法

まず、左図の様な縦320px[ピクセル]*横240pxのQVGA画像を１枚用意する。

この１枚がメニューアイコンの背景部分の画像になる。

拡張子はjpgで保存し、なるべく容量は軽くしておく。

軽くしすぎると画像が劣化するので、50%圧縮ぐらいでちょうどいいと思います。

作業工程２

次に、メニューアイコンの各メニューになる画像を１２通り用意する。

用意する画像は全て、縦64px*横80pxとする。
縦64*4行分＝256pxとなり、余った64pxを更に2で割り32px分をメニュー項目部分の　　上下分に空白として与える事でアンテナや電池残量がメニューに被らなくなる。
これはW32HのQVGA液晶[縦320px*横240px]でピッタリの表示なるようにする為、１ピクセルも多かったり少なかったりしてはダメです。

作業工程３

左図の様な、メニューの各項目名を表示させる為のテンプレートを一枚用意する。
軽く作り方を書きます。
■Photoshopなどで縦256px * 横240pxサイズの白紙を作り、レイヤーを全透過する。
■64px*80pxの白紙を作り、新規レイヤーを作りテキスト挿入を使って各項目の名前を書き込む。
■上で作ったコマ画像の白紙レイヤーを削除し、透過されたレイヤーの上にテキストだけが書かれた状態にして、レイヤーの移動ツールでQVGA透過画像の上に順番に並べていく。
※作り方は個人の自由ですので参考までに。

作業工程４

作業工程３で作ったQVGAメニュー項目入り画像に作業工程２で用意した縦64px*横80pxのメニュー画像を入れて行く。

この時、テキストレイヤーより下にメニュー画像を入れて行かないとテキストが見えなくなってしまうので注意。
詳しくはPhotoshopの書籍などを参考にレイヤーパレットの使い方を理解してください。

縦横ピッタリとするように隙間なく埋めてください。

作業工程５

作業工程４が終わった画面です。
ここまで来て、メニュー項目の画像がピッタリ詰めて埋まってるかをよく確認しましょう。
ズレていれば移動ツールを選択した状態でキーボードの十字キーを押せば１ピクセルずつ移動方向にずらせます。

完成したらこれを拡張子jpgで保存します。
基本的に作業工程１での圧縮率でOKなはずです。
背景用画像「作業１」と左図の様な画像の２つの容量を合わせて100KB以下になっていれば問題ないと思います。

フリーソフト[Fiora]でフラッシュファイル作成する

Fioraの設定ファイルを確認

Fioraをダウンロードし、解凍するとFiora.exe(本体ファイル)以外に複数の設定ファイル[*****.ini]がある。
このiniファイルが重要で、W32H用アイコンを作成する上で、必ず必要になるのが管理人作[w32h.ini]となる。
Fiora.exeと同じフォルダにw32h.iniを格納しておきましょう。

Fioraの起動と新規作成

Fiora.exeを開き、ファイル→新規作成ウィザードと進む。
左図の画面で、セレクトメニューからW32Hを指定する。
w32h.iniが入っていれば項目があるはずです。

メニューアイコンの設定１

次へを押すと２つの選択ボタンがある。
上記までの作業で背景用とメニュー項目用の画像を用意しているので下の「背景画像と選択時の画像の２枚から作成(2)」にチェックを入れ次へ。

メニューアイコンの設定２

背景画像を設定（左図上）で作業１で用意したQVGA画像を指定する。
フォーカス時画像を設定は作業５で完成した画像を指定する。
横３*縦４はそのままで次へ。

メニューアイコンの作成と確認

上の作業が終わるとFioraのメイン画面に移る。
左の項目から「フォーカス」を選択すると左図の様に背景画像の上に被ったメニュー画像が表示される。

メニュー項目の位置を確認

Fioraメイン画面の左「メニュー１」「メニュー２」などをクリックしていくと、左図の様に各メニューに対応する画像の部分が点線枠で表示される。
ここでズレがないかを目視で判断・確認する。
■ズレていれば点千部分をマウスでドラッグすると調節できるのでピッタリに調節する。
※点線の調節はマウスだけでは少し難しいかも知れません。
そういう時はFioraメイン画面左下に点線枠の座標を示す数字が出るので、これを頼りに慎重に調節しましょう。

調節しづらい時は「メニューバー」の表示→倍率で拡大できます。

Fiora最終作業と完成

上記までの作業が終わったら、Fioraのメニューバーのファイル→ムービーの書き出しでフラッシュファイル[***.swf]を出力できます。
この***.swfが完成したフラッシュのメニューアイコンとなります。

完成したらTEST UP Loaderにパソコンから投稿して、携帯からダウンロード。
動作が正しく出来ているかを確認して終了です。

※後書きですが、Fioraの使い方次第ではメニューの配置を別の場所にずらしたり、フォーカスの動きを変える事も出来ます。
この辺は臨機応変に各自でお試し下さい。
←右クリック・再生で動きます。

お疲れ様でした。
最後まで見ていただきありまとうございます。

この作成方法は私なりの簡単な作業方法ですので、慣れてきたらご自信のオリジナリティで操作方法を変えて見るといいかもしれません。

また見たくなったら是非見てあげてください。

作り方がわからない方がいたら寛大なお心でここへ誘導して上げてください。

(C)CLUB EZweb.net