AS 功能代码教程14] 鱼眼放大镜

本节加了星号，借黑羽的话：“本节的内容稍微有些难度，如果不明白，可以暂时不看，待日后碰到类似问题时，再来查阅”

下面我们先用图解法来解释一下本实例

思路：
1.鱼眼放大镜是于若干个渐小的圆组成的;
2.使每个圆都去遮罩一个渐大的图片来实现，里面的小圆遮罩大较图片，外面的大圆遮罩较小图片;
3.还有最后一个重要的步骤是"对焦"，由于图片是渐大的，所以鼠标所在的一个点位对于小图来说也许是头部，而对于大图来说也许都到了场外，那么显示出的效果就错了。使用"对焦"可以让鼠标指在小图上是头部，大图上也要是头部，这么说给大家一个印象，下面请看图解.

图解：

Mag4.jpg

1.首先在舞台上放入两个影片剪辑，其中一个是图片，实例名"pic"，注册点在左上(0,0)；另一个是圆，大小：200*200，实例名"ball"，注册点在中心;

Mag4.jpg

2.鱼眼放大镜是于若干个渐小的圆组成，让这些圆作为镜片，重叠在一起，同时成像，圆(镜片)的数量越多，成像效果越细，图中数量为3
代码如下：
var Count:Number = 3;
//复制圆(镜片)的数量
for (var i = 0; i<Count; i++){
var b = ball.duplicateMovieClip("B"+i, i*2+1);
//复制圆
b._xscale = b._yscale=(1-i/Count)*100;
//圆的缩放＝ (1-第i个圆/圆的数量)*100，例:100～90～80～70
}

Mag4.jpg

3.每个圆都加载一个渐大的图片，先来创建这些渐大的图片，图的数量为3
  代码如下：
var Count:Number = 3;
//复制圆(镜片)的数量
var Zoom:Number = 0.08;
//图片放大的递增倍数
for (var i = 0; i<Count; i++){
var dif = 1+i*Zoom;
//缩放比(dif)为递增量，例:1.00～1.08～1.16～1.24...
var p = pic.duplicateMovieClip("P"+i, i*2);
//复制图片
p._xscale = p._yscale=dif*100;
//图片缩放＝递增量*100，例:100～108～116～124...
}

Mag4.jpg

4.综合上述实现，里面的小圆遮罩大较图片，外面的大圆加载较小图片，再加入一句保存初始缩放比的语句
var Count:Number = 30;
//复制圆(镜片)的数量
var Zoom:Number = 0.08;
//图片放大的递增倍数
for (var i = 0; i<Count; i++){
var dif = 1+i*Zoom;
//dif为递增量，例:1.00～1.08～1.16～1.24...
var b = ball.duplicateMovieClip("B"+i, i*2+1);
//复制圆
b._xscale = b._yscale=(1-i/Count)*100;
//圆的缩放＝ (1-第i个圆/圆的数量)*100，例:100～90～80～70
b.Zoom = dif;
//保存图片的缩放比
var p = pic.duplicateMovieClip("P"+i, i*2);
//复制图片
p._xscale = p._yscale=dif*100;
//图片缩放＝递增量*100，例:100～108～116～124...
p.setMask(b);
//进行遮罩
}

5."对焦"
请大家看一看下面的演示动画，也许能让你了解他的含义

Mag4.jpg

这是两张没有"对焦"的图片，大家注意，如果鼠标在小图的红星位置，那么对于大图来说，也许是人物的脸部，而不是大图的红星位置
Mag4.jpg

这是两张执行"对焦"后的图片，如果鼠标在小图的红星位置，那么对于大图来说，也要在红星位置上
如何实现"对焦"功能，请看下面代码：
_root.onMouseMove = function() {
for (var i = 1; i<=Count; i++) {
  var balls = this["B"+i];
  balls._x = _xmouse;
  balls._y = _ymouse;
  //使每个镜片都跟着鼠标移动
  this["P"+i]._x = _xmouse-(_xmouse-pic._x)*balls.Zoom;
  this["P"+i]._y = _ymouse-(_ymouse-pic._y)*balls.Zoom;
  //调整每个复制出的图片的位置
  //新的位置＝鼠标位置 — (鼠标位置 — 原图pic的位置) * 缩放比
}
};

根据 "对焦" 公式：
新的位置＝鼠标位置 — (鼠标位置 — 原图pic的位置) * 缩放比
本实例中，原图pic的位置为左上(0,0)点，所以，公式可以变形为：
新的位置＝鼠标位置 — 鼠标位置 * 缩放比

这个公式也是本节的难点，就以原图位置在左上(0,0)为例

如果鼠标在右边，那么新位置肯的为负数，新位置向左移，因为缩放比是大于1.00的数；反之，则是两个负数相加，新位置向右移
好的，整个思路就这些，下面给出完整过程

步骤1：
首先在舞台上放入两个影片剪辑

其中一个是图片，实例名”pic”，注册点在左上(0,0)；

另一个是圆，大小：200*200，实例名”ball”，注册点在中心
步骤2：
在第一帧加入AS代码
var Count:Number = 30;
//复制圆(镜片)的数量
var Zoom:Number = 0.08;
//图片放大的递增倍数
for (var i = 0; i<Count; i++){
var dif = 1+i*Zoom;
//dif为递增量，例:1.00～1.08～1.16～1.24...
var b = ball.duplicateMovieClip("B"+i, i*2+1);
//复制圆
b._xscale = b._yscale=(1-i/Count)*100;
//圆的缩放＝ (1-第i个圆/圆的数量)*100，例:100～90～80～70
b.Zoom = dif;
//保存图片的缩放比
var p = pic.duplicateMovieClip("P"+i, i*2);
//复制图片
p._xscale = p._yscale=dif*100;
//图片缩放＝递增量*100，例:100～108～116～124...
p.setMask(b);
//进行遮罩
}
_root.onMouseMove = function() {
for (var i = 1; i<=Count; i++) {
  var balls = this["B"+i];
  balls._x = _xmouse;
  balls._y = _ymouse;
  //使每个镜片都跟着鼠标移动
  this["P"+i]._x = _xmouse-(_xmouse-pic._x)*balls.Zoom;
  this["P"+i]._y = _ymouse-(_ymouse-pic._y)*balls.Zoom;
  //调整每个复制出的图片的位置
  //新的位置＝鼠标位置 — (鼠标位置 — 原图pic的位置) * 缩放比
}
};

补充：flash教程,动画技术