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

📄 lesson3-7.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">第七节 Cool Mouse效果</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="20"><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="350" height="280">
        <param name=movie value="../imageforflash3/lesson3-7-1.swf">
        <param name=quality value=high>
        <embed src="../imageforflash3/lesson3-7-1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="350" height="280">
        </embed> 
      </object></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="20"> 
      <p>我们这一节来学习一种在<span class="yellow">Flash</span>中运用得比较普遍而且比较流行的效果--很酷的鼠标事件效果。大家试着把鼠标放在上面的黑色区域中来回移动就可以看到这种效果了,其实细心的朋友也许早已发现在我首页的两条竖幅的<span class="yellow">Flash</span>电影中已经把这个效果做进去了,只不过是用另外一种方法实现的。大家不要以为这个做起来很复杂,其实只需要简单的几步就可以做到了,准备好了的话我们就开始吧。 
      </p>
      <p>首先当然是新建一个文件了,把背景设置为黑色。 </p>
      <p>在工作区画一个不带边线的正圆,其填充色为黑白中心渐进色。画好以后选中它,按<span class="yellow">F8</span>把它转换为图形类图符<span class="yellow">ball</span>,见下图。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="50"><img src="../imageforflash3/3-7-1step1.gif" width="67" height="67"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="26"> 
      <p>按<span class="yellow">Ctrl-F8</span>新建一个按钮类图符<span class="yellow">ball 
        button</span>。按<span class="yellow">Ctrl-L</span>打开图库窗口,在<span class="yellow">Up</span>帧把刚刚做好的图符拖到编辑区正中,让两个十字定位符重合。把其它帧空下什么也不放,如下图:</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="20"><img src="../imageforflash3/3-7-1timeline.gif" width="334" height="47"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="20"> 
      <p>再按<span class="yellow">Ctrl-F8</span>新建一个电影片断类图符<span class="yellow">ball 
        movie</span>。在第1帧把按钮类图符拖进来放在正中间。从第2帧以后我们就可以随便做一个动画了,这个动画用于鼠标事件所激活的单个对象产生的效果,它可以是任意的,而且是形体渐变动画还是运动渐变动画都无所谓。我在这里选用的是小球忽明忽暗直至消失的动画,下面我就讲解一下制作过程。</p>
      <p>在第2帧按<span class="yellow">F7</span>插入空帧。把图形类图符从图库中拖出来,放在正中心。双击这个球体,在实例属性对话框中选<span class="yellow">Color 
        Effect</span>标签把<span class="yellow">Alpha</span>值改为80。 </p>
      <p>在第4帧按<span class="yellow">F6</span>插入关键帧,把小球缩小一些,再把它的<span class="yellow">Alpha</span>值设置为60。</p>
      <p>在第9帧按<span class="yellow">F7</span>插入空帧。从图库中把图符<span class="yellow">ball</span>拖到正中间。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="20"><img src="../imageforflash3/3-7-1step2.gif" width="65" height="65">   <img src="../imageforflash3/3-7-1step3.gif" width="48" height="49">   <img src="../imageforflash3/3-7-1step4.gif" width="65" height="65">   <img src="../imageforflash3/3-7-1step5.gif" width="61" height="62">   <img src="../imageforflash3/3-7-1step6.gif" width="66" height="67">   <img src="../imageforflash3/3-7-1step7.gif" width="32" height="33"><br>
       第2帧      第4帧     第9帧      第11帧     第15帧    第25帧 </td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="20"> 
      <p>在第11帧按<span class="yellow">F6</span>插入关键帧,把小球缩小一些,并把<span class="yellow">Alpha</span>值设为80。</p>
      <p>在第15帧按<span class="yellow">F7</span>插入空帧,把图符<span class="yellow">ball</span>从图库中拖到正中间并在实例属性对话框中把<span class="yellow">Brightness</span>值改为6%。</p>
      <p>在第25帧按<span class="yellow">F6</span>插入关键帧,把小球缩得很小,然后把它的<span class="yellow">Alpha</span>值设为20,使它几乎透明。</p>
      <p>设置好后各帧的情况如上图所示。现在我们为第2,4,9,11和第15帧分别设置帧属性为运动渐变。</p>
      <p>现在我们来设置按钮的属性。先双击第1帧,在弹出的帧属性对话框中把<span class="yellow">Actions</span>设置为<span class="yellow">Stop</span>,这样设置的目的是暂时不播放其后的动画以等待特定的鼠标事件激活。然后再双击位于第1帧上的按钮,在弹出的实例属性对话框中选<span class="yellow">Actions</span>标签。按<img src="../imageforflash2/plus.gif" width="24" height="23">选<span class="yellow">On 
        MouseEvent</span>,按着选中右边的<span class="yellow">Roll Over</span>,如下图所示,表示在鼠标滑过的时候激活事件。</p>
    </td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="20"><img src="../imageforflash3/3-7-1step8.gif" width="490" height="196"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="20">下面我们来设定鼠标事件产生后要做的事情。再按<img src="../imageforflash2/plus.gif" width="24" height="23">选<span class="yellow">Go 
      to</span>。在右边把<span class="yellow">Number</span>改成2,并选择下面的<span class="yellow">Control</span>项,见下图。这样我们就设置好了按钮的属性:当鼠标滑过按钮时,从第2帧开始播放动画。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="20"><img src="../imageforflash3/3-7-1step9.gif" width="489" height="293"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="20">设置好后这个电影片断的时间轴如下图所示:</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="20"><img src="../imageforflash3/3-7-1timeline2.gif" width="382" height="44"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="20">回到主场景,把做好的电影片断类图符<span class="yellow">ball 
      movie</span>拖到场景中。在小球上点鼠标右键选<span class="yellow">Scale</span>把它缩小一些,再拖一个<span class="yellow">ball 
      movie</span>进来,再缩小一些,使得两次缩小的小球不一样大小。(如果你愿意的话,还可以多拖几个小球进来,分别缩小不同比例,这样当鼠标滑过时出现的小球动画有大有小,更生动一些。)现在在编辑区中已经有了几个不同大小的小球了,把它们移动得近一些,如下图所示:</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="20"><img src="../imageforflash3/3-7-1step10.gif" width="61" height="63"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="20">然后我们把这些小球全部选中,按<span class="yellow">Ctrl-C</span>复制,再按<span class="yellow">Ctrl-V</span>粘贴,把粘贴后的几个小球和原来的小球排好,如此反复操作,直到画面中布满了小球,见下图。注意小球不要排列得太整齐,那样反而效果不好。</td>
  </tr>
  <tr> 
    <td class="table" colspan="9" height="249"><img src="../imageforflash3/3-7-1step11.jpg" width="350" height="279"></td>
  </tr>
  <tr> 
    <td class="unnamed1" colspan="9" height="94"> 
      <p>但我们不希望这些小球显示出来,否则还有什么效果可言。所以我们要对电影片断图符<span class="yellow">ball movie</span>作一点修改。选择图库中的<span class="yellow">ball 
        movie</span>,双击预览窗口,进入编辑画面。在第1帧双击小球按钮,在实例属性对话框中把<span class="yellow">Alpha</span>值改为0,这样按钮就变透明了。再回到主场景,发现小球都不见了,但点击画面还可以选中它们。至此,我们的鼠标效果就全部做好了。使用这个方法做出的效果不会改变鼠标形状,而在我的首页中,当鼠标事件激活时鼠标变成手形形状。</p>
      <p><a href="../imageforflash3/lesson3-7-1.fla">这里</a>是这个示例的源文件。</p>
    </td>
  </tr>
</table>
<span class="subtitle2"></span> <span class="heha"></span> <span class="lanmudaoshi2"></span> 
<span class="yellow"></span> 
</body>
</html>

⌨️ 快捷键说明

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