Flash CS4教程：利用遮罩功能及添加代碼來(lái)制作切換放大菜單效果

發(fā)布時(shí)間：2014-06-25 14:04:37 作者：佚名

本教程是主要使用三角函數(shù)知識(shí)來(lái)制作環(huán)繞的菜單效果，并通過(guò)偵聽(tīng)按鈕事件狀態(tài)來(lái)控制菜單中的按鈕，使其在被單擊后進(jìn)行切換并放大顯示在舞臺(tái)的中心位置，教程介紹地不錯(cuò)，也能詳細(xì)，轉(zhuǎn)發(fā)過(guò)來(lái)與大家一起分享學(xué)習(xí)

本例主要使用三角函數(shù)知識(shí)來(lái)制作環(huán)繞的菜單效果，并通過(guò)偵聽(tīng)按鈕事件狀態(tài)來(lái)控制菜單中的按鈕，使其在被單擊后進(jìn)行切換并放大顯示在舞臺(tái)的中心位置。

本例思路

.利用遮罩功能制作高光按鈕。

.添加代碼來(lái)控制菜單的切換效果。

Part 1 制作高光按鈕

(1)新建一個(gè)600×300像素，幀頻為12fps的空白文檔。使用“矩形工具”繪制一個(gè)與舞臺(tái)大小相同的矩形，然后設(shè)置填充類(lèi)型為“放射狀”，第1個(gè)色標(biāo)顏色為(R:0，G:114，B:188)，第2個(gè)色標(biāo)顏色為(R:0，G:0，B:0)，填充效果如圖9-1所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-1 制作背景

(2)按Ctrl+F8組合鍵新建一個(gè)影片剪輯(名稱(chēng)為button)，然后使用“橢圓工具”繪制一個(gè)圓形，并設(shè)置填充類(lèi)型為“放射狀”，第1個(gè)色標(biāo)顏色為(R:153，G:204，B:51)，第2個(gè)色標(biāo)顏色為(R:0，G:102，B:51)，填充效果如圖9-2所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-2 繪制球形

(3)新建一個(gè)圖層，然后使用“矩形工具”繪制一個(gè)矩形色塊，并設(shè)置填充色為(R:153，G:204，B:51)，再使用“任意變形工具”將其處理成如圖9-3所示的效果。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-3 繪制矩形條塊

(4)新建一個(gè)Mask圖層，然后將按鈕復(fù)制到該圖層中，接著將該圖層設(shè)置為下面兩個(gè)圖層的遮罩圖層，如圖9-4所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-4 創(chuàng)建遮罩層

(5)新建一個(gè)“按鈕背景”圖層，然后將按鈕復(fù)制到該圖層中，并將第1個(gè)色標(biāo)的Alpha調(diào)整為10%，再將第2個(gè)色標(biāo)向左移動(dòng)一些像素，如圖9-5所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-5 繪制按鈕明暗部分

(6)新建一個(gè)“高光”圖層，然后使用“橢圓工具”繪制一個(gè)橢圓，并設(shè)置填充類(lèi)型為“線(xiàn)性”，第1個(gè)色標(biāo)顏色為(R:255，G:255，B:255)，Alpha為70%，第2個(gè)色標(biāo)顏色為(R:255，G:255，B:255)，Alpha為50%，第3個(gè)色標(biāo)顏色為(R:255，G:255，B:255)，Alpha為0%，如圖9-6所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-6 繪制按鈕高光

Part 2 添加控制程序

(1)在“庫(kù)”面板中為button影片剪輯添加元件類(lèi)，并將基類(lèi)修改為Sprite類(lèi)，如圖9-7所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-7 添加元件類(lèi)

(2)返回到“場(chǎng)景1”，新建一個(gè)AS圖層，然后在第1幀輸入代碼。本例用到緩沖原理，所以要先導(dǎo)入Tweener類(lèi);第3~6行代碼是經(jīng)常使用到的一種編程方式，首先創(chuàng)建一個(gè)容器來(lái)存儲(chǔ)所有的對(duì)象，便于統(tǒng)一控制，然后使用for()循環(huán)語(yǔ)句創(chuàng)建12個(gè)按鈕元件類(lèi)對(duì)象(如第15~20行代碼)。

AS3代碼

import caurina.transitions.Tweener;//導(dǎo)入Tweener類(lèi)
//創(chuàng)建一個(gè)容器，用于存儲(chǔ)本例中的所有創(chuàng)建的對(duì)象
var container_mc:Sprite = new Sprite();
container_mc.x = stage.stageWidth/2; //定位在舞臺(tái)中心
container_mc.y = stage.stageHeight/2;
addChild(container_mc);

var angle:uint=0; //角度
var R:Number = 100; //圓的半徑
var _length:uint = 12; //按鈕個(gè)數(shù)
var newX = 0; //被單擊的按鈕Ｘ坐標(biāo)
var newY = 0; //被單擊的按鈕Ｙ坐標(biāo)
for (var i=0; i<=_length; i++) {

    var _mc:Sprite = new button();
    _mc.buttonMode = true;
    _mc.name = "mc" + i;


    _mc.addEventListener(MouseEvent.CLICK,clickHandler);
    container_mc.addChild(_mc);

    if (i == _length) {
        _mc.x = newX;
        _mc.y = newY;
        //指定此對(duì)象禁止接收鼠標(biāo)消息
        _mc.mouseEnabled = false;
        Tweener.addTween(_mc, {scaleX:2, scaleY:2, time:1, transition:"easeInOutQuint"});
    } else {
        angle += 30;
        var radians:Number = angle * Math.PI / 180;

        var X:Number = Math.cos(radians) * R;
        var Y:Number = Math.sin(radians) * R;

        _mc.x = X;
        _mc.y = Y;
    }

(3)第22~29行代碼是利用三角函數(shù)來(lái)進(jìn)行精確定位，首先通過(guò)for()循環(huán)創(chuàng)建_length個(gè)按鈕對(duì)象，然后進(jìn)行角度上的遞增30(angle += 30)，在已知半徑和角度后，便可以通過(guò)三角函數(shù)來(lái)求得各不同角度的按鈕坐標(biāo)位置，其主要原理如圖9-8所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-8 三角函數(shù)原理

(4)創(chuàng)建后的按鈕排序原理圖和發(fā)布影片后的效果如圖9-9和圖9-10所示，其中原理圖中的坐標(biāo)原點(diǎn)為container_mc容器的原點(diǎn)位置。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-9 按鈕排序原理圖

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-10 發(fā)布效果

(5)下面進(jìn)一步判斷和定位按鈕的位置，第23~29行代碼，判斷i的值是否等于按鈕的總個(gè)數(shù)，如果等于就將按鈕的坐標(biāo)設(shè)置為(newX，newY)，即(0，0)，也就是將按鈕位置設(shè)置在container_mc容器的原點(diǎn)位置，并使用Tweener類(lèi)的addTween()方法將其寬/高縮放比例(scaleX, scaleY)都設(shè)置為2，影片的發(fā)布效果如圖9-11所示。

AS3代碼

import caurina.transitions.Tweener;//導(dǎo)入Tweener類(lèi)
//創(chuàng)建一個(gè)容器，用于存儲(chǔ)本例中的所有創(chuàng)建的對(duì)象
var container_mc:Sprite = new Sprite();
container_mc.x = stage.stageWidth/2; //定位在舞臺(tái)中心
container_mc.y = stage.stageHeight/2;
addChild(container_mc);

var angle:uint=0; //角度
var R:Number = 100; //圓的半徑
var _length:uint = 12; //按鈕個(gè)數(shù)
var newX = 0; //被單擊的按鈕Ｘ坐標(biāo)
var newY = 0; //被單擊的按鈕Ｙ坐標(biāo)
for (var i=0; i<=_length; i++) {

    var _mc:Sprite = new button();
    _mc.buttonMode = true;
    _mc.name = "mc" + i;


    _mc.addEventListener(MouseEvent.CLICK,clickHandler);
    container_mc.addChild(_mc);

    if (i == _length) {
        _mc.x = newX;
        _mc.y = newY;
        //指定此對(duì)象禁止接收鼠標(biāo)消息
        _mc.mouseEnabled = false;
        Tweener.addTween(_mc, {scaleX:2, scaleY:2, time:1, transition:"easeInOutQuint"});
    } else {
        angle += 30;
        var radians:Number = angle * Math.PI / 180;

        var X:Number = Math.cos(radians) * R;
        var Y:Number = Math.sin(radians) * R;

        _mc.x = X;
        _mc.y = Y;
    }

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-11 發(fā)布效果

(6)下面創(chuàng)建動(dòng)態(tài)文本對(duì)象，為按鈕添加文字。第39~47代碼創(chuàng)建一個(gè)不能被選擇且禁止接收鼠標(biāo)消息的動(dòng)態(tài)文本，并設(shè)置樣式和文本位置。其中第42行代碼禁止接收鼠標(biāo)事件(如指針經(jīng)過(guò)或單擊等事件);第43行代碼是設(shè)置字體樣式并調(diào)用 defaultTextFormat()方法，該方法返回一個(gè)文本格式對(duì)象(TextFormat)，然后賦給defaultTextFormat屬性(指定應(yīng)用于新插入文本的格式)。

AS3代碼

        var X:Number = Math.cos(radians) * R;
        var Y:Number = Math.sin(radians) * R;

        _mc.x = X;
        _mc.y = Y;
    }
    var _text:TextField = new TextField();
    _text.width = _text.height = 40;//因?yàn)槟J(rèn)情況下寬高都為100
    _text.selectable = false; //文字不被選擇
    _text.mouseEnabled = false; //指定此對(duì)象禁止接收鼠標(biāo)消息
    _text.defaultTextFormat = defaultTextFormat(); //設(shè)置字體樣式
    _text.text = i;
    _text.x = -_text.textWidth/2 - 2; //設(shè)置字體位置
    _text.y = -_text.textHeight/2;
    _mc.addChild(_text); //字體添加到對(duì)應(yīng)按鈕中
}

function defaultTextFormat():TextFormat {
    var format:TextFormat = new TextFormat();
    format.font = "黑體";
    format.color = 0xFFFFFF;
    format.size = 20;
    format.bold = true;
    return format
}

function clickHandler(e:MouseEvent) {
    var _mc:Sprite = e.target as Sprite;
    newX = _mc.x;
    newY = _mc.y;

    Tweener.addTween(_mc, {x:0, y:0,scaleX:2, scaleY:2, time:1, transition:"easeInOutQuint"});
    Tweener.addTween(container_mc.getChildAt(_length), {x:newX, y:newY,scaleX:1, scaleY:1, time:1, transition:"easeInOutQuint"});
    _mc.mouseEnabled = false;
    var mc:Sprite = container_mc.getChildAt(_length) as Sprite
    mc.mouseEnabled = true;
    container_mc.swapChildren(container_mc.getChildAt(_length),_mc);

}

技巧與提示：

因?yàn)楸纠帉?xiě)的代碼有70多行，為了更好地幫助用戶(hù)理解，因此分塊進(jìn)行展示，用戶(hù)可以打開(kāi)源文件來(lái)查看所有的代碼，關(guān)于更多文本格式(TextFormat)的詳細(xì)信息可參考幫助文檔。

步驟(5)中的第20行代碼是為按鈕注冊(cè)事件偵聽(tīng)，偵聽(tīng)器函數(shù)為步驟(6)中的第59行代碼clickHandler()函數(shù)，該函數(shù)的作用是當(dāng)按鈕被鼠標(biāo)單擊后，與中間按鈕進(jìn)行位置的切換，其原理如圖9-12所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-12 clickHandler()函數(shù)原理圖

(7)在clickHandler()函數(shù)中，首先取得被單擊按鈕的坐標(biāo)位置(如步驟(6)中的第61和62行代碼)，當(dāng)按鈕被單擊時(shí)，被單擊按鈕緩沖運(yùn)動(dòng)到container_mc容器的中間(也就是原點(diǎn)(0，0))時(shí)會(huì)縮放2倍(如步驟(6)中的第64行代碼中的Tweener類(lèi)方法)，同時(shí)位于舞臺(tái)中間的按鈕會(huì)運(yùn)動(dòng)到被單擊按鈕的坐標(biāo)位置(newX，newY)，這樣就會(huì)產(chǎn)生切換效果(如步驟(6)中的第65行代碼)，如圖9-13所示，這里還通過(guò)container_mc.getChildAt(_length)方法來(lái)取得中間按鈕，并通過(guò)69行代碼中的swapChildren()方法來(lái)進(jìn)行交換z軸順序(也稱(chēng)深度)。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)

圖9-13 按鈕的切換效果

技術(shù)看板：深度設(shè)置

重新設(shè)置容器列表中對(duì)象所在的深度，可以使用顯示對(duì)象容器.setChildIndex的方法來(lái)設(shè)置，下面列出幾種最為常用的方法，用戶(hù)可直接套用。

AS3代碼

//(1):用于將“要顯示的對(duì)象”進(jìn)行置頂
顯示對(duì)象容器.setChildIndex(要顯示的對(duì)象,要顯示對(duì)象容器.numChildren-1)

//(2):用于將“要顯示的對(duì)象”進(jìn)行置底
顯示對(duì)象容器.setChildIndex(要顯示的對(duì)象,0)

//(3):用于將“要顯示的對(duì)象A”插入“顯示對(duì)象B”之前
var target:DisplayObject = 顯示對(duì)象容器.getChildByName("顯示對(duì)象B")
顯示對(duì)象容器.setChildIndex(顯示對(duì)象A，顯示對(duì)象容器.getChildIndex(target))


//(3):用于將“要顯示的對(duì)象A”插入“顯示對(duì)象B”之后
var target:DisplayObject = 顯示對(duì)象容器.getChildByName("顯示對(duì)象B")
顯示對(duì)象容器.setChildIndex(顯示對(duì)象A，顯示對(duì)象容器.getChildIndex(target)-1)

(8)到該步驟已經(jīng)完成該實(shí)例的制作，用戶(hù)可采用相同的方法進(jìn)行思路擴(kuò)展，制作出其他相似的效果，如圖9-14所示。

Flash CS4制作切換放大菜單效果,PS教程,思緣教程網(wǎng)