1 Reply Latest reply on May 14, 2009 12:18 PM by bdeen

    htmlText and img tag with embeded assets

      Hi everyone !

      I'm testing the html rendering in textfields and am faced with the following problem : when I use the img tag with a source set to an external image, everything displays as I expect it to (see "with_external_jpg.jpg" hereby attached). Here's the code :

       

      package
      {
          import flash.display.Sprite;
          import flash.events.Event;
          import flash.text.TextField;
          import flash.text.TextFieldAutoSize;
          import flash.text.TextFormat;
          import flash.text.TextFormatAlign;
          import flash.text.Font;
          import flash.display.StageScaleMode;
         
         
          public class Main extends Sprite
          {
             
              /* ----- BEGIN EMBEDS ---------------------------------------------- */
             
                  [Embed(source = "C:/Windows/Fonts/arial.ttf", fontFamily = "Arial", fontName = "Arial", unicodeRange="U+0020-U+00FF")]
                  public static const FontArial:Class;
                 
                  [Embed(source = "C:/Windows/Fonts/arialbd.ttf", fontFamily = "Arial", fontName = "Arial", fontWeight = "bold", unicodeRange="U+0020-U+00FF")]
                  public static const FontArialBold:Class;
                 
                  [Embed(source = "C:/Windows/Fonts/ariali.ttf", fontFamily = "Arial", fontName = "Arial", fontStyle = "italic", unicodeRange="U+0020-U+00FF")]
                  public static const FontArialItalic:Class;
                 
                  [Embed(source = "C:/Windows/Fonts/arialbi.ttf", fontFamily = "Arial", fontName = "Arial", fontStyle = "italic", fontWeight = "bold", unicodeRange="U+0020-U+00FF")]
                  public static const FontArialBoldItalic:Class;


                  [Embed(source = "image.jpg")]
                  public static const Image:Class;
             
              /* ----- END EMBEDS ------------------------------------------------ */
             
              /**
               * Constructor
               */
              public function Main():void
              {
                  stage.scaleMode           = StageScaleMode.NO_SCALE;
                  var textField:TextField   = new TextField();
                  textField.embedFonts       = true;
                  textField.border           = true;
                  textField.wordWrap         = true;
                  textField.multiline       = true;
                  textField.width           = 400;
                  textField.height           = 300;
                  textField.htmlText         = "<font face='Arial' size='20'><img src='../src/image.jpg'/>je ne <font size='10'>sais</font> <i>que <b>penser</b></i> de <b>tout</b> cela</font>";
                  addChild(textField);
              }
          }
      }

       

      Now if I set the source point to a symbol, the text does not align up with the image, but displays behind it (see "with_embeded_jpg.jpg" hereby attached). The only line that changes in my code is :

       

                  textField.htmlText        = "<font face='Arial' size='20'><img src='Main_Image'/>je ne <font size='10'>sais</font> <i>que <b>penser</b></i> de <b>tout</b> cela</font>";

       

      As you may imagine, I want the text to appear around the image and not behind it.

      Does anybody knows why it behaves so ? Is there a workaround ?

      I use FlexSDK 3.0.2 on a windows vista family.

       

      Thanks

        • 1. Re: htmlText and img tag with embeded assets
          bdeen

          did you try adding width/height attributes to the image.  they say the img tag is experimental still, so with the symbol reference it might not know the width and height to use, it still displays properly (the image piece only) but the rest of the html text doesn't know how to deal with it?