OK, I've just spent a couple of hours sorting this out, but I've got it working in Flash and Flex.
Displaying images in a TextField
You can load DisplayObjects into TextField <img />
tags including MovieClips, Sprites and embedded images.
In Flash or Flex if you want to display an embedded image then you will have to create a wrapper class that extends a DisplayObject
class (e.g. Sprite or MovieClip).
Make sure your text field is large enough to contain the image. During testing I thought things weren't working when I really had the TextField too small to display the whole image.
Flash Example
Simple example, all code is on the main timeline.
Create a dynamic TextField on the stage. Give it a useful name, I'm calling mine txtImageTest
.
Resize txtImageTest
to a decent size, e.g. 300x150px.
Create a new MovieClip symbol and give it a class name, e.g. imageClip1
.
Draw something in your new clip or place an embedded image inside imageClip1
.
Go back to the main timeline, deselect all objects and open the Actionscript editor on the first frame.
Turn on multiline and word-wrapping on the text field:
imageClip1.wordWrap = true;
imageClip1.multiline = true;
imageClip1.htmlText = "<p>You can include an image in your HTML text with the <img> tag.</p><p><img id='testImage' src='imageClip1' align='left' width='30' height='30' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>"
Save and test your movie.
Flex Example
Since we can't just create a new MovieClip in the library like we did in Flash we need to create a new class that performs the same task (this method also works in Flash if you want want to create a new clip in the library).
Here is my class for a black triangle bullet, called BlackArrow.as:
// Set the correct package for you class here.
package embed
{
import flash.display.Sprite;
import mx.core.BitmapAsset;
public class BlackArrow extends Sprite
{
// Embed the image you want to display here.
[Embed(source='assets/embed/triangleIcon_black.png')]
[Bindable]
private var TriangleImage:Class;
public function BlackArrow()
{
super();
// Instantiate the embedded image and add it to your display list.
var image:BitmapAsset = new TriangleImage();
addChild(image);
}
}
}
NOTE: Do not extend Bitmap (in Flash) or BitmapAsset (in Flex) as they do not scale or position properly in the TextField. Choose Sprite or something similar.
Here is an example of a class that displays this image in the TextField:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%">
<mx:Script>
<![CDATA[
import embed.BlackArrow;
// You must include a variable declaration of the same type as your
// wrapper class, otherwise the class won't be compiled into
// the SWF and you will get an IOError.
private var img2:BlackArrow;
]]>
</mx:Script>
<mx:Text id="txtResults1" width="100%" height="100%">
<mx:htmlText>
<![CDATA[<p>You can include an image in your HTML text with the <img> tag.</p><p><img id='testImage' src='embed.BlackArrow' align='left' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
Note that I am using the fully-qualified class name in the src
attribute of the image tag.
Final Notes
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…