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

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/