├── sample
    ├── layers.png
    ├── sample.ai
    ├── overlay.png
    └── export
    │   ├── acme-home.png
    │   ├── acme-product.png
    │   ├── acme-home-popup-(~).png
    │   ├── acme-product-big-(~).png
    │   └── acme-home-hovering-(~).png
├── README.md
└── AiLayersExport.jsx


/sample/layers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/layers.png


--------------------------------------------------------------------------------
/sample/sample.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/sample.ai


--------------------------------------------------------------------------------
/sample/overlay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/overlay.png


--------------------------------------------------------------------------------
/sample/export/acme-home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/export/acme-home.png


--------------------------------------------------------------------------------
/sample/export/acme-product.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/export/acme-product.png


--------------------------------------------------------------------------------
/sample/export/acme-home-popup-(~).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/export/acme-home-popup-(~).png


--------------------------------------------------------------------------------
/sample/export/acme-product-big-(~).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/export/acme-product-big-(~).png


--------------------------------------------------------------------------------
/sample/export/acme-home-hovering-(~).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cri5ti/ai-layers-export/HEAD/sample/export/acme-home-hovering-(~).png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # What is it
 2 | 
 3 | This script is based on Jon Hicks original [SaveLayersAsPNG][SaveLayersAsPNG] script
 4 | which exports the top layers one by one.
 5 | 
 6 | When you're working on some big UI designs, you usually have lots of layers and sublayers, things that have to always stay visible, or some more complex scenarios.
 7 | This script will export layers recursively based on some flags at the end of the layer name.
 8 | 
 9 | # Layer flags
10 | 
11 | You can add a special flag at the end of a layer to control it's rendering:
12 | 
13 | * **`(+)` - always visible** - good for backgrounds, headers and footers, ...
14 | 	
15 | * **`(-)` - ignore layer**
16 | 
17 | * **`(~)` - popup layer** - useful for overlays and popups, the script will export once with the layer hidden, and once visible.
18 | 
19 | * *no flag* - 
20 | 
21 | # Example
22 | 
23 | ![](https://github.com/cri5ti/ai-layers-export/raw/master/sample/overlay.png)
24 | 
25 | ![](https://github.com/cri5ti/ai-layers-export/raw/master/sample/layers.png)
26 | 
27 | ## Exported files:
28 | 
29 | 	acme-home-hovering-(~).png
30 | 	acme-home-popup-(~).png
31 | 	acme-home.png
32 | 	acme-product-big-(~).png
33 | 	acme-product.png
34 | 
35 | ![](https://github.com/cri5ti/ai-layers-export/raw/master/sample/export/acme-home-hovering-\(~\).png)
36 | ![](https://github.com/cri5ti/ai-layers-export/raw/master/sample/export/acme-home-popup-\(~\).png)
37 | ![](https://github.com/cri5ti/ai-layers-export/raw/master/sample/export/acme-home.png)
38 | ![](https://github.com/cri5ti/ai-layers-export/raw/master/sample/export/acme-product-big-\(~\).png)
39 | ![](https://github.com/cri5ti/ai-layers-export/raw/master/sample/export/acme-product.png)
40 | 
41 | [SaveLayersAsPNG]: http://www.hicksdesign.co.uk/journal/illustrator-exporting-layers-to-png


--------------------------------------------------------------------------------
/AiLayersExport.jsx:
--------------------------------------------------------------------------------
1 | 
$.writeln("==================");  
$.writeln("Begin... ");   

var folder = Folder.selectDialog();

var options = new ExportOptionsPNG24();
	options.horizontalScale = 100;
	options.verticalScale = 100;
	options.antiAliasing = true;
	options.transparency = true;
	options.artBoardClipping = true;

var document = app.activeDocument;

if(document && folder)
	parseLayer(document, "", 1);

function parseLayer(layer, base, depth) {
	
	var slides = [];
	var popups = [];
	
	var takeShots = true;
	
	log(depth, "parsing " + layer.name);
	
	for(var i=0; i<layer.layers.length; i++)
	{
		var l = layer.layers[i];
		var name = l.name;
		
		var subLayer = true;
		
		if (name.indexOf("(+)")!=-1) {
			l.visible = true;
			subLayer = false;
			log(depth+1, name + " : always on");
		} 
		else 
		if (name.indexOf("(-)")!=-1) {
			l.visible = false;
			subLayer = false;
			log(depth+1, name + " : always off");
		}
		else
		if (name.indexOf("(~)")!=-1) {
			l.visible = false;
			subLayer = false;
			popups.push(l);
		}
		else
		{
			slides.push(l);
		}
	}

	log(depth, "slides = " + slides);

	// hide all popups
	for(var i = 0; i<popups.length; i++)
		popups[i].visible = false;

	for(var i = 0; i<slides.length; i++) {
		var l = slides[i];
		
		// show current slide, hide all the others
		for(var j = 0; j<slides.length; j++) {
			slides[j].visible = i==j;
			
			log(depth, "setting " + slides[j].name + " visibility = " + (i==j));
		}

		parseLayer(l, base+ (base=="" ? "" : "-") +l.name, depth+1);
		
		takeShots = false;
	}

	// hide all slides
	for(var i = 0; i<slides.length; i++)
		slides[i].visible = false;
	
	// capture popups
	for(var i=0; i<popups.length; i++) {
		var l = popups[i];
		l.visible = true;
		var fname = base + "-" + l.name + ".png";
		var file = new File(folder.fsName+"/"+fname);
		log(depth, " capture <"+fname + ">");
		document.exportFile(file, ExportType.PNG24, options);
		l.visible = false;
	}

	if (takeShots) {
		var fname = base + ".png";
		var file = new File(folder.fsName+"/"+fname);
	
		log(depth, " capture <"+fname + ">");
		document.exportFile(file, ExportType.PNG24, options);
	}
}

function log(depth, t) {
	for(var j=0; j<depth; j++)
			$.write("----");
	$.writeln(t);
}


--------------------------------------------------------------------------------