AS3中实现多样化的A标签

发表评论 阅读评论

首先说下想要实现的效果。在htmlText里有多个A标签,想要鼠标滑到不同的标签时,显示不同的颜色.很明显的使用html+css( styleSheel)比较方便。OK,既然是html+css,一开始我还觉得很是简单,因为AS3支持部分css的,但是当我真正去实现的时候才明白.好多事情并不是那么的想当然。

html+css的简单思路

我们使用html+css的思路来看这个问题,实在是超简单的,首先使用下面的html:

<a class='a1' href='#'>This is A1</a><br/>
<a class='a2' href='#'>This is A2</a>

然后再配合下面的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样式,当鼠标移动到需要改变样式的字符上,再应用对应的样式即可。
这个思路的难点在于如何知道鼠标移动到了需要改变的字符上,其实有两种解决方法:

  1. 判断字符在文本中的索引,根据索引段来应用对应的样式。
  2. 链接文本时,根据文本的url来应用对应的样式。

这里使用第二种,因为我们有链接文本。那么配合MouseEvent.MOUSE_OVER事件+ TextFormat.url 来实现。
将上面的css拆分为2个css,并且修改html代码为:

<a href='event:#1'>This is A1</a><br/>
<a href='event:#2'>This is A2</a>

这样,鼠标到不同的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 = "<a href='event:#1'>This is A1</a><br/>" +
                    "<a href='event:#2'>This is A2</a>";
            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;
            }
        }
    }
}
标签: , ,

  1. | |

    When I initiallyy left a commednt I seem to have clicked on thee -Notify me when new comments are added-
    checkbox and now whenever a comment is added I receive
    four emails with thhe same comment. There has to be an easy method you aree able
    to remove me from that service? Cheers!

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
回到顶部