I'm testing with Flash Player 8, the SWFs were published for 8. This issue has been around forever.. I've beat on it with a big hammer quite a few times in order to find a workaround, and was hoping it was fixed. But nope. To see a bit of history --- see
here from 2004 on flashmx2004.com
and here where Aral found himself in TextArea hell back in 2004
and here on livedocs
and here on flashkit
and here on Sepiroth.it
Most folks are upset about the TextArea component, but I include the old text field, as you can see below it doesn't act like it should.
Here's just one example.. The Flash Player 8 [edited to add also seeing this with Flash Player 9] should be smart enough to see that the textField and TextArea are only 190 pixels wide and the image is too.. so text should wrap down below the image instead of just partially disappearing off to the right of it. [edited to add clarification.. the two examples below are in Flash. The top one is a TextArea and the bottom one is a text field. The problem is you see "ront of a wall" below the images and the rest of the text is hidden away somewhere to the right of the image.]
code in the SWF:
myTextArea.text = '<img src="http://oddhammer.com/blog/images/samplenewsimage.jpg" width="190" height="102" />Guys in front of a wall';
myTextField.htmlText = '<img src="http://oddhammer.com/blog/images/samplenewsimage.jpg" width="190" height="102" id="myimage"/> Guys in front of a wall';
Here's the same thing in plain old HTML..
guys in front of a wall |
<table width="190" border="1" cellspacing="0">
<tr>
<td width="190"><img src="/blog/images/samplenewsimage.jpg" width="190" height="102" />guys in front of a wall </td>
</tr>
</table>
Note that the browser realizes that text can't be beside the image so the text is moved below the image. As you saw above, Flash would do that weird sortawrapping thing.
And it's not so much that the Flash Player 8 is broken, but it doesn't handle images in HTML the same way a browser would. For instance, if you have a bunch of HTML that contains images via the IMG tag and they happen to have align="bottom"... look out. It's going to get ugly. Flash Player 8 only supports "left" and "right". Things like baseline, top, middle, bottom, etc. are just tossed.
I've tested with Flash Player 9 (published for Flash Player 8 though since it'll be ages before I can publish for 9) and see the same thing.
So you can use Flash to display images and text in a somewhat HTMLish fashion if you are careful and creative with the old BR tags and "& nbsp;"s. You can trick Flash into putting images wherever you want. Just hope you don't have a ton of standard HTML text with images that needs to get displayed dynamically in Flash.
And here's some info (added to LiveDocs, yes) that might be of interest...
myTextField.htmlText = '<img src="sampleimage.jpg" width="190" height="102" id="myimage"/>';
trace("width of image = "+myTextField.myimage._width); // width of image = 190
I'm hoping somebody can come along with an easy solution..
guys in front of a wall
05 Jun 2006 at 04:33 am | #
More problems with image tag are reported at http://play.ground.gr/?p=77
05 Jun 2006 at 07:16 am | #
In a "proof of concept" rss reader I ran into the same problem with html formatted blog entries.
I worked around this by creating a "stripImagesFromHTML" method and placing the removed images in movieclips below the rest of the text.
This only works if the html is very simple and consistant - and isn't much good if there are lots of captions and the like.
05 Jun 2006 at 02:13 pm | #
I use the <br> trick! :(
06 Jun 2006 at 02:10 pm | #
Do you get the same issue when loading in a.htm page into the Flash textArea?
19 Jul 2006 at 09:17 pm | #
Have you tried getting an image _inside_ of text?
(eg: this is an <img src="...">)
Even more fun.
02 Aug 2006 at 11:54 am | #
You can adjust the padding within textArea component, which could solve the problem of the pictures having space to its left.
I came across it when i was looking at the debug window and checking the properties of the textArea
21 Aug 2006 at 07:43 am | #
Long shot, but, have you tried using css for your html in flash? It might allow you to either use the *{} rule or atleast control the styling of your elements once in.
I havent tried it, and i totally respect the html support within flash is way below par. Nice article.
22 Dec 2006 at 01:20 am | #
I did a quick experiment with CSS and image tags and found that the image simply didn't render. I'm discouraged, but optimistic that there's some sort of workaround. If I come up with anything, I'll be sure to follow up.
10 Jan 2007 at 04:47 am | #
hspace=0 works fine to align the image to the textfield border, dont know about css.
19 Mar 2007 at 07:40 pm | #
Has read through yours blog and has learned a lot of new...
Thanks.
22 Mar 2007 at 12:34 pm | #
I've found this somewhere on the web, hopefully it helps you guys too:
http://www.timtijs.com/testmap/textfieldwithpics/textfieldwithpics.html
(.swf and .fla are in the same directory)
Some parts of the AS are in Dutch but I hope you understand that this is done using a dynamic textfield (html=true), loadvar object and .txt file containing the HTML code. Still can't do a proper make-up for the HTML in the txt-file but at least it helped me 1 step further.
Tim.
30 May 2007 at 11:02 am | #
I've been using tricks like this:
<imagebox><img src=\"images/star_trek_copy_01.jpg\" width=\"533\" height=\"228\" hspace=\"0\" vspace=\"5\">\n</imagebox>
Where I've defined a style for imagebox like so:
imagebox {
font-size:100px;
}
You can mess with the font-size in the css class or add \n in the html text to increase the height. not very precise but a little better than just using lots of breaks.
11 Oct 2007 at 03:20 am | #
<textformat leading="315">
</textformat>
This will create a 'box' around the image that is 315px around the image that is also 315px.
08 Nov 2007 at 05:34 pm | #
I have been having the same problems in Flash 8 with loading text with <img> tags from a database, If the img tag is first followed by text the image wouldnt even display in a text field. If I place text in front - no problems. Also the scroll bar attached to the text field doesnt seem to recognise the height of the image and so wont scroll down if the image is off screen! annoyingly. Anyone heard of a fix for this in CS3?
15 Oct 2008 at 09:40 pm | #
Hello - just found a fix for a similar bug: if you try and use an image as a link in the text field, when the image is clicked, all the text above it is selected as well (i.e. highlighted as if you've dragged your mouse over it) and it often takes two clicks for the link to actually work... very frustrating! But, I just realized if you put any image BEFORE any of the text, this will not happen. I.e.
click here
will prevent this "text selection" bug from occuring
where as if you just have:
FIRST TEXT HERE
click here
you will get the bug.
It was driving me crazy so just thought I'd share!
18 Nov 2008 at 08:52 pm | #
Wrapping the image with the textformat tag using the "leading" attribute is working for me. Thanks Sean!!!
23 Jan 2009 at 09:46 am | #
I know this is an old thread, but if anyone else has this issue with images in a text field, try this.
One:
make sure your text and img are inside a (paragraph tag) this will rid you of the annoying overlapping image, otherwise define the width and height in the img tag.
eg: Some text above an image.
Some text below an image.
HTH
DD