Fireworksの拡張機能 « きんくまデザイン

Fireworksの拡張機能

2008/12/9

こんにちは。きんくまです。

最近は、JavaScriptを勉強してました。しかしあれですね。簡単なスライドショーなんかの小規模アプリはJSでできちゃうんですね。こった感じのものはFlashで、割とシンプルめなやつはJSという住み分けになっていくんでしょうかね？

さて、今回はFireworksです。実は去年までほとんど使ったことがなくて、むしろ馬鹿にしてたぐらいなんです。ところが！いざ使い始めてみるとお手軽な感じがとてもよいですね！凝った部分はイラレとフォトショで。組み合わせはFireworksで。な感じでつ使い分けて作っていくのがいいのかな。

それで、Javascriptも勉強ついでにFireworksの拡張機能を作ってみました。
■「きんくまユーティリティ」をダウンロード（MIT License）

■インストール方法
ヘルプ→拡張機能の管理からExtention Managerをたちあげます。
ファイル→拡張機能のインストール→今回のZipファイルを解凍してできたmxpファイルを選択
なんかいろいろとダイアログがでますがOKすればインストール完了です。

WinのFireworks8とCS3で確認しました。

機能は２つです。
■ImportImage
■SetName

——————-
■ImportImage

レイアウトをしているときに、ダミーで灰色かなんかで画像の大きさだけ確保しているものがあったとします。それを選択して、今回のボタンを押すとダミーが画像に置き換わるというやつです。

■使い方

こんな感じに仮のレイアウトがあったとします。水色の部分に画像をはめ込みたいとします。

ウインドウ→きんくまユーティリティ→InportImage
を選択してパレットを出します。

水色の部分を選択します。

ターゲットフォルダに読み込み画像のパスを入力します。たとえば
D:/importfiles/入力するフォルダ/001
などです。日本語も使えます。ただし、気をつけなければいけないのは、フォルダを区切る文字に「¥」を使わずに「/」を使うことです。最後の区切り文字は必要ありません。というかつけるとエラーになります。

ターゲットファイルにファイル名を入力します。
読み込み画像のファイル名.psd
などです。EPSもよみこめるのですが、幅や高さがうまく設定できないので、おすすめはPSDやJPEG、GIFなどです。

とりあえず「横優先」ラジオボタンのまま
「画像読み込み」ボタンを押してみましょう。

さきほどの水色の部分が読み込んだ画像に置き換わっています。エラーになる場合はパスの設定が間違っているかもしれません。もう一度チェックしてみてください。

オプションの説明
「横優先」ダミーの横幅にあわせて読み込みます
「縦優先」ダミーの高さにあわせて読み込みます
「そのまま」ダミーの大きさのまま読み込みます
「選択消去」読み込んだ際にダミーを消すかどうかです

この辺はいろいろとやってためしてみてください。
注意点としては、「横優先」「縦優先」の場合に、もともともっている解像度を超えた場合はその設定が無効になってしまうということです。ダミーの画像が幅400pxあるのに、もとの画像が幅200pxだとすると、幅200pxで読み込まれてしまいます。なので、ダミーはあくまでももとの画像より小さく作ってください。

——————-
■SetName

これはスライスやオブジェクトの名前を順番にクリックしていって自動で名前をつけていく機能です。
一度にたくさん選択したあと、自動で名前をふるコマンドはすでにWeb上にあったのですが、その場合どの順番で数字を大きくしていくか決められなかったので、自分で順番をきめられるようにしました。