本範例展示如何用 AS3 繪製七彩漸變背景,並讓舞台文字顏色根據滑鼠所在像素顏色以緩動插值平滑變化,同時添加互補色發光濾鏡,打造極具視覺張力的互動體驗。
BitmapData 繪製線性漸變矩形(紅→黃→綠→青→藍→洋紅→紅)。Event.ENTER_FRAME)以 getPixel(mouseX, mouseY) 取得滑鼠下像素顏色。0xFF - R/G/B)套用 GlowFilter。[SWF(backgroundColor=0x000000, width=550, height=400)]
var r:uint=0, g:uint=0, b:uint=0;
var color:uint, targetR:uint, targetG:uint, targetB:uint;
var filtersR:uint, filtersG:uint, filtersB:uint, filtersCo:uint;
var glowF:GlowFilter;
var matrix:Matrix = new Matrix();
matrix.createGradientBox(550, 200, 0, 0, 0);
// 繪製七彩漸變背景到 BitmapData
var sh:Shape = new Shape();
sh.graphics.beginGradientFill(GradientType.LINEAR,
[0xff0000,0xffff00,0x00ff00,0x00ffff,0x0000ff,0xff00ff,0xff0000],
[1,1,1,1,1,1,1],
[0,42,84,126,168,210,255], matrix);
sh.graphics.drawRect(0,0,550,200);
sh.graphics.endFill();
var bmd:BitmapData = new BitmapData(550,200);
bmd.draw(sh);
addChild(new Bitmap(bmd));
// 建立文字欄位
var txt:TextField = new TextField();
txt.defaultTextFormat = new TextFormat("華文琥珀", 60);
txt.text = "多特軟件站歡迎您!";
txt.autoSize = TextFieldAutoSize.CENTER;
txt.x = stage.stageWidth/2 - txt.width/2;
txt.y = stage.stageHeight*3/4 - txt.height/2;
addChild(txt);
// 幀事件監聽
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
color = bmd.getPixel(mouseX, mouseY);
targetR = color >> 16;
targetG = (color >> 8) & 0xff;
targetB = color & 0xff;
// 緩動插值 (3% 步進)
r += uint((targetR - r) * 0.03);
g += uint((targetG - g) * 0.03);
b += uint((targetB - b) * 0.03);
txt.textColor = (r << 16) | (g << 8) | b;
// 互補色發光濾鏡
filtersR = 0xff - r;
filtersG = 0xff - g;
filtersB = 0xff - b;
filtersCo = (filtersR << 16) | (filtersG << 8) | filtersB;
glowF = new GlowFilter(filtersCo, 1, 8, 8);
txt.filters = [glowF];
}
// 附加說明文字
var txt1:TextField = new TextField();
txt1.defaultTextFormat = new TextFormat("華文隸書", 20, 0x00cc33);
txt1.text = "全腳本文字顏色緩動效果 鼠標滑動七彩圖改變文字顏色";
txt1.x = 20; txt1.y = 360; txt1.width = 550;
txt1.filters = [new DropShadowFilter(2, 45, 0x000000)];
addChildAt(txt1, numChildren-1);