Question

大家好我需要一些关于如何在as3中编码以在鼠标悬停在按钮上显示图像的帮助。我现在有这个。我需要按钮在鼠标悬停时在屏幕上显示一些图像。。。。。。。。。

var centerX:Number = 330;
var centerY:Number = 130;
var radiusX:Number = 250;
var radiusY:Number = 50;
var speed:Number = 0.1;
var farthestFade:Number = 0.2;
var farthestSize:Number = 1;
var minSpeed:Number = -0.10;
var maxSpeed:Number = 0.10;
var rangeSpeed:Number = maxSpeed - minSpeed;
var minY:Number = centerY - radiusY;
var maxY:Number = centerY + radiusY;
var rangeY:Number = maxY - minY;
var minScale:Number = 0.3;
var maxScale:Number = 0.7;
var rangeScale:Number = maxScale - minScale;
var itemArray:Array = new Array();



var image1MC:image1 = new image1();
itemArray.push(image1MC);
image1MC.targetURL = "http://www.gmail.com";


var image2MC:image2 = new image2();
itemArray.push(image2MC);
image2MC.targetURL = "http://www.gmail.com";

var image3MC:image3 = new image3();
itemArray.push(image3MC);
image3MC.targetURL = "http://www.twitter.com";

var image4MC:image4 = new image4();
itemArray.push(image4MC);
image4MC.targetURL = "http://www.facebook.com";

var image5MC:image5 = new image5();
itemArray.push(image5MC);
image5MC.targetURL = "http://www.linkedin.com";

var image6MC:image6 = new image6();
itemArray.push(image6MC);
image6MC.targetURL = "http://www.microsoft.com";

var image7MC:image7 = new image7();
itemArray.push(image7MC);
image7MC.targetURL = "http://www.irctc.co.in";

var image8MC:image8 = new image8();
itemArray.push(image8MC);
image8MC.targetURL = "http://www.yahoo.com";

var canvas:MovieClip = new MovieClip();
addChild(canvas);

for (var i:Number = 0; i < itemArray.length; i++)
{
    canvas.addChild(itemArray[i]);
    itemArray[i].buttonMode = true;
    itemArray[i].addEventListener(MouseEvent.CLICK, goToURL);
    itemArray[i].itemAngle = Math.PI * 2 / itemArray.length * i;
    itemArray[i].addEventListener(Event.ENTER_FRAME, animate);
}

function goToURL(e:MouseEvent):void
{
    var req:URLRequest = new URLRequest(e.currentTarget.targetURL);
    navigateToURL(req);
}

function animate(e:Event):void
{
    speed = mouseX / stage.stageWidth * rangeSpeed + minSpeed;
    e.currentTarget.x = Math.cos(e.currentTarget.itemAngle) * radiusX + centerX;
    e.currentTarget.y = Math.sin(e.currentTarget.itemAngle) * radiusY + centerY;
    e.currentTarget.itemAngle += speed;
    itemArray.sortOn("y");

    for(var i:Number = 0; i < itemArray.length; i++)
    {
        canvas.setChildIndex(itemArray[i], i);
        var pct:Number = (itemArray[i].y - minY) / rangeY;
        var scale:Number = pct * rangeScale + minScale;
        itemArray[i].scaleX = itemArray[i].scaleY = scale;
    }
}

Answer 1

简单代码：

var loader:Loader = new Loader();
loader.load(new URLRequest("imgurl.png"));
button.addEventListener(MouseEvent.MOUSE_OVER , onOver);
button.addEventListener(MouseEvent.MOUSE_OUT , onOut);

loader.y = button.y+button.height;

function onOver(e:MouseEvent):void {
    addChild(loader);
}
function onOut(e:MouseEvent):void {
    if(loader.parent){
        removeChild(loader);
    }
}

Answer 2

正如你所说，你的按钮在舞台上。

var btn:Button;
for(var i=0; i<this.numChildren; i++){
  var btn = this.getChildAt(i) as Button;
  if(btn){
    btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
    btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
  }
}
function mouseOverHandler(e:MouseEvent):void{
  // Add code to show any image / text
}
function mouseOutHandler(e:MouseEvent):void{
  // Add code to remove any image / text
}

更新时间：2013年9月23日 - 根据您更新的问题解决方案。

....
// Hover container sprite
var hContainer:Sprite = new Sprite;
addChildAt(hContainer, 0);

for (var i:Number = 0; i < itemArray.length; i++)
{
    ...
    // Add mouser over handler
    itemArray[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
    ...
}

/**
* MouseOver Listener
* @param e MouseEvent
*/
function mouseOverHandler(e:MouseEvent):void{
    var url:String = e.currentTarget.targetURL as String;
    addHoverImage(url);
}

/**
* Add hover image
* @param url String 
*/
function addHoverImage(url:String):void{
    if(hContainer.numChildren)
        hContainer.removeChildAt(0);
    var loader:Loader = new Loader();
    hContainer.addChild(loader);
    loader.load(new URLRequest(url));
}
...

请在gist url

找到详细的解决方案

一些改进代码结构和方法的评论。

理想情况下，我更喜欢使用as3类结构，而不是将所有代码添加到Flash IDE时间轴。
请不要试图重复自己，即

-

//Problem in this block of code as you have repeated lot of times.
var image1MC:image1 = new image1();
itemArray.push(image1MC);
image1MC.targetURL = "tab.png"

// Better approach could be try adding a class and pass require parameters.
var image1MC:ImageClass = new ImageClass("tab.png");
addChild(image1MC);

如何在Flash AS3中鼠标悬停时显示图像

2 个答案: