中国IT动力,最新最全的IT技术教程
最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档
首 页 | 程序开发 | 操作系统 | 软件应用 | 图形图象 | 网络应用 | 精文荟萃 | 教育认证 | 硬件维护 | 未整理篇 | 站长教程
ASP JS PHP工程 ASP.NET 网站建设 UML J2EESUN .NET VC VB VFP 网络维护 数据库 DB2 SQL2000 Oracle Mysql
服务器 Win2000 Office C DreamWeaver FireWorks Flash PhotoShop 上网宝典 CorelDraw 协议大全 网络安全 微软认证
硬件维护  CPU  主板  硬盘  内存  显卡  显示器  键盘鼠标  声卡音箱  打印机  机箱电源  BIOS  网卡  C#  Java  Delphi  vs.net2005
  当前位置:> 图形图象 > 网页设计 > Flash
Flash文字动态效果:描红和描边
作者:未知 时间:2004-12-08 12:12 出处:Yesky 责编:chinaitpower
              摘要:Flash文字动态效果:描红和描边
  Flash动画效果是千变万化的,但无论怎样复杂变化,都离不开最基本的flash命令。用flash做文字按笔画显示的效果也有很多做法,今天我们就用flash mx 2004介绍两种不同文字显示效果的做法。

  第一种主要利用原始的遮罩效果,第二种用引导层效果和一些action命令来实现。


点击按钮切换两种效果演示

  一、书法描红演示效果

  1.新建文档,设置文档尺寸为400*300

  2.用“文字工具”在场景中写出一个汉字,我们用“王”字举例。“王”字字体设置为“楷体”,文字字号为“230”,颜色为“黑色”。

  3.将文字打散,用“文档”菜单中的“分离”命令(或者是快捷键ctrl+B)。打散后用“墨水瓶工具”描边,描边的颜色为“红色”,粗细为“4”。这时文字呈现的是主体为“黑色”,外面被“红色”边框包围的效果。

  4.单击文字主体的“黑色”部分,将“黑色”部分移动红色边框以外其他位置。按照文字的书写笔画和书写顺序,将每一划分离出来。“王”字的笔画分离后的效果如下图:



  5.在场景的图层中按照笔画的多少,增加图层。把每一划都放在一个单独的图层里。比如“王”共有三横一竖,我们就增加四层,分别是“横一”(第一划)、“横二”(第二划)、“横三”(第三划)、“竖”(第四划)。然后把“王”字的这四个笔画都单独放到相应的图层里,并放回到原来的位置,使文字效果看起来有回到的原始的状态。如下图:

  这里的操作不难,但比较烦琐,大家可以先把黑色部分文字复制四个,对每一个都用橡皮工具擦除不需要的部分。然后将每部分放入相应图层中。

  6.在每个笔画层下面都添加一个图层,分别叫“横一遮”、“横二遮”、“横三遮”、“竖遮”。

  7.在“横一”层的第十帧插入关键帧。“横一遮”层的第1帧笔画起始位置用“矩形工具”绘制一个无边框的黑色矩形,并将其“分离”。然后在“横一遮”层的第10帧插入关键帧,用“任意变形工具”将这个矩形放大至能够覆盖“横一”层全部笔画为止。

  在“横一遮”层创建“形状”补间动作。最后用鼠标右键单击“横一”层,在弹出的菜单中选择“遮罩层”。

  用同样的方法为其他笔画创建出遮罩效果,修改不同层的位置。最后的时间轴效果图为:


  二、文字边框霓虹灯显示效果

  1.新建“文字”影片剪辑

  2.在“文字”剪辑内编辑文字。写入“心”字,字体为“楷体”,字号为“230”,颜色为“黑色”。该层改名为“文字”。

  3.用“文档”菜单的“分离”命令(或ctrl+b)将文字打散。然后用“墨水瓶工具”为被打散的“心”字描边,描边的颜色为“红色”,画笔粗细为“4”。这时文字效果为主体是“黑色”,外面有“红色”边框包围。


  4.新建第二个影片剪辑,“圆点”影片剪辑。可以用“椭圆工具”在绘制一个无框蓝色的圆点,位置在编辑区的中心,可以略小点。

  5.回到“文字”剪辑,增加一个“圆点层”图层,并将“圆点层”放置于“文字层”下方。

  6.把“圆点”剪辑从库中拖放到“文字”剪辑的“圆点层”内,将“圆点”剪辑的“剪辑名称”设置为“yd”。

  .

  7.将“文字”层设置为“引导层”,这时在“文字”层前面的图标可能是个“锤子”状,

  这需要在对“圆点层”的属性进行修改。用鼠标右键单击“圆点层”,选择“属性”,将“圆点层”的属性修改为“被引导”。

  8.因为“心”字是被“分离”的,所以可以将“心”字中黑色部分删除,只留下红色边框。选择“橡皮擦工具”,用最小的“橡皮擦形状”分别将“心”字剩下的四个红色边框的一小段擦除,使原来封闭的边框不封闭(这个小缺口越小,最终的效果越好,大家在擦除的时候可以用放大工具,先将图形放大。本例为了演示明显,所以缺口较大)。不封闭的图形就可以作为引导层实现引导效果。

  9.在“文字”层的第15、16、60、61、75、76、90帧插入关键帧。“圆点层”的第90帧插入关键帧,然后再对该层第15、16、60、61、75、76帧创建关键帧(应先在第90帧创建关键帧,再对其他帧操作)。将“圆点”剪辑放到各帧相应的位置,使“文字层”可以对“圆点”进行正确的引导。如下图

  10.在“文字”层能再增加“程序”图层,在该层第1帧内写入程序:

  yd._visible = 0;   //设置点的alpha
  this.moveTo(yd._x, yd._y);   //初始化点的坐标
  this.lineStyle(4, 0xff0000, 100);   //设置当前画笔的样式,0x表示ff0000是十六进制

  //设置每帧事件

  onEnterFrame = function ()
   {
                     lineTo(yd._x, yd._y);    //设置点的目的坐标
  };

  好了,我们可以把这个“文字”剪辑拖放到场景中进行演示了。在“库”中,这个“文字”剪辑是不是只是一个“圆点”?不要担心,把它放在场景里,演示一下吧。

  11.演示时,你会发现现在的效果中笔画是连起来的,

  改正这种现象只要在每一笔画的结束和另一笔画开始之间的的画笔样式的alpha值修改为“0”就可以了。

  我们在第15、60、75、帧设置动作命令:

  this.lineStyle(4, 0xff0000, 0); //设置当前画笔粗细为“4”,颜色为“红色”,alpha值为“0”

  在第16、61、76帧设置动作命令:

  this.lineStyle(4, 0xff0000, 100); //设置当前画笔粗细为“4”,颜色为“红色”,alpha值为“100”

  好了,现在可以演示出比较满意的效果了吧。

关闭本页
 
首页 | 投资与合作 | 服务条款 | 隐私政策 | 收藏本站 | 设为首页 | 新用户注册 | 免责声明 | 使用帮助
Copyright ©2005-2008 chinaitpower.com All rights reserved. www.chinaitpower.com 版权所有