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

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

1. 需求

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

可以看到，早期在该笔画项目中，每一个笔画制作成为了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. 运行效果展示

运行前：待处理的源文件

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

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