7 Replies Latest reply on Feb 5, 2007 1:06 PM by abeall

    HTML TextField block image?

    abeall Level 3
      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. Re: HTML TextField block image?
          Peter Lorent Level 2
          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).
          • 2. Re: HTML TextField block image?
            abeall Level 3
            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!
            • 3. HTML TextField block image?
              Peter Lorent Level 2
              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.

              Edit: So, the hspace attribute doesn't solve this?
              • 4. Re: HTML TextField block image?
                abeall Level 3
                > 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.

                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.
                • 5. Re: HTML TextField block image?
                  Peter Lorent Level 2
                  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.
                  • 6. Re: HTML TextField block image?
                    fotostrations
                    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
                    • 7. Re: HTML TextField block image?
                      abeall Level 3
                      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.