I need to insert some images into a dynamic Textfield via the <img> tag. There
are two problems I've encountered:
1) Flash seems to display it as inline, wrapping text around it. Is there a
way to specify the image as being block?
2) If I have multiple images near each other, they overlap each other. Is
there a way to avoid this?

Thanks for any advice.

1) Doesn't look like you can change that. You can't style an img tag so you can
only use the attributes width, height, hspace, vspace and align. The last
attribute you can use - id - lets you control the content with actionscript.
Maybe that can be of any use to you (also to solve 2).

An additional problem I'm facing is that if I set the width of the image to be
the same size or wider as the textbox width, I get missing characters. I find
that is because Flash will flow the text around the images, even if it means
putting single characters vertically along the right of the image, like this:

http://abeall.com/files/temp/flash_text.image.flow.jpg

Where the text column along the right would not actually appear at all,
because its outside the textfield bounding box. Very annoying. Looks like
textfields in Flash are still not quite mature enough for this project, I'm
going to put workarounds on hold and revert to JS/HTML/CSS, unless you or
someone else have a really clever solution. Thanks!

Well, I must say I use prebuilt movieclips - like templates - and a xml file
that contains a seperate childNode that holds the path to the image. But if you
need to parse the image within the html, then it's very hard to get it to
display correctly. You might want to have a look at
http://www.flashrelief.com/tablemaker/features.html if it's within the scope of
your app, that is. I've used it and it's quite good.

[quoted text, click to view]

That works really well, but the only problem is this project is basically a
HTML editor for users in an image-centric blog like system, with compose and
preview mode. So users might do anything with any combination of images and
HTML markup, there's not a predefined template.

That being said, I am seriously considering using a custom parser which checks
to see if an image is wide or wider than the textfield width, and if so then
dynamically end the current textfield, insert a movieclip with the image loaded
in it, then start a new textfield below it. But that would introduce all sorts
of things I don't want to deal with...

Concerning hspace, I'll probably toy with it some more because I don't fully
understand how it behaves, but the problems I encountered with it were:
1) It requires users to specify hspace, or additional AS to auto detect image
size after it loads and insert hspace tags
2) hspace is specific to Flash, and end deployment of the HTML would be in a
real HTML page, this means I'd need/want to strip it out before publishing, and
somehow add it back in when editing existing
3) It appeared to add space *above* the image, which I don't want
4) It didn't seem to help the problem/bug with text wrapping, as described in
my previous post.

In my experience it takes a lot of experimenting to get things to display
exactly as you want using html. And a lot of 'hacks'. Writing a parser would be
- I think - the 'solid' solution. In any case, good luck with further
development.

I had a simular issue, with the text running down the side of the image,
instead of it appearing below the image. Count the number of letters that are
missing from the text below the image. Then go back to your <img> tag, add
<p> tag, type in "_" for each letter that is missing. It's not pretty, but it
does work.

(i.e. </img><p>_ _ _ _ _ This is the first line after the image.</p>)

Good luck!

Robert

That's what I'm thinking about doing, but the difficulty is being able to do
dynamically. Again, this is a user input editor, so there is no pre-processing,
formatting, or templating that I can go by.

My only guess is to actually detect the height of the image, determine the
line-height of the proceeding character, determine how many linebreaks at that
line-height would clear the height of the image, and dynamically insert them
after the img tag. Wowza.