当前位置:主页 > 网页教程 > 动画制作 > flash实例教程 > 内容欢迎大家投稿

Flash CS4鼠标切换放大互动菜单

时间:2010-09-15 09:36来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

本实例介绍如何利用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控制

 

  (1)在“库”面板中为button影片剪辑添加元件类,并将基类修改为Sprite类,如图7所示。

  

  图7 添加元件类

  (2)返回到“场景1”,新建一个AS图层,然后在第1帧输入代码。本例用到缓冲原理,所以要先导入Tweener类;第3~6行代码是经常使用到的一种编程方式,首先创建一个容器来存储所有的对象,便于统一控制,然后使用for()循环语句创建12个按钮元件类对象(如第15~20行代码)。(www.3lian.com)

  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所示。(3lian素材)

  

  图8 三角函数原理

(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接