本实例介绍如何 运用 Flash CS4打造鼠标点击切换的互动菜单，主要用三角函数知识来打造环绕的菜单效果，并通过侦听按钮事件状态来控制菜单中的按钮，使其在被单击后执行 切换并放大显示在舞台的中心位置。
本例思路与步骤：先运用 遮罩功能打造高光按钮、然后添加AS代码控制菜单的切换效果
一、打造 高光按钮
(1)Flash中新建一个600×300像素，帧频为12fps的空白文档。运用 “矩形工具”打造 一个与舞台大小相同的矩形，然后配置填充类型为“放射状”，第1个色标颜色为(R:0，G:114，B:188)，第2个色标颜色为(R:0，G:0，B:0)，填充效果如图1所示。
图1 打造背景
(2)按Ctrl+F8组合键新建一个影片剪辑(名称为button)，然后运用 “椭圆工具”打造 一个圆形，并配置填充类型为“放射状”，第1个色标颜色为(R:153，G:204，B:51)，第2个色标颜色为(R:0，G:102，B:51)，填充效果如图2所示。
图2 打造 球形
(3)新建一个图层，然后运用 “矩形工具”打造 一个矩形色块，并配置填充色为(R:153，G:204，B:51)，再运用 “任意变形工具”将其处理成如图3所示的效果。
图3 打造 矩形条块
(4)新建一个Mask图层，然后将按钮复制到该图层中，接着将该图层配置为下面两个图层的遮罩图层，如图4所示。
图4 建立遮罩层
(5)新建一个“按钮背景”图层，然后将按钮复制到该图层中，并将第1个色标的Alpha调整为10%，再将第2个色标向左移动一些像素，如图5所示。
图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%，如图6所示。
图6 打造 按钮高光
请点击“下一页”，我们为按钮添加AS代码控制，实现互动按钮效果。
二、添加AS控制
(1)在“库”面板中为button影片剪辑添加元件类，并将基类修改为Sprite类，如图7所示。
图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)，在已知半径和角度后，便可以通过三角函数来求得各不同角度的按钮坐标位置，其主要原理如图8所示。
图8 三角函数原理
(4)建立后的按钮排序原理图和揭晓影片后的效果如图9和图10所示，其中原理图中的坐标原点为container_mc容器的原点位置。
图9 按钮排序原理图
图10 揭晓效果
(5)下面进一步判断和定位按钮的位置，第23~29行代码，判断i的值能不能等于按钮的总个数，如果等于就将按钮的坐标配置为(newX，newY)，即(0，0)，也就是将按钮位置配置在container_mc容器的原点位置，并运用 Tweener类的addTween()要领将其宽/高缩放比例(scaleX, scaleY)都配置为2，影片的揭晓效果如图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;
}
(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()函数，该函数的作用是当按钮被鼠标单击后，与中间按钮执行 位置的切换，其原理如图12所示。
图12 clickHandler()函数原理图
(7)在clickHandler()函数中，首先取得被单击按钮的坐标位置(如步骤(6)中的第61和62行代码)，当按钮被单击时，被单击按钮缓冲运动到container_mc容器的中间(也就是原点(0，0))时会缩放2倍(如步骤(6)中的第64行代码中的Tweener类要领 )，同时位于舞台中间的按钮会运动到被单击按钮的坐标位置(newX，newY)，这样就会产生切换效果(如步骤(6)中的第65行代码)，如图13所示，这里还通过container_mc.getChildAt(_length)要领来取得中间按钮，并通过69行代码中的swapChildren()要领来执行 交换z轴顺序(也称深度)。
图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)到该步骤已经完成该实例的打造，用户可采用相同的要领执行 思路扩展，打造出其他相似的效果，如图14所示。
图14 思路扩展
(9)按Ctrl+Enter组合键揭晓本例。
