Flash CS5, image from library in TLFTextField?

[grantcox]

I cannot seem to embed an inline image in a TLFTextField from the library.  Using the following snippet (with both a TLFTextField and a standard Dynamic TextField on the stage), the image appears ok in the Dynamic TextField, but no image in the TLFTextField.

var source:String ="image <img src='linkageId' width='100' height='100'/> footer";

TLFText.htmlText = source;

DynamicText.htmlText = source;

Changing the image source to a file path, and the image appears correctly in both.  However, I would really like to keep using the in-library symbols if possible, and the TLFTextField documentation suggests this is still possible.

This is using Flash Professional CS5 11.0.0.485 on Windows 7.  Any suggestions would be appreciated.

[robin_briggs]

I'm not sure I have a good answer to this, but I can tell you what I know, and maybe that will help get you further. Feel free to ping back with more questions.

First, the markup for images in the HTML markup is not supported, because TLF doesn't have support for floats, only for inline graphics. But there is support for <img> in the TLF markup. You can see this in FLA file, which is a zipped XML file. If you unzip the file, and you've added TLF text, you'll see a TLF TextFlow. Inside the TextFlow, you can put an <img> element (see the TLF Blog for a TLF markup description). The <img> element can have a "source" and a "customSource" attribute. These get set to a number, which maps to an entry in the <elements> element, which is a child of the DOMTLFText element. The number in the customSource in the  img element maps to the a DOMSymbolInstance in the elements. That, in turn, has a libraryItemName, which is the name of the XML file that contains the inline. In my case, I'm using a file generated by InDesign, its called "InlineText". Inside the InlineText.xml file is a DOMBitmapInstance with a libraryItemName that contains the name of the JPG file the inline is linked to.

Whew. I'm not saying there's not an easier way to do this, but this is how its all expressed in the FLA file. I'm guessing there's a parallel mechanism inside Flash runtime, but I don't know what it is -- I will see if I can get someone who knows Flash to answer, or you could try posting to a Flash Pro forum. In the meantime, I'm hoping this helped.

- robin

[rdermer]

Flash Pro sets up the inlineGraphicImageResolver to figure out the symbols.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/elements/Configuration.html?allClasses=1#inlineGraphicResolverFunction

Somehow that's not getting called or properly resolving the symbol.

Richard

[grantcox]

Thanks for the insight guys.  At this stage I might just sit with "it's broken" and wait for a point release - hacking around a replacement inlineGraphicResolverFunction sounds like it'll burn too much time and likely not fix anything.

[Guest]

maular,

A few months ago, I had a similar question from one of our beta sites. If I can re-remember how to post a file here, I'll put a sample FLA up that shows how to do this. I haven't ever attempted to do this using the htmlText setter, as your code is doing. It might work if you put a customSource attribute on it, but it may just be that htmlText doesn't handle the <img> tag. I do know that the tlfMarkup setter does what you want if you define a graphicResolver function (see attached example). The resolver could certainly be a little smarter, but for my example, I just allocated an instance of a library item. If there were multiple <img> tags, you'd have to look at the customSource value and sort out which library item to allocate.

Also note in my example that I had to reset the flowComposer value to the original composer.

Hopefully, I can figure out how to post my FLA.

Regards,

Rusty

Hmmm. I figured out how to upload a graphics image, but it won't allow FLA files. Maybe I can post elsewhere, and put up a URL.

[FM_Flame]

Is there any progress on this ?

I am trying the same thing you use the img tag in a TLFTextField, the docs say it should work but it doesn't.. very stupid...

Is there any other way of handling this except using the classic textField ?

idratherbegolfing just use some free hosting to upload the fla file.

I would recommend https://www.dropbox.com/.

[Guest]

Sorry for the delay in responding (I was out for about 10 days on vacation). Try this link:

http://dl.dropbox.com/u/9110597/Red%20Circle%20Inline.fla

Rusty

[random_1_]

Rusty,

In your example .fla, how did you embed the red circle MovieClip into the TLF instance named "tlf" at author time?

T

[Guest]

I'm not sure where you've misunderstood, so, I'll try to explain the entire process.

Steps to reproduce:

1. Draw or select a shape on the stage.

2. With the shape selected, do Convert to Symbol... under the Modify menu.

3. Give the symbol a good name, say "MySymbol".

4. Make sure to select the "Export for ActionScript" checkbox in the Advanced section & check "Export in frame 1".

5. In the frame script code (Window->Actions), I wrote the following function:

function inlineResolver(incomingILG:Object):DisplayObject

{

var ilg:InlineGraphicElement =  InlineGraphicElement(incomingILG);

if (ilg == null)

return null;

return new InlineText;

}

This is a function that TLF calls when it's sees an inline graphic in the markup, and it wants a DisplayObject for it. To create the DisplayObject, I simply create an instance of the symbol (new MySymbol(), or in my case, new InlineText()) and return that to the caller.

6. Also note this line of code in the frame script:

config.inlineGraphicResolverFunction = inlineResolver;

That's what tells TLF which function to call when it finds an inline graphic in the markup.

OK, I bet you knew all that stuff. What I think you're asking is how the original code shows the inline graphic on the stage. The only way to do that is to export it from InDesign. InDesign can export FLA files and the inline graphic objects get exported correctly in the markup. However, you can also hand write your markup which contains inline graphic objects. Here's the markup for the "tlf" object in my example FLA:

<TextFlow blockProgression="tb" direction="ltr" lineBreak="toFit" whiteSpaceCollapse="preserve" version="2.0.0" xmlns="http://ns.adobe.com/textLayout/2008"><p breakOpportunity="auto" direction="ltr" dominantBaseline="roman" leadingModel="romanUp" paragraphEndIndent="0" paragraphSpaceAfter="0" paragraphSpaceBefore="0" paragraphStartIndent="0" tabStops="s36 s72 s108 s144 s180 s216 s252 s288 s324 s360 s396 s432" textAlign="left" textIndent="0" textRotation="auto"><span baselineShift="0" cffHinting="horizontalStem" color="#1a1718" digitCase="default" digitWidth="default" dominantBaseline="roman" fontFamily="Minion Pro" fontSize="12" fontStyle="normal" fontWeight="normal" kerning="on" ligatureLevel="common" lineHeight="120%" lineThrough="false" locale="en" renderingMode="cff" textDecoration="none" trackingLeft="0%" trackingRight="0%">Red Cir­cle In­line graph­ic </span><img baselineShift="0" customSource="225" locale="en" source="225"/><span baselineShift="0" cffHinting="horizontalStem" color="#1a1718" digitCase="default" digitWidth="default" dominantBaseline="roman" fontFamily="Minion Pro" fontSize="12" fontStyle="normal" fontWeight="normal" kerning="on" ligatureLevel="common" lineHeight="120%" lineThrough="false" locale="en" renderingMode="cff" textDecoration="none" trackingLeft="0%" trackingRight="0%"> Text fol­low­ing the red cir­cle in­line graph­ic</span></p></TextFlow>

Notice the <img> tag and that there is a "customSource" attribute. For the purposes of writing custom markup, all instances of the same symbol should use the same customSource numeric identifier. Other than that, they should all be unique numeric values. You can use the customSource identifier in the inlineResolver() function to know which graphic TLF is asking you for. For example, you could have code that looks like this:

function inlineResolver(incomingILG:Object):DisplayObject

{

var ilg:InlineGraphicElement =  InlineGraphicElement(incomingILG);

if (ilg == null)

return null;

if (incomingILG.userStyles.customSource == 225)

     return new MySymbol();

return null;

}

I hope that answers your question.

Rusty

[random_1_]

Hi Rusty,

Thank you for responding.

> I think you're asking is how the original code shows the inline graphic on the stage.

Yes, that was my question.

> The only way to do that is to export it from InDesign.

Too bad. I thought you were inadvertently revealing some undocumented way to do this in Flash at author time.

> Notice the <img> tag and that there is a "customSource" attribute.

I did notice that. Before posting my question, I added "trace(tlf.tlfMarkup);" to your code. If you google "tlfMarkup customSource", you'll get exactly one hit: this forum thread.

T