Skip to main content
Participant
November 18, 2009
Answered

Using Image for InlineGraphicElement?

  • November 18, 2009
  • 1 reply
  • 962 views

Hi,

This is my first foray into the TLF - I'm trying to insert a an Image object as a InlineGaphicElement - the Image is being loaded at run time - but it's not showing up. If I use an embedded image in a Class it all works fine:

This works - the image is visible

[Embed(source="../assets/smile.png")]
[Bindable]
static public var imgSmile:Class;

private var textFlow:TextFlow = new TextFlow();

...


private function OnCreationComplete():void
{
  var p:ParagraphElement = new ParagraphElement();
  var span:SpanElement = new SpanElement();
   
  var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
  inlineGraphicElement.source = imgSmile;


  span.text = "This is some text ";
  p.addChild(span)
  p.addChild(inlineGraphicElement);
  textFlow.addChild(p);
   
  var sprite:Sprite = new Sprite();
  canvas.rawChildren.addChild(sprite);
  var controller:IContainerController = new DisplayObjectContainerController(sprite, 600, 400);
  textFlow.flowComposer.addController(controller);
  textFlow.flowComposer.updateAllContainers();
}

This doesn't work - no image appears

public var image:Image = new Image();
private var textFlow:TextFlow = new TextFlow();

...


private function OnCreationComplete():void
{
  var p:ParagraphElement = new ParagraphElement();
  var span:SpanElement = new SpanElement();
   
  image.load('../assets/smile.png');
        
  var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
  inlineGraphicElement.source = image;


  span.text = "This is some text ";
  p.addChild(span)
  p.addChild(inlineGraphicElement);
  textFlow.addChild(p);
   
  var sprite:Sprite = new Sprite();
  canvas.rawChildren.addChild(sprite);
  var controller:IContainerController = new DisplayObjectContainerController(sprite, 600, 400);
  textFlow.flowComposer.addController(controller);
  textFlow.flowComposer.updateAllContainers();
}

What am I doing wrong?

Cheers

This topic has been closed for replies.
Correct answer rdermer

Ah - moving on I've now hit another snag to do with the callback. What I want to do is in response to user action, create a new instance of a TextFlow, add the text and graphics and then store in a container (VBox or such).

I create the TextFlow, add the event listener for the graphic status change, but then when the event listener is called, how do I reference back to the TextFlow object that the graphic is associated with? The target in the callback event is the InlineGraphicElement, but I'm actually trying to update the TextFlow. If there were just one TextFlow, I could use a member variable, but there will be lots, all created dynamically...

Cheers


If you have e:StatusChangeEvent the TextFlow can be found from e.element.getTextFlow()

Regards,

Richard

1 reply

Adobe Employee
November 18, 2009

In the second case its loading the image and it arrives after the first compose.  TLF doesn't do that compose for you automatically - you need an event listener.  Download the examples from here http://opensource.adobe.com/wiki/display/tlf/Text+Layout+Framework and look for the InlineGraphic.as example to see how that's done.

Richard

Participant
November 19, 2009

Hi Richard,

Seems I was almost there - I actually had the handler for INLINE_GRAPHIC_STATUS_CHANGED in my code, but I removed it from the posted snippet for brevity. Looking at the example you mentioned, they are simply setting the IGE source to the graphic path, rather than creating a seperate image object and using that. I changed mine to the same and it worked.

Cheers

Participant
November 19, 2009

Ah - moving on I've now hit another snag to do with the callback. What I want to do is in response to user action, create a new instance of a TextFlow, add the text and graphics and then store in a container (VBox or such).

I create the TextFlow, add the event listener for the graphic status change, but then when the event listener is called, how do I reference back to the TextFlow object that the graphic is associated with? The target in the callback event is the InlineGraphicElement, but I'm actually trying to update the TextFlow. If there were just one TextFlow, I could use a member variable, but there will be lots, all created dynamically...

Cheers