AS3 鼠标悬停更改图像

Question

目前我正在尝试使用 mouseover 事件更改加载到 sprite 中的图像，并使用 mouseout 将其更改回来。但它不能正常工作，我错过了什么吗？

public class Tab extends Sprite
{
    var imageLoader:Loader = new Loader();
    var TabSprite:Sprite = new Sprite();
    var SkinImages:Array = [Skin.TAB_ACTIVE,Skin.TAB_DISABLED,Skin.TAB_HOVER,Skin.TAB_VIEW];

    public function Tab()
    {   
        for each (var Image:String in SkinImages){
            imageLoader.load(new URLRequest(Image));
        }

        TabSprite.buttonMode = true;
        addChild(TabSprite);

        TabSprite.addChild(imageLoader);
        TabSprite.addEventListener(MouseEvent.MOUSE_OVER, onTabHover);
    }


    private function onTabHover(e:MouseEvent){
        trace("HOVER");
        TabSprite.removeEventListener(MouseEvent.MOUSE_OVER, onTabHover);
        imageLoader.load(new URLRequest(Skin.TAB_HOVER));
        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{
            TabSprite.addEventListener(MouseEvent.MOUSE_OUT, onTabOut);
        });

    }

    private function onTabOut(e:MouseEvent){
        trace("OUT");
        TabSprite.removeEventListener(MouseEvent.MOUSE_OUT, onTabOut);
        imageLoader.load(new URLRequest(Skin.TAB_VIEW));
        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{
            TabSprite.addEventListener(MouseEvent.MOUSE_OVER, onTabHover);
        });

    }
}

Answer 1

你不应该这样嵌套监听器。只需在构造函数中添加两个：

TabSprite.addEventListener(MouseEvent.ROLL_OVER, onTabHover);
TabSprite.addEventListener(MouseEvent.ROLL_OUT, onTabOut);

注意将 MOUSE_OVER 更改为 ROLL_OVER 在大多数情况下会更好。您也不应该在每次鼠标事件时都加载图像。预加载它们，然后使用。在侦听器中使用匿名函数也是不好的做法，因为您无法删除该侦听器：

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{
        TabSprite.addEventListener(MouseEvent.MOUSE_OUT, onTabOut);
    });

事实上你并没有移除它——这很糟糕。

    for each (var Image:String in SkinImages){
        imageLoader.load(new URLRequest(Image));
    }

我怀疑它是否有效，我认为您不能使用一个加载器一次加载多个图像。

试试这个：

public class Tab extends Sprite
{
var imageOverLoader:Loader = new Loader();
var imageOutLoader:Loader = new Loader();
var TabSprite:Sprite = new Sprite();
var SkinImages:Array = Skin.TAB_ACTIVE,Skin.TAB_DISABLED,Skin.TAB_HOVER,Skin.TAB_VIEW];

public function Tab()
{   

    TabSprite.buttonMode = true;
    this.addChild(TabSprite); // you also need to add as a Child "Tab" object in the Main Class

    imageOutLoader.load(new URLRequest(Skin.TAB_VIEW));
    imageOverLoader.load(new URLRequest(Skin.TAB_HOVER));
    TabSprite.addChild(imageOutLoader);

    TabSprite.addEventListener(MouseEvent.ROLL_OVER, onTabHover);
    TabSprite.addEventListener(MouseEvent.ROLL_OUT, onTabOut);
}


private function onTabHover(e:MouseEvent){
    TabSprite.removeChild(imageOutLoader);
    TabSprite.addChild(imageOverLoader);

    trace("HOVER");

}

private function onTabOut(e:MouseEvent){
    TabSprite.removeChild(imageOverLoader);
    TabSprite.addChild(imageOutLoader);

    trace("OUT");

}
}

试试这个。