lesson3-5.htm

FLASH程序实例

      <p>也许是<span class="yellow">幸运鸟</span>的功底太差，用了好久才把别人一个类似的<span class="yellow">Flash</span>电影源文件理解得差不多了，然后自己再一边构思，一边动手摸索着去做，搞了一个下午的时间才做好，把做课题的时间都耽误了，搞不好明天又要挨老板（导师）骂了。因为我们这一章以<span class="yellow">Flash</span>的特殊效果为主，加上前两章又都是讲解文字效果的，所以这个示例就放在一起一块讲了，不过这个示例说实话还是挺难的，也许放在本章后面部分介绍更合适一些。如果大家一时不能理解也不要紧，先学习后面的章节，有时间再回过头来看这一节就行了。不过这个效果实在是太棒了，大家怎么可以错过呢，而且<span class="yellow">幸运鸟</span>早已经准备好把他的制作心得细细地说上一遍了。我们现在就开始吧。</p>
      <p>首先我们还是来分析一下这个效果。文字的平面环绕效果比较容易实现，但要实现立体环绕就很难了。为什么呢？因为一般来说，球体放在一层，文字放在另一层。如果球所在层在文字层的上面，则当球和文字重叠时，球将遮住文字。反过来，球所在层在文字所在层下面时，文字将遮住球体。这样我们就无法实现当文字环绕球体运动时前面的文字显现而球后面的文字被遮盖的效果。那么有什么办法可以解决这个问题呢？方法就是，把球分成上下两部分。让上面的部分在最上层，文字在中间一层，球的下面部分在最下层。我们看上面的示例可以发现，当文字环绕球体做立体运动时，出现在前面的文字是出现在球的下半部分的，而被遮住的文字是出现在球的上半部分的，所以......大家现在明白了吧，那我就不再多说了。好了，开始做吧。</p>
      <p>新建一个文件。设置背景色为黑色，大小为350 <span class="yellow">px</span> X 300 <span class="yellow">px</span>。</p>
      <p>我们先来做球体，选择椭圆工具，进入渐进色设置面板设置填充色，新建一种颜色，使它的渐进色定义条如右图所示：<img src="../imageforflash3/3-5-1ball1.gif" width="132" height="37">，其中灰色的<span class="yellow">RGB</span>值均为139，其填充色预览图见右图：<img src="../imageforflash3/3-5-1ball2.gif" width="55" height="54">。用这个填充色拉出一个不带边线的正圆。然后我们用颜料桶工具的<img src="../imageforflash3/3-3-1adjustcolor.gif" width="25" height="23">，把球的色彩方向调整到下图所示，然后选择这个球，按<span class="yellow">F8</span>把它转换为图符<span class="yellow">ball1</span>。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1ball3.gif" width="350" height="227"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>再来做一个球。再进入渐进色设置面板，新建一个颜色，把渐进色定义条设置为：<img src="../imageforflash3/3-5-1ball4.gif" width="125" height="34">，其颜色预览图为：<img src="../imageforflash3/3-5-1ball5.gif" width="56" height="55">。然后把刚才转换好的球体图符的实例按<span class="yellow">Ctrl-B</span>打散，用颜料桶工具用这个颜色在圆心处点一下，再按下<img src="../imageforflash3/3-3-1adjustcolor.gif" width="25" height="23">，把颜色的方向调整到下图所示，同样把它也转换成图符<span class="yellow">ball2</span>。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1ball6.gif" width="199" height="193"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>下面我们还要做球的上半部分。把刚刚做好的两个图符从库中拖到主场景中并排放置，同时把它们两个选中，按<span class="yellow">Ctrl-K</span>横向对齐，再按<span class="yellow">Ctrl-B</span>打散，用箭头工具拉出一个大框把两个球的上半部分套住，则球的上半部分被选中，如下图所示。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1ball9.gif" width="312" height="144"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">然后稍稍拖动被选中的部分使上下分开，再把下面的部分删掉。把剩下的两个球的上半部分分别转换成图符<span class="yellow">uball1</span>和<span class="yellow">uball2</span>，见下图：</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="82"><img src="../imageforflash3/3-5-1ball7.gif" width="149" height="90">　　　　　　<img src="../imageforflash3/3-5-1ball8.gif" width="142" height="90"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>为了使效果更好一些，我们还需要做球的投影，还是新建一个渐进色<img src="../imageforflash3/3-5-1ball10.gif" width="111" height="34">，设置灰色的<span class="yellow">RGB</span>值均为124。把一个做好的球体<span class="yellow">ball1</span>或<span class="yellow">ball2</span>拖出来，打散再填充这个颜色，把它转换成图符<span class="yellow">shadow</span>即可。</p>
      <p>下面我们来做按钮用以触发文字的立体环绕。按<span class="yellow">Ctrl-F8</span>新建一个按钮类图符，名为<span class="yellow">Button</span>。在第4帧<span class="yellow">Hit</span>帧上按<span class="yellow">F6</span>插入关键帧<img src="../imageforflash3/3-5-1button1.gif" width="159" height="44">，并把<span class="yellow">ball1</span>从图库中拖出，按<span class="yellow">Ctrl-B</span>打散，再填充白色，如下图。 
        这一帧表示当鼠标移到这个区域时按钮激活。 </p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1button2.gif" width="135" height="135"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>然后是文字的制作，球体表面的文字我就不多说了，大家肯定都会做。环绕球体运动的文字就没那么简单了，这可是个细致活，需要很大的耐心才能做好。</p>
      <p>按<span class="yellow">Ctrl-F8</span>新建图形类图符<span class="yellow">rotate 
        text</span>。先选好要做成环绕运动的文字，我这里用“<span class="yellow">Your Best Mentor * 
        Your Best Friend *</span>”。用文字工具选白色<span class="yellow">Copperplate Gothic</span>字体18号字写下面的文字。因为我们一会儿要打散这串文字，然后再对每个字母单独处理，所以最好写的时候相邻的字母间加上空格。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1text1.gif" width="400" height="33"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">按<span class="yellow">Ctrl-B</span>打散它们。为了使它们可以在圆的周围排放得整齐些，我们新建一个层把<span class="yellow">ball1</span>拖到编辑区中心。把这些文字按顺序分别拖动到球的四周，见下图。然后我们要做进一步的调整。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1text2.gif" width="225" height="216"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">按<span class="yellow">Ctrl+Alt-I</span>打开变形监控板。依次选择每一个字母，设置旋转值，使得字母的方向总是指向圆心。然后再多次微调字母之间的位置间距，以获得比较好的效果。这个过程要花一些时间非常耐心细致地去做，因为它和我们将要实现的效果直接相关。我们可以先画一个大圆环套在球体外面，然后把文字依次放在环上，这样比较容易排放整齐。设置好的环绕文字如下图所示，把球体和圆环删掉这个图符就做好了。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="146"><img src="../imageforflash3/3-5-1text3.gif" width="230" height="231"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>我们接着来做这个文字图符旋转的动画并把它转换成电影片断类图符。在主场景中把上面做好的图符<span class="yellow">Rotate 
        Text</span>拖进来，在第100帧按<span class="yellow">F6</span>插入关键帧。 在第1帧修改帧属性为运动渐变，并把<span class="yellow">Rotate</span>项设为<span class="yellow">Counterclockwise</span>，<span class="yellow">times</span>设置为1次。在第100帧双击，在帧属性对话框中选<span class="yellow">Actions</span>标签，按<img src="../imageforflash2/plus.gif" width="24" height="23">选<span class="yellow">Go 
        to</span>。再把<span class="yellow">Control</span>项打上勾，使<span class="yellow">Actions</span>变为<span class="yellow">Go 
        to and Play(1)</span>就行了。这样这个文字图符就可以不停地逆时针旋转了。按F8把它转换成电影片断类图符<span class="yellow">Rotating 
        text</span>。 </p>
      <p>为了加强效果，我们在球体和这圈文字中间再放上一个旋转的“<span class="yellow">Flashtimes</span>”，首先和做Rotate 
        Text的方法一样，我们做一个图形类图符<span class="yellow">flashtimes</span>，如下图所示，在十字定位符处用不带边框的黑色画一个很小的圆，以方便我们定位。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1text4.gif" width="135" height="110"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">然后再做一个电影片断类图符，名为<span class="yellow">Rotating 
      flashtimes</span>，在第1帧把刚才做好的<span class="yellow">flashtimes</span>图符拖进来放在如下面中间的那个图所示位置，也就是让这个图符的十字定位符与编辑窗口的十字定位符重合。然后分别在第8帧，第20帧，第27帧按<span class="yellow">F6</span>插入关键帧。在第1帧用变形监控板把它逆时针旋转90度放在如下图左所示的位置，双击这个实例把<span class="yellow">Alpha</span>值改为0。在第27帧把它顺时针旋转90度放在下图右所示位置上，把它的<span class="yellow">Alpha</span>值也设为0。然后设置第1帧和第20帧的帧属性为运动渐变。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1text5.gif" width="101" height="133">　　　　　　<img src="../imageforflash3/3-5-1text6.gif" width="132" height="97">　　　　　　<img src="../imageforflash3/3-5-1text7.gif" width="96" height="132"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>现在我们的准备工作就全部做好了，下面就要来把这些图符按一定规律摆放并设置它们的运动变化过程。</p>
      <p>新建一个电影片断类图符，名为<span class="yellow">Cool ball</span>，在这个图符中我们将把所有的效果都做进去。</p>
      <p>新建若干层备用，在最上层把按钮<span class="yellow">Button</span>拖到编辑区正中间，双击按钮设置<span class="yellow">Actions</span>，选<span class="yellow">On 
        MouseEvent</span>，选中<span class="yellow">Press</span>，再选一条<span class="yellow">Play</span>命令即可，这样在点击按钮后，执行播放操作。在第30帧按<span class="yellow">F6</span>插入关键帧，在第60帧按<span class="yellow">F5</span>键。</p>
      <p>第二层（从上往下，下同）我们放上写在球表面的文字，在第60帧按<span class="yellow">F5</span>键。</p>
      <p>第三层放球的上半部分。把<span class="yellow">uball2</span>先拖到正中间，再把u<span class="yellow">ball1</span>拖到正中间，如果两者没对齐可以按<span class="yellow">Ctrl-K</span>设置中心对齐。双击<span class="yellow">uball1</span>设置<span class="yellow">Alpha</span>值为65，使得下面的<span class="yellow">uball2</span>可以稍稍显示出来。在第60帧按<span class="yellow">F5</span>键。</p>
      <p>第四层我们放置在球外的内圈旋转的文字“<span class="yellow">FlashTimes</span>”的电影片断。拖动“<span class="yellow">Rotating　Flashtimes</span>”图符到下图所示位置，让它的十字定位符与球心重合。在第2帧按<span class="yellow">F7</span>插入空帧，在第60帧按<span class="yellow">F6</span>插入关键帧，把第1帧的内容拷贝到第60帧。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1text8.gif" width="170" height="143"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="32"> 
      <p>第5层我们放上做立体环绕的文字动画，把<span class="yellow">Rotating text</span>图符拖到正中间，在第30帧，第60帧分别按<span class="yellow">F6</span>插入关键帧。在第30帧把变形监控板参数设置为下图所示，并把<span class="yellow">Tint</span>值设置为天蓝色。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1text9.gif" width="161" height="111"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">结果这一帧变成如下图所示形状：</td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1text10.gif" width="455" height="192"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9"> 
      <p>在第1帧和第30帧分别设置帧属性为运动渐变，并且<span class="yellow">Actions</span>均设置为<span class="yellow">Stop</span>。这样在每次文字变形完成后将保持在这种形状进行旋转直到下一次按钮被点击。在第60帧设置帧属性<span class="yellow">Actions</span>为<span class="yellow">Go 
        to and Stop(1)</span>。</p>
      <p>在第6层我们做上面一层的投影，再拖一个<span class="yellow">Rotating Text</span>图符进来放在正中，把它的<span class="yellow">Tint</span>标签下<span class="yellow">Tint</span>项调到100，<span class="yellow">RGB</span>值均设为100。在第1帧和第30帧分别按<span class="yellow">F6</span>插入关键帧，在第30帧用变形监控板设置<span class="yellow">Scale</span>项为115%，<span class="yellow">Rotate</span>项<span class="yellow">h</span>值为-45，<span class="yellow">v</span>值为1.3，把它的位置也向下和左移动一些，具体移动多少要看最后的效果而定。然后帧属性的设置同上一层。 
      </p>
      <p>第7层放整个球体，把<span class="yellow">ball2</span>和<span class="yellow">ball1</span>依次拖到正中心对齐放置，设置<span class="yellow">ball1</span>的<span class="yellow">Alpha</span>值为65。在第60帧按<span class="yellow">F5</span>键。 
      </p>
      <p>第8层放上球体的阴影。把图符<span class="yellow">shadow</span>拖到中心位置，然后稍稍向左下方移动一点，使它略微露出一些。在第30帧和第60帧分别按<span class="yellow">F6</span>插入关键帧，在第30帧，用变形监控板设置<span class="yellow">Rotate</span>项的<span class="yellow">h</span>值为-50，<span class="yellow">v</span>值为2，并向左移动一些位置。帧属性的设置完全和第5层相同。</p>
      <p>现在这个图符就完全做好了，设置好的时间轴窗口如下图所示：</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9"><img src="../imageforflash3/3-5-1timeline2.gif" width="544" height="144"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9">在主场景中把<span class="yellow">Cool ball</span>放上就行了。按<span class="yellow">Ctrl-Enter</span>看一看效果，是不是很酷呢。花了这么多时间真得好好欣赏欣赏才行。<a href="../imageforflash3/lesson3-5-1.fla">这里</a>是这个示例的源文件，还有什么不懂的地方再好好研究一下喽。</td>
  </tr>
</table>
<span class="subtitle2"></span> <span class="heha"></span> <span class="lanmudaoshi2"></span> 
<span class="yellow"></span> 
</body>
</html>