[转]flash.text.engine 入门笔记

102 篇文章 0 订阅
34 篇文章 0 订阅

http://cjmxp007.blog.163.com/blog/static/35473837201052741810411/

Flash Player 10中提供的新功能之一:强大的文本排版能力无疑是Flash Player 10中最复杂的功能之一,连Adobe自己都觉得太复杂了,以至于推出一个TextLayout Framework来协助开发者进行开发。

小生我也是正在入门中,先撇开 TextLayout Framework不说,从最底层探索吧,一起在这里分享下我的学习笔记。

第一节:牛逼无比,万物之主的 TextBlock(flash.text.engine.TextBlock)

何为TextBlock?顾名思义我们可以称之为文本块,例如我们的一段文字就是视为放 在一个文本块里,文本块只是负责保存文本的内容和格式,仅当需要输出时才会确定输出文本的长度和面积。废话不说,看代码:

var txt:String = "这是一段非常长非常长的文本,即便实际上看上去并不长!";

//定义元素的字体以及格式

var format:ElementFormat = new ElementFormat(new FontDescription("Arial"));

//可恶,还是没有单位,要是能像CSS中的定义为12px多优美啊

format.fontSize = 12;

var textEle:TextElement = new TextElement(txt, format);

//新建立一个文本块,并将文本元素变为 其内容

var textBlock;TextBlock = new TextBlock();

textBlock.content = textEle;

/**

* 实际上textBlock.createTextLine有两个参数,第一个参数是上一行文本对象

* 第二个参数是输出文本行的宽度,我这里随便写了个50px

*/

var textLine:TextLine = textBlock.createTextLine(null, 50);

//设定文本行的位置

textLine.x = 10;

textLine.y = 10;

addChild(textLine);

//设定第二行文本,为何叫第二行文本, 因为在createTextLine的时候指定了上一行是textLine

var textLine2;TextLine = textBlock.createTextLine(textLine, 100);

textLine2.x = 10;

textLine2.y = textLine.y + textLine.height + 10;

addChild(textLine2);

在你的Flash CS4的时间轴上写下上面的代码编译运行看看会有什么效果?别忘记选择一下文本看看效果!

在上面的代码里,还能看到TextLine这个类,此类相当于是一个文本行,一个文本块 可以输出多个文本行,而这些文本行的位置可以任你随心所欲的放置在舞台上的任何角落,而他们的顺序也是你来指定的,很爽吧!

那么今天的分享先到这里。

下次分享下强大的 GraphicElement, 并且配合今天的分享的知识一起来实现一个更加牛逼的效果!

回 顾一下flash.text.TextField这个类,在图文混排的时候存在什么缺陷?

相信很多人都认为其结构描述能力太差,图片不支持inline,而且要更换文本域内的图 片也会显得非常麻烦(虽然flash.text.engine也不见得简单)。

首先介绍下GraphicElement类,此类顾名思义就是一个图像元素,纯属一个表 现型的元素,相当于HTML中的IMG,只是其不具备读取图像功能,只能通过Loader将外部图片读取,然后把Loader作为其Content。

看看如下实例代码:

//绘制一个红色矩形来作为我们的图片

var shape:Shape = new Shape();

shape.graphics.beginFill(0xff0000);

shape.graphics.drawRect(0, 0, 100, 100);

shape.graphics.endFill();

//建立一个图像元素,并将我们的 shape作为其显示的内容,同时也可以成为一个Loader

var graphicEle:GraphicElement = new GraphicElement(shape, shape.width, shape.height);

//建立一个文本块,用于装载图像元素并 输出行

var textBlock:TextBlock = new TextBlock();

textBlock.content = graphicEle;

var textLine:TextLine = textBlock.createTextLine(null, 200);

textLine.x = 100;

textLine.y = 100;

addChild(textLine);

上面的例子已经简单介绍了 GraphicElement类的使用方法,那么如何实现图片inline的图文混排呢?在flash.text.engine里提供了一个 GroupElement类,通过其能将所有的元素组合起来,再看如下代码:

//绘制一个红色矩形来作为我们的图片

var shape:Shape = new Shape();

shape.graphics.beginFill(0xff0000);

shape.graphics.drawRect(0, 0, 100, 100);

shape.graphics.endFill();

//建立一个图像元素,并将我们的 shape作为其显示的内容,同时也可以成为一个Loader

var graphicEle:GraphicElement = new GraphicElement(shape, shape.width, shape.height);

//建立一个文本元素

var format:ElementFormat = new ElementFormat(new FontDescription("Arial"));

format.fontSize = 12;

var textEle:TextElement = new TextElement("Hello World!", format);

//把所有刚刚建立的元素丢到一个 Vector里面,并且组合成一个组元素

var eleVector:Vector.<ContentElement> = new Vector.<ContentElement>();

eleVector.push(textEle, graphicEle);

var groupEle:GroupElement = new GroupElement(eleVector);

//建立一个文本块,用于装载图像元素并 输出行

var textBlock:TextBlock = new TextBlock();

textBlock.content = groupEle;

var textLine:TextLine = textBlock.createTextLine(null, 300);

textLine.x = 100;

textLine.y = 100;

addChild(textLine);

通过如上的代码,各位看官应该能对 flash.text.engine有了个大体的认识了吧,至于排版的细节,相信也不需要小弟在这里赘述了,因为textline更搞定一切,加上小弟才 疏学浅,还不如各位看官直接查阅帮助文档的属性来得有效。

一些资料

http://www.insideria.com/2009/03/flash-text-engine.html
http://www.riameeting.com/node/658
http://tj007-bo.javaeye.com/blog/333421
http://zengrong.net/post/770.htm

Adobe官方的一个例子

        在labs.adobe.com上更新了有关于FLASH PLAYER 10中一个特别重要的功能,就是高级文字处理功能的框架组件,其实在FLASH CS4刚刚发表的时候,我就已经测试了大量的有关于高级文字处理的一些功能,但是一直没有写成教程,因为总觉得不够,过于简单,如果光光是帮助文档的那些 东西,其实有没有这个高级处理功能都无所谓,只要你愿意花点功夫,早期的文本处理完全够用。
       不过,这一次TextLayout Framework的发布足够强劲,光是DEMO看的让人眼花缭乱,才是真正展示了高级文本处理的“高级”在哪里,所以http://labs.adobe.com/technologies/textlayout/上 的DEMO你绝对不可错过。不过更别忘了去以下地址下载:
http://labs.adobe.com/downloads/textlayout.html
        我 的建议是三项下载都下载,因为里面的示例比较全面,还外加了扩展组件和FLEX的MXML代码。关于用FLEX来编写,就需要大家把FLEX 3升级到3.02,然后在属性-编译版块,把默认的FLASH PLAYER 版本改成10.0.0,或者直接升级到FLEX 4也成,不过FLEX 4更新的实在太快,尝试下就可,主要还是尽快升级到3.02版本。


        下面这个是集合的文字处理的大DEMO,你可以感受感 受
        http://labs.adobe.com/technologies/textlayout/demos/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值