567 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+4 more
iamdok says

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.

Sequence:

  1. 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:

    String Utilities Class

    Specifically I have used the “countOf” methos to return the number of image tags.

  2. Strip out the img paths and place into an array for loading manually. This can be done using this function: http://pastie.org/970888
  3. 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.
  4. 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.
  5. 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).
  6. 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.
  7. 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.

Donagh.

1162 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Had an item featured in an Envato Bundle
+4 more
FlashTang says

Good job iamdok :)

5411 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

Bravo man! This page is bookmarked :)

8377 posts Community Moderator
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Attended one of our Meetups around the world
+9 more
MSFX Moderator says

hats off, bookmarked. You got a working demo as well? :)

4140 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Located in Brazil
+3 more
tsafi says

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by