posts - 274,  comments - 1258,  trackbacks - 0

为大家解决动态文本的特效显示与文件大小之间的矛盾

作者:HBrO   类型:闪吧BBS   来源:闪吧

  在论坛,笔者会不时见到一些人问关于动态文本的问题,其中问得最多的是动态文本的透明,旋转与遮罩等特效,以及嵌入字符后文件变大等问题.
为了让更多的人能够更好地使用动态文本,以及避免论坛里重复出现类似的帖子,笔者下定决心,写一个针对上述问题的动态文本使用教程.
说明:
1 二楼主要讨论文本显示的原理问题,理论性比较强,如果读者只是为了解决问题,做出需要的效果的话,二楼的内容可以跳过.
2 三楼主要提出问题的解决方案,包括显示,以及避免文件变大的问题.
3 要在显示和文件大小这对矛盾处理好的情况下,做出需要的效果有些时候是不行的,为此,四楼提供了一些替代效果的思维方法以及参考方案.
4 替代效果用了不好,该怎么办?直接从字体文件下手,五楼给大家介绍一个字体编辑软件.帮助你减少字体文件大小以后再嵌入到flash中.
问:为什么动态文本不能透明,旋转和遮罩?
答:在默认情况下,静态文本在生成Flash时就会把文本相应的矢量信息也保存到swf中,这种做法可以避免作品拿到别的机器上时因缺乏字体而无法正常显示文本的问题.而动态文本则不会作这样的处理,因为文本内容是变化的,如果像静态文本那样,就要把所有文字的矢量信息都生成到Flash中,导致文件变得很大.因此,默认情况下,在动态文本要显示字符的时候,Flash播放器会实时从系统里调用字体来显示,这样显示的字体叫设备字体.
设备字体调用到Flash以后,只剩下一些点阵信息,不存在矢量信息(这也是文本出现锯齿的原因).所以,它不能像图形那样进行几何运算,不能得出旋转后矢量到底是什么形状.
按此在新窗口浏览图片
至于为什么不能透明,笔者认为,透明的显示还要计算透明层与下面层的颜色叠加.至于在哪个位置叠加,也是需要矢量信息的支持的.
按此在新窗口浏览图片
然后,遮罩也是一种特效,它是需要遮罩层与被遮罩层的轮廓叠加才能算出图形的形状,所以设备字体显示的动态文本也是不行的.
问:如何解决这个问题呢?
答:很简单的一个办法.选中动态文本以后,在属性面板里点"字符"按钮,选择"所有字符"就可以了.因为这样实际上是嵌入了字体的矢量信息,所以就可以进行特效的处理了.
按此在新窗口浏览图片
问:上面的问题是解决了,可是这样生成的文件很大(几M到十几M),何解?
答:上面说了,嵌入字体实际上是嵌入了字体的矢量信息.如果你嵌入了所有字符,实际上你把整个字体文件都放到swf文件里头.
假设你用的是宋体,你可以进行如下操作:
打开系统的控制面板,并双击"字体"进入
按此在新窗口浏览图片
找到"宋体"后,看看文件的大小,你的swf也就会因此而增加(笔者的机这个文件为10M大,所以,嵌入字体轮廓后,swf就会大10M多.
按此在新窗口浏览图片
问:这么大的Flash放到网上很不实际,想把它变小该如何处理?
答:这需要具体问题具体分析.
问:我的动态文本显示的肯定是数字,该如何操作?
答:"字符"选项那里按下图选择就可以了.这样swf文件只多了10个数字的矢量信息,文件不会大很多.
按此在新窗口浏览图片
问:现在我要做一个导航菜单,里头用动态文本设置标签,而且动态文本需要使用特效的,该怎么做呢?
答:作为导航菜单,你的栏目一般都比较固定,所以,你的菜单项里用过哪些字就嵌哪些字的轮廓就可以了.(见下图)
按此在新窗口浏览图片
这样,下次要更新栏目的时候,打开源文件,改文本值的同时,也相应地改变嵌入的字体轮廓.
问:但是更多的时候,要载入文本,而且内容根本就不知道.就好像这个:
按此在新窗口浏览图片
我载入的歌词内容真的不知道,而且也不排除有英文,日文等,而且我又需要遮罩的效果,这该怎么做才能既有效果,又不会使文件变大呢?
答:虽然不能用遮罩,但是遮盖还是可以的,在本歌词播放器中,真正越出遮罩的部分只有以下红色标记的区域.
按此在新窗口浏览图片
所以,在红色标记区域画两块跟背景色一样的矩形,盖住动态文本就可以了.
问:如果背景复杂些,不是单一颜色,而且可能有多个图层,那处理起来不就很麻烦?万一背景改了,或者要移动动态文本,那改起来岂不是很难?这问题可以解决吗?
答:遇到这种情况,建议把背景部分转换为一个元件,然后背景层上面放文本,文本上再放一层,内容跟背景层一样,背景层上面再放一层,用于遮罩一个背景层.其形状就是红色区域的形状(最终效果如下图)
按此在新窗口浏览图片
如果要改背景的话,就直接修改背景元件,要移动文本的话,就把文本和遮罩一起移动,操作比较方便.
问:跟上面一样,也需要所有字符都能显示,但是要做透明效果,又该如何呢?
答:假设现在要用动态文本做这么个效果.按此在新窗口浏览图片

那是不是非要嵌入字体轮廓才能实现呢?
答案是否定的.
这个效果笔者用Flash做的,可能大家会想到这是用Alpha补间实现的.其实笔者是用了色调补间来做的,第一帧色调白色,最后一帧色调"无",文本本身红色.
这说明了,在背景为纯色的情况下,可以用色调来代替Alpha,而色调虽然是特效,但是它实际上只是颜色的复合,结果让文本显示单一颜色,调用
设备字体就可以显示出来.所以,在这种情况下,可以用色调效果来取代透明效果,以避免字体轮廓的嵌入.
但是如果背景本身是复杂的图片,或者是渐变色,多个色块组成的话,就非得要用透明度了.如果要避免字体轮廓的嵌入,建议采用一些替代效果,笔者会在后面给大家介绍替代效果的一些参考方案.
问:旋转的可以解决吗?
答:因为旋转根本上改变了点阵的分布(假如用设备字体),所以必须使用矢量,也就是嵌入字符,所以,笔者也会提供一些替代效果.
问:倾斜也好像不行,又该如何解决呢?
答:倾斜其实是缩放与旋转的结合,所以也是需要字体轮廓(关于倾斜,缩放与旋转的关系,可以参考这个帖子
问:可以说说替代透明效果的参考方案吗?
答:如果要最终,长期显示透明效果,目前笔者还没有很好的替代方案,但是,如果是从透明到不透明的变化,就可以找到个替代方案.
以下面的效果为例.
按此在新窗口浏览图片
显然,这种效果的实现需要字体轮廓,使文件变得很大.
所以,在这种情况下,就不要太执着于要这种效果,想个接近点的.
如果文本不能透明,那么文字出来的时候就会显得不自然,怎样才能有渐出效果呢?
笔者认为,可以在文本出来的时候,先拿些全不透明的东西先遮盖一下,然后让不透明的东西渐渐消失,就可以达到渐出的效果了.而且效果也不会比上面的差.
按此在新窗口浏览图片
问:旋转呢?
答:像一行文字的旋转,其实每个字是绕着同一个点做圆周运动的结果.所以,可以把文字做成圆周运动的效果.而文字本身不转动.
原来想做的效果:
按此在新窗口浏览图片

替代效果:按此在新窗口浏览图片
问:这只是一些特殊情况,实际上有些时候,有些效果根本无可替代的,怎么办?
答:在回答该问题之前,请先允许我讲几句话:
上述的效果是一些基本效果,在此基础上,很多效果都可以替代得很好,所以希望大家通过这些参考的替代方案,可以举一反三.
毕竟替代效果是解决动态文本显示以及文件大小之间的矛盾的,这两者往往不可兼得,所以,替代效果也不能达到两全其美.但是,大家如果能把思维发散出去,是可以想到比较好的替代效果的,有时可能比原来的效果还要酷.
下面讲下,真需要嵌入所有字体轮廓时,有什么办法减小文件的大小呢?
大家应该见过乱码吧.其实乱码也是调用字体文件来显示的.既然是乱码,我们没有必要让它显示出来.
那么,是否就把非乱码的字符都敲在字符选项那里呢?
显然这是件吃力不讨好的事情,也极其难保证能输入所有的正常字符.所以,这里介绍一个终极方案:修改字体文件.
字体文件怎么修改呢?介绍一个软件:Font Creator;
下载:(文件太大了,上传下了)
安装并破解后运行.启动后的界面如下:
按此在新窗口浏览图片
现在,假如你要嵌入一种字体,操作如下:
菜单"File"-"Open",可以选择安装了的字体,也可以选择机器上其它字体文件.
然后,在打开的对话框里找到你需要用的字体(建议打开前先备份).
按此在新窗口浏览图片
打开后,你会发现所有的文字都以矢量图的方式显示出来.
按此在新窗口浏览图片
然后,如果你发现有些字符是以乱码的形式显示出来的,点中这些字(可以用Ctrl和Shift键来多选),按一下delete键就删除了.
接着保存文件,然后点"Font-install"(建议做这步之前,先关闭所有其它Windows程序),接着启动Flash(如果已经在运行,请重新启动)
现在,创建一个动态文本,选中你刚才编辑过的字体,然后嵌入字体轮廓.
导出一个swf文件,你就会发现,你的Flash文件将比以前要小(但是可能还会比较大,如果这样的话,就自己衡量下吧.根据需要再删除一些用到的可能几乎为0的字体).
问:Font Creator可以添加或修改文字吗?
答:可以.可以双击字符进入编辑状态以修改文字的形状.
这里,笔者做了个小玩意,是通过修改字体实现的.注意了,这不需要AS就可以实现的喔!
点击浏览该文件
   责任编辑:uufeng    时间:2005年11月23日

---
本文章使用开源内容管理kicoy发布

posted on 2006-06-12 11:41 踏雪赤兔 阅读(495) 评论(0)  编辑 收藏 引用 所属分类: 玩转编程
只有注册用户登录后才能发表评论。

百度空间| 见闻日记| 编程感悟
我的twitter


LOGO

自我介绍:百度厂基础平台车间的一名挨踢民工。擅长C++、算法、语言设计、分布式计算,也用过Java,Python, PHP,JS/AS等语言开发。请关注我的twitter (免翻墙版) 发QQ消息


添加到收藏夹 Locations of visitors to this page

常用链接

随笔分类(300)

随笔档案(274)

文章分类(38)

相册

收藏夹(54)

与博主互动

博客手拉手

搜索

  •  

积分与排名

  • 积分 - 392913
  • 排名 - 10

最新评论

阅读排行榜

评论排行榜