[Fireworks]フォーム系共有ライブラリ Tipsと注意点

2011/03/07 17:51 - Risa Yuguchi

共有ライブラリパネル

共有ライブラリに含まれているフォーム系要素（リッチシンボルの一種）は入力のある画面のワイヤーフレームから、デザインを変更するなどして細かいデザインに至るまでいろいろなところで活用できます。

ひとつの活用法としてフォーム要素のリッチシンボルのデザイン変更方法と、実際に仕事で使ってみての注意点を書いてみました。

デザイン変更編

プリセットされている共有ライブラリのフォーム要素はブラウザで使われているものにならってますので、そのままで十分使えます。ただ、FlashとFlexのフォーム要素は言うまでもなく、近頃はjQueryのような使いやすいJavaScriptフレームワークのプラグインなどを使って簡単にチェックボックスやラジオボタンの見た目が変更できるようになりました。

フォーム要素自体のデザインを変更することへの賛否もありますが、遊び心や全体のバランスとして変更したデザインのフォームを使うなら、フォーム要素のリッチシンボルのデザインを変えるのも良いのではないでしょうか。

リッチシンボルのデザインを変更する前に

リッチシンボルは、シンボルとJSF（Fireworks用のJavaScript API）を組み合わせてユーザがパネルから文字や色を変更できるようにした便利なシンボルです。JSFが使われているので、デザイン変更の最大の敵はJavaScriptエラー。特にリッチシンボルでのエラーは単純な操作中にアラートがでるので心臓に悪いです。

このJavaScriptエラーを避けるのに重要なことが二つあります。

  • 変更前のオブジェクト数を減らさない（増やすのは構わない）
  • 変更前のオブジェクト名と同じオブジェクト名のオブジェクトを置いておく（使わないもとのオブジェクトは捨てておく）

この二つさえ押さえておけば、大きな問題は起きないようです。

もうちょっと詳しく説明しますと、JSFはユーザーが設定した内容の反映先オブジェクトをその名前で判定しています。ブラウザのJavaScript同様に指定されたオブジェクトがないと「オブジェクトがありません」のエラーアラートが出てしまうのです。

ボタンシンボルの代わりに使ってみる

ボタンシンボルを使っていて唯一困るのが、選択状態のボタンを通常状態のボタンを同じステートにおいたり、デザインの都合でボタンの状態を設定するのは簡単ではありません。そこですでにstateを自由に設定できるフォーム系リッチシンボルの流用を考えました。

ボタンシンボルの代わりにおすすめなのは、共有ライブラリの「Winフォルダー」にある「ボタン」、もしくは、Macフォルダーにある「ボタン」です。HTMLの方にある「ボタン（win）」の方はこちらの都合では文字色が変えられないので、ちょっと使いづらい印象があります。

tl_files/fireworks/fw_comlib/simple_rich_symbol.png
図：ボタンの設定(シンボルプロパティ)とレイヤー(オブジェクト)構造

Winフォルダーの「ボタン」は、normal(通常)、over(マウスオーバー)、press(クリック)、disabled（非活性）の最大4つの状態を切り替えられます。文字の色・サイズも自由に切り替えられるので、拡大縮小に対応した使いやすいボタンになります。例えば次のように割り当てるとします。

state名 状態 デザイン
normal 通常 tl_files/fireworks/fw_comlib/normal.gif
over hover tl_files/fireworks/fw_comlib/hover.gif
press selected tl_files/fireworks/fw_comlib/selected.gif
disabled (使用しない) tl_files/fireworks/fw_comlib/disabled.gif

整理ができたところで、各状態のデザインをグループ化してnormal、over、clickの各オブジェクトと入れ替えます。今回は変えましたが使用しないdisableはそのままかまいません。これで準備ができました。

tl_files/fireworks/fw_comlib/custom_rich_symbol.png
図：変更後のレイヤー構造(名称は一緒)

デザインを変更したら配置して、シンボルプロパティパネルで設定を変更します。state（※）を設定したら完了です。

tl_files/fireworks/fw_comlib/menu_with_comlib.png
完成図

※シンボルプロパティで設定するstateは、Fireworksのステートではありません。JSFでオブジェクトの表示・非表示を切り替えているだけです。

デザイン変更のFireworks PNGファイル sample_comlib.png (リンク先を保存してFireworksでひらいてください。)

別案として自分で作った共有ライブラリのリッチシンボルにシンボルスクリプトを追加してもいいのですが、残念ながら状態を切り替える場合は自分でJSFを書く事になります。自分のやりたいものにぴったりな設定項目が見つけられたなら、フォーム要素の共有ライブラリのデザインを変更するのは手軽ですしおすすめです。

手軽もいいけど、もっと自由に設定したい！という場合には、Extending FireworksのRich Symbolのところを読みましょう。もっと楽しいFireworksの世界が広がります。

トラブル編

共有ライブラリは非常に強力ですが、知らないとハマってしまう点も幾つかあります。実際に使う前、使っていて疑問に思うことなどをまとめています。

なぜか設定が変更できないみたい？？[Windows限定]

もしくは、前に選択していたシンボルと、今変更した項目以外の設定が同じになってしまった！という状況が起こりやすいです。

tl_files/fireworks/fw_comlib/show_other_symbols_setting.png
図：ボタンシンボルを選択しているのにカーソルシンボルの設定が出ている

Mac版に比べると使用できるメモリが少ない割にGUIが遅くないWindows版なのですが、フォーム系要素を含むリッチシンボルの肝であるシンボルプロパティパネルは少し反応が悪い印象があります。

具体的には、違うインスタンス(ドキュメントに配置しているシンボルオブジェクト)をクリックしても、シンボルプロパティパネルの内容は一見更新されないのです。しかも種類の違うリッチシンボルを選択すると設定さえ無効になります。

私の知るWindows版でのベストプラクティスは、リッチシンボルの設定をするときは、次の手順を守ること。

  1. 一度シンボルプロパティパネルを閉じる。（もしくは同じタブグループのプロパティパネルを選択）
  2. 設定したいオブジェクトを選択する
  3. シンボルプロパティを開き、設定を行う

3つの手順を繰り返して、次々に設定していきます。

なぜか日本語が打てません…[CS3より前（…だったはず）]

Fireworks CS3より古いバージョンを使っていますか？アップデータで改善される場合がありますが、ダメならば別のところにテキストを打ってそれをCtrl/Cmd＋Vで貼り付けます。ショートカットでうまくいかない場合は、メニューから貼付けを。手元にあるバージョンですと、CS4以降では発生しません。

ラジオボタンやチェックボタンで文字が折り返されてしまうのはどうしたら？？[Windows/Mac共通]

バージョンによるのか？と思うかもしれませんが、最新版でもこれは同じです。厄介なのは、シンボル自体を拡大縮小ツールで大きくしても改善されないところ。原因はテキストフィールドが固定長であるためなので、次の手順で自由長にしてやります。

  1. ラジオボタン・チェックボタンのシンボルを編集状態にする
  2. 「label」と書いてあるレイヤーのテキストフィールドを選択し、ダブルクリップする
  3. テキストフィールドの右上の白い四角をダブルクリックし、円形に変えて自由長のテキストフィールドにする
  4. 自由長のテキストフィールドは上にずれるので、位置を調整する

なんども同じ操作をするのは大変なので、大元のシンボルの方を直してしまうことをおすすめします。

サイズを変更したら見栄えが…[Windows/Mac共通]

チェックボックスの原寸・拡大後比較
図：原寸と拡大した場合の比較(チェックボックスの場合)

フォーム系のリッチシンボルは、基本的にそれぞれ決まった方向だけ拡大・縮小できます。縦横比を保ったままの伸縮は苦手なものが多いので、解像度を変更する可能性のある場合は使わないほうが良いようです。

拡大・縮小できるかどうかで分けてリスト化しました。

垂直・水平に伸縮できる

  • 各フォルダーの「テキスト領域」(テキスト領域(Windows)、テキスト領域(Mac OS)含む)

垂直方向に伸縮できる

  • 垂直スクロールバー
  • HTMLフォルダーの垂直スライダー(mac)
  • Macフォルダーの垂直スライダー

水平方向に伸縮できる

  • ボタン
  • 水平スクロールバー
  • HTMLフォルダーの水平スライダー(mac)
  • Macフォルダーの水平スライダー
  • テキストフィールド

ちょっと手を加えれば水平方向に伸縮できる

  • 数値ステッパー

必ず原寸で使用する

  • ラジオボタン(変形する必要がない・変形するとテキスト位置が歪む)
  • チェックボタン(変形する必要がない・変形するとテキスト位置が歪む)
  • 水平スライダー(win)および、Windowsフォルダーの水平スライダー
  • 垂直スライダー(win)および、Windowsフォルダーの垂直スライダー
  • ステッパー(変形する必要がない)

ラジオボタンのシンボルを入れ替えたら選択状態に！

リッチシンボルの設定はそれぞれ異なります。

シンボルを入れ替えた場合は、そのリッチシンボルのデフォルトの設定になるので、ラジオボタンではstateにselectedがセットされるようです。入れ替え後は必ずすべての設定を見直し、再設定するようにします。

え？シンボルって入れ替えられるの？？

私もCS5まで知りませんでしたが、「変更＞シンボル＞シンボルを入れ替え」でシンボルは入れ替えられます。普段使用しているFlashでは、プロパティパネルに「入れ替え」ボタンが付いているので余計に気が付きませんでした。

使うコツなども上げましたが、ライセンス的に安全で、他のOSでの見栄えの確認もできて、他にも転用できる共有ライブラリ及びリッチシンボルは協力に作業の効率化に貢献します。ぜひ一度はお試しください！

戻る

コメントを追加