マウスオーバーによるアイテム表示の応用(1)

LinkedItemキーとPushed~~MouseOver~~系のキーを組み合わせて
クリック/マウスオーバーで他の複数のアイテムを表示・非表示させる例を説明します。


マウスオーバーで文字表示を変化させる

まずは、複数の文字アイテムを連動させ、文字色を変えることにより
マウスオーバー/クリック時に内容を切り替えるような表示にする例を紹介します。
↓のzipファイル内にあるフェイスを表示してみてください。
mouseover_test1.zip

ボリュームバーが2つ表示されます。

上のバーは特に仕掛けはありません。

それに対して、下のバーはクリック/マウスオーバーすると
左側の「Volume」の文字列アイテムが消え、同じ場所にボリュームの数値が表示されます。

この仕掛けは、以下の3つの設定をすることにより実現可能です。
  • 『「Volume」の文字列アイテム』は、クリック/マウスオーバー時の文字色を透明にする
    (キーを省略するのではなく、
    PushedTextColorMouseOverTextColorどちらも0x00000000に設定する)
  • 『ボリューム数値の文字列アイテム』は、通常時の文字色は透明に
    TextColorキーを省略するか、0x00000000に設定)し、
    クリック/マウスオーバー時のみ文字色を設定する
  • ボリュームバーのLinkedItemキーに、
    『「Volume」の文字列アイテム』と『ボリューム数値の文字列アイテム』を指定する

こうすると、『「Volume」の文字列アイテム』の文字色は
クリック/マウスオーバー時は透明なので消えますが、
『ボリューム数値の文字列アイテム』のクリック/マウスオーバー時の文字色は
通常の色で設定されているので、クリック/マウスオーバー時のみこのアイテムが表示されます。
※見た目では色が透明なのでどちらかが消えているように見えますが、
フェイスアイテムとしては常にどちらも「表示されている」状態になっています。


マウスオーバーでボタン画像を変化させる

今度は、画像アイテムで作った操作ボタンを組み合わせた例を紹介します。
↓のzipファイル内にあるフェイスを表示してみてください。
mouseover_test2.zip

左右バランスを操作するバーが2つ表示されます。
バーの右の「Pan Reset」の部分は画像で表示しています。
先ほどの例と同じく、上のバーは特に仕掛けはありません。

「Pan Reset」部分のバランスリセットボタンも普通に表示・動作します。


それに対して、下のバーはクリック/マウスオーバーすると
右側の「Pan Reset」の画像アイテムが消え、同じ場所に左右バランス数値が表示されます。
(この数値表示はStringImageFileキーを指定した、画像による文字表示になっています)
「Pan Reset」部分のリセットボタンをクリックすると上のものと同じく
普通通りにクリック時の色に(画像に)変化します。

この仕掛けは、以下の設定をすることにより実現可能です。

1.まず、『「Pan Reset」の画像アイテム』(リセットボタン)を2つのアイテムに分ける
「通常時のみ表示されるアイテム(A)」と
「マウスオーバー/クリック時のみに表示されるアイテム(B)」の2つに分けます。
「通常時のみのアイテム(A)」は、
  • ImageFileには普通に画像ファイルを指定
  • PushedImageFileMouseOverImageFileキーを省略せずに
    透明の画像ファイル(サイズは小さくても可)を指定
「マウスオーバー/クリック時のみのアイテム(B)」には、
  • ImageFileキーは省略する
  • PushedImageFileMouseOverImageFileには、普通に画像ファイルを指定
上記のように画像を指定します。
そして、どちらか一方をクリック可能にして(コマンドを設定し)、
もう一方のアイテムをLinkedItemキーで表示を連動させておきます。
(サンプルフェイスでは(B)のほうにコマンドを設定しています)
※アイテムを2つに分けないと、
バーとの連動を優先して「マウスオーバー/クリック時の画像」を透明にしただけの場合、
バー操作中は問題なくても
バランスリセットしようとしてこのボタンを押したときも画像が消えてしまうことになります。

2.『左右バランス数値の文字列アイテム』の画像を設定する
通常時は透明に、マウスオーバー/クリック時のみ見えるように設定します。
  • PushedStringImageFileMouseOverStringImageFileには、
    普通に文字表示に使用する画像ファイルを指定する
  • StringImageFileキーは、キーを省略せずに
    PushedStringImageFileMouseOverStringImageFileで指定した画像ファイルと同じ大きさの
    透明の画像ファイルを指定する
※通常時のみ非表示にしようとしてStringImageFileキーを省略するとエラーになります。
また、文字画像の1文字あたりの表示サイズはStringImageFileの画像のサイズで決まるので
StringImageFileに指定する透明画像は
PushedStringImageFileMouseOverStringImageFileの画像とあわせた縦横サイズにしてください。

3.左右バランスバーのLinkedItemを設定する
バーのLinkedItemキーには、
『通常時のみに表示される「Pan Reset」の画像アイテム(A)』と
『左右バランス数値の文字列アイテム』を指定する

以上の設定をすることにより、
左右バランスバーの操作中は
バーと連動してリセットボタンの画像を透明にして(消したように見せかけて)
バランス数値を表示するようにしつつ、
リセットボタンを押したときは普通通りに操作・画像を表示させることができます。
最終更新:2012年12月26日 01:48