萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Flash 教學

Flash CS4 ActionScript 3.0 文字顏色緩動跟隨滑鼠特效

純代碼實現:滑鼠位置採樣漸變色,文字顏色平滑過渡 + 發光特效

本範例展示如何用 AS3 繪製七彩漸變背景,並讓舞台文字顏色根據滑鼠所在像素顏色以緩動插值平滑變化,同時添加互補色發光濾鏡,打造極具視覺張力的互動體驗。

核心邏輯

  1. 建立 BitmapData 繪製線性漸變矩形(紅→黃→綠→青→藍→洋紅→紅)。
  2. 每幀(Event.ENTER_FRAME)以 getPixel(mouseX, mouseY) 取得滑鼠下像素顏色。
  3. 將目標 RGB 與當前 RGB 進行線性插值(步進 3%),實現顏色緩動。
  4. 文字顏色更新為插值後的 RGB;同時計算互補色(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);

關鍵技術點解析

  • 位元運算提取 RGB:`>> 16`、`>> 8 & 0xff`、`& 0xff` 高效分離通道。
  • 緩動公式:`current += (target - current) * easing` 實現平滑過渡,避免顏色突變。
  • 互補色發光:`0xFF - channel` 產生視覺對比,增強可讀性與藝術感。
  • BitmapData 採樣:比繪圖 API 即時取色效能更佳,適合高頻幀事件。

應用場景

  • 互動式品牌官網標語
  • 資料視覺化圖例高亮
  • 遊戲 UI 狀態指示器
  • 創意程式碼藝術展示
copyright © 萬盛學電腦網 all rights reserved