制作自定义的 Flash 面板组件

Flash 有很多内置面板,调色面板、对齐面板、元件库面板等等。
有时为了工作方便,我们需要自己编写一些脚本加快处理一些重复性较大的工序,这里所说的“脚本”就是 JSFL。
JSFL 全称 Flash JavaScript,它类似于 Microsoft Word 中的“宏”(虽然我不太懂那东西),帮助用户在创作环境中执行重复性任务、或者生成一些特效什么的,但这并不是我们这次所说的重点。
我们今天制作的Flash面板正是调用了JSFL来处理一项重复性较大的任务:快速替换元件库中所有元件中的特定文本。

制作自定义的 Flash 面板组件_第1张图片


首先我们来看看一段 JSFL

var lib = fl.getDocumentDOM().library;

for( var i in lib )
{
	for( var j in lib[ i ])
	{ //遍历所有库元件
		if( lib[ i ][ j ].itemType == "graphic" || lib[ i ][ j ].itemType == "movie clip" )
		{ //判断,只有图形元件和影片元件里含有文本
			for( var k in lib[ i ][ j ].timeline.layers )
			{ //遍历图层
				for( var n in lib[ i ][ j ].timeline.layers[ k ].frames )
				{ //遍历所有帧
					for( var m in lib[ i ][ j ].timeline.layers[ k ].frames[ n ].elements )
					{ //遍历所有帧里的可视元素
						if( lib[ i ][ j ].timeline.layers[ k ].frames[ n ].elements[ m ] == "[object Text]" )
						{ //只有文本才执行下面的操作
							if( lib[ i ][ j ].timeline.layers[ k ].frames[ n ].elements[ m ].getTextString() == "愚蠢的熊猫" )
							{ //获取你需要操作的字符
								lib[ i ][ j ].timeline.layers[ k ].frames[ n ].elements[ m ].setTextString( "聪明的兔子" ); //替换字符
							}
						}
					}
				}
			}
		}
	}
}

这段代码的基本意思就是通过用JSFL把元件库中所有的文本取出来,然后对其内容做判断,进而替换新的内容
(只对元件库中的元件有效)。

制作 Flash 扩展组件的流程:

1. 现在我们打开Flash,在场景中加入两个输入型的文本框和一个按钮,再加入一些说明文字
制作自定义的 Flash 面板组件_第2张图片


2. 如上图所示,上面的文本框(实例名:ori_txt)我们可以输入查找的字符,
下面的文本框(实例名:new_txt)我们可以输入要替换成的字符,
最下面的按钮(实例名:btn)是用来执行JSFL的。

3. 接下来我们在AS层加入代码。首先为按钮编写侦听点击事件和执行函数:

btn.addEventListener( MouseEvent.CLICK, runScript );

function runScript( e:MouseEvent )
{
	var otxt:String = ori_txt.text; //点击按钮后读入文本框的字符
	var ntxt:String = new_txt.text; //同上
	var jsfl:String;
	MMExecute( jsfl );
}

大家可以留意到 MMExecute(); 这东西,它就是用来执行JSFL脚本的。
而我们预留了一个叫“JSFL”的字符型变量,这将被用来装载熊猫所写的JSFL脚本。

4. 特别需要留意的是我们的JSFL到了ActionScript必须变成一个字符串,所以我们得对准备好的JSFL做以下事情:
- 把特殊字符用转义字符处理好;
- 双引号变单引号;
- 把所有代码变成一行;
于是我们得到没有换行的代码:

var lib = fl.getDocumentDOM().library;for(var i in lib){for(var j in lib[i]){if(lib[i][j].itemType=='graphic'||lib[i][j].itemType=='movie clip'){for(var k in lib[i][j].timeline.layers){for(var n in lib[i][j].timeline.layers[k].frames){for(var m in lib[i][j].timeline.layers[k].frames[n].elements){if(lib[i][j].timeline.layers[k].frames[n].elements[m] == '[object Text]'){if(lib[i][j].timeline.layers[k].frames[n].elements[m].getTextString()=='愚蠢的熊猫'){lib[i][j].timeline.layers[k].frames[n].elements[m].setTextString('聪明的兔子');}}}}}}}}

5. 这个时候基本上把上面的代码代入JSFL变量就好了,但是那只能把“愚蠢的熊猫”变成“聪明的兔子”,
我们的文本框干嘛去了……
所以我们得把代码断开,断在“愚蠢的熊猫”和“聪明的兔子”处,为了好看,我们用这么几个字符型变量装载着:

var str1:String = "fl.outputPanel.clear();fl.outputPanel.trace('Start replacing text...');var lib = fl.getDocumentDOM().library;"
var str2:String = "for(var i in lib){for(var j in lib[i]){if (lib[i][j].itemType=='graphic'||lib[i][j].itemType=='movie clip'||lib[i][j].itemType=='button'){for(var k in lib[i][j].timeline.layers){for(var n in lib[i][j].timeline.layers[k].frames){for(var m in lib[i][j].timeline.layers[k].frames[n].elements){if(lib[i][j].timeline.layers[k].frames[n].elements[m]=='[object Text]'){if(lib[i][j].timeline.layers[k].frames[n].elements[m].getTextString()=='";
var str3:String = "'){lib[i][j].timeline.layers[k].frames[n].elements[m].setTextString('";
var str4:String = "');fl.outputPanel.trace('---');}}}}}}}}";
var str5:String = "fl.outputPanel.trace('All text replaced.');";

上面我加入了 fl.outputPanel.clear() 和 fl.outputPanel.trace(),它们会在输出面板清除和显示文本,用来提醒用户脚本的执行情况。

6. 通过第5步把代码断开以后,我们就在第6步把代码重新组合起来,这时可以把从文本框取得的变量包括进来了:

var jsfl:String = str1 + str2 + otxt + str3 + ntxt + str4 + str5;
MMExecute( jsfl );

7. 至此Flash部分就完成了,我们按照FlashPlayer9,AS3输出SWF,然后把这个SWF放到以下路径就完事了:
X:\Documents and Settings\UserName\Local Settings\Application Data\Adobe\Flash CS4\zh_cn\Configuration\WindowSWF
(红色部分按实际情况替换)

8. 终于大功告成了,打开Flash,在菜单“窗口 — 其他面板”下就可以找到你刚才创作的面板,欢呼吧!
制作自定义的 Flash 面板组件_第3张图片

9. 参照我之前发布的《如何发布Flash MXP扩展》来发布你的扩展组件

你可能感兴趣的:(AS3教程,Flash,Builder)