my interests and experiences
RSS icon Email icon Home icon
  • Flash – dynamic text color and styles

    Posted on March 28th, 2008 whodeee 3 comments

    Another nuance of dynamically loaded text. In order to have your dynamic text have different colors or styles, what you need to do is select the “Render as HTML” button in the properties for your text box. Click either Bold or Italic, in the properties pane, then you need click the embed font button and select the character you want to embed. This will allow you to style that text box with the style you chose.

    If however you want to change the text within the same text box that requires a bit more work. You will have to create 3 text boxes 1 on stage and 2 off stage. The one on stage will be the normal style. Embed the characters for that text box, and then for the other two off stage, set one to be bold and the other to be italic, and then embed the characters for those. This will allow you to add dynamic HTML content that has both bold and italic styles in one text box.

    I have also found that you should write out in long hand the < and > symbols as &amp;&lt; and &amp;&gt;. Flash doesn’t seem to like to load the content if you aren’t typing them out that way.

    One final thing about text color in a dynamic text box. This can be achieved by using the deprecated HTML font tags and adding your color to them. For example:

    <FONT COLOR='#721d87'><B>www.grogler.com</B></font>

    NOTE – Be sure to use the long hand version of the greater than and less than symbols.

     

    3 responses to “Flash – dynamic text color and styles”

    1. Hey Grogler,

      There’s another way of doing it that doesn’t require you to have ‘render as HTML’ set:

      //————————————————————————————————-

      // blue #0074E1
      // pink #FF3366

      var format1_fmt:TextFormat = new TextFormat();

      format1_fmt.color = 0x0074e1;
      var format2_fmt:TextFormat = new TextFormat();

      format2_fmt.color = 0xff3366;

      var string1:String = “Blue string.”+newline;
      var string2:String = “Pink string.”+newline;

      this.createTextField(“t1_txt”, this.getNextHighestDepth(), 10, 50, 300, 200);
      this.createTextField(“t2_txt”, this.getNextHighestDepth(), 10, 100, 300, 200);

      t1_txt.text = string1;
      t2_txt.text = string2;

      t1_txt.setTextFormat(0, t1_txt.length, format1_fmt);
      t2_txt.setTextFormat(0, t2_txt.length, format2_fmt);

      //————————————————————————————————-

      Cheers,

      Rob

    2. N.B It is also possible to omit the from & to indices as below and just apply the default (all current chars)

      P.S Be sure to remember to also set the NewTextFormat so that content added to that field via AS or by th euser in the case of an input field also inherits th enew colour

      //————————————————————————————————-

      right_box.generalError_mc.inner_mc.d_txt.setTextFormat(pinkText_fmt);
      right_box.generalError_mc.inner_mc.d_txt.setNewTextFormat(pinkText_fmt);

      //————————————————————————————————-

      Cheerio ;)

    3. Thanks for the tip Rob, I will give that a shot!

    Leave a reply