Images dans un Textfield AS3

Il est parfaitement possible d'ajouter des images dans un TextField dynamique Flash en Actionscript 3, cependant, cette fonctionnalité n'est pas dépourvue de comportements étranges. Ayant pas mal miséré dessus, je livre ici le résultat de cette galère.

Création du Textfield et insertion de l'image

On crée le TextField en question, et on y insère l'image grâce à la propriété htmlText, ensuite, on l'ajoute à notre animation courante :

var t:TextField = new TextField();
t.htmlText = '<img src="mon_image.jpg">';
this.addChild(t);

Et là, ça ne fonctionne pas ! Pourquoi ?

Pour une raison obscure, l'image n'apparaît pas, si vous êtes confronté à ce problème, rassurez-vous, vous n'avez rien fait de mal, car la solution est ... bête, comme illustré ci-dessous, il suffit d'ajouter un espace avant l'ouvrir la balise HTML.

t.htmlText = '<img src="mon_image.jpg">'; //ne fonctionne pas
t.htmlText = ' <img src="mon_image.jpg">'; //fonctionne
t.htmlText = '&amp;<img src="mon_image.jpg">'; //fonctionne

Voici déjà un problème de résolu.

Manipuler l'image chargée dynamiquement

Peut-être même vous êtes vous arraché les cheveux en tentant vainement quelque chose dans cet esprit :

t.htmlText = '<a href="http://www.ligams.com"><img src="mon_image.jpg"></a>';

Cela ne fonctionne pas non plus. Mauvaise nouvelle, il va falloir gérer les événements avec un objet Loader.

Récupérer l'image

Tout d'abord, il faudra ajouter un identifiant à l'image, nous nommerons cet identifiant mon_image :

t.htmlText = ' <img src="mon_image.jpg" id="mon_image">';

Récupérer l'image grâce à la méthode getImageReference() :

oImage:DisplayObject = t.getImageReference("mon_image");

Ajouter des événements

Ajoutons maintenant des événements à cette image, au clic

//récupère l'image
oImage:DisplayObject = t.getImageReference("mon_image");
var loader:Loader = Loader(oImage);
//ajout d'un écouteur lorsque le chargement de l'image est terminé
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedImage);

//Image chargée, on attache l'événement qui fait le lien
function loadedImage(e:Event):void
{
    var li:LoaderInfo = LoaderInfo(e.target);
    li.content.addEventListener( MouseEvent.CLICK, clickImage );
    li.loader.addEventListener( MouseEvent.CLICK, clickImage );
}
//lien vers le site de votre choix
function clickImage( e:MouseEvent ):void
{
    var url:URLRequest = new URLRequest("http://www.ligams.com");
    navigateToUrl(url); 
}

Voilà, on peut également gérer des redimensionnements ou un peu tout, comme avec un Loader classique.
J'espère que cet article pourra être utile, il l'aurait bien été pour moi en tout cas :)