Section 5.3　ボタン用レイヤ（その１）

今回は SystemButtonLayer クラスのスーパークラス、ButtonLayer クラスについて見ていくね。
そういえば、ButtonLayer クラスの定義ってどこにあるの？
systembutton.ks には書いてなかったよね？
ButtonLayer クラスの定義は system フォルダの中にある ButtonLayer.tjs に書いてあるよ。
あ、こっちは system フォルダの中に入ってるんだ？
うん。ButtonLayer クラスは button タグでグラフィカルボタンを作る時とかに必要だからね。
あ〜、なるほどね。
ちなみに button タグで作られるボタンは ButtonLayer クラスを継承して作られてる LinkButtonLayer っていうクラスのオブジェクトになるんだけどね。
じゃ、ちょっと ButtonLayer.tjs を開いてみて。
りょ〜かい！

＜ButtonLayer.tjs の中身＞

// ButtonLayer.tjs - ボタンレイヤ
// Copyright (C)2001-2006, W.Dee and contributors  改変・配布は自由です

/*
ボタンとして動作するレイヤです。
押し込まれた時の画像、マウスカーソルがレイヤ内にあるときの画像、通常の画像
をそれぞれ変えることができます。

書式  new ButtonLayer(<window>, <parent>)

<window> : このレイヤを作成するウィンドウ
<parent> : 親レイヤ

*/


class ButtonLayer extends KAGLayer
{
    var Butt_imageLoaded = false; // 画像が読み込まれたか
    var Butt_mouseOn = false; // レイヤ内にマウスがあるか
    var Butt_mouseDown = false; // マウスボタンが押されているか
    var Butt_color = clNone;
    var Butt_caption = ''; // ボタンのキャプション
    var Butt_captionColor = 0x000000; // キャプションの色
    var Butt_keyPressed = false;
    var Butt_showFocusImage = false;

　　：
　　：
（以下略）

うわ、なんかすごい複雑なんだけど…しかも結構長いし。
ん〜、確かにね。
でも今回は必要なところだけ見ていくつもりだから。
あ、そうなんだ。
さすがに全部チェックするのは大変だからね。
だよねぇ。
じゃ、まずは前回のスクリプトにも出てきた loadImages メソッドから見てこっか。
うん！
…あ、でも loadImages メソッドってどこに書いてあるの？
真ん中よりちょっと上の方にあると思うよ。
え〜っと…あ、これかな？

＜loadImages メソッド（125 行目付近）＞

function loadImages(storage, key)
{
    // 画像を読み込む
    super.loadImages(storage, key);
    super.width = imageWidth \ (Butt_showFocusImage ? 4 : 3);
    super.height = imageHeight;
    callOnPaint = true;
    Butt_imageLoaded = true;
}

引数は Layer クラスの loadImages メソッドと同じだから解るよね？
第１引数が画像ファイル名で、第２引数がカラーキーだよね。
そ。§3.3 でやったよね。
ButtonLayer クラスは Layer クラスのサブクラスだから、 最初の super.loadImages っていうのは Layer クラスの loadImages メソッドを呼び出してるんだよね？
ん、そうだよ。
じゃその次は何をやってるか解る？
width と height だから、 レイヤの幅と高さを設定してるのかな？
そうそう。
でもどっちも super が付いてるんだけど…これってなんでなの？
あぁ、それは ButtonLayer クラスが width プロパティと height プロパティをオーバーライドしてるからなんだけど、 詳しい事を説明すると長くなっちゃうから、普通に width と height プロパティを設定してるって思って OK だよ。
ふ〜ん、そうなんだ。
じゃあ width プロパティを設定してるところに出てくる Butt_showFocusImage ってなんなの？
Butt_showFocusImage はボタンにフォーカスが設定されてる時、 つまりボタンがキー入力を受け取れる時に表示する画像を設定するかどうかを表すメンバ変数だよ。
えっと、よくわかんないんだけど…？
ん〜、今回はボタンがフォーカスを受け取れるようにしないから、詳しい説明はパスさせてもらおうと思うんだけど…。
とりあえず、今回は Butt_showFocusImage は false になってるって思ってて。
ってことは…

super.width = imageWidth \ 3;

になるってこと？
ん、そういうこと。
前回ボタン画像を作った時に、１つのボタンに対して３種類の画像を作ったでしょ。
通常の状態用と、ボタンが押されてる時の状態用と、ボタンの上にマウスカーソルが乗ってる時の状態用の３つだよね。
そうそう。
あと、width プロパティと imageWidth プロパティの違いは解るよね？
えっと、width プロパティがレイヤの表示サイズの幅で、 imageWidth プロパティはレイヤが持ってる画像の幅、だったよね？
そ。§3.3 で出てきたよね。
あ、もしかして３種類の画像を横につなげた画像をボタン画像にしてるから、 レイヤの表示サイズの幅をレイヤが持ってる画像の幅の３分の１にしてるってこと？
そのとーり！
width を imageWidth の３分の１に設定することで、 ボタン用のレイヤには３つの状態のうちのどれか１つだけが表示されるってワケ。
そっか。だから高さの方は height と imageHeight が同じになるんだね。
ん。ボタン用の画像は横に並べてるから、何個並べても高さは変わらないよね。
だね。
これでレイヤのサイズを設定してるところは解ったけど…次の callOnPaint っていうのは？
callOnPaint プロパティはボタンの画像を切り替えるのに使うんだけど、 まだボタン画像の切り替えについて説明してないから、これは後で説明するね。
あ、そうなんだ。
じゃあ Butt_imageLoaded は？
Butt_imageLoaded はボタン用の画像が読み込まれてるかどうかを表すメンバ変数だよ。
loadImages メソッドを呼び出すとボタン用の画像が読み込まれるから、 ここで true になってるわけ。
それって必要なの？
今回はボタンに画像を使ってるけど、画像の代わりに文字列を使うこともできるから、 どっちを使ってるのか見分けるためにこのメンバ変数があるんだ。
文字列を使うって？
ん〜、イメージ的には選択肢とかかな。
選択肢には普通文字列が表示されてるでしょ？
あ、選択肢もボタンなんだ？
必ずしもボタンってわけじゃないんだけどね。
link タグの選択肢は ButtonLayer クラスのオブジェクトじゃないし。
えっ、そうなの？
うん。
作ろうと思えば選択肢をボタンとして作ることもできるってこと。
ふ〜ん。
ま、いずれにしても今回は画像を使ったグラフィカルボタンを作るから、 Butt_imageLoaded はずっと true になってるって思っといて。
うん、わかった。
んじゃ、loadImages メソッドの中身も一通りチェックしたことだし、 今回はこの辺にしとこっか。
え？　callOnPaint プロパティの説明ってまだじゃない？
callOnPaint プロパティ、っていうかボタン画像の更新処理はちょっと長くなりそうだから、 次回からやろうと思って。
あ、そうなんだ。
というワケで、続きはまた次回ね。


前へ | TOP | 次へ