Flash MX 编程深层次应用-高级特效(2)
</script></div><font id="zoom"><DIV style="FONT-SIZE: 18px; COLOR: #990000; FONT-FAMILY: ; 宋体: " align=center>3.1 堆栈特效(2)</DIV><DIV style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 10.5pt; COLOR: black; LINE-HEIGHT: 180%" align=left><BR> <H3><A name=_Toc23411469><SPAN lang=EN-US>3.1.2 </SPAN></A><SPAN style="FONT-FAMILY: 方正隶书简体">七彩色块</SPAN></H3><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">通过对上面特效的学习与讲解，读者可能会觉得它仅仅是一个编程技巧，在实际使用过程中根本用不到这种线的效果。那么，先看图</SPAN><SPAN lang=EN-US>3-3</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示的效果图片吧。</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=207 src="http://edu.chinaz.com/Files/BeyondPic/image003.jpg" width=193></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>3-3</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">这个效果酷不酷？想想这种效果如果用手工来制作会不会累死人？那么这样的花色效果是如何制作出来的呢？其实也跟上面的原理相似</SPAN><SPAN lang=EN-US>——</SPAN><SPAN style="FONT-FAMILY: 幼圆">堆栈加遍历，程序代码如下：</SPAN></P><P class=a3><SPAN lang=EN-US>makeClip = function (clipParent, clip_num, high, place) {</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">创建一个空的动画片断，同时继承了这个动画片断的大小与位置</SPAN></P><P class=a3><SPAN lang=EN-US> son=clipParent.createEmptyMovieClip("s_"+clipParent.depth+"_"+clip_num,clip_num);</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">由于它是子节点位置，所以层数要加</SPAN><SPAN lang=EN-US>1</SPAN></P><P class=a3><SPAN lang=EN-US> son.depth = clipParent.depth+1;</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">子入栈</SPAN></P><P class=a3><SPAN lang=EN-US> _root.arr.push(son);</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">用随机色进行填充，透明度为</SPAN><SPAN lang=EN-US>40</SPAN></P><P class=a3><SPAN lang=EN-US> son.beginFill(Math.random()*0xFFFFFF, 40);</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">先画一个正方形</SPAN></P><P class=a3><SPAN lang=EN-US> son.lineTo(100, 0);</SPAN></P><P class=a3><SPAN lang=EN-US> son.lineTo(100, 100);</SPAN></P><P class=a3><SPAN lang=EN-US> son.lineTo(0, 100);</SPAN></P><P class=a3><SPAN lang=EN-US> son.endFill();</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">设置其摆放位置，</SPAN><SPAN lang=EN-US>high</SPAN><SPAN style="FONT-FAMILY: 幼圆">与</SPAN><SPAN lang=EN-US>place</SPAN><SPAN style="FONT-FAMILY: 幼圆">的取值只有</SPAN><SPAN lang=EN-US>0</SPAN><SPAN style="FONT-FAMILY: 幼圆">与</SPAN><SPAN lang=EN-US>1</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">这里用来控制色块左右分半还是上下分半的变量是</SPAN><SPAN lang=EN-US>high</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">当完成把一个块切成两半的任务之后，用来控制位置色块位置的变量是</SPAN><SPAN lang=EN-US>place</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">经过这两项设置，色块就按随机方式摆放成上下两半，或者是左右两半</SPAN></P><P class=a3><SPAN lang=EN-US> (high) ? (son._y=place*50) : (son._x=place*50);</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">通过设置其长与宽的比例</SPAN></P><P class=a3><SPAN lang=EN-US> // high=1</SPAN><SPAN style="FONT-FAMILY: 幼圆">时表示是上下对半分，</SPAN><SPAN lang=EN-US>high=0</SPAN><SPAN style="FONT-FAMILY: 幼圆">时表示是左右对半分</SPAN></P><P class=a3><SPAN lang=EN-US> son._xscale = 150-(son._yscale=(high) ? (50) : (100));</SPAN></P><P class=a3><SPAN lang=EN-US>};</SPAN></P><P class=a3><SPAN lang=EN-US>makeNew = function () {</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">从数组中随机取一个位置来计算</SPAN></P><P class=a3><SPAN lang=EN-US> p = arr[a=Math.floor(Math.random()*(len=arr.length))];</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">删除该数值</SPAN></P><P class=a3><SPAN lang=EN-US> arr.splice(a, 1);</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">最多只允许</SPAN><SPAN lang=EN-US>8</SPAN><SPAN style="FONT-FAMILY: 幼圆">层</SPAN></P><P class=a3><SPAN lang=EN-US> if (p.depth<8) {</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">产生随机的是与非的值，用于控制色块是横切还是纵切</SPAN></P><P class=a3><SPAN lang=EN-US> _root.hv = Math.round(Math.random());</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">产生随机的是与非的值，用来控制两个不同块的摆放</SPAN></P><P class=a3><SPAN lang=EN-US> _root.lr = Math.round(Math.random());</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">创建第一半</SPAN></P><P class=a3><SPAN lang=EN-US> makeClip(p, 1, _root.hv, _root.lr);</SPAN></P><P class=a3><SPAN lang=EN-US> // </SPAN><SPAN style="FONT-FAMILY: 幼圆">创建另一半</SPAN></P><P class=a3><SPAN lang=EN-US> makeClip(p, 2, _root.hv, !_root.lr);</SPAN></P><P class=a3><SPAN lang=EN-US> }</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">如果子类全部产生完毕则结束</SPAN></P><P class=a3><SPAN lang=EN-US> if (!len) {</SPAN></P><P class=a3><SPAN lang=EN-US> clearInterval(intID);</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>this.onMouseDown = function() {</SPAN></P><P class=a3><SPAN lang=EN-US> arr = [c=_root.createEmptyMovieClip("clip", 1)];</SPAN></P><P class=a3><SPAN lang=EN-US> c._xscale = c._yscale=400;</SPAN></P><P class=a3><SPAN lang=EN-US> intID = setInterval(makeNew, 1);</SPAN></P><P class=a3><SPAN lang=EN-US>};</SPAN></P><P class=MsoNormal style="TEXT-INDENT: 22.7pt"><SPAN style="FONT-FAMILY: 幼圆">这个特效的代码要讲解起来非常难，因为它是一个纯粹的程序，用到的知识点也比较多。</SPAN></P><H5><SPAN style="FONT-FAMILY: 黑体">程序代码连写</SPAN></H5><P class=MsoNormal><SPAN lang=EN-US>Flash</SPAN><SPAN style="FONT-FAMILY: 幼圆">程序代码可以写在一行里，甚至在一个表达式里可以包含其他的表达式。比如上面的</SPAN><SPAN lang=EN-US>p = arr[a=Math.floor(Math.random()*(len=arr.length))]</SPAN><SPAN style="FONT-FAMILY: 幼圆">语句其实就包括了三个表达式：</SPAN></P><P class=a3><SPAN lang=EN-US>len=arr.length;</SPAN></P><P class=a3><SPAN lang=EN-US>a=Math.floor(Math.random()*len;</SPAN></P><P class=a3><SPAN lang=EN-US>p = arr[a];</SPAN></P><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">当然了，这样写的目的仅仅是为了说明</SPAN><SPAN lang=EN-US>Flash</SPAN><SPAN style="FONT-FAMILY: 幼圆">的代码可以这样写，当别人这样写的时候也可以看得懂，但是建议大家自己的程序还是不要这样写！笔者认为连写表达式最合理的就是</SPAN><SPAN lang=EN-US>c._xscale = c._yscale=400</SPAN><SPAN style="FONT-FAMILY: 幼圆">这一句，它可以简化程序代码，并且让程序思路更加清楚。</SPAN></P><H5><SPAN style="FONT-FAMILY: 黑体">产生随机色</SPAN></H5><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">在上一章“闪亮的光环”特效中有一个产生随机灰色的语句，如果按那种产生随机色的思路来创建随机色，代码就比较复杂：</SPAN></P><P class=a3><SPAN lang=EN-US>red_color = random(256);</SPAN></P><P class=a3><SPAN lang=EN-US>green_color = random(256);</SPAN></P><P class=a3><SPAN lang=EN-US>blue_color = random(256);</SPAN></P><P class=a3><SPAN lang=EN-US>colourobj = new Color(this);</SPAN></P><P class=a3><SPAN lang=EN-US>colourobj.setRGB(red_color << 16 | green_color<<8 | blue_color);</SPAN></P><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">但是在这里用一个非常简单的表达式就可以搞定：</SPAN></P><P class=a3><SPAN lang=EN-US>Math.random()*0xFFFFFF</SPAN></P><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">这种方式简单易懂，比上一个“画方格”的方法更简单，建议大家在以后要产生真正意义上的随机色时用这种办法。</SPAN></P><H5><SPAN style="FONT-FAMILY: 黑体">遍历的结束控制</SPAN></H5><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">在前面讲到的“用队列画方格”特效中结束控制是用堆栈的长度来控制，这在很多复杂的遍历中是难以计算的，甚至是无法计算的。而本特效结束标志是用</SPAN><SPAN lang=EN-US>depth</SPAN><SPAN style="FONT-FAMILY: 幼圆">深度来控制，这就方便与简单得多了，程序也易于理解，它惟一要做的就是每次入栈时要把它的深度值也一同入栈。在这里，因为已经把这个值与相应的动画片断封装，所以处理起来非常方便。</SPAN></P><H5><SPAN style="FONT-FAMILY: 黑体">定时器控制</SPAN></H5><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">在本书的精华集</SPAN><SPAN lang=EN-US>1</SPAN><SPAN style="FONT-FAMILY: 幼圆">中讲到了定时器的使用。在本特效中通过定时器来控制色块的生成，从而产生出一种“逐渐细化”的过程，当然了，最后在全部细化完成时没有忘记清除定时器。虽然这种“逐渐细化”效果也可以用</SPAN><SPAN lang=EN-US>onEnterframe</SPAN><SPAN style="FONT-FAMILY: 幼圆">方式来实现，而且产生的结果一样，但是当最后细化结束时，要清除</SPAN><SPAN lang=EN-US>onEnterframe</SPAN><SPAN style="FONT-FAMILY: 幼圆">事件函数的运行就相对麻烦一些，如果不清除这个事件函数的运行，则对动画的其他程序的运行效率就会产生一定的影响。</SPAN></P><H5><SPAN style="FONT-FAMILY: 黑体">效果对比</SPAN></H5><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">最后，为了便于大家理解这段代码，把</SPAN><SPAN lang=EN-US>if (p.depth<8) …</SPAN><SPAN style="FONT-FAMILY: 幼圆">一句改成</SPAN><SPAN lang=EN-US>if (p.depth<3)</SPAN><SPAN style="FONT-FAMILY: 幼圆">，它的效果如图</SPAN><SPAN lang=EN-US>3-4</SPAN><SPAN style="FONT-FAMILY: 楷体_GB2312">～</SPAN><SPAN style="FONT-FAMILY: 幼圆">图</SPAN><SPAN lang=EN-US>3-7</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。看了这些三层深度遍历的效果，再与前面的效果相对比，应该可以理解整段程序的算法与构思了。</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=202 src="http://edu.chinaz.com/Files/BeyondPic/image004.jpg" width=185> <IMG height=201 src="http://edu.chinaz.com/Files/BeyondPic/image005.jpg" width=184></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>3-4 </SPAN><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>3-5</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=201 src="http://edu.chinaz.com/Files/BeyondPic/image006.jpg" width=184> <IMG height=201 src="http://edu.chinaz.com/Files/BeyondPic/image007.jpg" width=184></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>3-6 </SPAN><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>3-7</SPAN></P><BR></DIV></font>