Hi, There have been a few posts about the frustrations of loading html text containing images and text into a dynamic Textfield (Flash Player 9), so in solving my own problems I thought I’d share the results/methods I’ve used. Thanks to all those who had input.
The goal is to:
- Get the overall height of the textfield into which the htmlText including images is loading.
- Format the text and images nicely to avoid text flowing around the images.
This assumes the following:
- That you have no access to the htmlText.
- There is no id attribute for the img tags in the htmlText
- There is no height attribute for the img tags in the htmlText.
- Find the number of img tags in the htmlText. For this I have used the string utilities class by grant skinner. CrackerJack mentioned it in a previous thread but here is the link again:
Specifically I have used the “countOf” methos to return the number of image tags.
- Strip out the img paths and place into an array for loading manually. This can be done using this function: http://pastie.org/970888
- Load the images one by one, listening for the “INIT” event rather than the “COMPLETE” event. Once this event fires, the height of the image will be available to be read. Add the height to a heights Array and abort the rest of the load. Then move to the next image.
- Add a height attribute to each img tag in the htmlText. This step is required for the next step to work properly. This can be done using the following static class, writted by the awesome CrackerJack to insert a break after each img tag, but slightly altered by me to insert the height attribute also. http://pastie.org/970881 Pass the heights array to the constructor and it will add the correct height attribute to each image.
- Assign the original htmlText to the textField (with autosize applied) and immediately record the height (before the imgs have loaded). Once the height has been recorded, the html Text can be removed from the textField. Get the sum of the heights in the heights array and add it to this textField height. This will be the final height of the textfield. (may need to be adjusted slightly to account for a line break for each image).
- Next, we want to format the images and the text nicely so we don’t have any flowing text. To do this we use the following open source class, developed by a guy named Paul Klinkenberg.(see licence notice in class for full details). http://pastie.org/970882 This class requires that each image has a height attribute to work.(hence our use of CJ’s class above). This class returnes an altered htmlText string, which is then assigned to our textField.
- If you are using css to style any hyperlinks in the text then you will probably need to include the following step to avoid the text jumping around on rollover of those links.
We already have the overall height of the final textfield so we can now remove the Autosizeing of the textfield and just assign this height directly. By doing this we get rid of the jumping text effect completely.
And thats it. Now all images will be in a block of their own, with a break before and after the images, and all text beginning on a new line.
Obviously this is not the quickest little setup, but if there are not too many images in the html, and the images are small in filesize, its not as long as it sounds.
One things to watch is that the code doesn’t check if a height attribute already exists on the img tags before inserting one.
Hope this helps someone out.
Good job iamdok
- United States
- Has been a member for 4-5 years
- Exclusive Author
- Author was Featured
- Sold between 100 000 and 250 000 dollars
- Author has had an Item Featured
- Contributed a Tutorial to a Tuts+ Site
- Author had a Free File of the Month
Bravo man! This page is bookmarked
hats off, bookmarked. You got a working demo as well?