Flash MX 编程深层次应用-初级特效(4)
</script></div><font id="zoom"><DIV style="FONT-SIZE: 18px; COLOR: #990000; FONT-FAMILY: ; 宋体: " align=center>2.2 画面特效(2)</DIV><DIV style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 10.5pt; COLOR: black; LINE-HEIGHT: 180%" align=left><BR> <H3><SPAN lang=EN-US>2.2.3 </SPAN><SPAN style="FONT-FAMILY: 方正隶书简体">闪亮的圆环</SPAN></H3><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">在很多与画面相关的特效中，有一些与圆形有关的特效，它们的制作也有一些特定的方法。比如圆环段的制作。下面就介绍在第</SPAN><SPAN lang=EN-US>7</SPAN><SPAN style="FONT-FAMILY: 幼圆">章“傲龙”</SPAN><SPAN lang=EN-US>loading</SPAN><SPAN style="FONT-FAMILY: 幼圆">效果中的闪亮圆环效果的制作。</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 23px; Z-INDEX: 5; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 30px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><P align=center><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image013.jpg" width=23></P></SPAN><SPAN style="FONT-FAMILY: 幼圆">先按</SPAN><SPAN lang=EN-US>Ctrl+F8</SPAN><SPAN style="FONT-FAMILY: 幼圆">创建一个新的动画片断。用画圆工具</SPAN><SPAN lang=EN-US><IMG height=15 src="http://edu.chinaz.com/Files/BeyondPic/image014.jpg" width=15></SPAN><SPAN style="FONT-FAMILY: 幼圆">画一个正圆。</SPAN><P></P><P class=a1><SPAN style="MARGIN-TOP: 14px; Z-INDEX: 3; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 3px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=38 src="http://edu.chinaz.com/Files/BeyondPic/image007.jpg" width=58></SPAN><SPAN style="FONT-FAMILY: 楷体_GB2312">这个圆的边线用</SPAN><SPAN lang=EN-US>hairline</SPAN><SPAN style="FONT-FAMILY: 楷体_GB2312">方式，也就是不占用宽度，中间填充任意色均可，后面的线全用这种线型，如图</SPAN><SPAN lang=EN-US>2-11</SPAN><SPAN style="FONT-FAMILY: 楷体_GB2312">所示。</SPAN></P><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">由于在</SPAN><SPAN lang=EN-US>Flash MX</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 align=center><SPAN lang=EN-US><IMG height=147 src="http://edu.chinaz.com/Files/BeyondPic/image015.jpg" width=158></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-11</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 22px; Z-INDEX: 6; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 30px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><P align=center><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image016.jpg" width=23></P></SPAN><SPAN style="FONT-FAMILY: 幼圆">按</SPAN><SPAN lang=EN-US>Ctrl+A</SPAN><SPAN style="FONT-FAMILY: 幼圆">选中这个圆，然后</SPAN><SPAN lang=EN-US>Ctrl+X</SPAN><SPAN style="FONT-FAMILY: 幼圆">剪切它，打开右上角的显示比例，选中第一项</SPAN><SPAN lang=EN-US>Show frame</SPAN><SPAN style="FONT-FAMILY: 幼圆">，如图</SPAN><SPAN lang=EN-US>2-12</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示，这样画面就靠中心对齐了。然后按</SPAN><SPAN lang=EN-US>Ctrl+V</SPAN><SPAN style="FONT-FAMILY: 幼圆">把刚才这个圆粘贴回来，这样就将它准确地放在画面的中心位置了。</SPAN><P></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=97 src="http://edu.chinaz.com/Files/BeyondPic/image017.jpg" width=62></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-12</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="FONT-FAMILY: 幼圆">选中圆的外边框，把它复制过来，并适当缩小，然后放到圆的中心，形成一个同心圆的样子。注意两个圆的圆心要重合，如图</SPAN><SPAN lang=EN-US>2-13</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。</SPAN></P><SPAN style="Z-INDEX: 7; POSITION: relative"><P class=a2 align=center><SPAN style="LEFT: 29px; VISIBILITY: hidden; WIDTH: 0px; POSITION: absolute; TOP: -42px; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image018.jpg" width=23></SPAN></SPAN><SPAN lang=EN-US><IMG height=145 src="http://edu.chinaz.com/Files/BeyondPic/image019.jpg" width=154></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-13</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 1px; Z-INDEX: 8; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 30px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image020.jpg" width=23></SPAN><SPAN style="FONT-FAMILY: 幼圆">此时圆就切割成环形，选中心部分，删除它，然后用画线工具</SPAN><SPAN lang=EN-US><IMG height=15 src="http://edu.chinaz.com/Files/BeyondPic/image021.jpg" width=15></SPAN><SPAN style="FONT-FAMILY: 幼圆">画一条水平直线穿过圆心。结果如图</SPAN><SPAN lang=EN-US>2-14</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。</SPAN></P><P class=a1><SPAN style="MARGIN-TOP: 14px; Z-INDEX: 4; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 3px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=38 src="http://edu.chinaz.com/Files/BeyondPic/image007.jpg" width=58></SPAN><SPAN style="FONT-FAMILY: 楷体_GB2312">一定要准确地穿过圆心。为了保险起见，建议也采用上面的先剪切，后粘贴的方法来放置。</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=180 src="http://edu.chinaz.com/Files/BeyondPic/image022.jpg" width=194></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-14</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 23px; Z-INDEX: 9; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 32px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image023.jpg" width=23></SPAN><SPAN style="FONT-FAMILY: 幼圆">把外边多余的线删除，然后再画一条水平直线，通过菜单命令</SPAN><SPAN lang=EN-US>Modify->Transform->Scale and Rotation</SPAN><SPAN style="FONT-FAMILY: 幼圆">，将其旋转一定的角度，比如想分成</SPAN><SPAN lang=EN-US>10</SPAN><SPAN style="FONT-FAMILY: 幼圆">段就是</SPAN><SPAN lang=EN-US>360</SPAN><SPAN style="FONT-FAMILY: 幼圆">°</SPAN><SPAN lang=EN-US>/10=36</SPAN><SPAN style="FONT-FAMILY: 幼圆">°，如果是</SPAN><SPAN lang=EN-US>15</SPAN><SPAN style="FONT-FAMILY: 幼圆">段就是</SPAN><SPAN lang=EN-US>24</SPAN><SPAN style="FONT-FAMILY: 幼圆">°，如图</SPAN><SPAN lang=EN-US>2-15</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=95 src="http://edu.chinaz.com/Files/BeyondPic/image024.jpg" width=223></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-15</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 23px; Z-INDEX: 10; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 31px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image025.jpg" width=23></SPAN><SPAN style="FONT-FAMILY: 幼圆">再把这个直线摆放到画面的中心位置，结果如图</SPAN><SPAN lang=EN-US>2-16</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 align=center><SPAN lang=EN-US><IMG height=145 src="http://edu.chinaz.com/Files/BeyondPic/image026.jpg" width=154></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-16</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 22px; Z-INDEX: 11; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 33px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image027.jpg" width=23></SPAN><SPAN style="FONT-FAMILY: 幼圆">可以看出，这里的圆环又被切割成四个部分了。选择其中一个小部分，按</SPAN><SPAN lang=EN-US>Ctrl+X</SPAN><SPAN style="FONT-FAMILY: 幼圆">剪切它，然后再按</SPAN><SPAN lang=EN-US>Ctrl+A</SPAN><SPAN style="FONT-FAMILY: 幼圆">把其他不用的内容全部删除，最后再按</SPAN><SPAN lang=EN-US>Ctrl+Shift+V</SPAN><SPAN style="FONT-FAMILY: 幼圆">把这一小断圆弧放在与刚才一模一样的位置，以保持其与圆心点的关系。结果如图</SPAN><SPAN lang=EN-US>2-17</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=143 src="http://edu.chinaz.com/Files/BeyondPic/image028.jpg" width=153></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-17</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="FONT-FAMILY: 幼圆">有了这个特定位置的小圆弧，我们就可以让它自动围中心位置旋转了。把这个圆环引入到场景中，将之命名为</SPAN><SPAN lang=EN-US>huan</SPAN><SPAN style="FONT-FAMILY: 幼圆">，如图</SPAN><SPAN lang=EN-US>2-18</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示。</SPAN></P><SPAN style="Z-INDEX: 12; POSITION: relative"><P class=a2 align=center><SPAN style="LEFT: 31px; VISIBILITY: hidden; WIDTH: 0px; POSITION: absolute; TOP: -42px; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image029.jpg" width=23></SPAN></SPAN><SPAN lang=EN-US><IMG height=39 src="http://edu.chinaz.com/Files/BeyondPic/image030.jpg" width=110></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-18</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 22px; Z-INDEX: 13; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 31px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image031.jpg" width=23></SPAN><SPAN style="FONT-FAMILY: 幼圆">为了让它形成一个完整的圆环，要用程序复制十份出来，以便于控制效果，程序代码如下：</SPAN></P><P class=a3><SPAN lang=EN-US>for (i=1; i<=10; i++) {</SPAN></P><P class=a3><SPAN lang=EN-US> rat_beg += 36;</SPAN></P><P class=a3><SPAN lang=EN-US> duplicateMovieClip ("huan", "huan_"+i, i);</SPAN></P><P class=a3><SPAN lang=EN-US> _root["huan_"+i]._rotation = rat_beg;</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">设置它的圆心坐标</SPAN></P><P class=a3><SPAN lang=EN-US> _root["huan_"+i]._x = 150;</SPAN></P><P class=a3><SPAN lang=EN-US> _root["huan_"+i]._y = 150;</SPAN></P><P class=a3><SPAN lang=EN-US>}</SPAN></P><P class=a3><SPAN lang=EN-US>huan._visable = false;</SPAN></P><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">运行的结果如图</SPAN><SPAN lang=EN-US>2-19</SPAN><SPAN style="FONT-FAMILY: 幼圆">所示，根本看不出来是由十个圆环段组成的。</SPAN></P><P class=a2 align=center><SPAN lang=EN-US><IMG height=144 src="http://edu.chinaz.com/Files/BeyondPic/image032.jpg" width=155></SPAN></P><P class=a0 align=center><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-19</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 21px; Z-INDEX: 1; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 31px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image033.jpg" width=23></SPAN><SPAN style="FONT-FAMILY: 幼圆">选中</SPAN><SPAN lang=EN-US>huan</SPAN><SPAN style="FONT-FAMILY: 幼圆">，在</SPAN><SPAN lang=EN-US>Actions</SPAN><SPAN style="FONT-FAMILY: 幼圆">面板中输入下面代码：</SPAN></P><P class=a3><SPAN lang=EN-US>onClipEvent (enterFrame) {</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">圆环的灰色色值</SPAN></P><P class=a3><SPAN lang=EN-US> now_color = random(196)+16;</SPAN></P><P class=a3><SPAN lang=EN-US> colourobj = new Color(this);</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">设置这个环采用这种灰色</SPAN></P><P class=a3><SPAN lang=EN-US> colourobj.setRGB(now_color << 16 | now_color << 8 | now_color);</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">让圆环自动旋转</SPAN><SPAN lang=EN-US>3</SPAN><SPAN style="FONT-FAMILY: 幼圆">度</SPAN></P><P class=a3><SPAN lang=EN-US> this._rotation += 3;</SPAN></P><P class=a3><SPAN lang=EN-US>}</SPAN></P><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">这样，一个在灰色色系中随机闪动并旋转的光环便制作完成了。效果如图</SPAN><SPAN lang=EN-US>2-20</SPAN><SPAN style="FONT-FAMILY: 幼圆">和图</SPAN><SPAN lang=EN-US>2-21</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=130 src="http://edu.chinaz.com/Files/BeyondPic/image034.jpg" width=139> <IMG height=133 src="http://edu.chinaz.com/Files/BeyondPic/image035.jpg" width=142></SPAN></P><P class=a0><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-20 </SPAN><SPAN style="FONT-FAMILY: 宋体">图</SPAN><SPAN lang=EN-US>2-21</SPAN></P><P class=a8 style="MARGIN-TOP: 15.6pt"><SPAN style="MARGIN-TOP: 22px; Z-INDEX: 14; LEFT: 0px; VISIBILITY: hidden; MARGIN-LEFT: 31px; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"><IMG height=23 src="http://edu.chinaz.com/Files/BeyondPic/image036.jpg" width=23></SPAN><SPAN style="FONT-FAMILY: 幼圆">在这个特效的程序代码中，最关键的就是控制颜色的代码，上面的代码产生的是在灰色色系中闪动，下面的代码就是让环在红色色系里跳动：</SPAN></P><P class=a3><SPAN lang=EN-US>onClipEvent (enterFrame) {</SPAN></P><P class=a3><SPAN lang=EN-US> //</SPAN><SPAN style="FONT-FAMILY: 幼圆">圆环在红色色系里闪动</SPAN></P><P class=a3><SPAN lang=EN-US> now_color = random(196)+32;</SPAN></P><P class=a3><SPAN lang=EN-US> colourobj = new Color(this);</SPAN></P><P class=a3><SPAN lang=EN-US> colourobj.setRGB(now_color << 16 | 0 | 0);</SPAN></P><P class=a3><SPAN lang=EN-US> this._rotation += 3;</SPAN></P><P class=a3><SPAN lang=EN-US>}</SPAN></P><P class=MsoNormal><SPAN style="FONT-FAMILY: 幼圆">这个效果只是简单的一个环，大家可以根据自己的需要对相应的画面与程序进行调整。比如说，增加成几个同心环，加上不同方向、不同颜色、不同速度、不同透明度，如果控制适当，可以做出很不错的效果，有兴趣的朋友可以试试。</SPAN></P><BR></DIV></font>