Question

目前我正在尝试使用鼠标悬停事件更改精灵中加载的图像，并使用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");

}
}

试试这个。

AS3鼠标在更改图像上

1 个答案: