带有CSS <a> and <h> tag bugs</h></a>的TLFTextField中的AS3 htmlText

时间:2013-03-10 15:14:19

标签: html css xml actionscript-3 tlf

首先,我知道as3不喜欢css或html,并且在这个论坛上只有大约10亿个问题,但在搜索和搜索之后,我似乎无法找到类似于我正在经历的内容。如果回答/已经回答这个问题很明显,请原谅我。

情况

  • 我在Flash CS6中制作了一个在时间轴上编码的项目(我知道这很糟糕,但改变已经太晚了)
  • 该项目正在导入已导出到RSS源并在Flash中作为xml文件导入的wordpress页面
  • 创建了一个TLF文本字段(我可以使用经典文本字段,但希望尝试让它与TLF一起工作,出于各种原因),并通过.stylesheet =应用加载的CSS表格,并通过.htmlText =

问题

文本渲染中有一些小故障。我知道Flash不支持所有的css标签,但即使是基本的也不是完全工作。确切的问题是:

  • 标题后跟标题(即&lt; / h1&gt;&lt; h2&gt;)合并到前一标题(因此两者都被格式化为&lt; h1&gt;),添加&lt; P /&GT;他们之间的标签似乎解决了这个问题,但添加了换行符:/
  • 粗体和斜体标签证明是困难的,取而代之的是&lt;强&GT;和&lt; EM&GT;与&lt; B个和&lt; I&GT;让他们自己工作,但当他们混在一起时( 喜欢这个 )他们完全停止工作
  • 这是我的主要问题:链接始终是蓝色的,无论CSS说什么,尽管:hover正确(修复此问题,我可以忍受其他所有内容)

我认为问题在于我的代码,所以这里是as3:

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.text.TextField;
import flash.events.ProgressEvent;
import fl.text.TLFTextField;

var fonts:Array = Font.enumerateFonts();
for each (var font:Font in fonts)
{
    trace( font.fontName+":"+font.fontType );
}

var rss_xml:XML = new XML();
var test_txt:TLFTextField = new TLFTextField  ;
with (test_txt)
{
    antiAliasType = AntiAliasType.ADVANCED;
    width = 940;
    height = 600;
    x = 0;
    y = 0;
    autoSize = TextFieldAutoSize.LEFT;
    wordWrap = true;
    embedFonts = true;
}
var sulsc_style:StyleSheet = new StyleSheet();
var css_loader:URLLoader = new URLLoader();

css_loader.load(new URLRequest("sulsc_style.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void
{
    sulsc_style.parseCSS(e.target.data);
    rss_xml.ignoreWhitespace = false;
    var rss_loader:URLLoader = new URLLoader(new URLRequest("http://news.sulsc.org/feed"));
    rss_loader.addEventListener(Event.COMPLETE,rss_loaded);
    l.mode = "manual";
    rss_loader.addEventListener(ProgressEvent.PROGRESS,rss_load);
}

function rss_load(e:ProgressEvent):void
{
    //trace(e.bytesLoaded/(113*1024));
    l.setProgress(e.bytesLoaded,(113*1024));
}

function rss_loaded(e:Event):void
{
    removeChild(l);
    l = null;
    rss_xml = XML(e.target.data);
    rss_xml.ignoreWhiteSpace = true;
    var rss_raw:String = String(rss_xml);
    rss_raw = rss_raw.split(":encoded").join("");
    rss_raw = rss_raw.split("\n").join("");
    rss_raw = rss_raw.split("</h1><h2>").join("</h1><p/><h2>");
    rss_raw = rss_raw.split("</h2><h3>").join("</h2><p/><h3>");
    rss_raw = rss_raw.split("</h3><h4>").join("</h3><p/><h4>");
    rss_raw = rss_raw.split("</h4><h5>").join("</h4><p/><h5>");
    rss_raw = rss_raw.split("<strong>").join("<b>");
    rss_raw = rss_raw.split("</strong>").join("</b>");
    rss_raw = rss_raw.split("<em>").join("<i>");
    rss_raw = rss_raw.split("</em>").join("</i>");
    rss_xml = XML(rss_raw);
    test_txt.styleSheet = sulsc_style;
    test_txt;
    test_txt.htmlText = rss_xml.channel.item.(guid == "http://news.sulsc.org/?page_id=656").content;
    addChild(test_txt);
}

以下是它正在阅读的XML:

<h1>Heading 1</h1><p/><h2>Heading 2</h2><p/><h3>Heading 3</h3><p/><h4>Heading 4</h4><p><a title="SULSC" href="http://www.sulsc.org">Isolated link.</a></p><p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh risus, elementum in tempor non, <a title="SULSC" href="http://www.sulsc.org">normal link</a>. Donec consequat arcu in nulla rhoncus aliquam. Fusce eu leo nunc, eget tempus risus. Aliquam imperdiet, sem non euismod blandit, nisi sapien pharetra leo, ac facilisis velit purus nec <i><b>bold italic</b></i>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales vulputate interdum. <del>Strikethrough</del> congue, purus ut rhoncus porttitor, erat velit iaculis libero, nec commodo leo dui eget ante. Vivamus volutpat sollicitudin vulputate.</p><blockquote><p>Block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh risus, elementum in tempor non, malesuada ac nisl. Donec consequat arcu in nulla rhoncus aliquam. Fusce eu leo nunc, eget tempus risus. Aliquam imperdiet, sem non euismod blandit, nisi sapien pharetra leo, ac facilisis velit purus nec tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales vulputate interdum. Vestibulum congue, purus ut rhoncus porttitor, erat velit iaculis libero, nec commodo leo dui eget ante. Vivamus volutpat sollicitudin vulputate.</p></blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh risus, elementum in tempor non, malesuada ac nisl. Donec consequat arcu in nulla rhoncus aliquam. Fusce eu leo nunc, eget tempus risus. <i>Italic</i> imperdiet, sem non euismod blandit, nisi sapien pharetra leo, ac facilisis velit purus nec tellus. <b>BOLD</b> aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <a href="http://sulsc.org">Link</a> sodales vulputate interdum. Vestibulum congue, <a href="http://sulsc.org"><b><i>BOLD ITALIC LINK</i></b></a> ut rhoncus porttitor, erat velit iaculis libero, nec commodo leo dui eget ante. Vivamus volutpat sollicitudin vulputate.</p><ol><li>Numbered list</li><li>Number two</li><li>Number three</li></ol>

这是正在应用的CSS:

/*
leading is line height
*/
p, ol, ul, li, body {
    font-family: Fontin Sans Rg;
    font-size: 12pt;
    color: #666666;
    text-align: justify;
}
h1 {
    font-family: Nilland;
    font-size: 30pt;
    text-align:left;
    color: #999999;
}
h2 {
    font-family: Nilland;
    font-size: 20pt;
    color: #ff9900;
    margin-left:25px;
    letter-spacing: 1px;
}
h3 {
    font-family: GeosansLight;
    font-size: 16pt;
    text-align:left;
    color: #999999;
    margin-left:50px;
    letter-spacing: 1px;
}
h4, h5, h6 {
    font-family: GeosansLight;
    font-size: 14pt;
    text-align:left;
    color: #999999;
    margin-left:75px;
    letter-spacing: 1px;
}
ol, ul, li {
    margin-left: 50px;
}
b-quote,blockquote {
    font-family: Fontin Sans Rg;
    font-style:italic;
    color:#999999;
    margin-left: 100px;
    margin-right: 100px;
}
a, {
    text-decoration: underline;
    color: #666666;
}
a:hover {
    color: #FF9900;
    text-decoration: underline;
}

他们合并产生了这个:

如果你知道我做错了什么,请告诉我,但我是一个完整的新手所以外行人的条款将不胜感激(:

3 个答案:

答案 0 :(得分:2)

就像你说的那样,Flash在StyleSheets方面存在问题。也许你应该尝试直接在as3中设置样式!一直为我工作!

var style:StyleSheet = new StyleSheet();

var hover:Object = new Object();
hover.color = "#FF9900";

var link:Object = new Object();
link.fontWeight = "bold";
link.textDecoration= "underline";
link.color = "#00FF00"; //green

style.setStyle("a:link", link);
style.setStyle("a:hover", hover);

html_txt.styleSheet = style;

那是链接问题!对于其他人我必须自己测试,我会在我做的时候更新答案!但您可以尝试在as3中设置所有Style属性。

答案 1 :(得分:0)

在CSS中使用:link设置flash中的链接样式。

插入具有特定样式的段落标记(没有行高的段落标记)可以有效地修复标题问题。

没有想出大胆和斜体,但这并不是一个主要的担忧。如果有人这样做,请告诉我!

以下是任何感兴趣的人的当前工作代码:

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.text.TextField;
import flash.events.ProgressEvent;
import fl.text.TLFTextField;

var fonts:Array = Font.enumerateFonts();
for each (var font:Font in fonts)
{
    trace( font.fontName+":"+font.fontType );
}

var rss_xml:XML = new XML();
var test_txt:TLFTextField = new TLFTextField  ;
with (test_txt)
{
    antiAliasType = AntiAliasType.ADVANCED;
    width = 940;
    height = 600;
    x = 0;
    y = 0;
    autoSize = TextFieldAutoSize.LEFT;
    wordWrap = true;
    embedFonts = true;
}
var sulsc_style:StyleSheet = new StyleSheet();
var css_loader:URLLoader = new URLLoader();

css_loader.load(new URLRequest("sulsc_style.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void
{
    sulsc_style.parseCSS(e.target.data);
    rss_xml.ignoreWhitespace = false;
    var rss_loader:URLLoader = new URLLoader(new URLRequest("http://news.sulsc.org/feed"));
    rss_loader.addEventListener(Event.COMPLETE,rss_loaded);
    l.mode = "manual";
    rss_loader.addEventListener(ProgressEvent.PROGRESS,rss_load);
}

function rss_load(e:ProgressEvent):void
{
    //trace(e.bytesLoaded/(113*1024));
    l.setProgress(e.bytesLoaded,(113*1024));
}

function rss_loaded(e:Event):void
{
    removeChild(l);
    l = null;
    rss_xml = XML(e.target.data);
    rss_xml.ignoreWhiteSpace = true;
    var rss_raw:String = String(rss_xml);
    rss_raw = rss_raw.split(":encoded").join("");
    rss_raw = rss_raw.split("\n").join("");
    rss_raw = rss_raw.split('<p style="text-align: right;">').join('<p class="right">');
    rss_raw = rss_raw.split('<p style="text-align: center;">').join('<p class="centre">');
    rss_raw = rss_raw.split('<p style="text-align: left;">').join('<p class="left">');
    rss_raw = rss_raw.split('<p style="text-align: justify;">').join('<p class="just">');
    var heading_replace:RegExp = new RegExp("(</h[0-9]>)(<h[0-9]>)","g9");
    var underline_replace:RegExp = new RegExp('<span style="text-decoration: underline;">(.*?)</span>',"gi");
    var bold_replace:RegExp = new RegExp('<strong>(.*?)</strong>',"gi");
    var italic_replace:RegExp = new RegExp('<em>(.*?)</em>',"gi");
    rss_raw = rss_raw.replace(heading_replace,'$1<p class="space"></p>$2');
    rss_raw = rss_raw.replace(underline_replace,'<u>$1</u>');
    rss_raw = rss_raw.replace(bold_replace,'<b>$1</b>');
    rss_raw = rss_raw.replace(italic_replace,'<i>$1</i>');
    rss_xml = XML(rss_raw);
    test_txt.styleSheet = sulsc_style;
    test_txt.htmlText = rss_xml.channel.item.(guid == "http://news.sulsc.org/?page_id=400").content;
    addChild(test_txt);
}

和CSS:

/*
flash doesn't support:
-bold and italic
-strikethrough
*/
p, ol, ul, li, body {
    font-family: Fontin Sans Rg;
    font-size: 12pt;
    color: #666666;
    text-align: justify;
    padding-bottom: 12px;
    padding-top: 6px;
}
h1 {
    font-family: Nilland;
    font-size: 30pt;
    text-align:left;
    color: #999999;
}
h2 {
    font-family: Nilland;
    font-size: 20pt;
    color: #ff9900;
    margin-left:25px;
    letter-spacing: 1px;
}
h3 {
    font-family: GeosansLight;
    font-size: 16pt;
    text-align:left;
    color: #999999;
    margin-left:50px;
    letter-spacing: 1px;
}
h4, h5, h6 {
    font-family: GeosansLight;
    font-size: 14pt;
    text-align:left;
    color: #999999;
    margin-left:75px;
    letter-spacing: 1px;
}
ol, ul, li {
    margin-left: 50px;
    line-height:5px
}
b-quote,blockquote {
    font-family: Fontin Sans Rg;
    font-style:italic;
    color:#999999;
    margin-left: 100px;
    margin-right: 100px;
    padding-bottom: 12px;
}
a:link {
    text-decoration: underline;
    color: #666666;
}
a:hover {
    color: #FF9900;
    text-decoration: underline;
}
/* DO NOT DELETE THESE */
.space { 
    line-height:1px;
    padding-bottom: 0px;
    padding-top:0px;
}
.right {
    text-align:right;
}
.centre {
    text-align:center;
}
.left {
    text-align:left;
}
.just {
    text-align:justify;
}

这使得:

Working!

感谢您的帮助!

答案 2 :(得分:0)

在粗体/斜体问题上,我们发现我们需要完全独立的字体/类来处理它们。因此,您需要导出一个常规,斜体和粗体样式的字体,然后将相应的部分包装在字体标记中。我们使用和执行查找/替换将parentClassName_italic添加到字体标记,然后指向css中导出的​​字体。一个真正的皮塔饼,但你去了。