注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

flash as2鱼眼放大镜  

2014-02-18 15:27:39|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用图解法来解释一下本实例

1.鱼眼放大镜是于若干个渐小的圆组成的;

2.使每个圆都去遮罩一个渐大的图片来实现,里面的小圆遮罩大较图片,外面的大圆遮罩较小图片;

3.还有最后一个重要的步骤是"对焦",由于图片是渐大的,所以鼠标所在的一个点位对于小图来说也许是头部,而对于大图来说也许都到了场外,那么显示出的效果就错了。使用"对焦"可以让鼠标指在小图上是头部,大图上也要是头部,这么说给大家一个印象,下面请看图解.

图解:

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

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
}

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...
}

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."对焦"

请大家看一看下面的演示动画,也许能让你了解他的含义

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

这是两张执行"对焦"后的图片,如果鼠标在小图的红星位置,那么对于大图来说,也要在红星位置上

如何实现"对焦"功能,请看下面代码:


_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的位置) * 缩放比
 }
};

  评论这张
 
阅读(44)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017