Wrapping TextFlow around images and players

Image has no attribute to show its position, so it can be on the left edge and right edge, which is the “float” feature, or just regarded as a character, which is the “inline graphic”.

If you want to put image in the middle of texts, the method will be a little bit complex. You can just put it onto a separate sprite as follows.

You can make sprite 0-3 as linked containers. Then one textflow can flow from sprite 0 to sprite 3.

var cc0:ContainerController = new ContainerController(sprite0,200,100);

var cc1:ContainerController = new ContainerController(sprite1,200,100);

var cc2:ContainerController = new ContainerController(sprite2,200,100);

var cc3:ContainerController = new ContainerController(sprite3,200,100);

textFlow.flowComposer.addController(cc0);

textFlow.flowComposer.addController(cc1);

textFlow.flowComposer.addController(cc2);

textFlow.flowComposer.addController(cc3);

textFlow.flowComposer.updateAllControllers();

Because s:RichEditableText is also a sprite, you can add sprite 0-3 onto s:RichEditableText. 

The easiest way is to take advantage of "float" attribute, which is similar with HTML float layout. But the image will float to left or right. In TLF, image, video, swf can be embeded into textflow through InlineGraphicElement. You can feed InlineGraphicElement a URL or flash.display.DisplayObject. Sprite, Shape, and Flex Components are all extends from DisplayObject. But we CANNOT promise it will be shown if you embeded too many level of flex components as ILG and finally put textflow into a RichEditableText. Some flex components, such as RichEditableText, are based on TLF, but we are not developing those components. You may want to ask Flex team to confirm that.

• float<String>. Controls the placement of the graphic. The float property may have these values:

• none Graphic will appear inline with the text.

• left Graphic will appear to the left of the text, and the text will wrap around it.

• right Graphic will appear to the right of the text, and the text will wrap around it.

• start Graphic will appear on the leading edge of the text, and the text will wrap around it. The leading edge is the left if the direction of the paragraph is ltr, and the right if the direction is rtl.

• end Graphic will appear on the trailing edge of the text, and the text will wrap around it. The trailing edge is the right if the direction of the paragraph is ltr, and the left if the direction is rtl.

If a container has floats, and has verticalAlign=“justify”, the vertical justification will be ignored.

A float will appear at the same level as the line it is on if it can while maintaining the anchor in the line. If putting the float at the same level as the line (and thus wrapping the line around the float) would cause the anchor to get pushed out of the line, then the float appears below the line.

If the float width exceeds the column width it places the float anyway, and the float may either bleed over other content or be clipped. If the float height exceeds the column height, the float is pushed to the next column or container.

You can control how close the text and the image are by setting the padding properties of the img element. Setting the padding values causes the img element to be treated as slightly larger (or smaller if the padding is negative) than its width and height would indicate. Setting the paddingLeft of a left float will cause the float to be indented from the left edge, and setting the paddingTop causes it to get pushed down.