Hey VBS.
In the post I’ve linked, singmajesty mentioned you have to use bitmapData.colortransform to change the color.
Problem is you can’t smoothly tween from one color to another that way. Luckily there’s a workaround. The idea is to create a Bitmap duplicate of your target shape (myButton.arrow), make this a child of myButton and instead of using Actuate to tween between colors use Actuate to fade the duplicate in/out.
Check out this example:
package;
import openfl.display.*;
import openfl.Lib;
import motion.*;
import openfl.geom.*;
import openfl.Assets;
import openfl.events.MouseEvent;
class Main extends Sprite
{
private var localColor:ColorTransform = new ColorTransform();
public function new()
{
super();
var myButton:Sprite = new Sprite();
var shape:Shape = new Shape();
shape.graphics.beginFill(0x00ff00,1);
shape.graphics.moveTo(0,20);
shape.graphics.lineTo(50,20);
shape.graphics.lineTo(50,0);
shape.graphics.lineTo(80,30);
shape.graphics.lineTo(50,60);
shape.graphics.lineTo(50,40);
shape.graphics.lineTo(0,40);
shape.graphics.lineTo(0,20);
shape.graphics.endFill();
shape.name = "arrow";
addChild(myButton);
myButton.addChild(shape);
localColor.color = 0x0000ff;
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOver);
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOut);
}
private function duplicateAsBitmap(parentObj:DisplayObjectContainer,targetObj:DisplayObject):Void
{
var bitmapData:BitmapData = new BitmapData (Math.ceil (targetObj.width), Math.ceil (targetObj.height), true, 0x00000000);
bitmapData.draw(targetObj);
bitmapData.colorTransform(bitmapData.rect, localColor);
var bmp:Bitmap = new Bitmap(bitmapData);
bmp.name = "bmpDup";
parentObj.addChild(bmp);
}
private function rollOver(e:MouseEvent):Void
{
if (!Std.is(cast(e.target, Sprite).getChildByName("bmpDup"), Bitmap))
{
duplicateAsBitmap(cast(e.target, Sprite),cast(e.target, Sprite).getChildByName("arrow"));
}
Actuate.update (fadeColor, 1, [cast(e.target, Sprite).getChildByName("bmpDup"),0], [cast(e.target, Sprite).getChildByName("bmpDup"),1]);
}
private function rollOut(e:MouseEvent):Void
{
if (!Std.is(cast(e.target, Sprite).getChildByName("bmpDup"), Bitmap))
{
duplicateAsBitmap(cast(e.target, Sprite),cast(e.target, Sprite).getChildByName("arrow"));
}
Actuate.update (fadeColor, 1, [cast(e.target, Sprite).getChildByName("bmpDup"),1], [cast(e.target, Sprite).getChildByName("bmpDup"),0]);
}
private function fadeColor(ob:Bitmap,val:Float):Void
{
ob.alpha = val;
}
}