用JSFL将Flash中的元件导出为PNG

这两天在鼓捣JSFL,为的是将已有的展示汉字笔顺的Flash项目移植到其他平台上实现,最近一个打算就是在Android平台上实现,以及更远的用HTML+JS实现,此为后话。

1. 需求

目前所遇到的问题就是:如何将已有的汉字笔顺信息丝毫不差地导出来,主要是每一笔的图片与图片的横纵坐标。当前Flash舞台效果如下:

用JSFL将Flash中的元件导出为PNG_第1张图片

可以看到,早期在该笔画项目中,每一个笔画制作成为了button,每一笔都是具有不同实例名称的button,根据书写顺序的不同,已经命好了名,s1,s2,s3....这些信息加上每一笔的XY位置,都是人工重复劳动做好了的,不可能再对那么多个汉字做一遍。所以必须找到一个办法,将每一个汉字的笔划的形状保存为图片,将书写的笔顺、每一笔的位置信息跟图片同时保存起来。

2. 写代码前的思考

在网上找到一些将库元件保存为PNG图片的例子,但是如果照着他们的做的话,已有的书写顺序与笔划的位置信息将得不到保存。直接从舞台上选择元件可以得到元件的位置与实例名称等信息,但JSFL又不能直接将某一个选中的元件进行导出操作。于是只能将这两种方法结合起来了:先将舞台上的笔划元件都选中,将其在库中元件名(Element.libraryItem.name)作为库中选择元件的依据。由于库中元件也没有直接导出PNG的方法,于是只有再走迂回策略:将其放置到一个新的文件中,保证新的文件在只有这一个元件的情况下,对整个文件进行导出PNG操作。要这样做,就必须先将这个元件加入舞台library.addItemToDocument,进而剪切、新建一文档、粘贴进新文档等操作,当然还必须根据元件的尺寸调整新文件的大小,量体裁衣。

3. 上代码

//
var folderURI=fl.browseForFolderURL("选择fla文件的位置:");
var fileMask="*.fla";
var folderContents=FLfile.listFolder(folderURI + "/" + fileMask,"files");
if (folderContents) {
for (var i=0; i != folderContents.length; ++i) {
var thisFile=folderURI + "/" + folderContents[i];
var thisFolder=folderURI + "/" + folderContents[i].substr(0,folderContents[i].lastIndexOf(".fla")) + "/";
if (fl.openDocument(thisFile)) {
if (FLfile.createFolder(thisFolder)) {
//alert(thisFolder);
var doc=fl.getDocumentDOM();
doc.selectAll();
var theElems=doc.selection;
for (var c=0; c < theElems.length; c++) {
if (theElems[c].elementType == "instance" && theElems[c].libraryItem.itemType == "button") {
//alert("{"
//+"\"name\": \""+theElems[c].name+"\", "
//+"\"libraryItem_name\": \""+ theElems[c].libraryItem.name+"\", "
//+"\"libraryItem_itemType\": \""+ theElems[c].libraryItem.itemType+"\", "
//+"\"left\": "+theElems[c].left+", "
//+"\"top\": "+theElems[c].top+", "
//+"\"width\": "+theElems[c].width+", "
//+"\"height\": "+theElems[c].height
//+"}");
doc.library.selectItem(theElems[c].libraryItem.name);
doc.library.addItemToDocument({x:0,y:0});

doc.clipCut();
exportdoc=fl.createDocument();
exportdoc.clipPaste();
exportdoc.selectAll();
exportdoc.width=Math.floor(theElems[c].width);
exportdoc.height=Math.floor(theElems[c].height);
exportdoc.moveSelectionBy({x:- exportdoc.selection[0].left,y:- exportdoc.selection[0].top});

exportdoc.selectNone();

var pngName=thisFolder + theElems[c].name + "_" + theElems[c].left + "_" + theElems[c].top + ".png";
exportdoc.exportPNG(pngName,true,true);
exportdoc.close(false);
//alert('保存成功:' + pngName);
}
}

doc.close(false);
} else {
alert(thisFolder + "已经存在。");
}
}

}
}

4. 运行效果展示

运行前:待处理的源文件

用JSFL将Flash中的元件导出为PNG_第2张图片

运行后:生成包含所需信息的图片

用JSFL将Flash中的元件导出为PNG_第3张图片

用JSFL将Flash中的元件导出为PNG_第4张图片

本文来自pinocchioatbeijing(专注前端技术 追求至美生活 以文会友)在博客园的博客,文章URL:http://www.cnblogs.com/pinocchioatbeijing/archive/2012/03/12/2392234.html,转载请注明,并欢迎大家不吝赐教。

你可能感兴趣的:(Flash)