インターフェイス:
画像を使ったユーザインターフェイスオブジェクト

画像の取得

pictctrl、pictslider、matrixctrl オブジェクトはボタン、スライダ、スイッチ、ノブなどの「コントロール（コントロール用パーツ）」を作成するユーザインターフェイスオブジェクトです。これらのオブジェクトは PICT ファイルを開くことができ、QuickTime がインストールされていれば、他の画像ファイルフォーマットのファイルも開くことができます。具体的なファイルフォーマットのリストは、Maxリファレンスマニュアルの QuickTimeに関する補遺を参照して下さい。これらのオブジェクトでは、オブジェクトの外観に画像ファイルからのイメージを使用するため、任意のグラフィックス用プログラム（Photoshop™ や Canvas™ など）を使って、この画像ファイルを望みどおりに作成することができます。

画像を使ったコントロールは、一定のレイアウトで作成された画像ファイルを前提に作られています。レイアウトはそれぞれのコントロールによって異なりますが、共通の特徴を持っています。

  • 個々の画像ファイルには、１つ以上のイメージによる矩形領域の配列が含まれます。それぞれのイメージはコントロールの１つのステート（状態）を表します。コントロールのステートには、「ユーザがマウスでクリックしたかどうか」などのカレントの値が含まれます。ユーザは、あらゆる場合に、画像ファイルに含まれる配列の中の１つのイメージだけを見ています。

  • 配列の中のすべてのイメージは同じサイズです。このサイズはMax パッチャーの中でオブジェクトが表示されるサイズに対応する場合もあり、イメージによってオブジェクトのサイズが変更される場合もあります。

  • 配列の一部はオプションです。例えば、コントロールは、オプションとして、ユーザがクリックした場合に異なったイメージを表示することができます。コントロールが使用しないオプションのイメージの代わりに、配列の中にブランク（空白）のイメージを作成する必要はありません。配列の外側の列と行には何もない状態のままにしておいて下さい。

  • コントロールが、画像ファイルのどの部分を表示するかを選ぶ方法は、オブジェクトのインスペクタで設定されるアトリビュートによって、また、ファイル内の画像全体の大きさによって決定されます。

画像ファイルの構造

画像ファイルの組み立て方や、対応するオブジェクトのアトリビュートの設定方法について理解するには、いくつかの実例を見ることが最も早道です。

ここでは、pictctrl を使った例をいくつか見てみましょう。pictctrlオブジェクトは１つの画像ファイルだけを使うため、最も取り扱いが容易です。

シンプルなボタンによるコントロールには２つの状態があります。それは、ユーザがクリックしているか、していないかの２つです。したがって、ボタンとして使用される pictctrlには、「クリックされている状態」と「待機している状態（クリックされていない状態）」という２つの別々なイメージが必要になります。

この例では、pictctrl ボタンが待機状態の場合、次のように表示します。

そして、クリックされた場合、次のように表示します。

このボタンは、内側を四角形でくりぬかれたグレイの長方形ですが、クリックすると黄色と赤に変わります。

この pictctrl 用の画像ファイルは次のようになっています。

待機状態のイメージが左側に、クリックされた状態のイメージが右側にあります。コントロールの状態に基づいて適切なイメージが表示され、他のイメージは隠されます。このファイルは、boring button.pct という名前で patches フォルダ内にある pict フォルダの中に置かれています。デフォルトでは、このフォルダは Max のサーチパスに指定されています。

Max パッチャーでこの画像を使用するためには、新しい pictctrl オブジェクトををパッチャーに追加して、Object メニューから Get Info... を選んでオブジェクトのインスペクタを開きます。pictctrlのインスペクタの下部付近にある Open... ボタンをクリックして、この画像ファイルを選びます。pictctrl のデフォルトのモードはボタンモードなので、行なうべき操作はこれだけです。

トグルの作成

次に、pictctrl のトグルモードで使用する画像ファイルを見てみましょう。pictctrl オブジェクトのトグルモードは、ハードウェアで見られるような「プッシュオン−プッシュオフ型」のボタンをエミュレートします。一度ボタンを押して放すと、スイッチがオンになり、再度ボタンを押して放すと、スイッチがオフに戻ります。これは、オフとオンの 2 つの状態の間を「切り替える」ます。より一般的には、これは２つの値、0 と 1 を切り替えるものです。ダイアログボックスの中で使用している標準のチェックボックスもこのような動作を行ないます。

コントロールが 2 つの値を持ち、マウスボタンにはクリックされた状態とされていない状態がある得るため、pictctrl のトグルモードには 4 つの状態があります。この 4 つの状態を表すチャートは次のように描くことができます。

チャートの4 つの部分は、それぞれコントロールの 1 つの状態を表しています。これは、カレント（現在）の値とマウスボタンの位置の組み合わせになります。

このチャートは、pictctrl オブジェクトのトグルモードで使用する画像ファイルに対して求められるレイアウトと同じ配置になっています。画像は、同じサイズにに 4 等分され、それぞれにはコントロールの状態に対応して表示されるイメージが収められます。

次は、トグルモードの pictctrl を実装する場合の画像の例です。これは、ハードウェアシンセサイザで見られるような、ライトを埋め込んだプッシュボタンに似ています。

左側の列のイメージは、コントロールが待機状態の場合の表示に使用され、右側の列のイメージは、ユーザがマウスでコントロールをクリックした場合に使用されます。イメージの上の行はコントロールの値が 0 の場合に使用され、下の行はコントロールの値が 1 の場合に使用されます。そのため、例えば、右上のイメージはコントロールの値が 0 で、ユーザがボタンをクリックした場合に表示されます。

この画像は picts フォルダの中のLED button.pictというファイルに保存されています。これをコントロールで使用するためには、Max パッチャーに新しい pictctrl を追加し、インスペクタの上部付近にあるラジオボタンをクリックして、モードを Toggle に設定します。コントロールは、モードの設定を完了するまで、画像の正しい部分を表示しない点に注意して下さい。これは、pictctrl が、使用されているモードや、インスペクタのチェックボックスで設定された様々なプロパティに基づいて、画像ファイルの異なった領域を使用するためです。

非アクティブ状態

pictctrl によって作られるコントロールは、非アクティブ状態（使用できない状態）を表す、別のイメージのセットを持つことができます。このイメージを使用して、Macintosh の「グレイアウト」された非アクティブなコントロールと同じように、コントロールがマウスクリックに応答しない状態を示すことができます。

pictctrl 用の画像では、非アクティブイメージは通常のイメージの下に置かれます。次の画像（LED button w/ inactive.pctというファイルにあります。（訳注：ver.4.6では green LED.pctというファイル名です））では、点灯ボタンの下に、非アクティブ用のイメージを追加しています。

このイメージはコントロールが非アクティブであることを示すためにブラー（ぼかし）処理を行なわれています。コントロールの値が 0の場合と 1 の場合を表す 2 通りの非アクティブイメージがある点に注意して下さい。pictctrl オブジェクトのトグルモードでこの画像を使用する場合には、インスペクタの Has Inactive Images をチェックします。

イメージのマスク

すべての Max オブジェクトには、矩形の「バウンディングボックス」があり、これがオブジェクとの位置とサイズを定義しています。「マスク」と呼ばれる機能を使って、四角形ではない外観を持つコントロールを作ることができます。マスクは画像ファイルの中の特別な「イメージ」で、画像のどの部分を可視にして、どの部分を透明、あるいは不可視にするかを定義します。マスクのイメージの黒いピクセルは可視の領域を、白いピクセルは透明な領域を定義します。

次の図は、矩形のイメージとマスクの組み合わせによって、矩形でないイメージを作成する方法を示しています。

マスクを使用した Max のコントロールの例を示すために、値が 0 の場合に8角形の STOPサインを表示し、値が 1 の場合に円形の GO サインを表示するとブルボタンを作ってみましょう。ちょっとした視覚的な面白さを加えるために、マウスでクリックしたときに形が変わる（色は変わりません）ように作って見ました。この画像ファイルは次のようなものです。

この画像は stop-go.pct というファイルの中に保存されています。試してみましょう。新しい pictctrl を作成してインスペクタを開き、画像ファイルとしてstop-go.pct ファイルを選択して、トグルモードに設定して下さい。パッチャーをロックして、コントロールを何回かクリックしてみて下さい。最初に赤い８角形（値 0 でクリックされていない場合のイメージ）から赤い円(値 0 でクリックされた場合のイメージ）に変化している点に注意して下さい。マウスボタンを放すと、緑の円が表示されます。これは値 1 で クリックされていない場合のイメージです。

コントロールが、何もない、白い背景の場所に置かれている場合には、すべてがうまく動作しているように見えます。しかし、このコントロールを、色の着いたパネルオブジェクトや、つや消しのアルミニウムをまねた画像の上に置くことを仮定してみて下さい。イメージの白いエリアが次のように表示されるのがわかります。

この美的な問題を解決するためには、マスクを使って、イメージを描画する部分と透明にする部分を定義し、コントロールの下に隠れた部分が見えるようにします。この stop/go コントロールでは、色のある領域と同じ輪郭を持ったマスクが必要になります。これによって、白い領域は透明になります。マスクを追加した画像ファイルは、次のようなもので、stop-go mask.pctというファイルに保存されています。

マスクは、イメージの下の、相対的に同じ位置に置かれます（多くの場合、イメージ用のマスクは、元のイメージを複製し、「ペイントバケツ」ツールを使ってその複製したイメージを黒で塗りつぶすことによって作成できます）。コントロールの画像ファイルとして、この stop-go mask.pct を選択し、この画像を試してみて下さい。インスペクタで、Has Image Mask というチェックボックスをチェックして下さい。これで、コントロールの白い領域は描画されなくなります。

pictslider や matrixctrl オブジェクト用の画像ファイルは、ほとんど同じ方法で構成されます。イメージの配置に必要なレイアウトは、Max リファレンスマニュアルの中の pictslider と matrixctrl のページを参照して下さい。レイアウトチャートのイメージがすべて必要というわけではないことを思い出して下さい。そのため、シンプルな画像ファイルを使って作業することからスタートし、より精巧なコントロールをつくるためにイメージを追加していって下さい。

注：画像をベースにしたコントロールでは、イメージのサイズを計算するためにグラフィックスファイル全体の大きさを使います。そのため、画像の大きさは正確にイメージの配列の大きさでなければなりません。グラフィックスアプリケーションの中には、グラフィックスファイルを作成するときに、すべてのグラフィックスの右と下の縁に1ピクセル幅の空白のピクセルを加えるものがあることがわかっています。この場合、コントロールはイメージのサイズについての不正確な情報を与えられるため、コントロールの状態が変化したときに、コントロールのイメージがわずかに移動してしまうという現象を引き起こしてしまいます。このような問題に遭遇した場合には、アートワークの作成に、他のグラフィックスアプリケーションを使用してみて下さい。

参照

matrixctrl マトリックス状のスイッチコントロール
pictctrl 画像を使ったコントロール
pictslider 画像を使ったスライダコントロール