发新话题
打印

第十四节 打字机效果

第十四节 打字机效果

第二章 FLASH入门动画
第十四节 打字机效果
这一节我们来做一个类似于打字机的文字效果。大家看到上面的示例,能说得出来这个效果是怎么实现的吗?在这里,我们仍将继续使用遮罩技术来实现这个动画。其实实现起来很简单的,不信大家跟我一起做一下。
新建一个文件,按Ctrl-M修改电影属性,将背景调为狭长的矩形,取天蓝色为背景色。为了使动画速度不至太快,我们将播放速度设为4 fps。
用文字工具选黑体18号白色字在场景中写上“欢迎进入新闪光时代!”,如下图所示。
为了实现文字的逐一出现,我们需要画一个会延伸的矩形用作遮罩,随着这个矩形的延伸,所有的文字一一显示出来。根据我们前两节中学过的遮罩知识,实现起来不应太难。
新建一个层,用作遮罩层,在上面用矩形工具绘制一个任意颜色(当然不能是背景色,否则就看不到了)的矩形。宽度要刚好是一个文字的宽度,确切点应该是一个文字的左端到其右边相邻文字的左端的距离,高度嘛,只需要略高于一个文字的高度即可。为了使矩形的大小比较精确,我们可以打开标尺,或用放缩工具将画面放大一些。把这个矩形放在如下图所示的位置上。在第9帧按下F5键使1到9帧内容相同。
下面我们在矩形所在层的第9帧按下F6键,在这一帧上我们选择这个矩形,在它上面点鼠标右键,在弹出的菜单上选Scale。然后拖动右面中间的手柄把矩形横向放大如下图所示,使矩形刚刚好覆盖住全部的文字。
然后,我们还在这一层的第1帧双击左键,将帧属性设置为形体渐变。再在时间轴窗口中这一层文字上点鼠标右键,选Mask,把这一层变为遮罩层。按下Ctrl-Enter看一下效果。一般情况下,因为受矩形起始和最后大小的影响,在中间的形体渐变过程中,可能不能完全遮盖住文字,这就需要我们多多调试,不断调整矩形的初始位置和大小以及终止位置和大小,以获得满意的效果。也可以按下时间轴窗口的洋葱皮按钮观察每一帧中变形的矩形能否完全遮盖住文字,如下图所示。
为了使打字机的效果更逼真一些,我们为动画加入光标。在最上面新建一个层,在场景中用线条工具画一个白色短横线,长度大约为一个文字的宽度。选择这条横线按F8转换为图形类图符,再把它移动到如下图所示位置。在第9帧按F6新建关键帧,用方向键把光标向右横向移动到感叹号后面。再把第1帧的帧属性设置为运动渐变即可。
现在打字机的效果就做好了。这时的时间轴窗口应如下图所示。
这里是这个示例的源文件。其实实现这个效果还有好多种方法,下面我们将要介绍的帧-帧动画也可以实现相同的效果。
 

        
上面的这个效果还不错吧,要是加上打字的声音就更好了。下面我们就来学习实现这一效果的一种与前面不同的动画技术:帧-帧动画。
帧-帧动画一般用于比较复杂的动画,把每一帧都做成关键帧,每一帧的内容都不相同,一般用于无法用运动渐变或形体渐变来实现的动画中。当然,它的缺点是文件会相对大一些,因为增加关键帧会使文件的大小增加得很快。不过既然它是Flash动画中的一项重要技术,我们不妨学一学,在关键的时候说不定也会用到它。
好了,我们现在就来介绍上面示例的制作过程。首先新建一个文件,设置好电影属性。选文字工具以适当大小颜色的字体在场景中写下一个字母‘W’,如下图左所示。在第2帧按F6插入关键帧,在这一帧上用箭头工具双击画面中的字母‘W’,进入文字编辑模式,见下图中。我们在字母W后再输入一个‘e’,如下图右所示。同样的办法,我们在第3帧也按F6插入关键帧,并在‘We’后再加入一个字母‘l’。以此类推,一直到把‘Welcome to Flashtimes!’这一串字母全部写完为止。
              
现在看一下效果,可以看到字母象打字机打出的文字那样一个一个蹦出来。为了更好地模仿出打字的效果,我们希望动画能稍稍慢一些,而且每个字母出现的时间间隔不相同,因为相同的时间间隔给人的感觉太机械了,不真实。
为此,我们来适当拉大每一帧之间的距离。选择箭头工具,按下Ctrl键,把鼠标移到最后一帧上,发现鼠标变成黑色,这时就可以移动帧的位置了。点住最后一帧,把它拖动到第55帧上。用同样的方法把倒数第2帧拖到第52帧上,倒数第3帧拖动到第49帧上,倒数第4帧拖到第47帧上,就这样把所有帧的间距拉开,使关键帧之间的距离从2帧到4帧不等,每两个相邻关键帧之间到底差几帧你自己掌握就行了。做好后的时间轴窗口如下图所示。
再预览一下动画,发现这回打字的效果真实多了。下面我们再做一个闪烁的光标,使打字的感觉更逼真一些。
在场景中用和字母相同的颜色选线条工具画一条短横线,长短粗细看起来象光标就行了。选中这条短横线,按F8键把它转换为电影片断类(Movie Clip)图符。把光标从工作区删除。按Ctrl-L打开图库窗口。选中这个电影片断图符,双击预览窗口进入此电影片断的编辑画面,在第2帧按F7插入一空帧。在第3帧上仍按F7插入一空帧,双击此帧弹出帧属性对话框,选Actions标签,点增加动作命令,在菜单中选择Goto,则窗口中出现‘Go to and Stop(1)’的字样。在窗口右下方的Control项后面的小方框里点一下,使对号出现,如右图:。这时动作窗口中的文字变成‘Go to and Play(1)’的字样。现在我们来看一下闪烁是怎样实现的,在第1帧显示光标,第2帧隐藏光标,第3帧执行跳转命令到第1帧继续执行,如此反复则光标不断循环显示隐藏的过程,从而实现了闪烁。
现在我们仍需要用帧-帧动画的方法在与文字出现的每一个对应关键帧上制作光标位置的动画。新建一个层,从图库中把光标拖出并移动到字母‘W’的右边,如右图所示:。再在与字母‘e’出现的第4帧里按F6生成关键帧,并把光标移动到‘e’的右边,如右图所示:。以此类推,在每一对应关键帧做好相应光标的位置。
现在我们的打字效果就很不错了。我在制作中还稍稍改动了一些,使得光标在动画起始与结束时闪烁若干帧,就得到我们上面看到的示例效果。下图是做好后的时间轴。
这里是这个示例的源文件。
功能蛮齐全的!~

TOP

很好的东西,不过我觉得在FLASH里做的文字效果不太好,它做一个小时的文字用SwishMax十分钟就做出来了,我就是用它配合FLASH弄文字的
发新话题