lesson3-9.htm

FLASH程序实例

<!--end picturenav-->
    <td align="right" class="p1" vAlign="bottom" width="130"></td>
  </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="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="300" height="250">
        <param name=movie value="../imageforflash3/lesson3-9-1.swf">
        <param name=quality value=high>
        <embed src="../imageforflash3/lesson3-9-1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="250">
        </embed> 
      </object></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>这一节我们来学习制作一个雷达。<span class="yellow">幸运鸟</span>也是现学现卖，因为是星期天，所以有时间把别人的作品细细研究了一番，然后亲自认真地动手做了一遍，虽然没有改动多少，但把制作过程中几个重要的地方和难点都记了下来，又尝试了用尽量简单的方法来实现同样的效果。趁着现在<span class="yellow">幸运鸟</span>对制作过程的印象还很新鲜，就把经验心得说给大家听吧。</p>
      <p>新建一个文件，设置背景色为黑色。</p>
      <p>我们先来做雷达的外壳。按<span class="yellow">Ctrl-F8</span>新建一个图形类图符<span class="yellow">out 
        radar</span>。用椭圆工具选灰色边框不选填充色按住<span class="yellow">Shift</span>键拉出一个差不多大小的圆来，选中它按F8转换为图符。把它移动到中心位置，让编辑区的十字定位符和它的中心十字重合。选中这个圆，按<span class="yellow">Ctrl-C</span>复制，按<span class="yellow">Ctrl-V</span>粘贴，把粘贴后的圆略微放大一点，然后把它移动到第一个圆的外面。再按<span class="yellow">Ctrl-V</span>粘贴一个圆，放大约20%，把这三个圆同时选中，按<span class="yellow">Ctrl-K</span>改变设置，使它们中心对齐。按<span class="yellow">Ctrl-B</span>把它们打散，选颜料桶工具，新建一个渐进色如右图所示：<img src="../imageforflash3/3-9-1step2.gif" width="121" height="35">，其中左边的颜色指针的<span class="yellow">RGB</span>值分别为63，84，131。用这个颜色在最外面的圆和里面两个圆之间点一下，然后调整颜色方向使颜色效果如下图所示。最后在12点，3点，6点和9点的位置各画上一条短线。 
      </p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-9-1step1.gif" width="181" height="184"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">新建一个层，用绿色边框色再拉出一个正圆，大小比刚才画的第一个圆只小一点，如下图所示：</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-9-1step3.gif" width="176" height="179"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">现在画标尺或刻度。再新建一个层，按<span class="yellow">Ctrl+Alt-I</span>打开对象监控板，选<span class="yellow">Transform</span>。先用绿色在12点位置拉出很短的一条直线。选择这条短线，在变形监控板上点<span class="yellow">Copy</span>复制，再在<span class="yellow">Rotate</span>项下输入5.0，表示旋转5度，点<span class="yellow">Apply</span>确定。然后用鼠标把复制好并经过旋转的新短线放到绿色圆周第1条短线右边的位置上，。用同样的方法再做出4条短线，注意每次都用第1条短线进行复制旋转，并且旋转角度递增5度。做好以后我们就有了6根刻度线，角度也旋转了25度。接下来把这6根刻度线全部选中，用变形监控板复制并旋转30度，把新的6根刻度线再放在适当的位置上。依此类推，就可以把所有的刻度线做好了，做好的刻度线如下图所示。如果出现长短不一或间距不等的情况，用橡皮工具或箭头工具调整一下就行了。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-9-1step4.gif" width="144" height="142"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">下面来做雷达扫描线及表盘。新建一个图符In radar。进入图符编辑画面，在第1层（自上而下，下同）和第2层分别画上扫描线的轴和扫描线，如下面图一和图二所示。</td>
  </tr>
  <tr> 
    <td colspan="9" height="135"><img src="../imageforflash3/3-9-1step5.gif" width="20" height="18">　<img src="../imageforflash3/3-9-1step6.gif" width="11" height="76">　<img src="../imageforflash3/3-9-1step10.gif" width="149" height="146">　<img src="../imageforflash3/3-9-1step8.gif" width="248" height="94">　　<img src="../imageforflash3/3-9-1step7.gif" width="122" height="126"><br>
      <span class="unnamed1">图一　图二　　　　　图三　　　　　　　　　　　　　　　图四　　　　　　　　　　　　　　　　　　图五 
      </span></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>在第3层先画一个不带边线填充色为任意的正圆，大小如上图三所示。把它分成两部分，左上角的部分为四分之一圆大，剩下的部分为四分之三圆大。把较大的这一部分用黑色填充，也就是用背景色填充，这样这块区域不仅很好的隐藏起来，而且也会遮盖住下面几层中位于这一块区域上的内容。剩下这块四分之一圆我们用一种新建的颜色来填充，这个新建的颜色见右图：<img src="../imageforflash3/3-9-1step9.gif" width="104" height="37">，这两个颜色指针都是黑色，但左边的这个颜色指针的<span class="yellow">Alpha</span>值为0。用它来填充这块四分之一圆，调整颜色方向如右图：<img src="../imageforflash3/3-9-1step11.gif" width="93" height="65">，使得上面的部分为透明的黑色，下面的部分为不透明的黑色，而且方向略微倾斜。</p>
      <p>在第4层上画一个四分之一圆，也可以把第3层的四分之一圆复制粘贴过去，见图四左图。新建一种中心渐进色<img src="../imageforflash3/3-9-1step12.gif" width="122" height="36">，使它左边的颜色指针的RGB值分别为3，171和3，并把<span class="yellow">Alpha</span>值改为75，然后把右边的黑色颜色指针的<span class="yellow">Alpha</span>值调为0。 
        用这个颜色填充，并把颜色调整为图四中右面的图所示的颜色。 </p>
      <p>在第5层也就是最下层画出图五所示的几条虚线同心圆来，这个比较容易，只要用椭圆工具选择虚线线型（如果对虚线的线型不太满意还可以自己定义）再拉出几个圆把大小和位置关系调整好就行了。</p>
      <p>最后做好的指针表盘如下图所示。可以看出虽然这个图符比较大，但大部分都被遮住了。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-9-1step13.gif" width="140" height="141"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>为了使效果更逼真一些，我们还要做一个目标点以便在雷达扫描的时候被检测到并发出信号。</p>
      <p>新建一个电影片断类图符<span class="yellow">target</span>，在第1帧用绿色的填充色画一个不带边线的小圆<img src="../imageforflash3/3-9-1step15.gif" width="19" height="20">，选择它并按<span class="yellow">F8</span>转换为图符<span class="yellow">dot</span>。然后分别在第3帧，第9帧和第13帧按<span class="yellow">F6</span>插入关键帧。在第1帧把圆缩小得几乎看不见。在第13帧双击这个绿点，把它的<span class="yellow">Alpha</span>值改为0。接着分别把第1帧和第9帧的帧属性设为运动渐变。</p>
      <p>再新建一个层，在第3帧按<span class="yellow">F6</span>插入关键帧，画一个不填充的绿色圆套住绿点，如右图所示：<img src="../imageforflash3/3-9-1step16.gif" width="27" height="26">。选中这个绿色圆边线，按F8把它转换为图符<span class="yellow">circle</span>。在第13帧按<span class="yellow">F6</span>插入关键帧，把这个圆放大一些，然后把它的<span class="yellow">Alpha</span>值设为0。把第3帧的内容复制到第1帧，并在第1帧把圆的<span class="yellow">Alpha</span>值改为0。接着分别把第1帧和第3帧的帧属性改为运动渐变。做好后的时间轴如下图所示：</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="29"><img src="../imageforflash3/3-9-1step14.gif" width="285" height="63"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>现在准备工作基本做好了，下面就可以把刚刚完成的这些图符组装在一起了。</p>
      <p>新建一个电影片断类图符<span class="yellow">radar</span>。在第1层上把<span class="yellow">out 
        radar</span>拖进去放在正中间，在第59帧按<span class="yellow">F5</span>键。 </p>
      <p>在第3层上把<span class="yellow">in radar</span>拖进来也放在正中间，在第60帧按<span class="yellow">F6</span>插入关键帧，在第1帧修改帧属性为运动渐变，并把<span class="yellow">Rotate</span>选项改为<span class="yellow">Clockwise</span>，次数为1次，这样在1到60帧之间指针将会旋转1周。然后我们在第59帧按<span class="yellow">F6</span>插入关键帧，在第60帧上按<span class="yellow">Shift-F6</span>，再按<span class="yellow">Shift-F5</span>把它清除。现在指针已经被设置为在第1和60帧之间旋转大约两周，这在循环播放时指针的旋转可以得到很好的衔接。</p>
      <p>在第2层第11帧按<span class="yellow">F6</span>插入关键帧。根据这一帧雷达扫描线所到达的位置，把<span class="yellow">target</span>拖进来放好。为了使<span class="yellow">target</span>能够完整播放一遍本身的动画，我们在第23帧按<span class="yellow">F7</span>键。在第40帧雷达再次旋转到这一位置，所以在这一帧再按<span class="yellow">F6</span>插入关键帧，把第11帧的内容复制到这一帧上，在第52帧按<span class="yellow">F7</span>键。</p>
      <p>第4层可有可无，如果你想增强些效果，可以在这一层杂乱地放上一些颜色与背景色接近的小点，这样当雷达扫描时，这些小点可以若有若无地隐约显示出来。</p>
      <p>最后做好的时间轴如下图所示：</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-9-1timeline.gif" width="542" height="102"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">现在回到主场景，把做好的电影片断类图符radar拖出来放好就行了。<a href="../imageforflash3/lesson3-9-1.fla">这里</a>是这个示例的源文件。</td>
  </tr>
</table>
<span class="subtitle2"></span> <span class="heha"></span> <span class="lanmudaoshi2"></span> 
<span class="yellow"></span> 
</body>
</html>