Flash制作绚酷鼠标特效三例

2008-02-22 10:25:22 来源:闪吧 作者:FL基理大师 点击:
本教程主要介绍使用flash制作炫酷的鼠标效果,作者举了三个例子,通过效果展示,还有制作思路,还给出了AS代码,让更多网友可以练习AS代码的基础应用。希望本教程对您有所帮助!

 
  在学习之前,我们先复习一下前面(功能代码07<百变图>)曾用过的
  目标移动公式:

  mc.当前坐标 += (mc.目标坐标 - mc.当前坐标) * A 缓动常量(0<A<1)

  例如

  舞台上有一个影片剪辑,实例名为 mc,使其移动到 x=400, y=300 的位置
  mc.Tox = 400;
  mc.Toy = 300;
  mc.onEnterFrame = function() {
  this._x += (this.Tox-this._x)*0.3;
  this._y += (this.Toy-this._y)*0.3;

  //更新每个实例的坐标了,可理解为:
  //实例的 X 坐标 = 自己的X坐标 +(目标的X坐标–自己的X坐标)*0.3
  //实例的 Y 坐标 = 自己的Y坐标 +(目标的Y坐标–自己的Y坐标) *0.3
  };


  实例一:箭头形状


效果一

  思路:
  1、复制出Num个鼠标,鼠标的透明度递减(如果i是递增的,N-i 就是递减的);
  2、用第Num鼠标作为当前鼠标,其它均为跟随;
  3、跟随的原理就是以前一个鼠标位置作为目标坐标,使后一个鼠标向前一个的位置移动。

  步骤1:

Flash制作绚酷鼠标特效三例
绘制箭头


  绘制一个鼠标,保存为影片剪辑,连接—>导出—>标志符"mouse"

  
步骤2:

  加入AS代码:
  Mouse.hide();
  //隐藏原有鼠标
  var Num = 10;
  //鼠标跟随的数量
  for (var i = 0; i<Num ; i++){
  _root.attachMovie("mouse", "m"+i, i);
  //复制出Num个鼠标的影片剪辑
  this["m"+i]._alpha = (Num-i)/Num*100;
  //设置出渐隐效果,每个鼠标的透明度递减
  }
  _root.onEnterFrame = function() {
  this["m"+0]._x = _xmouse;
  this["m"+0]._y = _ymouse;
  //让this["m"+0]作为当前鼠标
  for (var i = 1; i<Num ; i++){
  this["m"+i]._x += ((this["m"+(i-1)]._x)-this["m"+i]._x)*0.5;
  this["m"+i]._y += ((this["m"+(i-1)]._y)-this["m"+i]._y)*0.5;
  }
  //令后一个鼠标跟随前一个鼠标的位置,缓动地向前一个鼠标接近
  };
  
  实例二:圈圈状


效果二

  思路
  1.方法与实例一类似;
  2.改变了鼠标跟随的样式;
  3.使小的鼠标透明度大,大的鼠标透明度小(如果i是递增的,N-i 就是递减的)。

  步骤1:

Flash制作绚酷鼠标特效三例
绘制出圆圈

  绘制一个鼠标,保存为影片剪辑,连接—>导出—>标志符"mouse"

  步骤2

  加入AS代码:
  Mouse.hide();
  //隐藏原有鼠标
  var Num = 10;
  //鼠标跟随的数量
  for (var i = 0; i<Num ; i++){
  _root.attachMovie("mouse", "m"+i, i);
  this["m"+i]._xscale = this["m"+i]._yscale=i/Num*100;
  //鼠标的尺寸递增
  this["m"+i]._alpha = (Num-i)/Num*100;
  //鼠标的透明度递减
  }
  _root.onEnterFrame = function() {
  this["m"+0]._x = _xmouse;
  this["m"+0]._y = _ymouse;
  for (var i = 1; i<Num ; i++){
  this["m"+i]._x += ((this["m"+(i-1)]._x)-this["m"+i]._x)*0.5;
  this["m"+i]._y += ((this["m"+(i-1)]._y)-this["m"+i]._y)*0.5;
  }
  };
  
  实例三:心形


效果三

  思路:
  1.方法与实例一类似;
  2.改变了鼠标跟随的样式,也是使鼠标跟随围成一个圆的关键;
  3.改变每个鼠标的旋转。

  步骤1;

Flash制作绚酷鼠标特效三例
绘制心形图

  绘制一个鼠标,保存为影片剪辑,连接—>导出—>标志符"mouse"
  注意:鼠标与注册点之间要留有一定的距离,这是使之围成圆的关键

  步骤2

  加入AS代码:
  var Num = 30;
  //鼠标跟随的数量
  for (var i = 0; i<Num ; i++){
  _root.attachMovie("mouse", "m"+i, i);
  this["m"+i]._rotation = i*24;
  //设置初始的旋转角度
  this["m"+i]._alpha = (Num-i)/Num*100;
  }
  _root.onEnterFrame = function() {
  this["m"+0]._x = _xmouse;
  this["m"+0]._y = _ymouse;
  this["m"+0]._rotation += 10;
  for (var i = 1; i<Num ; i++){
  this["m"+i]._x += ((this["m"+(i-1)]._x)-this["m"+i]._x)*0.5;
  this["m"+i]._y += ((this["m"+(i-1)]._y)-this["m"+i]._y)*0.5;
  this["m"+i]._rotation += 10;
  //使所有鼠标都转起来
  }
  };

  Flash 充电: for 循环实现数组反向存储
  var Len = 20;
  //数组长度
  var A:Array = new Array(Len);
  for (var i = 0; i<Len ; i++){
  A[i] = Len-i;
  //A[Len-i-1] = i;
  }
  trace(A);



logo

本类最新行业评测技巧教程学院
本类热点本日本周本月
本类推荐本日本周本月

广告联系 | 版权说明 | 意见建议 | 加入收藏 | 军网站群 [ 军软件园 - 军软件商城 - 军软件园论坛 ]

电信与信息服务业务经营许可证:京ICP证050203