Yoropan blog

Dreamweaver Extension : Externalized Layer CSS command

AP elements (layer) have some inline CSS that all in document. Clean up these tags, and create external CSS document.

Externalized Layer CSS.mxp from Dreamweaver 8

You can select Menu > Commands >Externalized Layer CSS.

Fireworks panel : PositionManager – like a illustrator’s align to key object

【Alignment】
1.It is the X coordinate of the shape that was copied.
2.It is the Y coordinate of the shape that was copied.
3.copy the coordinates.
4.Move to the coordinates that have been copied.
5.Align to Top, Middle,and Bottom.
6.Align to Left, Center, and Right.
【Replacement】
7.Invert X, Y, Z coordinates, the position of multiple shapes.
8.Replace the coordinates of the shape of the two is selected.

usage：First, click the copy button. Second, select to align to key object.

Download：PositionManager.mxp CS3 or more.

Fireworks command : select slices by color

From Fireworks CS6, it can export CSS sprites. When export slices, I want to select separately these slices. so, slices group by color, slices can select separately.
you know slices can change color?

Of course this command can use even below Fireworks CS6.
If you decide the rules, looks as well as practical.

After this command run, If slices that exists across all pages, it’ ok.
This command look for the same color slices from all pasges.

Then export slices as usual.
Check options at the export dialog.
Select “All Pages” in “Pages:” combobox, and check the “Selected Slices Only” checkbox.

samecolor_sliceselect.jsf

jsf code:

try {
	if (fw.documents.length != 0) {
		var dom = fw.getDocumentDOM();
		var sel = fw.selection;

		var len = sel.length;

		if (len == 0) {
			alert("select something.")
		} else {

			if (sel[0].sliceID) {
				var pnum = fw.getDocumentDOM().pagesCount;
				var pno = fw.getDocumentDOM().currentPageNum; 
				var _color = sel[0].color;
				var slices;
				
				for (var h = 0; h < pnum; h++) {
					fw.getDocumentDOM().changeCurrentPage(h);

					var l = fw.getDocumentDOM().layers;
					var len = l.length - 1;
					
					fw.getDocumentDOM().currentLayerNum = len;
							fw.getDocumentDOM().selectAllOnLayer(len, false, false);
							 slices = [];
							slices = slices.concat(fw.selection);
			
							var j = slices.length;
			
							if (slices) {
								for (var i = 0; i < j; i++) {
									
									if (_color != slices[i].color) {
										slices[i]=null;
									}
								}
							}
							fw.selection=slices;
				}
				fw.getDocumentDOM().changeCurrentPage(pno);
			}


		}

	} else {
		alert("No documents")
	}
} catch (e) {
	alert(e)
}

Fireworks command : toggle the visibility of the master page

If you use pages in fireworks when export slices, you want to hide master page from all pages.
This command toggle the visibility of the master page.

changeVisibleMasterPage.jsf

jsf code:

try {
    if (fw.documents.length != 0) {
        var dom = fw.getDocumentDOM();
        if (!fw.getDocumentDOM().isMasterPageLayer(0)) {
            alert("This page isn't contain master page layer.")
        } else {
            var pName = "com.yoropan.isMasterPageVisible"
            var isMasterVisible;
            if (fw.getPref(pName)) {
                isMasterVisible = fw.getPref(pName);
            } else {

                isMasterVisible = false;
            }

            var pno = dom.currentPageNum;
            dom.changeCurrentPage(0);

            dom = fw.getDocumentDOM();
            var j = fw.getDocumentDOM().layers.length;
            for (i = j; i--;) {
                dom.setLayerVisible(i, -1, isMasterVisible, false);
            }
            fw.getDocumentDOM().changeCurrentPage(pno);
        }
        
        fw.setPref(pName, !isMasterVisible)
    } else {
        alert("No documents")
    }
} catch (e) {
    alert(e)
}

Dreamweaver extension, code editing like Eclipse.

I need this extension, and made it in two days. In these codes use Japanese comment, maybe work in English. Try this, if you can.

• Code-delete：Delete selected lines.
• Code-move-up：Move up selected lines.
• Code-move-down：Move down selected lines.
• Code-duplicate-up：Copy selected lines, duplicate above.
• Code-duplicate-down：Copy selected lines, duplicate below.

Check with: windows xp sp3, Dreamweaver 8-CS6

Download: CodeEditUtils.zip

Check with: windows7, Dreamweaver CC

Download: CodeEditUtils.zxp

Texture panel for Fireworks

I would like to “Texture panel” like a Photoshop’s brush manager in Fireworks.
For Fireworks users and me, I made it.

Download > Texture.zip

First unzip, next 2 files copy to your Command Panels folder where (ex.win) “C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\Command Panels”. reboot Fw, just installed.
It browse texture in applications texture folder and show them.Then select texture,apply your selected object.Default texture opacity is 0 ,change parameter as you like.
The slider in panel can change texture size for looks in panel.

This extention tested win xp sp3+CS4,CS3,and test for
language setting: Japanese and en_GB. but filesystem is Japanese.
[20091021]
bug fix:Stroke color was fill color / The file name in a few space include was’t change texture.
structure change:Some function call in swf file. There function was moved to jsf file.

You need some texture? Go this site.
You can get over 100 texture for such commercial use.
These texture and site made by Daisuke Hayashi (Japanese Web Designer), So copyright is belonging to him,too.
Don’t redistribute them.

Fireworks texture gallery

Have a good time!

wonderfl_window (greasemoney script)

wonderfl_window
This Script that wonderfl blog parts put into twitter timeline when looking for links such as “wonderfl.net/code/~”.

When you scroll browser,

such as above image.

Let’s search “wonderfl.net/code” input twitter default search box or forrow with @wonderfl !
By the way, it’s support　friendfeed (beta)　

Fireworks command:copy and paste for pages, between other documents

via Hierarchical Layer Copy
this command copy top layer that include sublayer.

My command base on this command and it repeate processes per layer count.

usage
1.Download zip file, unpack, put into commands folder for Fw.
runPagePaste.zip

2.And so, add two menu into “command” menu.

• Page Copy
• Page Paste

3.Select “Page Copy”. next, go other document. Select “Page Paste” command.
(you can’t execute same page,then you can duplicate page simply.)

Attention: “Hierarchical Layer Copy” command can’t copy state, therefore, this command can’t too.
It has tested win xp cs4,but use on your own lisk.

Execute command per page for Fireworks

if you want to paste per page, such like “nombre”,or …etc.etc.

var pnum=fw.getDocumentDOM().pagesCount;
var pno=fw.getDocumentDOM().currentPageNum;//active page
for(i=0;i<pnum;i++){
fw.getDocumentDOM().changeCurrentPage(i);
//some codes
fw.getDocumentDOM().selectNone();//select none
}
fw.getDocumentDOM().changeCurrentPage(pno);//go back to active page