[ 機能説明 ] > [ 操作パネルのスキン変更 ]


■操作パネルのスキン変更

操作パネルの色やテクスチャを変更する方法を説明します。

ライブラリパネルから「パネル設定」フォルダ内の パネルskin をダブルクリックして編集します。


このようなレイヤー構成になっています。

一番上のレイヤーはボタン位置の目安のために表示しているだけのガイドです。
white
pink
gray
green
black
picture
この中の1つ以外は全てガイド(無効)にします。



試しに pink に変更してみましょう。

white レイヤーで、
右クリック→ガイド を実行します。
white レイヤーの表示をOFFにします。
pink レイヤーで、
右クリック→ガイド を実行し、
ガイドを解除します。
pink レイヤーの表示をONにします。

これでピンク色の操作パネルになりました。





black を選んだ場合には、文字とボタンの色を変更しないと読みにくくなってしまいます。
メインの L&A レイヤーの3フレーム目の書き換えで、文字の色を変更することができます。

//パネルの文字色設定
// 黒:"normal"
// 白:"white"
// 黄:"yellow"
// 緑:"green"
// 自分で設定:"custom"
_root.PanelFontColor = "normal";

このように書いてある場所を探して、変更します。
_root.PanelFontColor = "white";
黒いパネルの場合は、
_root.PanelBlackFontColorOnly = 0;
でボタン全体の色変更をした方が良いです。
すると、このようになります。





テクスチャーも使用可能です。

まず、パネルskin では、picture にしておきます。


そのままムービープレビューすると、クラシックMac風のパネルになります。


sample フォルダに panel_wood.png が入っているので、自分のフォルダにコピーします。

ライブラリパネルの「パネル設定」フォルダの panelpic で右クリック→プロパティ を実行します。


読み込みボタンを押します。
sampleからコピーしてきたファイルを選ぶ。

これで木目調の操作パネルになりました。



用意されている物を使う以外に、自分で作った絵を割り当てるという方法もあります。
sample フォルダ内のパネル用のPNGファイルをコピーして、同じ縦横サイズでオリジナルの絵に作り変えて読み込めば完成です。
自分で作る場合は、絵のコントラストが強くなり過ぎないようにしましょう。
コントラストが強いと、パネルの文字や記号が読みにくくなってしまいます。




外部ファイルのロードもできます。

まず、パネルskin では、load にしておきます。


このレイヤーのフレームアクションが
pskin.loadMovie("panel.jpg");
pskin.forceSmoothing=true;
になっていますので、 panel.jpg の部分に作ったパネル画像のファイル名を入れてください。
150x512の jpg ファイルを HC_base.swf と同じく、同じフォルダ内において下さい。
swfのパブリッシュをしなくてもパネル画像の変更を反映できる利点があります。


次へ >>