Adobe Fireworks のコマンドで Light Effect をトレース。コマンドの雛形にも使えます。
Fireworks のコマンドの資料が、特に日本語の情報があまり流通しないのは、みんなが作ってみた成果をリリースしないから？と思うので、とりあえずやってみます。
Awesome Light Effects in Fireworks inspired by the James White's O seriesで紹介されているエフェクトを、コマンドで再現してみました。
もちろんこれでも開発者のはしくれなので、単に１度ファイルを作っておけばコピペで使いまわしできるじゃん、みたいなご意見には負けないように、いろいろ工夫してみました。
コマンド化の優れている点、工夫されている点
- 何も選択していない状態でも自動で１セット生成する
- 矩形、オートシェイプ、パス、テキストなど、おおよそどのオブジェクトに対しても適用できる(きれいかどうかは別)
- 名前が付いてないオブジェクトだった場合、現在時刻を名前にする
- 選択したオブジェクトの位置を変更せずにサブレイヤー化するので、他のオブジェクトに影響がでない
- 選択したオブジェクトを最下層でバックアップ（非表示、ロック）するので、安心
- 各レイヤーにもちゃんと名前をつける
- 処理後は自由にいじれる
未解決の問題点、未対応な点、検討の余地がある点、未熟な点
- 複数処理は未対応（オブジェクトを複数選択してまとめて実行、はできない）
- 丸い矩形やシェイプは比較的初期状態できれいになるが、四角い矩形やシェイプの場合、調整が必要
- 理論的な配置変更ができていない（なんとなくで10%ずらしとか。。。）
- もうあと２歩くらい踏み込んでソース整形できるはず。。。
インストール
- 置くべきところにファイルとして置くだけです。（CS3 で Vista の場合は、c:\Users\ユーザ名\AppData\Roaming\Adobe\Fireworks CS3\Commands らへん）
- Adobe Fireworks でコマンドにアクセスキーをつける（CS3なら Flash でもOK） - Office L テクニカルノートも参考にどうぞ
使い方
- 実行するだけです。
- 何も選択してない状態だと、100x100の丸いパスオブジェクトを自動で生成します。
- 適当な矩形やオートシェイプを選択した状態で実行すると、そのオブジェクトに対してエフェクトがかかります。
その他
というわけでソースコードは以下です。
自由にコピペして使ってください。設定の大半は元サイトの情報に基づいているので、元サイトに感謝しながら使いましょう。
ソース ( Light_Effect(&L).jsf )
/*
Name: Light Effect Basics ( Adobe Fireworks Commands )
URI: http://d.hatena.ne.jp/officel/
Description: 光ってるオブジェクトのための基本フィルタを設定する。
Version: 1.0
Author: Y.Nishimura from Office L
Author URI: http://officel.biz/
Usage: 処理したいオブジェクト（矩形、シェイプ、パス、テキスト等々）を選択して実行
: 選択されていない場合は新しい円を勝手に作成
: 複数処理には未対応（めんどくさいｗ
Tags: Fireworks,commands,Effect,Light
Other:
元のエフェクト設定 http://abduzeedo.com/james-white-o-series-fireworks
*/
var dom = fw.getDocumentDOM(); // document object
var sel = [].concat(fw.selection); // saved selection
var iam = "Light Effect Basics by Office L";
function LightEffectBasics(){
if (!dom) return;
if (sel.length > 1) return alert('１つずつしか処理できないです。');
if (sel.length <= 0){
// オブジェクトが選択されてなかったら勝手に１個作って処理する
dom.addNewOval({left:100, top:100, right:200, bottom:200});
sel = [].concat(fw.selection);
}
var nowObj = sel[0];
nowObjName = nowObj.name;
if (nowObjName == null){ // 選択したオブジェクトに名前がない場合
nowObjName = new Date().toGMTString();
dom.setElementName(nowObjName); // 日時を名前にセット
// 同名の他のオブジェクトに迷惑をかけないようにする。
}
newObjName = "new base";
newLayerName = nowObjName + " - " + iam;
newObjLayerNum = dom.currentLayerNum;
// 選択しているオブジェクトの名前で現在のレイヤーに新規レイヤーを作る
newSubLayerName = dom.addNewSubLayer(newObjLayerNum, newLayerName, false);
// 名前をつけた新規レイヤーに選択しているオブジェクトを移動
dom.moveSelectionToLayer(dom.currentLayerNum, false, "none", -1);
// サイズを保存しておく
var nowObjBounds = dom.getSelectionBounds();
// クローンして名前をつける
dom.cloneSelection();
dom.setElementName(newObjName);
// 元のオブジェクトは保護のために非表示にしてロック
dom.setElementVisibleByName(nowObjName, false);
dom.setElementLockedByName(nowObjName, true);
// クローンしたオブジェクトに塗りを設定
dom.setFillNColorNTexture({
category:"fc_Circular",
ditherColors:[ "#000000", "#000000" ],
edgeType:"antialiased",
feather:0,
gradient:{
name:"cn_BlackWhite",
nodes:[
{ color:"#000000", isOpacityNode:false, position:0.6 },
{ color:"#ffffff", isOpacityNode:false, position:1.0 } ],
opacityNodes:[
{ color:"#000000", isOpacityNode:true, position:0 },
{ color:"#000000", isOpacityNode:true, position:1.0 } ]
},
pattern:null,
shape:"radial",
stampingMode:"blend opaque",
textureBlend:0,
webDitherTransparent:false
},"#ffffff","Confetti");
dom.setOpacity(55);
// グラデーションハンドルをいじる
end1x = ( (fw.selection[0].width / 2) + (fw.selection[0].width / 20) );
dom.moveFillVectorHandleBy({x:end1x, y:0}, "end1", true, false);
// 重なるレイヤーオブジェクトを作っていくよ
// 移動範囲（ずらす範囲）は元オブジェクトの10%分にしとく。後で変更して。
baseMoveX = (fw.selection[0].width * 0.1);
baseMoveY = (fw.selection[0].height *0.1);
// １つめ 選択中のオブジェクトをクローンする
fw.getDocumentDOM().cloneSelection();
// それに名前をつける
fw.getDocumentDOM().setElementName("1st Overlay 100");
// ブレンドモードを指定
fw.getDocumentDOM().setBlendMode("overlay");
// 透明度を指定
fw.getDocumentDOM().setOpacity(100);
// 移動する
fw.getDocumentDOM().moveSelectionBy({x:-baseMoveX, y:-baseMoveY}, false, false);
// コマンドのバグ？移動すると塗りのグラデがついてこないので、一旦デフォルトにして
fw.getDocumentDOM().setDefaultFillVector();
// new base と同じように設定
fw.getDocumentDOM().moveFillVectorHandleBy({x:end1x, y:0}, "end1", true, false);
// ２つめ
fw.getDocumentDOM().cloneSelection();
fw.getDocumentDOM().setElementName("2nd Color Dodge 40");
// ブレンドモードが違う
fw.getDocumentDOM().setBlendMode("colordodge");
// 透明度も違う
fw.getDocumentDOM().setOpacity(40);
// 元の位置に戻してから移動
fw.getDocumentDOM().moveSelectionBy({x:baseMoveX, y:baseMoveY}, false, false);
fw.getDocumentDOM().moveSelectionBy({x:baseMoveX, y:-baseMoveY}, false, false);
fw.getDocumentDOM().setDefaultFillVector();
fw.getDocumentDOM().moveFillVectorHandleBy({x:end1x, y:0}, "end1", true, false);
// 最前面に出す
fw.getDocumentDOM().arrange("front");
// ３つめ
fw.getDocumentDOM().cloneSelection();
fw.getDocumentDOM().setElementName("3rd Soft Light 100");
fw.getDocumentDOM().setBlendMode("softlight1");
fw.getDocumentDOM().setOpacity(100);
fw.getDocumentDOM().moveSelectionBy({x:-baseMoveX, y:baseMoveY}, false, false);
fw.getDocumentDOM().moveSelectionBy({x:-baseMoveX, y:baseMoveY}, false, false);
fw.getDocumentDOM().setDefaultFillVector();
fw.getDocumentDOM().moveFillVectorHandleBy({x:end1x, y:0}, "end1", true, false);
fw.getDocumentDOM().arrange("front");
// ４つめ
fw.getDocumentDOM().cloneSelection();
fw.getDocumentDOM().setElementName("4th Soft Light 100");
fw.getDocumentDOM().setBlendMode("softlight1");
fw.getDocumentDOM().setOpacity(100);
fw.getDocumentDOM().moveSelectionBy({x:baseMoveX, y:-baseMoveY}, false, false);
fw.getDocumentDOM().moveSelectionBy({x:baseMoveX, y:baseMoveY}, false, false);
fw.getDocumentDOM().setDefaultFillVector();
fw.getDocumentDOM().moveFillVectorHandleBy({x:end1x, y:0}, "end1", true, false);
fw.getDocumentDOM().arrange("front");
// 大きい光を星型で作るよ。変形必須。
// 適当な位置に適当なサイズで作ってから
fw.getDocumentDOM().addNewStar(10, 0.5, true, {x:0, y:0}, {x:100, y:100});
// サイズをあわせる。addNewStar は頂点の数と半径サイズで計算されたサイズになるので
// 狙ったサイズにするには後から調整しないと無理っぽい
// 保存しておいた元オブジェクトの Bounds にあわせる
fw.getDocumentDOM().setSelectionBounds({left:nowObjBounds.left, top:nowObjBounds.top, right:nowObjBounds.right ,bottom:nowObjBounds.bottom}, "autoTrimImages transformAttributes");
// 塗りは白一色にしてエッジをぼかす 40 に設定。
fw.getDocumentDOM().setFillNColor({
category:"fc_Solid",
ditherColors:[ "#000000", "#000000" ],
edgeType:"antialiased",
feather:40,
gradient:null,
pattern:null,
shape:"solid",
stampingMode:"blend opaque",
textureBlend:0,
webDitherTransparent:false },
"#ffffff");
fw.getDocumentDOM().setBlendMode("overlay");
fw.getDocumentDOM().setElementName("Some Lights 40 feather & Overlay");
// 別の光源を作るよ。サイズや数は後で変更して。
fw.getDocumentDOM().addNewOval({left:nowObjBounds.left * 1.5, top:nowObjBounds.top * 1.5, right:nowObjBounds.right, bottom:nowObjBounds.bottom});
fw.getDocumentDOM().setFillNColor({ category:"fc_Solid", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:20, gradient:null, pattern:null, shape:"solid", stampingMode:"blend opaque", textureBlend:0, webDitherTransparent:false }, "#ffffff");
fw.getDocumentDOM().setBlendMode("softlight1");
fw.getDocumentDOM().setElementName("More Light : ");
// 色をつけるよ。サイズや形状は後で変更して。
fw.getDocumentDOM().addNewOval({left:nowObjBounds.left * 0.5, top:nowObjBounds.top * 1.5, right:nowObjBounds.right * 0.75, bottom:nowObjBounds.bottom});
fw.getDocumentDOM().setFillNColor({ category:"fc_Solid", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:39, gradient:null, pattern:null, shape:"solid", stampingMode:"blend opaque", textureBlend:0, webDitherTransparent:false }, "#CC9900");
fw.getDocumentDOM().setBlendMode("overlay");
fw.getDocumentDOM().setElementName("Color1 : ");
// ２色目
fw.getDocumentDOM().addNewOval({left:nowObjBounds.left * 1.5, top:nowObjBounds.top * 1.5, right:nowObjBounds.right * 1.25, bottom:nowObjBounds.bottom});
fw.getDocumentDOM().setFillNColor({ category:"fc_Solid", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:62, gradient:null, pattern:null, shape:"solid", stampingMode:"blend opaque", textureBlend:0, webDitherTransparent:false }, "#ff0000");
fw.getDocumentDOM().setBlendMode("overlay");
fw.getDocumentDOM().setElementName("Color2 : ");
// ３色目
fw.getDocumentDOM().addNewOval({left:nowObjBounds.left, top:nowObjBounds.top * 0.5, right:nowObjBounds.right, bottom:nowObjBounds.bottom * 0.75});
fw.getDocumentDOM().setFillNColor({ category:"fc_Solid", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:62, gradient:null, pattern:null, shape:"solid", stampingMode:"blend opaque", textureBlend:0, webDitherTransparent:false }, "#33CCFF");
fw.getDocumentDOM().setBlendMode("overlay");
fw.getDocumentDOM().setElementName("Color3 : ");
// 処理終了
}
try{
LightEffectBasics();
}catch(e){
// alert([e, e.lineNumber, e.fileName].join("\n"));
};
最後に
自由に改造して使ってもらっていいですが、質問とかは勘弁してください。特にできない系のサポートはしません。めんどくさがり屋なのでｗ
もっと上手に書き直してやったぜ、とか、こんなセッティングにしてみたぜ、みたいなのは歓迎です。ぜひいろいろやっちゃってください。
では楽しんでください。
