flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

更新时间:15-10-27 19:31 热度:418
 

本例主要运用三角学函数知识来制造围绕的点菜单效果,并经过侦听按键事情状况来扼制点菜单中的按键,使其在被裸机后行切换并放大显露在戏台的核心位置。

本例思考的线索

.利用遮罩功能制造高光按键。

.添加代码来扼制点菜单的切换效果。

part 1 制造高光按键

(1)新建一个600×300像素,帧频为12fps的空白话文档。运用“长方形工具”画出一个与戏台体积相同的长方形,而后设置补充类型为“放射状”,第一个色标颜色为(r:0,g:114,b:188),第2个色标颜色为(r:0,g:0,b:0),补充效果如图9-1所示。

15102719313679669291435 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-1 制造环境

(2)按ctrl+f8组合键新建一个影片儿剪接(名字为button),而后运用“鸭子蛋圆工具”画出一个圆形,并设置补充类型为“放射状”,第一个色标颜色为(r:153,g:204,b:51),第2个色标颜色为(r:0,g:102,b:51),补充效果如图9-2所示。

15102719313695319176502 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-2 画出球形

(3)新建一个图层,而后运用“长方形工具”画出一个长方形色块,并设置补充色为(r:153,g:204,b:51),再运用“恣意变型工具”将其处置成如图9-3所示的效果。

15102719313826513625811 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-3 画出长方形条块

(4)新建一个mask图层,而后将按键复制到该图层中,继续将该图层设置为下边两个图层的遮罩图层,如图9-4所示。

15102719313839043911922 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-4 开创遮罩层

(5)新建一个“按键环境”图层,而后将按键复制到该图层中,并将第一个色标的alpha调试为10百分之百,再将第2个色标向左移动一点像素,如图9-5所示。

15102719313850038353410 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-5 画出按键明暗局部

(6)新建一个“高光”图层,而后运用“鸭子蛋圆工具”画出一个鸭子蛋圆,并设置补充类型为“线性”,第一个色标颜色为(r:255,g:255,b:255),alpha为70百分之百,第2个色标颜色为(r:255,g:255,b:255),alpha为50百分之百,第3个色标颜色为(r:255,g:255,b:255),alpha为0百分之百,如图9-6所示。

15102719313860984985187 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-6 画出按键高光

part 2 添加扼制手续

(1)在“库”面板中为button影片儿剪接添加元件类,并将基类改正为sprite类,如图9-7所示。

1510271931393179096809 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-7 添加元件类

(2)回返到“场景1”,新建一个as图层,而后在第一帧输入代码。本例用到缓和冲突原理,所以要先导入tweener类;第3~6行代码是常常运用到的一种编程形式,首先开创一个器皿来储存全部的对象,易于一统扼制,而后运用for()循环语句开创12个按键元件类对象(如第一5~20行代码)。

as3代码

import caurina.transitions.tweener;//导入tweener类   
//开创一个器皿,用于储存本例中的全部开创的对象   
var container_mc:sprite = new sprite();   
container_mc.x = stage.stagewidth/2; //定位在戏台核心   
container_mc.y = stage.stageheight/2;   
addchild(container_mc);   
  
var angle:uint=0; //角度   
var r:number = 100; //圆的半径   
var _length:uint = 12; //按键个数   
var newx = 0; //被裸机的按键x坐标   
var newy = 0; //被裸机的按键y坐标   
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;   
        //指定此对象严禁收缴鼠标消息儿   
        _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行代码是利用三角学函数来施行非常准确定位,首先经过for()循环开创_length个按键对象,而后行角度上的递加30(angle += 30),在已知半径和角度后,便可以经过三角学函数来求得各不一样角度的按键坐标位置,其主要原理如图9-8所示。

1510271931391569482921 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-8 三角学函数原理

(4)开创后的按键排序原理图和宣布影片儿后的效果如图9-9和图9-10所示,那里面原理图中的坐标原点为container_mc器皿的原点位置。

15102719313925020270076 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-9 按键排序原理图

15102719313937550556187 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-10 宣布效果

(5)下边进一步判断和定位按键的位置,第23~29行代码,判断i的值是否等于按键的总个数,假如等于就将按键的坐标设置为(newx,newy),即(0,0),也就是将按键位置设置在container_mc器皿的原点位置,并运用tweener类的addtween()办法将其宽/高缩放比例(scalex, scaley)都设置为2,影片儿的宣布效果如图9-11所示。

as3代码

import caurina.transitions.tweener;//导入tweener类   
//开创一个器皿,用于储存本例中的全部开创的对象   
var container_mc:sprite = new sprite();   
container_mc.x = stage.stagewidth/2; //定位在戏台核心   
container_mc.y = stage.stageheight/2;   
addchild(container_mc);   
  
var angle:uint=0; //角度   
var r:number = 100; //圆的半径   
var _length:uint = 12; //按键个数   
var newx = 0; //被裸机的按键x坐标   
var newy = 0; //被裸机的按键y坐标   
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;   
        //指定此对象严禁收缴鼠标消息儿   
        _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;   
    }

15102719313956272130497 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-11 宣布效果

(6)下边开创动态文本对象,为按键添加书契。第39~47代码开创一个不可以被挑选且严禁收缴鼠标消息儿的动态文本,并设置式样日文本位置。那里面第42行代码严禁收缴鼠标事情(如指针通过或裸机等事情);第43行代码是设置字体式样并调配使用 defaulttextformat()办法,该办法回返一个文本款式对象(textformat),而后赋给defaulttextformat属性(指定应用于新插进去文本的款式)。

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;//由于默许事情状况下宽高都为100   
    _text.selectable = false; //书契不被挑选   
    _text.mouseenabled = false; //指定此对象严禁收缴鼠标消息儿   
    _text.defaulttextformat = defaulttextformat(); //设置字体式样   
    _text.text = i;   
    _text.x = -_text.textwidth/2 – 2; //设置字体位置   
    _text.y = -_text.textheight/2;   
    _mc.addchild(_text); //字体添加到对应按键中   
}   
  
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);   
       
}

技法与提醒:

由于本例所编著的代码有70多行,为了更好地帮忙用户了解,因为这个分块施行展览,用户可以敞开源文件来检查全部的代码,关于更多文本款式(textformat)的周密信息可参照帮忙文档。

步骤(5)中的第20行代码是为按键注册事情侦听,侦听器函数为步骤(6)中的第59行代码clickhandler()函数,该函数的效用是当按键被鼠标裸机后,与半中腰按键施行位置的切换,其原理如图9-12所示。

15102719313965630727364 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-12 clickhandler()函数原理图

(7)在clickhandler()函数中,首先获得被裸机按键的坐标位置(如步骤(6)中的第61和62行代码),当按键被裸机时,被裸机按键缓和冲突运动到container_mc器皿的半中腰(也就是原点(0,0))特殊情况缩放2倍(如步骤(6)中的第64行代码中的tweener类办法),同时位于戏台半中腰的按键会运动到被裸机按键的坐标位置(newx,newy),这么便会萌生切换效果(如步骤(6)中的第65行代码),如图9-13所示,这处还经过container_mc.getchildat(_length)办法来获得半中腰按键,并经过69行代码中的swapchildren()办法来施行交换z轴顺着次序(也称深度)。

15102719313979696858097 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-13 按键的切换效果

技术看板:深度设置

从新设置器皿列表中对象存在的地方的深度,可以运用显露对象器皿.setchildindex的办法来设置,下边列出几种最为常用的办法,用户可直接仿用。

as3代码

//(1):用于将“要显露的对象”施行置顶   
显露对象器皿.setchildindex(要显露的对象,要显露对象器皿.numchildren-1)   
  
//(2):用于将“要显露的对象”施行置底   
显露对象器皿.setchildindex(要显露的对象,0)   
  
//(3):用于将“要显露的对象a”插进去“显露对象b”之前   
var target:displayobject = 显露对象器皿.getchildbyname("显露对象b")   
显露对象器皿.setchildindex(显露对象a,显露对象器皿.getchildindex(target))   
  
  
//(3):用于将“要显露的对象a”插进去“显露对象b”在这以后   
var target:displayobject = 显露对象器皿.getchildbyname("显露对象b")   
显露对象器皿.setchildindex(显露对象a,显露对象器皿.getchildindex(target)-1)

(8)到该步骤已经完成该实际的例子的制造,用户可认为合适而使用相同的办法施行思考的线索扩展,制造出其它相仿的效果,如图9-14所示。

1510271931398907745253 flash cs4教程:利用遮罩功能及添加代码来制造切换放大点菜单效果

图9-14 思考的线索扩展

(9)按ctrl+enter组合键宣布本例。

教程终了,以上就是利用flash cs4遮罩功能及添加代码来制造切换放大点菜单效果,制造过程有些复杂,但很实用,期望对大家有所帮忙!