コマンド:グラフィックウィザード
Home>Fireworks>操作リファレンス>コマンド:グラフィックウィザード
[コマンド]->[グラフィックウィザード]は、xmlファイルを利用し、ひとつのフォーマットに画像やテキストを流し込んで、大量の画像を自動的に生成する機能です。
ウィザードを使う前に準備すること
グラフィックウィザードを使う前に、以下の3つを用意します。
- pngファイル
- xmlファイル
- 画像ファイル
pngファイルでフォーマットをつくる
画像とテキストを流し込むフォーマットとなるファイルをFireworksでつくります。
以下のようにオブジェクトやテキストを配置し、その名前を{}で囲った半角英数字でつけます。
▲フォーマットの例
▲矩形のプロパティで、{image}という名前をつけている
{}で囲った部分は、変数名として認識されます。
これにより、xmlファイルのデータをどこに流し込むのかを指定できるようになります。
pngファイルは保存しなければ、グラフィックウィザードを使用できないので、すべて作り終えたら保存します。
xmlファイルで流し込むテキストデータをつくる
次に、pngファイルの各オブジェクトに挿入するデータをテキストで指定します。
指定したファイルはxmlとして保存します。
すべてのデータを<records></records>タグで囲います。
ひとつのデータのくくりを<record></record>タグで囲います。
その中にオリジナルのタグ名(先ほどpngファイルで指定した変数名のタグ)を書きます。
このとき、xmlのタグ名を、pngファイルの変数名にしておくと後の作業が少し楽になります。
画像ファイルを挿入する場合には、画像ファイルを挿入するオブジェクト名のタグの中に、画像ファイル名を書きます。
ファイルは、UTF-8で保存しましょう(no signature)。
流し込む画像ファイルをつくる
画像は、サイズを予めそろえて加工し、ひとつのフォルダに保存します。
グラフィックウィザードを使う
まずデータソースを指定します。
[XMLデータファイルを選択してください]に、先ほどつくったxmlファイルを指定します。
[イメージ変数の置換対象ファイルが格納されたフォルダを選択してください]に、画像を保存したフォルダを指定します。
xmlファイルの内容を分析して、タグ名とそれに対応するテキストが表示されるので、正しく表示されているかを確認しましょう。
フォーマットに挿入するレコードを指定します。
ここでは、xmlファイルに書いたすべてのレコードを順に挿入していくので、[すべてのレコード]にチェックを入れます。
xmlファイルのタグと、pngファイルの変数名を関係付けます。
ここで関係付けたデータが、xmlファイルからpngファイルに流し込まれます。
このとき、予めxmlファイルのタグ名と、pngファイルの変数名を同じにしておくと、自動的に関係付け(マッピング)されて表示されるので、作業が楽です。
画像を生成したときの名前付けのルールを指定します。
ファイル名
[データフィールドを使用する]の場合、xmlファイルで指定したタグのいずれかを選択します。
書き出されたファイル名は、そのタグに指定したデータになります。
データが日本語の場合、日本語が画像ファイル名になるので、ウェブにアップする場合には、リネームしなければならないのが手間になるので、その場合は、[シーケンシャル命名を使用する]を使います。
[シーケンシャル命名を使用する]の場合、「任意の名前+連番」というファイル名を生成することができます。
イメージ
生成した画像のデータ形式と、書き出す画像の場所を指定します。
ソースファイル
各ファイルごとにpngファイルを作成する場合にはチェックし、書き出すpngファイルの場所を指定します。
以上の設定を済ませると、確認の表示が出ます。
ここで[終了]をクリックすると、画像生成が始まります。
このときに、[設定を保存する]にチェックを入れておくと、次回[コマンド]->[グラフィックウィザード]を指定したときに、同じxmlファイルと画像フォルダを指定した状態で、グラフィックウィザードが起動します。
生成された画像サンプル
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-12-14