Scaleform实现图文混排 Using embedded images in TextField

Scaleform实现图文混排 Using embedded images in TextField

据Scaleform官方讲，GFx2.0 alpha5版本已经支持了用图片替换字符串的功能，并且在alpha6版本中加入了对HTML < IMG > 标签的支持。所以实现图文混排，目前有2种方法：

1。Substitution of character strings with images 图片替换字符串

要替换的图片需要一个导出名。具体步骤如下：

a> 导入一个bitmap到库。 ( 文件 --> 导入 --> 导入到库 )

b> 在库面板图片名称上点右键，然后在弹出菜单上选择“链接”。

c> 选择“Export for ActionScript(为ActionScript导出)”和“Export in first Frame(在第一帧导出)”，然后在标识符里写入导出名(例如myImage)。

d> 填好名字后点“确定”...

到这里，图片的导出名就已经定义好了。导出名将会在创建BitmapData时用到。例如:

import flash.display.BitmapData;
var imageBmp:BitmapData = BitmapData.loadBitmap("myImage");

注意：“import flash.display.BitmapData”不能省略，不然结果将会是"undefined"!

GFx 2.0为Flash的TextField扩展了两个函数: "setImageSubstitutions" 和 "updateImageSubstitution"。这里只用setImageSubstitutions这个函数。

public setImageSubstitutions(substInfoArr:Array);
public setImageSubstitutions(substInfo:Object);

"substInfoArr"是以个数组，里面的每个Object都应该包含下列属性：

subString:String - 制定将要被替换的字符串，该参数不能省

image : BitmapData - 用来替换上面制定的字符串的图片名称(前面定义好的导出名)，该参数不能省

width : Number - 图片宽，可选参数

height : Number - 图片高，可选参数

baseLineY : Number - Y偏移，默认=图片高，可选参数

id : String - 制定一个id供"updateImageSubstitution"函数来调用，可选参数

注意："setImageSubstitutions" 会加入到一个内部的列表。若想取消上述设置的话只需要调用"setImageSubstitutions",参数为"null"。

下面是我的例子：

   _global.gfxExtensions = true;
        import flash.display.BitmapData;

        var b1:BitmapData = BitmapData.loadBitmap( "bitmap1" );
        var b2:BitmapData = BitmapData.loadBitmap( "bitmap2" );
        var b3:BitmapData = BitmapData.loadBitmap( "bitmap3" );
        var b4:BitmapData = BitmapData.loadBitmap( "bitmap4" );
        var b5:BitmapData = BitmapData.loadBitmap( "bitmap5" );
        var b6:BitmapData = BitmapData.loadBitmap( "bitmap6" );
        var b7:BitmapData = BitmapData.loadBitmap( "bitmap7" );
        var b8:BitmapData = BitmapData.loadBitmap( "bitmap8" );
        var b9:BitmapData = BitmapData.loadBitmap( "bitmap9" );
        var b10:BitmapData = BitmapData.loadBitmap( "bitmap10" );

        var a = new Array;
        a[1] = { subString:"xiao1", image:b1 };
        a[2] = { subString:"xiao2", image:b2 };
        a[3] = { subString:"xiao3", image:b3 };
        a[4] = { subString:"xiao4", image:b4 };
        a[5] = { subString:"xiao5", image:b5 };
        a[6] = { subString:"da1", image:b6 , baseLine:20, width: 64, height:64};
        a[7] = { subString:"da2", image:b7 , baseLine:20, width: 64, height:64};
        a[8] = { subString:"da3", image:b8 , baseLine:20, width: 64, height:64};
        a[9] = { subString:"da4", image:b9 , baseLine:20, width: 64, height:64};
        a[10] = { subString:"da5", image:b10 , baseLine:20, width: 64, height:64};
        m_mcText.setImageSubstitutions( a );

        m_mcText.autoSize = true;
        m_mcText.html = true;
        m_mcText.htmlText = "<font size='24' color='#0000FF'>This is blue</font>, xiao1, da1 24-point text";

　　效果图：

2. Using <IMG> tag in HTML ，通过HTML < IMG >标签

先看一个例子：

t.htmlText = "<p align='right'>abra<img src='myImage' width='20' height='30' align='baseline' vspace='-10'>bed232</p>";

"myImage"是导出名，具体步骤看上面

当前< IMG >标签标签支持的属性如下：

src - 链接名，不能省略

width - 图片宽

height - 图片高

align - 目前只支持"baseline".

vspace -

不支持的属性：

id - Specifies the name for the movie clip instance (created by Flash Player) that contains the embedded image file, SWF file, or movie clip.

align - "left" and "right". Specifies the horizontal alignment of the embedded image within the text field.

hspace - For "left" and "right" it specifies the amount of horizontal space that surrounds the image where no text appears.

以上两种方法，我只试验成功了方法1，方法2暂没成功，有成功的不妨告诉下。

另外这种方法实现的图文混排，只支持静态bitmap，想做成动态表情那样的话就需要用到updateImageSubstitution函数了，原理也简单，就是序列帧动画。

最后，再说明一下，_global.gfxExtensions = true 是必须的

版权声明：本篇为原创文章，允许转载，但转载时请务必以超链接形式标明文章的原始出处和作者信息。请尊重本人的劳动成果，谢谢！

小祥的BLOG http://xfxsworld.cnblogs.com

发表于 2009-01-04 13:12 小祥阅读(2806) 评论(3) 编辑收藏举报

刷新页面返回顶部

Scaleform实现图文混排 Using embedded images in TextField

公告

导航