Making Externally Loaded Images in a TextField Clickable

Here was the problem. Using AS2, Flash Player 9, I wanted to load html into a textfeld which included <img> tags. I also wanted those images clickable. When loading images into a TextField, margins, padding, and links act erratically. I have to click a couple times or in strange places to get the hyperlink to be activated.

Why does Flash have problems loading images into TextFields?

When adding <img> tags to TextFields, flash overlays the images as MovieClips and uses a text wrapping engine to navigate between them. This engine is different than its HTML counterpart. The default margin is 8px and the image size must be specified for the alignment to be accurate. Plus, the <a> tag has it's own bounds and doesn't rely on the image as it's click area. These bounds are dictated by the line height, which means only the top row of the image will be clickable... sometimes.

The big 'eureka' was this: images loaded into TextFields are basically just MovieClips placed there with listeners on the scroll action. You can change their _height, _width and they come loaded with some attributes that can help us get the job done. More importantly, you can apply onRelease() actions, circumventing the failed <a> tag on the <img> in the loaded html.

Here are the basic rules:

Be sure to include the height and width of your image in the HTML tag.
Give each image a unique id. <img id='image0' src='image0.jpg'/> These ids will give the images names to be referenced by. After the field loads, you will be able to apply some onRelease() actions.
Wait a frame after the content loads for the clips to initialize. I wish all flash object had to initialize before the next frame was called, but that's not the case. Frequently, we have to wait a round for all mc's to be available. If you use setTimeout() make sure you pick a time that will round higher than 1 frame so it won't render too soon. So 24 fps should not be called in 1000/24 milliseconds, round up to 1000/20 seconds (50 ms).

Here's how to apply links to image object in a textField.