lesson3-12.htm

FLASH程序实例

  <tr>
    <td bgColor="#0036b2"><SPACER height="1" type="block"></td>
  </tr>
</TBODY>
</table>
<table width="684" border="0" cellspacing="20" class="p2" height="144" mm_noconvert="TRUE">
  <tr> 
    <td class="head" colspan="9">第三章　FLASH特效与实例</td>
  </tr>
  <tr> 
    <td class="subhead" colspan="9">第十二节　螺旋效果</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="150" height="143">
        <param name=movie value="../imageforflash3/lesson3-12-1.swf">
        <param name=quality value=high>
        <embed src="../imageforflash3/lesson3-12-1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="150" height="143">
        </embed> 
      </object></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>这是一个来自<span class="yellow">Flash Planet</span>的例子，是完全通过<span class="yellow">Actions</span>来实现的。对于熟悉<span class="yellow">Actions</span>的人来说，做这样一个效果简直易如反掌。不过相信还有许多朋友对<span class="yellow">Actions</span>还是似懂非懂的，有时候甚至觉得很高深，所以这一节开始，我们将有意识地接触一些用简单的<span class="yellow">Actions</span>实现的效果，大家先建立一个基本的概念，为我们下一章深入全面地探讨<span class="yellow">Actions</span>打下好的基础。</p>
      <p>新建一个文件，设置背景色为黑色。</p>
      <p>按<span class="yellow">Ctrl-F8</span>新建一个图形类图符<span class="yellow">line</span>。选择椭圆工具，在参数修改器中取消边线，并把填充色设置为黑蓝黑线性渐进色<img src="../imageforflash3/3-12-1step4.gif" width="24" height="23">，也就是把渐进色定义条设为右图所示：<img src="../imageforflash3/3-12-1step3.gif" width="121" height="36">，在编辑区拉出一个扁扁的椭圆来。选择箭头工具，在不选中椭圆的情况下，把鼠标移到椭圆的最右端，当鼠标右下方出现弧线时，点住并拖动鼠标把椭圆拉成如下图所示的样子。以下的两个图所示为同一对象，因为左图不能很好地反映其形状，所以同时给出右图。注意，一定要把这个椭圆移到下图所示的位置上，也就是让它的左端刚好位于十字定位符上，这是因为我们一会儿要对它做放缩变形，并希望其左端固定不动。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step2.gif" width="220" height="80">　　　　　　<img src="../imageforflash3/3-12-1step1.gif" width="223" height="80"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">再次按下<span class="yellow">Ctrl-F8</span>新建一个电影片断类图符<span class="yellow">linemovie</span>。 
      按<span class="yellow">Ctrl-L</span>打开图库窗口，把<span class="yellow">line</span>拖出来放在编辑区中，请再次注意所放的位置：要求它自身的十字定位符正好与编辑区的十字定位符重合，如下图左所示。这是因为我们需要对这个图符实例做旋转，并希望其左端为其旋转中心点。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step5.gif" width="86" height="45">　　　　　<img src="../imageforflash3/3-12-1step6.gif" width="457" height="45"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">在第120帧按下<span class="yellow">F6</span>插入关键帧， 
      把该实例向右拉伸至上图右所示大小。双击该实例，设置它的颜色参数如下图所示：，就可得到上图右所示颜色效果。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step7.gif" width="333" height="193"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>现在设置第1帧的属性为运动渐变，这样我们就把这个图符做好了。</p>
      <p>回到主场景。从图库中把这个电影片断类图符<span class="yellow">linemovie</span>拖出来放在中间，如果太大就把它缩小一些。双击它，在<span class="yellow">Definition</span>（定义）标签下把它的实例名称设成<span class="yellow">line</span>，如下图所示。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step8.gif" width="240" height="60"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">在第2帧按<span class="yellow">F6</span>插入关键帧。双击第2帧设置<span class="yellow">Actions</span>。大家先跟我一步一步往下做，最后我们再来分析一下这样编写<span class="yellow">Actions</span>的目的。点<img src="../imageforflash2/plus.gif" width="24" height="23">，选<span class="yellow">Set 
      Variable</span>，把参数设置为下图所示。<span class="yellow">Set Variable</span>用来设置变量，学过编程的朋友可以很容易理解。变量名可以是任意以字母开头的字符串，这里我们用<span class="yellow">n</span>更有意义一些。注意，因为我们需要把<span class="yellow">n+3</span>的值赋给<span class="yellow">n</span>，所以在下图所示<span class="yellow">Value</span>一项中右边的符号应为<img src="../imageforflash3/equal.gif" width="25" height="23">而不是<img src="../imageforflash3/expression.gif" width="25" height="23">。<img src="../imageforflash3/equal.gif" width="25" height="23">表示表达式，<img src="../imageforflash3/expression.gif" width="25" height="23">表示字符串。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step9.gif" width="250" height="190"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">下面再来设置条件判断语句。再点<img src="../imageforflash2/plus.gif" width="24" height="23">，选<span class="yellow">If</span>。并在右边的<span class="yellow">Condition</span>（条件）栏中输入<span class="unnamed1"><span class="yellow">n&lt;360</span>。</span></td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step10.gif" width="248" height="136"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">点<img src="../imageforflash2/plus.gif" width="23" height="23">，选<span class="yellow">Duplicate/Remove 
      Movie Clip</span>（复制/删除电影片断），把右边的参数设置成下图所示。其中<span class="yellow">target</span>为待复制的对象，这里我们用刚做好并命名的电影片断<span class="yellow">line</span>。 
      它前面的“<span class="yellow">/</span>”表示它的位置位于当前层的根部，而没有 “<span class="yellow">/</span>” 
      的目标则对应于当前电影片断。 <span class="yellow">New Name</span>为复制后新生成的电影片断名，这里用<span class="yellow">&quot;line&quot;&amp;n</span>。<span class="yellow">&amp;</span>为连结符，这时复制后的新电影片断名将随着<span class="yellow">n</span>的不同而不同，比如<span class="yellow">n=1</span>时，新电影片断名为<span class="yellow">line1</span>，<span class="yellow">n=4</span>时，新名为<span class="yellow">line4</span>等等。在<span class="yellow">New 
      Name</span>中，只需要名字，不需要路径。<span class="yellow">Depth</span>（深度）确定创建的实例与其他对象重叠时的层次。整条语句的作用是把电影片断<span class="yellow">line</span>复制并重新命名为<span class="yellow">&quot;line&quot;&amp;n</span>。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step11.gif" width="250" height="277"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="80"> 
      <p>再点<img src="../imageforflash2/plus.gif" width="23" height="23">，选<span class="yellow">Set 
        Property</span>（设置电影片断的属性）。这是<span class="yellow">Actions</span>中用到的最频繁也最重要的语句之一。我们来设置新复制的电影片断的旋转属性。 
        在<span class="yellow">Set</span>下拉框中选<span class="yellow">Rotation</span>（旋转），<span class="yellow">Target</span>为要设置属性的电影片断，填上<span class="yellow">&quot;/line&quot;&amp;n</span>。<span class="yellow">Value</span>用来指定改变后的属性值。其中<span class="yellow">GetProperty</span>用来获取指定对象的相关属性，在这里我们将得到电影片断<span class="yellow">line</span>的旋转角度值，以度为单位。这样设置的作用是把新复制出来的电影片断<span class="yellow">&quot;line&quot;&amp;n</span>做一个旋转，其旋转角为电影片断<span class="yellow">line</span>旋转角度加上<span class="yellow">n</span>的值。 
      </p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step12.gif" width="249" height="204"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">最后，按<img src="../imageforflash2/plus.gif" width="23" height="23">选<span class="yellow">Go 
      to</span>。并在右下方的<span class="yellow">Control</span>复选框中打上对勾。这条语句的作用是跳转到第1帧并继续播放。 
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-12-1step13.gif" width="191" height="29"></td>
  </tr>
  <tr> 
    <td colspan="9"> <span class="unnamed1">下面是做好的<span class="yellow">Actions</span>语句： 
      </span> 
      <p class="middle">　　　Set Variable: &quot;n&quot; = n+3<br>
        　　　If (n&lt;360)<br>
        　　　　Duplicate Movie Clip(&quot;/line&quot;,&quot;line&quot;&amp;n,n)<br>
        　　　　Set Property(&quot;/line&quot;&amp;n, Rotation) = GetProperty(&quot;/line&quot;,_rotation)+n<br>
        　　　　Go to and Play(1)<br>
        　　　End If</p>
      <p class="unnamed1">根据以上我们对每一条语句的解释，大家不难理解这段小程序的设计思路。我在这里只简单说一下，执行这个<span class="yellow">Actions</span>的结果是按顺序生成包括原来的电影片断在内的一共120个电影片断，且每一个电影片断均在前一个的基础上顺时针旋转了3度。因为电影片断在复制生成的过程中自身也在播放中，所以我们就看到了上面的效果。这里要注意的是，在制作<span class="yellow">linemovie</span>电影片断类图符时，我们用到了120帧，这个数字与<span class="yellow">Actions</span>中的第1句密切相关，它是由360/3得到的，如果第1句改写为<span class="yellow">Set 
        Variable: &quot;n&quot; = n+4</span>，则在编辑<span class="yellow">linemovie</span>时，用到90帧（360/4）就行了，否则会得到不好的效果，不信大家可以试试看就知道为什么了。</p>
      <p class="unnamed1">这一节中，我们对<span class="yellow">Actions</span>的具体设置谈得比较细，这是为了照顾那些对<span class="yellow">Actions</span>还比较陌生的朋友，相信大家现在多少已经有所认识了。更多更详细的<span class="yellow">Actions</span>的用法，我们将在下一章中重点介绍。<a href="../imageforflash3/lesson3-12-1.fla">这里</a>是这个示例的源文件。</p>
    </td>
  </tr>
</table>
</body>
</html>