📄 lesson3-3.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">>></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"> <a href="http://freemail.yeah.net"><font color="#ff0000">赶快申请8M永久免费电子邮箱</font></a><br>
<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&category=it&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&category=it&type=banner"></script>
<NOSCRIPT> <a
HREF="http://202.106.124.33/click.ng/Params.richmedia=yes&site=www.163.com&category=it&type=banner"><img
SRC="http://202.106.124.33/image.ng/Params.richmedia=yes&site=www.163.com&category=it&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="5"><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="400" height="300">
<param name=movie value="../imageforflash3/lesson3-3-1.swf">
<param name=quality value=high>
<embed src="../imageforflash3/lesson3-3-1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="300">
</embed>
</object></td>
</tr>
<tr>
<td class="unnamed1" colspan="9" height="5">
<p>上面这个示例比较大一些，也许网速较慢的话要多等一会儿，希望大家耐心一些。</p>
<p>这一节，我们将利用前面一章中讲到的遮罩技术，来实现上面示例中的文字的电影序幕效果。这个效果实现起来很简单，等大家和我一起做完了，就知道为什么能产生这样的效果了。</p>
<p>先新建一个文件。把背景设置为黑色，大小为400 <span class="yellow">px</span> X 300 <span class="yellow">px。</span></p>
<p>选择矩形工具，去除边线，点参数修改器中填充色按钮，进入颜色设置面板，选<span class="yellow">Gradient</span>渐进色标签，选中黑白线性渐进色，按<span class="yellow">New</span>按钮新建一个颜色，连续两次把黑色的指针井(<span class="yellow">Pointer
well</span>)拖到渐进色定义条中生成两个新的指针，并将颜色设置为下图中所示：</p>
</td>
</tr>
<tr>
<td class="table" colspan="9" height="5"><img src="../imageforflash3/3-3-1color.gif" width="415" height="223"></td>
</tr>
<tr>
<td class="unnamed1" colspan="9" height="36">
<p>颜色设置好以后，用鼠标拉出一个矩形来，覆盖住整个电影背景，如下图左所示。用颜料桶工具的<img src="../imageforflash3/3-3-1adjustcolor.gif" width="25" height="23">把颜色方向调节到如下图右所示，怎么调节不用我多说了吧，忘记怎么做的话再看一下前面的章节。以下显示均缩小50％。</p>
</td>
</tr>
<tr>
<td class="unnamed1" colspan="9" height="5"> <img src="../imageforflash3/3-3-1color3.gif" width="201" height="152"> <img src="../imageforflash3/3-3-1color2.gif" width="202" height="152"></td>
</tr>
<tr>
<td class="unnamed1" colspan="9" height="5">
<p>做好以后，把这一层隐藏起来，以免影响我们下面的操作。</p>
<p>新建一个层用于文字。用隶书24号字，什么颜色都可以，只要与背景颜色区分开就行。用适当的行宽写上一段话，例如大家在上面的示例中看到的那段文字。这一段文字的长短无所谓，写好以后恢复显示刚才隐藏的那一层，然后把文字拖到下图左所示位置，按F8键把它转换为图形类图符。</p>
</td>
</tr>
<tr>
<td class="unnamed1" colspan="9" height="5"> <img src="../imageforflash3/3-3-1text1.gif" width="221" height="319"> <img src="../imageforflash3/3-3-1text2.gif" width="217" height="314"></td>
</tr>
<tr>
<td class="unnamed1" colspan="9" height="5">
<p>因为要求动画的速度很慢，所以我们在第380帧按<span class="yellow">F6</span>新建关键帧，并用方向键把文字向上移动到如上图右所示位置。（注意，要想减慢动画的速度有两种方法，一种用减少每秒播放的帧数(<span class="yellow">fps</span>)，另一种是增大总播放帧数。但是减少每秒播放的帧数会导致动画在连续播放时产生跳跃现象，如果想要获得平滑的动画效果，最好还是增大总播放帧数。）在第1帧设置运动渐变。同样，在下面层的第380帧按F5键保持该层第1关键帧的内容。</p>
<p>下面我们在文字所在层上点鼠标右键，在弹出的菜单中选<span class="yellow">Mask</span>，把这一层变为遮罩层。奇怪吗？用文字做遮罩层？等一下你就明白了。按<span class="yellow">Ctrl-Enter</span>预览动画，发现真的实现了电影的序幕效果，现在相信了吧。</p>
<p>想一想为什么用上面的方法就可以实现这个效果呢？那是因为所谓遮罩技术，就是在遮罩层的对象轮廓的范围内显示被遮罩层上的内容。这样在遮罩层的对象移动（这里是文字向上移动）时，被遮罩层里的内容（这里是渐进色）就透过遮罩层里文字轮廓显示出来了，表现为由黑变白再变黑，因为背景是黑色的，所以开始文字隐藏，然后逐渐显现，最后再慢慢消失，于是就得到了这种淡入淡出的效果。</p>
<p>现在觉得这个示例一点也不难做了吧。不过如果我们想让其中的某一些文字显示出别的颜色，同时也和其它文字具有同样的效果，这时该怎么做呢？象上面示例中“新闪光时代”这五个字是用淡黄色显示的，大家能看出是如何实现的吗？</p>
<p>答案也很简单，就是为这几个字再用一次遮罩技术，具体操作如下：</p>
<p>再新建一个层，用文字工具写上“新闪光时代”五个字，这五个字最好和刚才的那些文字具有相同的字体和字号。按<span class="yellow">Ctrl-L</span>打开图库窗口，编辑我们刚才转换成的图符，用五个空格代替“新闪光时代”这五个字。回到主场景中，在第1帧把新建层上的“新闪光时代”这五个字移到刚才用空格填充的位置上，如下左图所示。同样，在第380帧新建关键帧，再把这五个字向上移动到刚才同样的相对位置上。然后在第1帧上设置运动渐变。</p>
</td>
</tr>
<tr>
<td colspan="9" height="5"> <img src="../imageforflash3/3-3-1text3.gif" width="210" height="312"> <img src="../imageforflash3/3-3-1text4.gif" width="208" height="308"></td>
</tr>
<tr>
<td class="unnamed1" colspan="9" height="5">
<p>再新建一个层放这五个字的渐进色，把这一层拖到这五个字所在层的下面。还选矩形工具设置填充颜色，和刚才一样，进入渐进色设置面板后，选择刚才我们新建的颜色，按<span class="yellow">New</span>按钮再生成一个新的颜色，把渐进色定义条中间的两个白色指针改成如右图所示的颜色即可：<img src="../imageforflash3/3-3-1color4.gif" width="125" height="32">。用这个颜色我们在“新闪光时代”这五个字的必经之路上拉出一个矩形来，如上右图所示（仍要用颜料桶工具的<img src="../imageforflash3/3-3-1adjustcolor.gif" width="25" height="23">调整颜色方向）。</p>
<p>现在我们把“新闪光时代”这几个字所在的层设为遮罩层，再在下面被遮罩层的第380帧按下<span class="yellow">F5</span>键就可以了。观察一下效果，现在这几个文字不仅以另外一种颜色显示出来了，而且也有很好的电影序幕效果。当然大家也可以在实践的过程中把用作被遮罩层的渐进色设置成为其它颜色之间的渐进色，不同方向的渐进色甚至五彩缤纷的彩虹色等等，以实现不同的效果。<a href="../imageforflash3/lesson3-3-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 + -