⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 lesson3-4.htm

📁 FLASH程序实例
💻 HTM
字号:
🔍 
<html>
<head>
<title>新闪光时代</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
<!--
p,div {font-size:9pt; line-height:14pt; font-family:宋体;}
.p1{font-size:9pt;font-family:宋体;}
.p2{font-size:9pt;font-family:宋体;line-height:14pt;}
.p3{font-size:14.8px;font-family:宋体;}
.p4{font-size:14.8px;font-family:宋体;line-height:14pt;}
.p5{font-size:1pt}
a:hover{color:red;}
a.t1:visited{color:red;}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#383098" vlink="#336699" alink="#FF0000" topmargin="0">
<table border="0" cellPadding="0" cellSpacing="0" width="750">
<TBODY>
  <tr>
    <td width="200"><a href="http://www.163.com"><img border="0" height="54"
    src="http://images.163.com/images/news/163logo.gif" width="160"></a></td>
    <td align="right" class="p1" width="540"><font color="#ff0000">&gt;&gt;</font><a
    href="http://www.163.com/index.html">返回首页</a> <a href="http://www.163.com/news/"><font
    color="#ff0000">焦点新闻</font></a> <a href="http://my.163.com/">我的网易</a> <a
    href="http://bj.163.com/">网易社区</a> <a href="http://www.163.com/yeah">搜索引擎</a> 
    <a href="http://freemail.yeah.net/">免费邮件</a> <a href="http://auctions.163.com/">网上拍卖</a> 
    <a href="http://www.163.com/serve/">个人服务</a></td>
  </tr>
</TBODY>
</table>

<table border="0" cellPadding="0" cellSpacing="0" width="750">
<TBODY>
  <tr>
    <td class="p1" width="240">&nbsp;<a href="http://freemail.yeah.net"><font color="#ff0000">赶快申请8M永久免费电子邮箱</font></a><br>
    &nbsp;<a href="http://www.163.com/feedback/index5.html">网易公司诚聘英才</a><br>
    </td>
    <td width="500"><!--Here is ad beginning.--><!--webbot bot="HTMLMarkup" startspan --><IFRAME frameBorder="0" height="60" marginHeight="0" marginWidth="0" scrolling="no" src="http://202.106.124.33/html.ng/site=www.163.com&amp;category=it&amp;type=banner" width="468" BORDERCOLOR="#000000"><!--webbot bot="HTMLMarkup"
    endspan --> <script LANGUAGE="JavaScript1.1"
    SRC="http://202.106.124.33/js.ng/site=www.163.com&amp;category=it&amp;type=banner"></script> 
<NOSCRIPT>    <a
    HREF="http://202.106.124.33/click.ng/Params.richmedia=yes&amp;site=www.163.com&amp;category=it&amp;type=banner"><img
    SRC="http://202.106.124.33/image.ng/Params.richmedia=yes&amp;site=www.163.com&amp;category=it&amp;type=banner"></a> 
</NOSCRIPT>    <!--webbot bot="HTMLMarkup" startspan --></IFRAME><!--webbot bot="HTMLMarkup" endspan --><!--Here is ad end.--></td>
  </tr>
</TBODY>
</table>

<table border="0" cellPadding="0" cellSpacing="0" height="10" width="740">
<TBODY>
  <tr>
    <td><img border="0" height="0" src="http://images.163.com/images/images/dot.gif" width="0"></td>
  </tr>
</TBODY>
</table>

<table bgColor="#ffffff" border="0" cellPadding="0" cellSpacing="0" width="740">
<TBODY>
  <tr>
    <td width="120"><table border="0" cellPadding="0" cellSpacing="1" width="100%">
<TBODY>
      <tr align="middle">
        <td bgColor="#eeeeee" class="p1" height="20"><a href="http://www.163.com/news/index.html"><font
        color="#000000">新闻</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/entertainment/index.html"><font
        color="#000000">影视</font></a> </td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/sports/index.html"><font
        color="#000000">体育</font></a></td>
      </tr>
</TBODY>
    </table>
    </td>
    <td align="middle" bgColor="#0036b2" class="p1" height="20" width="40"><a
    href="http://www.163.com/it/index.html"><font color="#ffffff">电脑</font></a></td>
    <td width="440"><table border="0" cellPadding="0" cellSpacing="1" width="100%">
<TBODY>
      <tr align="middle">
        <td bgColor="#eeeeee" class="p1" height="20"><a
        href="http://www.163.com/leisure/index.html"><font color="#000000">生活</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/science/index.html"><font
        color="#000000">科学</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/economy/index.html"><font
        color="#000000">财经</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/literature/index.html"><font
        color="#000000">文化</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/game/index.html"><font
        color="#000000">游戏</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/realestate/index.html"><font
        color="#000000">房产</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/lady/index.html"><font
        color="#000000">女性</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/health/index.html"><font
        color="#000000">健康</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/jobs/index.html"><font
        color="#000000">职业</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://www.163.com/education/index.html"><font
        color="#000000">教育</font></a></td>
        <td bgColor="#eeeeee" class="p1"><a href="http://spicy.163.com/"><font color="#000000">新辣</font></a></td>
      </tr>
</TBODY>
    </table>
    </td>
<!--picture nav-->
<!--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="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="10"><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="500" height="180">
        <param name=movie value="../imageforflash3/lesson3-4-1.swf">
        <param name=quality value=high>
        <embed src="../imageforflash3/lesson3-4-1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="180">
        </embed> 
      </object></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="10"> 
      <p>这一节我们来学习另外一种文字效果－－风吹文字效果。要做上面这个示例说实话不难，因为只用到了一些基本的运动渐变罢了，但是要把这种效果表现得比较逼真，却需要一定的耐心和技巧。在这里，我们用了两种方法来实现文字消失和文字出现的过程，使得这两个过程给大家的感觉也不一样。不过，说是两种方法，只是在实现上稍有所区别，其本质是相同的。下面我们就来介绍这个示例的具体做法。</p>
      <p>首先，新建一个文件，设置电影属性和上面的示例一样。</p>
      <p>然后选择要产生这种效果的文字，我在这里选择“欢迎步入新闪光时代”这九个字。因为每一个字我们都要单独做动画，所以必须把每个字单独做成一个图符，然后分别放在不同的层上。我们可以在主场景中分别写下这几个字，然后分别按<span class="yellow">F8</span>转换成图符，也可以直接按<span class="yellow">Ctrl-F8</span>新建图符，然后再编辑。</p>
      <p>做好这几个图符后，在时间轴窗口新建八个层，使层的总数变为九个。按<span class="yellow">Ctrl-L</span>打开图库窗口，在最上面一层，把“欢”字图符拖到主场景中。在第二层把“迎”拖到主场景中，依此类推，把这九个字分别放在不同的层上。然后用箭头工具拉一个大框把所有文字都套住，按<span class="yellow">Ctrl-K</span>打开对齐窗口，如下图所示：</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="10"><img src="../imageforflash3/3-4-1step1.gif" width="352" height="308"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="10">确定后文字将沿底线对齐而且保持字间距相同，如果字间距不合适，你可以试着通过改变首尾两个字的距离，然后再一次对齐的方法进行调整。对齐后，拖动所有文字到下图所示的位置上放好。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="199"> 
      <p><img src="../imageforflash3/3-4-1step2.gif" width="500" height="180"></p>
      <p class="yellow">图　一</p>
    </td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="10"> 
      <p>在最上面一层的第20帧按<span class="yellow">F6</span>插入关键帧，在“欢”字上点鼠标右键选<span class="yellow">Scale</span>，然后用鼠标点住左边中心的手柄并向右拖动使它在横向压缩直到文字翻转，如右图所示：<img src="../imageforflash3/3-4-1step3.gif" width="16" height="43">。这一步完成后在这个字上双击左键，在<span class="yellow">Color</span>菜单下把<span class="yellow">Alpha</span>值设置为0。然后我们把这个字移到如下图所示位置，再把第1帧设置为运动渐变，把<span class="yellow">Easing</span>值设置为-100。这样这个字在1到20帧之间会由左下向右上方加速移动，在移动的过程中形状不断压缩直到翻转，颜色也逐渐融于背景中，给人一种被风卷走消失的感觉。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="10"><img src="../imageforflash3/3-4-1step4.gif" width="500" height="179"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="10"> 
      <p>对其它层也是一样的操作，因为每个文字起动的时间不一样，所以我们稍稍做些调整。在“迎”字所在层的第3帧和第23帧分别按<span class="yellow">F6</span>插入关键帧，在第23帧把“迎”字也做压缩翻转及设置<span class="yellow">Alpha</span>值的处理，并拖到和“欢”字一样的位置，设置第3帧为运动渐变。这样“迎”字将比“欢”字晚3帧起动。</p>
      <p>同样，剩下的层每一层都比上一层晚3帧起动，而文字的终止位置基本相同。最终完成后的时间轴窗口应如下图所示：</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="10"><img src="../imageforflash3/3-4-1timeline.gif" width="525" height="159"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="10"> 
      <p>在具体操作中，我们还应根据实际出现的效果来对文字的终止位置作出调整，以能够更好地体会到一种被风卷动的感觉。</p>
      <p>文字出现的过程可以做成为消失过程的逆过程，不过这里我们还是变了个花样，用另外一种方法来实现。</p>
      <p>先如上图所示那样在每一层的最后一帧后按<span class="yellow">F7</span>加入一空帧。然后在每一层的第55帧和第80帧各按<span class="yellow">F6</span>插入关键帧。选每一层的第1帧，按<span class="yellow">Ctrl-C</span>复制该层的内容，再分别选中同一层的第55帧和第80帧，分别按<span class="yellow">Ctrl+Shift-V</span>把复制的内容粘帖回原处。</p>
      <p>点最上面一层的第55帧，选箭头工具，拉一个大框把所有的文字选中，如上图一所示。然后选菜单中<span class="yellow">Modify</span> 
        -&gt; <span class="yellow">Transform</span> -&gt; <span class="yellow">Flip 
        Horizontal<span class="unnamed1">，这时文字水平翻转。然后我们在文字上点鼠标右键选<span class="yellow">Rotate</span>，拖动中间的圆形手柄使文字横向变形，如下图所示：</span></span></p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="10"><img src="../imageforflash3/3-4-1step6.gif" width="447" height="76"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="10"> 
      <p>然后，双击每一个文字把<span class="yellow">Alpha</span>值都设置为0。把所有的文字向上移动大约一到两个字的高度。再在每一层的第55帧设置帧属性为运动渐变，设置<span class="yellow">Easing</span>值为100，使文字的运动趋于稳定。</p>
      <p>与文字消失的过程类似，文字出现的过程也需要不同的起动时间，这样才能按顺序逐一落下，所以我们还要让每一层的起动帧相对上一层后移。按下<span class="yellow">Ctrl</span>键，把鼠标移到“迎”字层的第55帧上，这时鼠标变黑，点住这一帧后移3帧，再点住第80帧后移1帧。对其它层也做相同操作，即每一层比上一层晚起动3帧，晚结束1帧。</p>
      <p>完成所有的操作后的时间轴窗口如下图所示：</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="10"><img src="../imageforflash3/3-4-1timeline2.gif" width="602" height="161"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="10">这样这个示例就做好了。如果大家觉得效果不理想，可以调整关键帧上文字的大小，方向，Easing值等参数，因为我们最终的目标就是要实现一个比较完美的特殊效果，所以对效果不大好的部分做适当的调整还是必要的。<a href="../imageforflash3/lesson3-4-1.fla">这里</a>是这个示例的源文件。</td>
  </tr>
</table>
<span class="subtitle2"></span> <span class="heha"></span> <span class="lanmudaoshi2"></span> 
<span class="yellow"></span><font face="宋体, 楷体_GB2312" size="2" color="#FFFFFF"></font> 
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -