AS3鼠标悬停切换图片鼠标、图片

2023-09-08 11:54:34 作者:┌;饕餮噬天

目前我正在试图改变在鼠标悬停事件精灵下载的图像和的mouseout改回。但它不能正常工作,我失去了一些东西?

 公共类选项卡扩展Sprite
{
    VAR ImageLoader的:装载机=新的Loader();
    VAR TabSprite:雪碧=新的Sprite();
    VAR SkinImages:数组= [Skin.TAB_ACTIVE,Skin.TAB_DISABLED,Skin.TAB_HOVER,Skin.TAB_VIEW]。

    公共职能选项卡()
    {
        每个(VAR图片:字符串中SkinImages){
            imageLoader.load(新的URLRequest(图片));
        }

        TabSprite.buttonMode = TRUE;
        的addChild(TabSprite);

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


    私有函数onTabHover(E:的MouseEvent){
        跟踪(HOVER);
        TabSprite.removeEventListener(的MouseEvent.MOUSE_OVER,onTabHover);
        imageLoader.load(新的URLRequest(Skin.TAB_HOVER));
        imageLoader.contentLoaderInfo.addEventListener(引发Event.COMPLETE,功能(五:事件):无效{
            TabSprite.addEventListener(的MouseEvent.MOUSE_OUT,onTabOut);
        });

    }

    私有函数onTabOut(E:的MouseEvent){
        跟踪(OUT);
        TabSprite.removeEventListener(的MouseEvent.MOUSE_OUT,onTabOut);
        imageLoader.load(新的URLRequest(Skin.TAB_VIEW));
        imageLoader.contentLoaderInfo.addEventListener(引发Event.COMPLETE,功能(五:事件):无效{
            TabSprite.addEventListener(的MouseEvent.MOUSE_OVER,onTabHover);
        });

    }
}
 

解决方案 Axure制作鼠标悬停图片切换效果

您不应该嵌套侦听的方式。只是在构造函数中添加两个:

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

请注意改变MOUSE_OVER到ROLL_OVER它在大多数情况下,更好。在每一个鼠标事件你不应该还装载图像。 preLOAD它们,然后使用。还利用匿名函数的听众是不好的做法,因为你无法删除监听器:

  imageLoader.contentLoaderInfo.addEventListener(引发Event.COMPLETE,功能(五:事件):无效{
        TabSprite.addEventListener(的MouseEvent.MOUSE_OUT,onTabOut);
    });
 

而事实上,你是不是删除它 - 这是不好的。

 每个(VAR图片:字符串中SkinImages){
        imageLoader.load(新的URLRequest(图片));
    }
 

我怀疑它的工作原理,我认为你不能用一个装载机装载许多图像一次。

试试这个:

 公共类选项卡扩展Sprite
{
VAR imageOverLoader:装载机=新的Loader();
VAR imageOutLoader:装载机=新的Loader();
VAR TabSprite:雪碧=新的Sprite();
VAR SkinImages:阵列= Skin.TAB_ACTIVE,Skin.TAB_DISABLED,Skin.TAB_HOVER,Skin.TAB_VIEW]。

公共职能选项卡()
{

    TabSprite.buttonMode = TRUE;
    this.addChild(TabSprite); //你还需要添加作为主类孩子选项卡对象

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

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


私有函数onTabHover(E:的MouseEvent){
    TabSprite.removeChild(imageOutLoader);
    TabSprite.addChild(imageOverLoader);

    跟踪(HOVER);

}

私有函数onTabOut(E:的MouseEvent){
    TabSprite.removeChild(imageOverLoader);
    TabSprite.addChild(imageOutLoader);

    跟踪(OUT);

}
}
 

试试这个。

Currently I'm trying to change image loaded in a sprite with mouseover event and change it back with mouseout. But it's not working correctly, am i missing something?

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);
        });

    }
}

解决方案

You shouldn't nest listeners that way. Just add two in the constructor:

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

Note changing MOUSE_OVER to ROLL_OVER it's better in most cases. You shouldn't also load images at every mouse event. Preload them, and then use. Also using anonymous functions in listeners is bad practice as you are not able to remove that listener:

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

And in fact you are not removing it - this is bad.

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

I doubt it works, I think you cannot load many images at once by using one loader.

Try this:

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");

}
}

Try this.