Flash CS4制作切换放大菜单效果(2)_Flash教程

推荐：Flash cs3教程：位图动画的表现
本例为Flash CS3仿真艺术设计系列教程，在上一课中我们学习了关闭缺口_完善角色肢体连接，这一课我们来学习位图动画的表现，在这个教程中，你将被教导怎样制作布什总统来回地舞蹈。你需要一张布什总的头像的图片，一个照像机和一个明白的补间，引导层和角色动画基础，

　　(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)

分享：Flash CS4教程：制作切换扑克牌效果
本例思路： 1 创建实例背景。 2 绘制牌的正面和反面并转换为图形元件。 3 创建一个牌的容器，转换为元件类Card，将正反面牌分别放置于第1、2