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

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

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

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

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

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

程式原理:

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

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

透過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作的範例程式

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

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 法奇 的頭像
    法奇

    法奇的帝窩

    法奇 發表在 痞客邦 留言(0) 人氣()