lesson3-8.htm

FLASH程序实例

  </tr>
</TBODY>
</table>

<table border="0" cellPadding="0" cellSpacing="0" width="750">
<TBODY>
  <tr>
    <td bgColor="#0036b2"><SPACER height="1" type="block"></td>
  </tr>
</TBODY>
</table>
<table width="678" 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" height="11"><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="620" height="200">
        <param name=movie value="../imageforflash3/lesson3-8-1.swf">
        <param name=quality value=high>
        <embed src="../imageforflash3/lesson3-8-1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="620" height="200">
        </embed> 
      </object></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="11"> 
      <p>这一节我们来做一个光线效果。这个效果并没有用到什么新的技术，而且从技术角度讲是比较简单的。下面我们就一起来学习这个示例的制作方法。</p>
      <p>新建一个文件，设置背景为黑色。</p>
      <p>用文字工具选<span class="yellow">Copperplate Gothic</span>字体48号白色斜体字写上要做成光线效果的文字，我在这里用“<span class="yellow">FLASHTIMES</span>”。注意每次只写一个字母。如下图所示，但不一定要排这么整齐。 
        分别点击每一个字母，按<span class="yellow">F8</span>转换为图形类图符，并分别按所对应的字母命名。 </p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="11"><img src="../imageforflash3/3-8-1step1.gif" width="404" height="69"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="11">现在我们就做好了十个图符。按<span class="yellow">Ctrl-L</span>打开图库窗口，把主场景中除“<span class="yellow">F</span>”以外的所有字母都删除。选中字母“<span class="yellow">F</span>”，按两次<span class="yellow">Ctrl-B</span>把它打散。 
      用线条工具选白色从F的右上角起不间断地拉出如下面左图所示的边线。（所谓不间断是指在画线的过程中，在线条转折（顶点）处松开鼠标并在不移动鼠标的情况下再次按下画线。 
      ） 选颜料桶工具用黑色线性渐进色给这个封闭区域填充。（注意，如果所画线条没有很好地和字母接触，即使在参数修改区中选择了封闭区域，也有可能无法填充，这时可以通过放大画面，并用鼠标拖动未封闭的线条末端使其与字母接触的方法来解决。）</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="11"><img src="../imageforflash3/3-8-1step2.gif" width="180" height="102"> 
      　　　　　　　　 <img src="../imageforflash3/3-8-1step3.gif" width="175" height="100"> 
    </td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="11">因为我们希望光线从左到右渐强，所以还要对填充色的方向做一个调整。按下<img src="../imageforflash/transformfill.gif" width="25" height="23">，并把颜色方向修改至下图左所示。再选择箭头工具，双击白色的轮廓线，再按<span class="yellow">Delete</span>键把它们删除。现在我们就得到了如下右图所示的拖着光影的字母“<span class="yellow">F</span>”。拉出一个大框选择全部对象，按<span class="yellow">F8</span>转换成图符，起名为<span class="yellow">F 
      light</span>。 </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="11"><img src="../imageforflash3/3-8-1step4.gif" width="179" height="102">　　　　　　　　　<img src="../imageforflash3/3-8-1step5.gif" width="180" height="105"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="11">把其它九个字母也分别依次做成如上所示拖着光影的效果。因为一共有十个字母，所以前五个字母的光影都在左边，而且由狭长逐渐变宽短；后五个字母的光影都在右边，依次由宽短变狭长。做好后的字母分别如下图所示。注意到有两个字母“<span class="yellow">S</span>”，所以分别取名为<span class="yellow">S1 
      light</span>和<span class="yellow">S2 light</span>。</td>
  </tr>
  <tr> 
    <td colspan="9" height="11"><img src="../imageforflash3/3-8-1stepf.gif" width="143" height="88">　　<img src="../imageforflash3/3-8-1stepl.gif" width="125" height="105">　　<img src="../imageforflash3/3-8-1stepa.gif" width="96" height="110">　　<img src="../imageforflash3/3-8-1steps1.gif" width="77" height="113">　　<img src="../imageforflash3/3-8-1steph.gif" width="62" height="169"></td>
  </tr>
  <tr> 
    <td colspan="9" height="151"><img src="../imageforflash3/3-8-1stept.gif" width="68" height="180">　　<img src="../imageforflash3/3-8-1stepi.gif" width="77" height="144">　<img src="../imageforflash3/3-8-1stepm.gif" width="97" height="119">　<img src="../imageforflash3/3-8-1stepe.gif" width="132" height="108">　<img src="../imageforflash3/3-8-1steps2.gif" width="169" height="94"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="11"> 
      <p>现在我们来做字母<span class="yellow">F</span>的光影效果变换。把主场景清空，从图库中把<span class="yellow">F 
        light</span>拖到编辑区中放到靠左边一些。然后在第7帧和第25帧分别按<span class="yellow">F6</span>键插入关键帧。在第1帧和第25帧分别双击这个<span class="yellow">F 
        light</span>实例，在实例属性对话框中把<span class="yellow">Alpha</span>值改为0。然后分别双击第1帧和第7帧，把帧属性设置为运动渐变。这样就设定了光线从无到有，又从有到无的变化过程。但是随着光线的减弱，连字母<span class="yellow">F</span>也跟着消失了，这可不是我们所希望的，我们需要的是光线渐暗但文字要保持它的亮度。</p>
      <p>新建一个层，在第2帧按<span class="yellow">F6</span>插入关键帧，从图库中把字母“<span class="yellow">F</span>”拖出来，放在<span class="yellow">F 
        light</span>中字母“<span class="yellow">F</span>”所在的位置上，使两个<span class="yellow">F</span>完全重合，可以使用放缩工具把场景放大后再对齐。还是这一层，在第9帧按<span class="yellow">F6</span>，在第25帧按<span class="yellow">F5</span>键。双击第1帧上的字母“<span class="yellow">F</span>”，把它的<span class="yellow">Alpha</span>值改为0。再双击第1帧，把帧属性设置为运动渐变。</p>
      <p>现在大家明白了，其实每一个字母的光线效果变化是由两个图符实例来实现的。例如，对于字母F来说，<span class="yellow">F 
        light</span>用来实现光线从无到有又逐渐淡出的效果，而<span class="yellow">F</span>用来实现在光线消失后字母亮度的保持。当然对其余的字母也做同样的处理，每一个字母光影变化效果都占两层，这样就可以得到上面示例中所示的效果了。</p>
      <p>这里有几点要注意的事项。</p>
      <p>第一，最左边的字母最先显示，最右边的字母最后出现。因此， 第二个字母L就不能以第1帧作为起始帧，在这个示例中，<span class="yellow">L 
        light</span>要比<span class="yellow">F light</span>晚出现4帧，<span class="yellow">L</span>再比<span class="yellow">L 
        light</span>晚出现2帧。其余的字母依此类推。</p>
      <p>第二，关于层的问题。大家注意到，因为每个字母都拖着光影，所以不可避免地彼此会有互相遮盖的部分，这就牵扯到一个图层间相互位置的关系，也就是说哪个字母所在层应该在上面，哪些层应该在下面，这就要把这一串文字分成两部分分析。首先，最左边的五个字母的光影都是在左边，所以试想如果字母<span class="yellow">L</span>所在的层在字母<span class="yellow">F</span>所在层的上面，那么当字母<span class="yellow">L</span>达到最亮时其光影势必会把字母<span class="yellow">F</span>遮住，所以字母<span class="yellow">L</span>只能位于字母F所在层的下面。 
        其余几个字母也是一样，所以最左边的五个字母所在层从上到下的顺序是<span class="yellow">F</span>、<span class="yellow">L</span>、<span class="yellow">A</span>、<span class="yellow">S</span>、<span class="yellow">H</span>。 
        下图所示为前五个字母在时间轴窗口的分布。 </p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="11"><img src="../imageforflash3/3-8-1timeline1.gif" width="567" height="175"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="4"> 而右边的五个字母正好相反，其字母所在层从上到下的顺序依次是<span class="yellow">S</span>、<span class="yellow">E</span>、<span class="yellow">M</span>、<span class="yellow">I</span>、<span class="yellow">T</span>。它们在时间轴上的分布如下图所示。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="11"><img src="../imageforflash3/3-8-1timeline2.gif" width="566" height="176"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="11">第三，为了更好地实现光线从左转向右时的自然过渡，我们在动画中间再加入一小团由暗到明再由明到暗的光线。如下图左所示，用一个矩形或椭圆填充黑白中心淅进色再用颜料桶工具对颜色方向稍作修改（见右下图），然后把它转换成图符，让它在字母H和T之间做由暗到明再由明到暗的变化即可，也就是改变它的Alpha值，方法和上面讲过的一样。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="11"><img src="../imageforflash3/3-8-1step7.gif" width="122" height="176"> 
      　　　　　　　　　　　　　<img src="../imageforflash3/3-8-1step6.gif" width="93" height="140"> 
    </td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="11">现在这个示例就做好了。为了能够实现比较真实的光影效果，大家在动手的过程中可以根据自己做出的最终结果在时间轴帧的分布上做适当调整，以获得较为满意的效果。<a href="../imageforflash3/lesson3-8-1.fla">这里</a>是这个示例的源文件。</td>
  </tr>
</table>
<span class="subtitle2"></span> <span class="heha"></span> <span class="lanmudaoshi2"></span> 
<span class="yellow"></span> 
</body>
</html>