Main Event : Text Reflow vs Copy and Paste

I have been doing a little playing tonight where I am using Flash to read my XHTML pages from my blog hosted on Blogger. I am disappointed with Flash Text Fields. Take a look at the image below:



I am just extracting the body of a blog post, and dumping the contents into the text field. The contents usually contain images, and luckily Flash text fields support the use of img tags for loading all of the media types that Flash can load via loadMovie().

As you can see, the results are subpar. The reflow is totally screwed up. Not only that, but images end up overlapping each other for some reason.

So I refer to the docs:




About specifying height and width values


If you specify width and height attributes for an img tag, space is reserved in the text field for the image file, SWF file, or movie clip. After an image or SWF file is downloaded completely, it appears in the reserved space. Flash scales the media up or down, according to the values you specify for height and width. You must enter values for both the height and width attributes to scale the image.

If you don't specify values for height and width, no space is reserved for the embedded media. After an image or SWF file has downloaded completely, Flash inserts it into the text field at full size and rebreaks text around it. More than that, it seems that no matter what mark up you add, that the text always wraps the images.
You cannot specify a line break so the text will reflow to the next line.



NOTE
If you are dynamically loading your images into a text field containing text, it is good practice to specify the width and height of the original image so the text properly wraps around the space you reserve for your image.




Ah man!, so in order for text wrapping to work correctly I have to specify the sizes. That really sucks bigtime. All I want is for the images to appear at the right size, use a resizing text field, and not have the text wrap the image, but rather have there be line breaks between the images and the text blocks. I try for a moment to specify the size explicitly, and while the image appears at the right size, and the text wraps expecting the space the image will use, there are still major issues. The wrap still looks crappy. Multiple images will still end up overlapping, and if you make the textfield one that resizes the rewrap ends up looking awful.

so I tried something else:



the docs say that you can place a symbol from your library in a text field by using it's linkage name, So I try whipping up a component that I can load in there to load an image, and handle proportional sizing within the image. My goal is to try and make the component watch the size of the text field, and adapt to it's width forcing the text to reflow underneath.

Well it doesn't work. the text goes over it, not even paying attention to my dynamic sizing.

So at this point I realize that I am going to have to create a full boar component that will render things the way I want them to look. I am going to have to load and position my own images and text fields. A bit of a pain in the but, but definitely doable. As a matter of fact it will probably be better when it comes to font handling as well, as TextFormat objects are much more powerful than trying to rely on Flash's Text Rendering engine for HTML.

But then I remember the big bummer. One that haunted me in the past when designing the SNL Merger Model, and one that I hear many other Flash/Flex RIA developers complain about:

Copy/Paste.

Can't do it...... A selection can only span over 1 text field at a time. While I can still create a really nice rendition of my blog post in Flash I still have to compromise on one of the most fundamental/basic features of computing. With the Merger Model, we constantly had to beat around the bush on why you cannot select all the items in a "Table" (really just multiple text fields.)

Ok so, I'll just deal with it for now, but I am hoping that this could be listed as a priority for the next Flash Player release.

This is what I want to see:


1/ Text reflow consistent with HTML browser rendering. If I put a linbreak after the image, the text should begin on the line below the image.

2/ Selections that span multiple text fields.

3/ Text field linking. The ability to cause overflow to reflow to another text field.