» CSS

首先说下想要实现的效果。在htmlText里有多个A标签,想要鼠标滑到不同的标签时,显示不同的颜色.很明显的使用html+css( styleSheel)比较方便。OK,既然是html+css,一开始我还觉得很是简单，因为AS3支持部分css的，但是当我真正去实现的时候才明白.好多事情并不是那么的想当然。 html+css的简单思路 我们使用html+css的思路来看这个问题，实在是超简单的，首先使用下面的html： ~~~ This is A1 This is A2 ~~~ 然后再配合下面的css来实现： ~~~ .a1 a:hover{ color:#FF0000; } .a2 a:hover{ color:#00FF00; } ~~~ 这样开起来很不错，但是很遗憾，AS3的 TextFiled.htmlText 不支持css的联合选择器.所以不能将class .a1与伪类 a:hover同时使用。如果自己解析html+解析css+textFormat不太现实。 变通办法 虽然AS3不支持css的联合选择器，但是对于单个选择器还是支持的。因此可以先给html文本设置默认的css样式，当鼠标移动到需要改变样式的字符上，再应用对应的样式即可。 这个思路的难点在于如何知道鼠标移动到了需要改变的字符上，其实有两种解决方法： 判断字符在文本中的索引，根据索引段来应用对应的样式。 链接文本时，根据文本的url来应用对应的样式。 这里使用第二种，因为我们有链接文本。那么配合MouseEvent.MOUSE_OVER事件+ TextFormat.url 来实现。 将上面的css拆分为2个css，并且修改html代码为： ~~~ This is A1 This is A2 ~~~ 这样，鼠标到不同的a标签上，使用不同的css就可以了。 演示示例 这是一个css A:hover的示例 后话 其实AS3对html及css的支持很少。仅支持 CSS1 的一部分而不是全部，所以做一些简单的样式还是蛮好用的，但是复杂的就不要奢望了，而且就这篇文章里的例子，如果推广到非A标签的情况就不好解决了。当然Adobe的帮助文档也没有具体说明哪些css被支持，那么当我们想要使用时还是需要先测试下才好。 A标签有4个伪类： :link 未访问的链接(AS3不区别是否访问过) :visited 已访问的链接(AS3不支持) :active 选定的链接(在鼠标点击与释放之间发生的事件) :hover 鼠标移动到链接上 源代码 ~~~ package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFormat; /** * ... * @author lite3 */ public class AhoverTest extends Sprite { private var txt:TextField; private var style1:StyleSheet; private var style2:StyleSheet; public function AhoverTest() { var html:String "This is A1" + "This is A2"; style1 new StyleSheet(); style1.parseCSS("a:hover { color:#FF0000; }"); style2 new StyleSheet(); style2.parseCSS("a:hover { color:#00FF00; }"); txt new TextField(); txt.multiline true; txt.styleSheet style1; txt.htmlText html; addChild(txt); txt.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler); } private function moveHandler(e:MouseEvent):void { var i:int txt.getCharIndexAtPoint(e.localX, e.localY); if (i < 0) return; // 在需要的时候更新css样式 var tf:TextFormat txt.getTextFormat(i, i + 1); switch(tf.url) { case "event:#1" : setStyle(style1); break; case "event:#2" : setStyle(style2); break; } } private function setStyle(style:StyleSheet):void { // 这里一定要先判断当前有没有被设置过 if (txt.styleSheet ! style) { txt.styleSheet style; } } } } ~~~

LiteFeel

AS3中实现多样化的A标签