Flash CS4教程:利用三角函数知识制作环绕的菜单效果

作者:网络 来源:佚名 更新时间:2009-10-21 22:39:37 点击:
本例主要使用三角函数知识来制作环绕的菜单效果,并通过侦听按钮事件状态来控制菜单中的按钮,使其在被单击后进行切换并放大显示在舞台的中心位置。

本例思路

  .利用遮罩功能制作高光按钮。
  .添加代码来控制菜单的切换效果。
 

part 1  制作高光按钮

(1)新建一个600×300像素,帧频为12fps的空白文档。使用“矩形工具”绘制一个与舞台大小相同的矩形,然后设置填充类型为“放射状”,第1个色标颜色为(r:0,g:114,b:188),第2个色标颜色为(r:0,g:0,b:0),填充效果如图9-1所示。
 
图9-1  制作背景
(2)按ctrl+f8组合键新建一个影片剪辑(名称为button),然后使用“椭圆工具”绘制一个圆形,并设置填充类型为“放射状”,第1个色标颜色为(r:153,g:204,b:51),第2个色标颜色为(r:0,g:102,b:51),填充效果如图9-2所示。
 
图9-2  绘制球形
(3)新建一个图层,然后使用“矩形工具”绘制一个矩形色块,并设置填充色为(r:153,g:204,b:51),再使用“任意变形工具”将其处理成如图9-3所示的效果。
 
图9-3 绘制矩形条块
(4)新建一个mask图层,然后将按钮复制到该图层中,接着将该图层设置为下面两个图层的遮罩图层,如图9-4所示。
 
图9-4  创建遮罩层
(5)新建一个“按钮背景”图层,然后将按钮复制到该图层中,并将第1个色标的alpha调整为10%,再将第2个色标向左移动一些像素,如图9-5所示。
 
图9-5  绘制按钮明暗部分
(6)新建一个“高光”图层,然后使用“椭圆工具”绘制一个椭圆,并设置填充类型为“线性”,第1个色标颜色为(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所示。
 
图9-6  绘制按钮高光
||| 

part 2  添加控制程序

(1)在“库”面板中为button影片剪辑添加元件类,并将基类修改为sprite类,如图9-7所示。
 
图9-7  添加元件类
(2)返回到“场景1”,新建一个as图层,然后在第1帧输入代码。本例用到缓冲原理,所以要先导入tweener类;第3~6行代码是经常使用到的一种编程方式,首先创建一个容器来存储所有的对象,便于统一控制,然后使用for()循环语句创建12个按钮元件类对象(如第15~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所示。
 
图9-8  三角函数原理
(4)创建后的按钮排序原理图和发布影片后的效果如图9-9和图9-10所示,其中原理图中的坐标原点为container_mc容器的原点位置。
 
图9-9  按钮排序原理图
 
图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;     
    }  
 
 
图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所示。
 
图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轴顺序(也称深度)。
 
图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所示。
 
图9-14  思路扩展
技巧与提示:
思路扩展的源文件在本书配套光盘中的“chapter09/源文件/切换放大菜单1.fla、切换放大菜单2.fla、切换放大菜单3.fla、切换放大菜单4.fla、切换放大菜单5(长方形排列).fla和切换放大菜单6(随机切换按钮皮肤).fla”中。
(9)按ctrl+enter组合键发布本例。