このチュートリアルでは、独自の画像を使ったカスタムコントロールの作成について述べます。この機能は pictctrl オブジェクトと pictslider オブジェクトによって提供されるもので、特別に構成された画像を使ってカスタマイズ可能なユーザインターフェースを作ることができます。
カスタムインターフェイスを作成する場合、インターフェイスの色やサイズを変更することは面倒なだけです。pictctrl オブジェクトと pictslider オブジェクトでは、その心配はいりません。実際、あらゆる画像を使ってスイッチ、スライダ、ステートを示すインジケータを作ることができます。しかし、最善の結果を得るためには、オブジェクトの要求に沿った形で画像をレイアウトする必要があります。
チュートリアルを開いて下さい。
チュートリアルパッチを見た瞬間、かなりふざけた４つの画像があることに気がつくと思います。このパッチの動作を見るためには、携帯電話をクリックして下さい。すると metro がスタートし、それ以外の画像がすべて動き出します。携帯電話は、明らかにモメンタリ・スイッチのように動作します。また、指輪はスライダのように（drunk オブジェクトの出力に応答します）、親指はイエス／ノーを示すインジケータのように（別のタイプのスイッチとして働きます）、目は複数のステートを示すインジケータ（random オブジェクトの出力によって対応する状態に変化します）のように動作しています。携帯電話をもう１度クリックすると、すべての動作は停止します。それぞれのコントロールに注目し、何によって動作が生じているのかを見てみましょう。
モメンタリ・ボタンの動作を行なう携帯電話の画像は、２つの画像から作られています。１つは何も起きていない状態の画像、もう１つはバックライトがオンになっている画像です。この出力に接続されている toggle を注意して見てみると、コントロール画像をクリックしたときに 1 が出力され、マウスを放したときに 0 が出力されることがわかると思います。この出力に対してselect オブジェクトを使用すると、metro をコントロールする toggle をトリガすることができます。
metro をオフの状態にして、他のコントロールを見てみましょう。これらは、乱数のような値を出力するオブジェクトによって動作していますが、手動で変更することもできます。指輪をドラッグして下さい。この指輪が水平スライダのような動きをすることがわかるでしょう。手動で指輪を動かすと、接続されているナンバーボックスに「カレント（現在）の値」が出力されます。このケースでは、128 のステップがあり、これがオブジェクトによってトラッキングされます。
親指の画像も手動でコントロールできます。この画像の上をクリックすると、中間の状態になります。目の画像も同様ですが、画像の上でドラッグした場合に表示が変わります。これらは僅かなフレーム数しか持っていないため、オブジェクトの上にあるナンバーボックスを使うと便利です。こちらのほうが、値の変更をよりコントロールしやすい方法でしょう。
携帯電話スイッチの設定をいくつか試してみましょう。パッチをアンロックし、携帯電話を選択して、オブジェクトのインスペクタを開いて下さい。このオブジェクトには利用できるアトリビュートが数多くあることがわかると思います。オブジェクトのサイズ変更から試してみましょう。パッチの中では、オブジェクトサイズ変更を行なう方法はありません。オブジェクトの右下へマウスを持っていっても、グロウボックスは全く表示されません。
インスペクタの中で、"Snap Size to Picture Size" という名前のアトリビュートがオンになっていることがわかるでしょう。このアトリビュートは、ユーザによるサイズ変更を無効にします。実際には、このアトリビュートは、オブジェクトのサイズをソース画像のサイズに強制的に合わせるためのものです。このアトリビュートをオフにすると、オブジェクトのサイズ変更が可能になり、画像はその大きさに合うようにスケールされます。
特定の画像をボタンとして試してみたいと思うことがあるかもしれません。しかし、正しく動作させるためには、いくつかの画像を試す必要があります。イメージファイルを変更するには、image タブをクリックし、Choose... ボタンをクリックして Image File アトリビュートを変更します。一例として、Choose をクリックし、表示されたダイアログでディスクの Max 5フォルダに移動し、その中のpatches/picts フォルダに進んで、boring button.pct という画像を選んで下さい。これは、より「ありふれた」ボタンの画像です。この画像が携帯電話のボタンと完全に置き替わります。
指輪スライダオブジェクトをクリックして、インスペクタが変わるようすを見て下さい。これは、また違ったオブジェクト（pictslider オブジェクト）で、異なったアトリビュートを持っています。最も異なっているのは、別々の２つの画像を使って表示するという点です。背景の画像（この場合には、指の画像）はオブジェクトのサイズを設定するために用いることができますが、指輪の画像は、それとは別にスケーリングや置き換えを行なうことができます。pictslider の"Knob Image File" という項目の Choose ボタンをクリックして下さい。patches/picts フォルダに移動して、smiley2.pct ファイルを選んで下さい。すぐに、２つの「笑った顔」が表示されます。このうちの１つは「クリックしたとき」に表示されるものです。そのため、Has Clickes Image というアトリビュートをクリックして、正しく表示されるようにする必要があります。今度は指の上で指輪を動かす代わりに、この顔の画像をスライドさせます。顔の画像が背景画像の中央に正しく配置されるようにするために、Bottom Margin アトリビュートを変更する必要があるでしょう。
オブジェクトには、特定の画像の構成を必要とするアトリビュートがいろいろあります。例えば、Has Image Mask や Has Clicked Image のようなアトリビュートでは、このオプションをサポートするために、特定の形式に画像をレイアウトしたソースファイルが必要になります。画像エディタが利用できれば、thumbtoggle.pct とeyedial.pct というファイルを開いて、特定のオプションが選択されている場合にどのようにファイルの複雑度が増すかを確認してみるとよいでしょう。「目」のpictctrl はダイアル（dial）モードをサポートしているため、このオブジェクトのインスペクタでは、ダイアルモードでのみ利用できるアトリビュートの例も見ることができます。
pictctrl オブジェクトや pictslider オブジェクトで使用する画像のレイアウトについての詳しい情報は、それぞれのヘルプファイルを開き、picture_for というサブパッチをダブルクリックして下さい。有効なコントローラになるように画像をレイアウトする方法が述べられています。「特別な機能」がほとんど使用されていなければ、画像はたいていの場合かなりにシンプルなものになりますが、より強力なコントロールを行なうためには、それだけ複雑な画像が必要になります。マスクを使用して透明度を与える場合には特に複雑なものになります。
pictctrl や pictslider で利用できる、カスタムユーザインターフェイスのオプションをすべてカバーすることは、このチュートリアルの範疇を超えています。しかし、特別な画像に基づいたエレメントを使ってパッチのユーザインターフェイスを完璧に変更する方法については理解できたことと思います。画像を適切に作成することは容易ではありませんが、その努力によって、ビジュアルなコントロール環境を完璧に管理することが可能になります。
| pictctrl | 画像によって作られるコントロール。 |
| pictslider | 画像によって作られるスライダコントロール。 |
| decide | オンとオフ（1 と 0）をランダムに選択します。 |