13

AS3 + HTML Text + tags

I discovered a few things when trying to add img tags to html content on a site I have been working on. Mabye this is common knowledge, but I thought I'd share my experience since I had a hard time getting anymore info on it.

1. Nesting an <a href> tag around an <img> tag doesn't work.

2. When you embed an image into text using the img tag the image is added to the TextField's DisplayList. For example if you embed an image in the TextField "contentfield", it's the same as doing contentfield.addChild(htmlImage); Which brings me to…
3. The TextField has a method called getImageReference(id:String):DisplayObject; Basically this method returns the DisplayObject or image that is contained within a given TextField. This is great, but I noticed it only works when there is one image in a TextField. If someone can confirm this, that would be great.

Basically I wanted to link the embedded images in my TextField so the popup a larger version of the image. Simple enough, yet when I wrapped the img tag with an href, the outside of the image would show the hand cursor, but the image wouldn't link. Now if the parent of the img is the TextField, then wouldn't it make sense to have numChildren as a TextField Method? Then I could loop through the children of the text field and create buttons. I've made this request to Adobe, and so far they have been receptive to the idea. Hopefully this will get passed through.

I did however, come up with another way to dynamically load images into a TextField. When loading a swf into a TextField using the img tag you can set the instance name of that swf using the id attribute. I use this id attribute to pass the path to the image, as well as an image id that is passed into the popup window that loads the larger image. Here's an example of the html source that is passed into the TextField.

<img src="thumb.swf" id="../flashassets/images/slideshow/2_sm.jpg,2_sm.jpg" />

I separate the two parameters using a comma which are String split in the thumb.swf. Here's the code in the thumb.swf:

if(this.parent.name != null) var results:Array = this.parent.name.split(",");
 
var imagepath:String = (this.parent.name == null) ? "../flashassets/images/slideshow/1_sm.jpg" : results[0];
var link:String = (this.parent.name == null) ? "http://www.google.com" : results[1];
 
var image:Sprite = new Sprite();
image.useHandCursor = image.buttonMode = image.mouseEnabled = true;
image.addEventListener(MouseEvent.CLICK, onClick);
 
this.addChild(image);
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest(imagepath);
loader.load(request);
image.addChild(loader);
 
var border:Sprite = new Sprite();
this.addChild(border);
border.graphics.lineStyle(2, 0xCC3300, 1, true, "none");
border.graphics.drawRect(1,1,148, 148);
 
function onClick(event:MouseEvent):void{
	navigateToURL(new URLRequest("javascript:window.open('image.php?cat=slideshow&id="+link+"','atest','menubar=yes,resizable=no,width=710,height=730,left=50,top=50');"), "_self");
}