Flash MX 编程深层次应用-高级特效(1)
</script></div><font id="zoom"><DIV style="FONT-SIZE: 18pt; COLOR: #990000; FONT-FAMILY: 楷体_GB2312" align=center><B>第3章 ActionScript高级特效制作</B></DIV><BR><DIV style="FONT-SIZE: 18px; COLOR: #990000; FONT-FAMILY: ; 宋体: " align=center>3.1 堆栈特效(1)</DIV><DIV style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 10.5pt; COLOR: black; LINE-HEIGHT: 180%" align=left><BR> <P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">本节的名字叫做堆栈特效，也就是说本节要讲解的内容不但要使用数组，而且要用堆栈来控制整个特效。我们将通过两个实例，深入地讲解堆栈在</SPAN><SPAN lang=EN-US>Flash</SPAN><SPAN style="FONT-FAMILY: 幼圆">特效中的应用，程序有一定的深度，希望大家认真地学习。</SPAN></P><H3><A name=_Toc23411468><SPAN lang=EN-US>3.1.1 </SPAN></A><SPAN style="FONT-FAMILY: 方正隶书简体">递归法画方格线</SPAN></H3><P class=MsoNormal><SPAN lang=EN-US>Flash</SPAN><SPAN style="FONT-FAMILY: 幼圆">经过几年的发展现在已经具备了强大的编程功能，很多地方已经很像一个专业的编程软件，比如递归调用、堆栈的使用、队列的使用、广度遍历、深度遍历等，这些只有在专业编程软件中才出现的应用在</SPAN><SPAN lang=EN-US>Flash</SPAN><SPAN style="FONT-FAMILY: 幼圆">中已经出现。下面这段程序就是利用队列完成一个画方格的功能：</SPAN></P><P class=a3><SPAN lang=EN-US>init = function () {</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">创建一个新的文本框，同时清空它</SPAN></P><P class=a3><SPAN lang=EN-US> _root.createTextField("dongua", 1, 160, 340, 120, 20);</SPAN></P><P class=a3><SPAN lang=EN-US> dongua.text = "";</SPAN></P><P class=a3><SPAN lang=EN-US> this.clear();</SPAN></P><P class=a3><SPAN lang=EN-US> cc1 = Math.floor(Math.random()*256) << 6;</SPAN></P><P class=a3><SPAN lang=EN-US> cc2 = Math.floor(Math.random()*256) << 16;</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">这里的（</SPAN><SPAN lang=EN-US>x,y</SPAN><SPAN style="FONT-FAMILY: 幼圆">）表示要画格子的中心点坐标，</SPAN><SPAN lang=EN-US>a</SPAN><SPAN style="FONT-FAMILY: 幼圆">代表宽度</SPAN><SPAN lang=EN-US>,c1</SPAN><SPAN style="FONT-FAMILY: 楷体_GB2312">～</SPAN><SPAN lang=EN-US>c4</SPAN><SPAN style="FONT-FAMILY: 幼圆">代表</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">个颜色值</SPAN></P><P class=a3><SPAN lang=EN-US> table = new Array({x:200, y:200, a:256, c1:cc1, c2:cc2, c3:cc2*2, c4:cc1/4});</SPAN></P><P class=a3><SPAN lang=EN-US>};</SPAN></P><P class=a3><SPAN lang=EN-US>_root.init();</SPAN></P><P class=a3><SPAN lang=EN-US>_root.onEnterFrame = function() {</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">这里的</SPAN><SPAN lang=EN-US>1024</SPAN><SPAN style="FONT-FAMILY: 幼圆">代表这些线分割的小方块数目</SPAN></P><P class=a3><SPAN lang=EN-US> if (table.length<1024 && dongua.text == "") {</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">取出一个节点然后再画十字交叉线</SPAN></P><P class=a3><SPAN lang=EN-US> t = table.shift();</SPAN></P><P class=a3><SPAN lang=EN-US> cc = Math.floor((2*t.c1+3*t.c2+4*t.c3)/6);</SPAN></P><P class=a3><SPAN lang=EN-US> _root.lineStyle(2, cc, 100);</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">用两个点的宽度，</SPAN><SPAN lang=EN-US>cc</SPAN><SPAN style="FONT-FAMILY: 幼圆">的颜色值，画出两条交叉的十字架线</SPAN></P><P class=a3><SPAN lang=EN-US> _root.moveTo(t.x-t.a/2, t.y);</SPAN></P><P class=a3><SPAN lang=EN-US> _root.lineTo(t.x+t.a/2, t.y);</SPAN></P><P class=a3><SPAN lang=EN-US> _root.moveTo(t.x, t.y-t.a/2);</SPAN></P><P class=a3><SPAN lang=EN-US> _root.lineTo(t.x, t.y+t.a/2);</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">将</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">个区块入栈，这样设置颜色可以保证对角的颜色相同</SPAN></P><P class=a3><SPAN lang=EN-US> table.push({x:t.x-t.a/4, y:t.y-t.a/4, a:t.a/2, c1:t.c2, c2:t.c3, c3:t.c1, c4:cc});</SPAN></P><P class=a3><SPAN lang=EN-US> table.push({x:t.x-t.a/4, y:t.y+t.a/4, a:t.a/2, c1:t.c4, c2:t.c2, c3:t.c1, c4:cc});</SPAN></P><P class=a3><SPAN lang=EN-US> table.push({x:t.x+t.a/4, y:t.y-t.a/4, a:t.a/2, c1:t.c4, c2:t.c2, c3:t.c1, c4:cc});</SPAN></P><P class=a3><SPAN lang=EN-US> table.push({x:t.x+t.a/4, y:t.y+t.a/4, a:t.a/2, c1:t.c2, c2:t.c3, c3:t.c1, c4:cc});</SPAN></P><P class=a3><SPAN lang=EN-US> } else {</SPAN></P><P class=a3><SPAN lang=EN-US> dongua.text = "</SPAN><SPAN style="FONT-FAMILY: 幼圆">按鼠标重新开始</SPAN><SPAN lang=EN-US>";</SPAN></P><P class=a3><SPAN lang=EN-US> _root.onMouseDown = function() {</SPAN></P><P class=a3><SPAN lang=EN-US> _root.init();</SPAN></P><P class=a3><SPAN lang=EN-US> };</SPAN></P><P class=a3><SPAN lang=EN-US> }</SPAN></P><P class=a3><SPAN lang=EN-US>};</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">这段代码非常简单，却实现了非常好玩的功能。它在以（</SPAN><SPAN lang=EN-US>200</SPAN><SPAN style="FONT-FAMILY: 幼圆">，</SPAN><SPAN lang=EN-US>200</SPAN><SPAN style="FONT-FAMILY: 幼圆">）为中心的位置处递归十字交叉线，从而将一个</SPAN><SPAN lang=EN-US>256</SPAN><SPAN style="FONT-FAMILY: 幼圆">宽的区域分成了</SPAN><SPAN lang=EN-US>1024</SPAN><SPAN style="FONT-FAMILY: 幼圆">块。在这段代码中</SPAN><SPAN lang=EN-US>cc1</SPAN><SPAN style="FONT-FAMILY: 幼圆">与</SPAN><SPAN lang=EN-US>cc2</SPAN><SPAN style="FONT-FAMILY: 幼圆">分别代表一种颜色值，其中</SPAN><SPAN lang=EN-US>cc1</SPAN><SPAN style="FONT-FAMILY: 幼圆">左移</SPAN><SPAN lang=EN-US>6</SPAN><SPAN style="FONT-FAMILY: 幼圆">位就是将纯粹的蓝色变成蓝、绿相混合的颜色，而</SPAN><SPAN lang=EN-US>cc2</SPAN><SPAN style="FONT-FAMILY: 幼圆">则是将纯粹的蓝色变成了红色，然后这两个基本色值在后面再进行运算，从而生成各种随机的颜色。</SPAN><SPAN lang=EN-US>Table</SPAN><SPAN style="FONT-FAMILY: 幼圆">存放的内容虽然看上去像个一维数组，但是实际上它相当于一种结构，包含了一个新的十字架线所应该有的属性内容：</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN lang=EN-US>x</SPAN><SPAN style="FONT-FAMILY: 幼圆">：表示这个十字架中心点的</SPAN><I><SPAN lang=EN-US>x</SPAN></I><SPAN style="FONT-FAMILY: 幼圆">坐标</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN lang=EN-US>y</SPAN><SPAN style="FONT-FAMILY: 幼圆">：表示这个十字架中心点的</SPAN><I><SPAN lang=EN-US>y</SPAN></I><SPAN style="FONT-FAMILY: 幼圆">坐标</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN lang=EN-US>a</SPAN><SPAN style="FONT-FAMILY: 幼圆">：表示这个十字架的宽度</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN lang=EN-US>c1</SPAN><SPAN style="FONT-FAMILY: 幼圆">：表示十字架的第一色</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN lang=EN-US>c2</SPAN><SPAN style="FONT-FAMILY: 幼圆">：表示十字架的第二色</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN lang=EN-US>c3</SPAN><SPAN style="FONT-FAMILY: 幼圆">：表示十字架的第三色</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN lang=EN-US>c4</SPAN><SPAN style="FONT-FAMILY: 幼圆">：表示十字架的第四色</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">而这些内容就相当于一个画线的区域，有了这些属性值，就可以在这个区域内正确地画出十字架了。这些属性虽然也可以通过二维数组来完成，但是在二维数组中由于没有属性名，只有编号，故程序的可读性将大大降低。这段代码中通过</SPAN><SPAN lang=EN-US>table.shift()</SPAN><SPAN style="FONT-FAMILY: 幼圆">语句从队列的最前面取出一个最老的内容来画线，通过程序后面部分的</SPAN><SPAN lang=EN-US>push</SPAN><SPAN style="FONT-FAMILY: 幼圆">语句入栈，使它每次将</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">个等待画线的区域入栈，也就是说画</SPAN><SPAN lang=EN-US>1</SPAN><SPAN style="FONT-FAMILY: 幼圆">个存</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">个！如图</SPAN><SPAN lang=EN-US>3-1</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。</SPAN></P><SPAN lang=EN-US style="FONT-SIZE: 10.5pt; FONT-FAMILY: 'Times New Roman'"><BR style="PAGE-BREAK-BEFORE: always" clear=all></SPAN><P class=a2><SPAN lang=EN-US><IMG height=176 src="http://edu.chinaz.com/Files/BeyondPic/image001.jpg" width=182></SPAN></P><P class=a0><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>3-1</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">这里通过画一个十字架把区域分成</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">块，分别是第</SPAN><SPAN lang=EN-US>1</SPAN><SPAN style="FONT-FAMILY: 幼圆">区、第</SPAN><SPAN lang=EN-US>2</SPAN><SPAN style="FONT-FAMILY: 幼圆">区、第</SPAN><SPAN lang=EN-US>3</SPAN><SPAN style="FONT-FAMILY: 幼圆">区、第</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">区，这几个是同一层次的。而当画到第</SPAN><SPAN lang=EN-US>1</SPAN><SPAN style="FONT-FAMILY: 幼圆">区时，又把第</SPAN><SPAN lang=EN-US>1</SPAN><SPAN style="FONT-FAMILY: 幼圆">区分成</SPAN><SPAN lang=EN-US>1</SPAN><SPAN style="FONT-FAMILY: 幼圆">，</SPAN><SPAN lang=EN-US>2</SPAN><SPAN style="FONT-FAMILY: 幼圆">，</SPAN><SPAN lang=EN-US>3</SPAN><SPAN style="FONT-FAMILY: 幼圆">，</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">四个区，如此反复地画线，反复地分区，直到分区达到</SPAN><SPAN lang=EN-US>1024</SPAN><SPAN style="FONT-FAMILY: 幼圆">个才停止。在画线的颜色方面，对角位置的颜色相同，也就是</SPAN><SPAN lang=EN-US>1</SPAN><SPAN style="FONT-FAMILY: 幼圆">区与</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">区，</SPAN><SPAN lang=EN-US>2</SPAN><SPAN style="FONT-FAMILY: 幼圆">区与</SPAN><SPAN lang=EN-US>3</SPAN><SPAN style="FONT-FAMILY: 幼圆">区颜色相同。</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">这个算法就像计算机数据结构课程中讲的分层遍历算法，一般来说这种遍历算法都要有一个明确的结束条件。在上面这段程序中很明显可以看出，如果每画一个十字架就增加</SPAN><SPAN lang=EN-US>4</SPAN><SPAN style="FONT-FAMILY: 幼圆">个可画区域，则待画区域会越来越多，因此程序设定了当队列中达到</SPAN><SPAN lang=EN-US>1024</SPAN><SPAN style="FONT-FAMILY: 幼圆">个待画区域时程序终止。如果程序不设这个终止点，就会死循环直至软件出错退出为止！</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">最终的运行结果如图</SPAN><SPAN lang=EN-US>3-2</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=223 src="http://edu.chinaz.com/Files/BeyondPic/image002.jpg" width=215></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>3-2</SPAN></P><BR></DIV></font>