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.

Contento Interactive



What We Do



Articles & Tutorials

How to Shimmer Water (Water Ripple Effect)

The classic water ripple effect, when used sparingly, can create waves with a dead calm banner design... more»

Making Images in TextFields Clickable

When loading html into TextField, <img> tags can act strange. Using a few tricks, these images can be treated like normal MovieClips... more»

Interactive Resources

SoundManager 4.0

The new version 4.0 of the most advanced AS3 SoundManager.... more»

DebugConsole for mobile developement

This article presents the MobileDebugConsole class that can be used for mobile develpoment.... more»

Three useful classes for game developement

I present in this article 3 classes that I use regularly in my game development process. Those classes can be used for f... more»

Adobe Creative Cloud Now Available

Adobe Creative Cloud Now AvailableTwo New Touch Apps for iOS and Adobe Muse 1.0 Also ShippingSAN JOSE, Calif. — Ma... more»

Adobe Muse Available Today

Adobe Muse Available TodayNew Software Enables Designers to Publish Professional HTML5 Websites without Writing Code┬áSA... more»

Business & The Internet

Should We Still Use Flash?

This is a fair question, but you probably should be less concerned about what you want and more focused on what your customers want. And that 'thing' is not necessarily Flash... more»

Clicktags in AS 2.0 and AS 3.0

ClickTags should be easy... but they are not so simple. Firstly, because some ads built for polite loading require a parent swf... more»
diamontina | May 17, 2010 3:05 am
societies president issue impact

Enter Your Comments Below:
Enter Your Name:
Security Question: What is 1 minus 6?