フェイス作成編/マウスオーバーによるアイテム表示の応用2 - uLilithフェイス作成方法wiki

マウスオーバーによるアイテム表示の応用（２）

LinkedItemキーとPushed～～・MouseOver～～系のキーの組み合わせの応用で、
「通常時は文字表示のみ表示され、
　マウスオーバー時のみ操作ボタンが表示されるフェイス」の作り方を説明します。

まずは、↓のzipファイル内にあるフェイスを表示してみてください。

このようなフェイスが表示されます。
このフェイスを作成するには、
再生操作ボタンの画像アイテムと文字列アイテムのクリック／マウスオーバー状態を連動させる必要があります。

フェイスの作り方(1)

「ImageFileキーは省略し、
PushedImageFile・MouseOverImageFileキーで
クリック／マウスオーバー時のみ画像を設定し、DisableRegion = Trueに設定した」
再生操作ボタンのアイテムと、
「PushedTextColor・MouseOverTextColorどちらも
0x00000000（完全透明）に設定した」文字列アイテムを組み合わせることで
作成できます。

再生操作ボタンアイテムのLinkedItemキーに
文字列アイテムのフィールド名を指定してください。

とりあえずフェイスとしては使用可能な状態ですが、この状態ではまだ完成はしていません。

実際に操作してみると分かると思いますが
このままでは「操作しているボタン以外は表示されない」ため
上手くマウスカーソルを当てないとどこにボタンがあるか分かりにくくなっています。

このフェイスにいくつか別のアイテムを追加することで使いやすくしていきます。

フェイスの作り方(2) 補助アイテムの追加

各操作ボタンと同じ場所に、
「他のボタンをクリック／マウスオーバー中のみ表示される画像アイテム」を追加し、
LinkedItemキーを設定することで
ウィンドウ上の操作ボタンどれかをクリック／マウスオーバー中は
必ず他のボタンも表示されるようにすることができます。
ウィンドウ自体にマウスカーソルを置いていないときはボタンは消えたままになります。

↓のzipファイル内のフェイスで、以下の設定を追加しているので
実際にiniファイルを見比べてみてください。

mouseover_test4.zip

詳しい設定の仕方は以下のとおりです。

１．各操作ボタンと同じ場所に、
クリック／マウスオーバー時のみ画像を設定したDynamicImageアイテムの
「別画像アイテム」を配置する
ここで設定する画像は、「通常時の（マウスオーバー／クリック時以外の）画像」
（普通のフェイスならImageFileキーで指定するほうの画像）を指定します。
EnableキーはFalseに設定します。

２．各操作ボタンのLinkedItemキーに、
その操作ボタン以外全ての、１で追加した画像アイテムのフィールドを追加で指定する
例えばこのページのサンプルフェイスなら、再生ボタンであれば
前の曲・一時停止・停止・次の曲の４つ全ての「別画像アイテム」を連動させます。
※コマンドを設定しているボタンではなく、追加した方のアイテムを連動させてください。

この２つだけでも問題ありませんが、次の３の設定もするとさらに操作しやすくなります。

３．操作ボタンがある部分全体より少し広めに（外枠部分を避けるくらいの大きさで）
     サイズを指定しただけの、画像無し・透明のDynamicImageアイテムを追加し、
     Enable = TrueとCommand = MainWindowDragを指定して
     クリックに反応するだけの（ウィンドウ移動はできる）領域を作る
     LinkedItemキーには文字列アイテム全てと
     １で追加した「別画像アイテム」全てを指定しておく
このアイテムを設定することにより、操作ボタンがある部分にマウスカーソルが近づくと
自動的に操作ボタンすべてを表示させることができます。
このアイテムにはMouseCursor = Normalを設定しておくと、
この領域にカーソルがあるときも指カーソルに変化させずに済みます。
なお、このアイテムを配置する場合はPriorityキーで指定する表示優先度に気をつけてください。
操作ボタンよりも高い優先度にすると、このアイテムの当たり判定のほうが優先されて
他のボタンが操作不能になってしまいます。

以上の設定で、
どのボタンをクリック／マウスオーバー中でも、
また各操作ボタンがある部分の周囲にマウスカーソルがあるときでも
文字表示を消し、すべての操作ボタンを自動的に表示するようにすることができます。