如何在RollOver上缩小Sprite的hitArea

时间:2011-12-17 07:42:15

标签: actionscript-3 flex animation sprite

我有一个由像素线分隔的许多10x10像素正方形的网格。当用户翻过精灵时,它会增长,动画大小约为其大小的4倍 - 大约为40x40像素。当鼠标位于精灵上方时,精灵保持较大,但如果用户想翻转相邻的精灵,则该精灵会遮挡它的大小。

是否可以缩小命中区域的大小,以便即使精灵的大小增加,鼠标仍然可以访问或触发下方的相邻精灵 - 向右,向左,向上,向下?我想过使用Mouse_move,但不确定是否会引发太多事件。

我阅读了以下帖子。但是,我的hitArea需要与原始的10x10像素精灵相同或略大。我收效甚微。

不确定这是否重要:我正在使用Flex项目中的ActionsScript类。主类文件是mxml。

Routing Mouse Events through a Sprite in Actionscript 3

AS3: defining hit area

public function onRollOver(event:MouseEvent):void
{  
    //do a bunch of stuff
    timerUp.start();
    timerUp.addEventListener(TimerEvent.TIMER, growSquare);     
}

private function growSquare(e:TimerEvent):void
{
    var maxSize:Number = 40;    
    if (currSprite.width < maxSize) {
        currSprite.width++;
        currSprite.height++;
        if (currSprite.width > maxSize) { 
        currSprite.width = maxSize;
        currSprite.height = maxSize;
        }
        e.updateAfterEvent();   
        } else {
          timerUp.stop();
        }   
  }


    /////////Hit Area Code - From Square Object //////////////////

        var vHeight:Number = 10;
        var vWidth:Number = 10;
        var square:Sprite = new Sprite();   
        square.graphics.beginFill(0x000000); 
        square.graphics.drawRect(0, 0, vWidth, vHeight);
        square.graphics.drawRect(-vWidth/2, -vHeight/2, vWidth, vHeight);
        square.graphics.endFill();

       // try to decrease the hit area, or keep it at the original size
        const hitArea:Sprite = new Sprite()
        hitArea.graphics.beginFill( 0xFFFFFF );
        hitArea.graphics.drawRect(-vWidth/2, -vHeight/2, vWidth, vHeight);
        hitArea.mouseEnabled = false;
        hitArea.visible = false;
        hitArea.x = square.x
        hitArea.y = square.y
        square.hitArea = hitArea;
        addChild( square );
        addChild( hitArea );

1 个答案:

答案 0 :(得分:2)

你可以将你的精灵分成两个子角色:一个用于命中区域,一个用于绘图。这样的事情:

public class GridBox extends Sprite
{
    public var hitAreaSprite:Sprite;
    public var drawingSprite:Sprite;

    public function GridBox()
    {
        hitAreaSprite = new Sprite();
        // Draw a 10x10 pixel box in hitAreaSprite, add event listeners, etc.

        drawingSprite = new Sprite();
        // Disable mouse input for drawingSprite here.

        addChild(hitAreaSprite);
        addChild(drawingSprite);
    }
}

...

var yourSprite:GridBox = new GridBox();

然后将yourSprite.hitAreaSprite设置为10x10像素,并将鼠标侦听器事件添加到其中。 yourSprite.drawingSprite必须包含所有图形元素和绘图。将其mouseChildrenmouseEnabled属性设置为false。

然后当精灵应该增长时,不要直接改变yourSprite.width,而是改变yourSprite.drawingSprite.width。由于没有为此子精灵启用鼠标,并且hitAreaSprite没有移动,下面的精灵仍然会收到鼠标事件。