AS3 Flash - 根据鼠标位置在鼠标移动时更改对象的颜色

Question

我有一个对象，我需要在移动时根据鼠标的 x 和 y 位置更改其颜色。如何在代码中做到这一点？

我可以一帧一帧地放置不同的按钮，鼠标悬停在按钮上，我们可以转到其他帧，但这种方法很累。有没有更简单的方法？

我想要将图像分成彩色的行和列，并突出显示鼠标所在的列和行。

Answer 1

我是如何解释这个问题的：

您需要根据鼠标相对于该对象的 x 和 y 位置来更改对象的颜色

如果是这样，这里有一个例子：

//listen for the mouse move event
object.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler):

function mouseMoveHandler(e:MouseEvent){

    //make a reference to the object that dispatched this event
    var object:DisplayObject = e.currentTarget as DisplayObject;

    //do your logic to determine the color based off the mouse position.


    //get the percentage of the mouse postion from 0 - 1
    var xPer:Number = e.localX / object.width;
    var yPer:Number = e.localY / object.height; 


    //One way you could do this, is change the Red/Green/Blue based of the mouse position like so:
    //create a color transformation object
    var colorTransform = new ColorTransform(1,1,1,1,0xFF * xPer,0xFF * xPer,0xFF * yPer,1);



    //OR, you could do it quadrant based like this:
    var color:uint = 0; //black default
    if(xPer >= .5 && yPer >= .5){
        //if the mouse is on the right bottom side of the object
        color = 0xFF0000; //make it red
    }
    if(xPer < .5 && yPer >=.5){
        //if the mosue is on the left bottom of the object
        color = 0x00FF00; //make it green
    }
    if(xPer >= .5 && yPer < .5){
        //if mouse is on the top right side
        color = 0x0000FF; //make it blue
    }
    if(xPer < .5 && yPer < .5){
        //if mouse is on the top left side
        color = 0xFF00FF; //make it purple
    }
    var colorTransformation = object.transform.colorTransform;
    colorTransform.color = color;




    //assign it to the object
    object.transform.colorTransform = colorTransform;
}

---

编辑

根据您的 cmets，听起来您想要这样的东西。

假设您在舞台上有一个名为obj 的MovieClip，最底部的孩子是您要使用的位图。

import flash.geom.Rectangle;
import flash.display.BitmapData;
import flash.events.MouseEvent;
import flash.display.Bitmap;

//get a reference to the actual bitmap
//this assumes the bitmap is the bottom most child of the MovieClip container called obj
var bitmap:Bitmap = Bitmap(obj.getChildAt(0));
var bitmapData:BitmapData = bitmap.bitmapData;

//store the original pixel data
var originalPixels:ByteArray = bitmapData.getPixels(bitmap.getBounds(bitmap));


var rows:int = 3;
var rowHeight:Number = Math.ceil(bitmap.height / rows);
var curRow:int = -1;

var cols:int = 3;
var colWidth:int = Math.ceil(bitmap.width / cols);
var curCol:int = -1;

//listen for the mouse move event
obj.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
obj.addEventListener(MouseEvent.MOUSE_OUT, restoreBitmap);

function restoreBitmap(e:Event = null):void {
    //restore original
    if(e){
        //if this function was triggered from the mouse event
        curRow = -1;
        curCol = -1;
    }
    originalPixels.position = 0;
    bitmapData.setPixels(bitmap.getBounds(bitmap),originalPixels);
}

function mouseMoveHandler(e:MouseEvent){
    //figure out what row the mouse is in and make the row rectangle
    var row:int = Math.floor(bitmap.y + e.localY / rowHeight);
    var col:int = Math.floor(bitmap.x + e.localX / colWidth);

    var rect:Rectangle;

    //if either the row or column has changed, restore the pixels to original and draw new ones
    if(row != curRow || col != curCol){
        restoreBitmap();

        curCol = col;
        rect = new Rectangle(curCol * colWidth, 0, colWidth, bitmap.height);

        colorRect(bitmapData, rect,0x0000FF);

        curRow = row;
        rect = new Rectangle(0, row * rowHeight, bitmap.width, rowHeight);

        colorRect(bitmapData, rect,0x00FF00);
    }
}

function colorRect(bmd:BitmapData, rect:Rectangle, color:uint) {
    var row:int = 0;
    var col:int = 0;

    while(row * col <= rect.width * rect.height){
        bmd.setPixel(int(rect.x) + col, int(rect.y) + row, color);

        //incriment the row/column
        if (col < rect.width -1) {
            col++;
        }else {
            row++
            col = 0;
        }
    }
}

请记住，FlashPro 是否会将位图拖到时间轴上 Shape，除非您转到位图的属性并告诉它导出为动作脚本。

另外，位图不能缩放。对包含位图的容器/MovieClip 进行任何缩放。

---

这是相同的结果，但使用掩码完成后，您可能会看到此方法的速度有多快：

//get a reference to the actual bitmap
//this assumes the bitmap is the bottom most child of the MovieClip container called obj
var bitmap:Bitmap = Bitmap(obj.getChildAt(0));
var bitmapData:BitmapData = bitmap.bitmapData;

//clone it twice and add the clones to container (obj)
//also add mask objects
var cloneCol:Bitmap = new Bitmap(bitmapData);
var cloneColMask:Shape = new Shape();
cloneCol.mask = cloneColMask;
obj.addChild(cloneCol);
obj.addChild(cloneColMask);

//tint the clones
var ct:ColorTransform = cloneCol.transform.colorTransform;
ct.color = 0x00FF00;
cloneCol.transform.colorTransform = ct;


var cloneRow:Bitmap = new Bitmap(bitmapData);
var cloneRowMask:Shape = new Shape();
cloneRow.mask = cloneRowMask;
obj.addChild(cloneRow);
obj.addChild(cloneRowMask);

ct.color = 0x0000FF;
cloneRow.transform.colorTransform = ct;


//setup your columns and rows

var rows:int = 3;
var rowHeight:Number = Math.ceil(bitmap.height / rows);
var curRow:int = -1;

var cols:int = 3;
var colWidth:int = Math.ceil(bitmap.width / cols);
var curCol:int = -1;

//listen for the mouse move event
obj.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
obj.addEventListener(MouseEvent.MOUSE_OUT, restoreBitmap);

function restoreBitmap(e:Event = null):void {
    cloneRowMask.graphics.clear();
    cloneColMask.graphics.clear();
}

function mouseMoveHandler(e:MouseEvent){
    //figure out what row the mouse is in and make the row rectangle
    var row:int = Math.floor(bitmap.y + e.localY / rowHeight);
    var col:int = Math.floor(bitmap.x + e.localX / colWidth);

    var rect:Rectangle;

    if(row != curRow || col != curCol){
        curCol = col;
        cloneColMask.graphics.clear();
        cloneColMask.graphics.beginFill(0);
        cloneColMask.graphics.drawRect(curCol * colWidth, 0, colWidth, bitmap.height);

        curRow = row;
        cloneRowMask.graphics.clear();
        cloneRowMask.graphics.beginFill(0);
        cloneRowMask.graphics.drawRect(0, row * rowHeight, bitmap.width, rowHeight);
    }
}

Answer 2

非常感谢 我也做了其他解决方案。我将图像分成不同的小部分，每个部分都是一个按钮，然后在鼠标悬停时更改每个按钮的颜色