艺虎动画 > flash写字效果:书写星星幻影坠落文字

flash写字效果:书写星星幻影坠落文字

翼虎动漫   2010-6-19

 

 

大家先来看看效果:

/UploadTeach/201005/20100521114325830.swf

总的来说,此效果分成两大步骤来完成。。第一,是先制作一个模拟星星坠落效果的影片剪辑。第二,是利用做好的这个星星影片剪辑,来做一个遮罩写字的效果。


接下来,我们直接开始吧。。。


打开Flash8,新建一个场景,场景大小可以设成800X600,帧频可以设成10,例图:


我们可以找来一个星星的素材或者直接在flash里面绘制下,作为一个元件,放入“库”里面,



然后点击库面板左下方的新建按钮,我们新建一个影片剪辑,



确定后,我们就进入了影片剪辑“元件1”的编辑场景里,



选中图层的第一帧,然后把库中的星星元件拖入到场景中,在图层的第50帧插入一个关键帧,(可按F6) ,选择第50帧,把星星垂直移到一段距离(可按shift+键盘方向向下键),移到正下方,作为坠落的距离,然后点击左边工具面板的任意变形工具,可看到星星周围多了许多控制点,



将鼠标移到边星星角上的点附近,鼠标会变成一个旋转提示,点住旋转星星一些角度即可,接着在图层的第1帧与第50帧之间,右键,然后创建补间动画,



然后可在下方的属性面板中的缓动后面,数值可调成-100(-100是一个从慢到快的补间动画效果。而+100则是从快到慢的补间动画效果),接着再选中第1帧。再选中场景中的星星元件,即可在下面面板看到选项,将“颜色”后面选成,Alpha,100%。。。之后同理,选中第50帧,调成Alpha,0%即可(这是一个透明度的变化动画设置)。。现在,一个星星旋转掉落,透明度逐渐变淡的动画,就完成了。。。 但我们需要做的是星星幻影坠落效果,所以我们还需要在刚刚的第一层补间动画上面,再加上同样的星星效果,从坠落的时间长短不同,来达到一个幻影的效果。。所以,我们再新建几层,如图面板左下方的第一个按钮即是新建图层按钮,


用上面同样的做法,做成如图示:




然后分别选中图层1到图层5,在每个图层的补间动画的属性中,“缓动”数值可以依次设成-100,-60,-20,20,60,来强化各个图层的星星坠落的时间差,达到强化幻影的效果。。。。


最后,在最上面再添加一个图层,在第50帧添加一个空白关键帧(可按F8),打开“动作-帧”AS面板(可按F9),添加一个AS语句:this.removeMovieClip() 来控制这整个星星动画。





。。。至此,第一大步骤就算完成了。。。
接着进行第二大步骤的操作。。再次点击新建影片剪辑按钮,新建影片剪辑“元件2”,此时,我们可以看到“库”面板中,就已经多了一个我们刚刚制作完成的“元件1”的影片剪辑,




这个就是我们刚刚制作的星星坠落动画了,把它从库中拖入到新建的元件2影片剪辑场景中,在场景中选中它,然后在下面的属性面板中,将它的属性名字改成circle_star  ,




然后新建一图层,选中新图层的第一帧,左边面板选择文本工具,在场景中打入我们想要的字,例如 flash路上,,



调整好文字位置之后,可以按ctrl+B两次,把文字打散,方便后面的操作。接下来就是很关键的一步了,制作文字的遮罩书写效果。。。在文字的图层上面,再新建一图层,,可命名图层为“画笔”层,




然后选中左边面板的刷子工具,然后每插入一帧,就画上一点(可按F6,方便操作),按写字的逻辑,一点一点的按照“flash路上”这几个字的书写顺序,描完为止。。。如下图:





最后一帧终于也描完了。。。然后在“画笔”这一图层上,右键,选择“遮罩层”,在“画笔”与“文字”层之间,创建一个遮罩动画(注意:用来遮罩的图层要放在上面一层,而被遮罩的图层,则是放在下面一层)   ,
            
再次选中“星星”这一图层,按照“画笔”图层的制作方法,类同。每插入新一帧,就在场景中调整星星的位置,让它跟着上面图层遮罩效果的书写笔画,笔画动画画到哪里,星星位置就停在哪里(同样,也可以利用F6,边插入关键帧,边调整位置,方便操作)。。。












最后再在“画笔”图层上面新建一图层,在第一帧加上AS语句来控制整个动画,F9打开“动作-帧”面板,加上:

time=3
_root.star.circle_star._visible = 0;
_root.star.circle_star.i = 1;
_root.star.circle_star.onEnterFrame. = function () {
if (this.i%time == 0) {
  this.duplicateMovieClip ("circle_star"+this.i, this.i);
}
this.i++;
};

这些语句即可。。
现在整个动画制作也就接近尾声了。点击场景1,退出元件2影片剪辑的制作,回到主场中,这时又可发现,“库”面板中又多了我们刚刚制作的星星随着遮罩文字描绘移动的效果,把库中的元件2直接拖到主场景中,然后选中它,在下面的属性面板中,将它的名字改为star。




整个动画制作到这里,就算是全部完成了。。。现在按ctrl+enter发布预览,赶快去看看效果吧。。。。