簡單格子漸變效果 @ 法奇的帝窩

========================================

我曾經做過一個迷宮遊戲，當人物移動時

曾經走過的路會慢慢消失，今天要介紹的就類似這種效果

在某些的活動網頁也能常常看到類似的設計

今天這個範例是以滑鼠為主要的監聽方式

========================================

程式原理：

江湖一點訣、說穿了不值錢，常常看到的效果，原理其實很簡單

主要是透過滑鼠滑入與滑出作為監聽的方式

透過TweenMax來作漸變的效果

========================================

//先import Tween的類
import gs.plugins.*;
import gs.*;
import gs.easing.*;
TweenPlugin.activate([ColorMatrixFilterPlugin]);

var nowthis = this ;

//我設計每個感應的格子為40*40的大小
var RectWidth :int = 40 ;
var RectHeight : int = 40 ;

var i : int = 0 ;
var j : int = 0 ;

//迴圈用來產生布滿畫面的方塊，並且給予監聽值
for (i= 1 ; i <= 10 ;i++){
for (j = 1 ; j<= 10 ;j++){
var TmpMovie : MovieClip = new MovieClip() ;

//這裡主要是把格子用graphics實際畫出來

//with，當需要對一個Object重複做多項屬性設定時，可以省略重複撰寫的麻煩
       with(TmpMovie.graphics){
           lineStyle(.5,0x444444);
           beginFill(0x888888);
           moveTo(0,0);
           lineTo(RectWidth,0);
           lineTo(RectWidth,RectHeight);
           lineTo(0,RectHeight);
           lineTo(0,0);       }

//決定每個格子的位置
       TmpMovie.x = RectWidth*(i-1);
       TmpMovie.y = RectHeight*(j-1);
       nowthis.addChild(TmpMovie);
       TweenMax.to(TmpMovie, .5, {colorMatrixFilter:{colorize:0xCCCCCC, amount:1}});
       EndowListener(TmpMovie);
   }
}

//添加滑鼠移入滑出的監聽值
function EndowListener(reMovie:MovieClip){
   var TmpObj : MovieClip = reMovie ;
   TmpObj.addEventListener(MouseEvent.MOUSE_OVER,MouseMoveHander);
   TmpObj.addEventListener(MouseEvent.MOUSE_OUT,MouseMoveHander);
   function MouseMoveHander(me:MouseEvent):void{
       if (me.type == 'mouseOver'){

//這行TweenMax就是用來作漸變的效果，有了TweenMax就不用自己再寫一堆麻煩的enterFrame了
           TweenMax.to(TmpObj, 2, {colorMatrixFilter:{colorize:0x111111, amount:1}});
       }else if (me.type == 'mouseOut'){
           TweenMax.to(TmpObj, 2, {colorMatrixFilter:{colorize:0xCCCCCC, amount:1}});
       }
   }
}

========================================

來看一下效果

滑鼠在上面滑滑看

========================================

FLA格式為CS6

原始檔

========================================

注意事項：

加入不同的監聽式子，會有更多不同的效果

搭配美術設計，TweenMax其實可以玩出不少絢麗的特效

會慢慢再介紹曾經用TweenMax作的範例程式

========================================