Connecting Tech Pros Worldwide Help | Site Map

NEED SOME HELP HERE... embedded fonts, css, xml, textfields, dynamic content

Newbie
 
Join Date: Jun 2007
Posts: 2
#1: Jun 28 '07
I'm dying here trying to figure this out for days.
Here's the scenario:

1) External script.as file dynamically imported to loader.swf file that creates a textfield

(createTextField)
2) Content for the text field should be provided by an XML file
3) Content styled by external css file
4) Fonts need to be embedded so as to apply anti-alias

I can get the XML & CSS to apply to the text field, but can't get the content to use the embedded font. It

usually comes back "undefined" if the embedded font works. Otherwise, when I comment out the embed font, the

content work, but of course, not the anti-aliasing. Ugh. I've tried doing all kinds of forum searches, but

nothing has clarified this for me. I'm intermediate at AS and this is something new to me. Any help will be

GREATLY appreciated and I will send good juju your way.
Here's a sampling of some of the script I have been using:

ACTIONSCRIPT:

mf = new TextFormat();
mf.font = "arial_font";
Stage.scaleMode = "noScale";

this.createTextField("news_txt", 99, 50, 50, 450, 300);
news_txt.border = true;
news_txt.html = true;
news_txt.multiline = true;
news_txt.wordWrap = true;
news_txt.embedFonts = true;
news_txt.autoSize = true;
news_txt.setNewTextFormat(mf);


// Load CSS
var styles:TextField.StyleSheet = new TextField.StyleSheet();
styles.load("heading.css");

// Load XML apply to headingText
var banner_xml:XML = new XML();
banner_xml.ignoreWhite = true;
banner_xml.onLoad = function(success:Boolean):Void {
if (success) {
news_txt.styleSheet = styles;
news_txt.text = banner_xml;
} else {
trace("Error loading XML.");
}
};
banner_xml.load("heading.xml");



XML:

<story>
<title></title>
<mainBody>
<heading>Heading Text</heading>
<tagline>Clever tagline goes here</tagline>
</mainBody>
</story>



CSS:

heading {
color:#000000;
font-family:"Franklin Gothic Book", Arial, sans-serif;
display: block;

font-size: 50pt;
margin: 0px;
padding: 0px;
letter-spacing: -5px;
}

tagline {
color:#000000;
font-size: 20pt;
font-family:"Franklin Gothic Book", Arial, sans-serif;
display: block;
font-weight: bold;
}

So, if I turn off the xml/css and use htmlText to create content for the text field, the text uses the

embedded font and is anti-aliased. If I keep the xml/css but comment out embedFonts, then the content works

but is not anti-aliased. I need both of these to work at the same time. PLEASE HELP!!

peace
xNephilimx's Avatar
Expert
 
Join Date: Jun 2007
Location: Buenos Aires, Argentina
Posts: 200
#2: Jun 29 '07

re: NEED SOME HELP HERE... embedded fonts, css, xml, textfields, dynamic content


Quote:

Originally Posted by erictomlinson

I'm dying here trying to figure this out for days.
Here's the scenario:

1) External script.as file dynamically imported to loader.swf file that creates a textfield

(createTextField)
2) Content for the text field should be provided by an XML file
3) Content styled by external css file
4) Fonts need to be embedded so as to apply anti-alias

I can get the XML & CSS to apply to the text field, but can't get the content to use the embedded font. It

usually comes back "undefined" if the embedded font works. Otherwise, when I comment out the embed font, the

content work, but of course, not the anti-aliasing. Ugh. I've tried doing all kinds of forum searches, but

nothing has clarified this for me. I'm intermediate at AS and this is something new to me. Any help will be

GREATLY appreciated and I will send good juju your way.
Here's a sampling of some of the script I have been using:

ACTIONSCRIPT:

mf = new TextFormat();
mf.font = "arial_font";
Stage.scaleMode = "noScale";

this.createTextField("news_txt", 99, 50, 50, 450, 300);
news_txt.border = true;
news_txt.html = true;
news_txt.multiline = true;
news_txt.wordWrap = true;
news_txt.embedFonts = true;
news_txt.autoSize = true;
news_txt.setNewTextFormat(mf);


// Load CSS
var styles:TextField.StyleSheet = new TextField.StyleSheet();
styles.load("heading.css");

// Load XML apply to headingText
var banner_xml:XML = new XML();
banner_xml.ignoreWhite = true;
banner_xml.onLoad = function(success:Boolean):Void {
if (success) {
news_txt.styleSheet = styles;
news_txt.text = banner_xml;
} else {
trace("Error loading XML.");
}
};
banner_xml.load("heading.xml");



XML:

<story>
<title></title>
<mainBody>
<heading>Heading Text</heading>
<tagline>Clever tagline goes here</tagline>
</mainBody>
</story>



CSS:

heading {
color:#000000;
font-family:"Franklin Gothic Book", Arial, sans-serif;
display: block;

font-size: 50pt;
margin: 0px;
padding: 0px;
letter-spacing: -5px;
}

tagline {
color:#000000;
font-size: 20pt;
font-family:"Franklin Gothic Book", Arial, sans-serif;
display: block;
font-weight: bold;
}

So, if I turn off the xml/css and use htmlText to create content for the text field, the text uses the

embedded font and is anti-aliased. If I keep the xml/css but comment out embedFonts, then the content works

but is not anti-aliased. I need both of these to work at the same time. PLEASE HELP!!

peace

I was having the very same problem, I think it's caused by Flah's poor HTML parsing. It only allows certain tags, like <b>, and <a>, unordered list's, paragraphs and I think that's all, if you have content in other tags, like <i> the text won't be displayed. Also sometimes the font you choose is not properly displayed, Trebuchet MS is one that works alright, but it's kinda random. The solution I managed is to make a function to rebuild the HTML tags, since Flash sometimes wrecks it all up, and up till now it works fine.

This is the AS part of an app I've been working in, it's a relevant search:

Expand|Select|Wrap|Line Numbers
  1. Stage.scaleMode = "noScale";
  2.  
  3. var home:MovieClip = this;
  4. var searching:Boolean = false;
  5. var totalresults:Number = 0;
  6.  
  7. var xml:XML = new XML();
  8. xml.ignoreWhite = true;
  9. xml.onLoad = parseXML;
  10.  
  11. buscar.onRelease = function() {
  12.     search(q.text);
  13. }
  14.  
  15. function search(str:String) {
  16.     searching = true;
  17.     clearLastSearch();
  18.     xml.load("rs-xml.php?q=" + str);
  19. }
  20.  
  21. function parseXML() {
  22.     if(searching) {
  23.         var nodes:Array = xml.firstChild.childNodes;
  24.  
  25.         for (i = 0; i < nodes.length; i++) {
  26.             var titulo:String = nodes[i].firstChild.firstChild;
  27.             var texto:String = nodes[i].childNodes[1].firstChild;
  28.             var relev = nodes[i].childNodes[2].firstChild;
  29.  
  30.             var r:MovieClip = attachMovie("result","r"+i,i);
  31.             r._x = 35 + r._width/2;
  32.             r._y = 150 + (r._height*i);
  33.             r.titulo.text = titulo;
  34.             r.texto.htmlText = rebuildHTML(String(texto));
  35.             r.relev.text = "Relevancia: " + relev + "%";
  36.  
  37.             totalresults = (i+1);
  38.         }
  39.     }
  40. }
  41.  
  42. function clearLastSearch() {
  43.     for(i = 0; i < totalresults; i++) {
  44.         home["r"+i].removeMovieClip();
  45.     }
  46. }
  47.  
  48. function rebuildHTML(theText:String):String {
  49.     var tempText:String = theText;
  50.     var chunks:Array = new Array();
  51.  
  52.     chunks = tempText.split("&lt;");
  53.     tempText = chunks.join("<");
  54.     chunks = tempText.split("&gt;");
  55.     tempText = chunks.join(">");
  56.     chunks = tempText.split("&amp;");
  57.     tempText = chunks.join("&");
  58.  
  59.     chunks = tempText.split("href=&quot;");
  60.     tempText = chunks.join("href=\"");
  61.     chunks = tempText.split("&quot;>");
  62.     tempText = chunks.join("\">");
  63.     return tempText;
  64. }
  65.  
There are some spanish words in it, sorry about that, I'm from Argentina...
"texto" means text, "buscar" means serch, "relevancia" means "relevance", sorry if I missed some.

I hope it serves to you.
Reply