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