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

时间: 2024-10-07 05:30:06

AS 功能代码教程14] 鱼眼放大镜的相关文章

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

本节加了星号,借黑羽的话:"本节的内容稍微有些难度,如果不明白,可以暂时不看,待日后碰到类似问题时,再来查阅" 下面我们先用图解法来解释一下本实例 思路: 1.鱼眼放大镜是于若干个渐小的圆组成的; 2.使每个圆都去遮罩一个渐大的图片来实现,里面的小圆遮罩大较图片,外面的大圆遮罩较小图片; 3.还有最后一个重要的步骤是"对焦",由于图片是渐大的,所以鼠标所在的一个点位对于小图来说也许是头部,而对于大图来说也许都到了场外,那么显示出的效果就错了.使用"对焦&q

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

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

[AS功能代码教程04] 进阶三角函数

在AS 03教程中,我们介绍了关于三角函数基础应用 现在为上次课的内容加以补充和发展 复习一下画圆的方法:x坐标cos(n),y坐标sin(n); n 从0-360的弧度 一.绘制椭圆 对比一下,我们只是把画圆方法中 R ,一分为二. 分成了 W 和 H 分别控制椭圆的宽和高. _root.createEmptyMovieClip("MC", 1); MC._x = 200; MC._y = 200; //创建一个空影片剪辑,放在舞台中央作为画线容器 var W = 50; var H

[AS功能代码教程13] 贪吃蛇

思路: 1.首先规定蛇的运动区域宽度(stagew)和高度(stageh) 2.增加键盘侦听,获得键控代码,如果该键与前一个键是反向的则不予改变 3.初始化中, 请注意:蛇头.蛇身.食物的大小均为 7 象素 4.每一次移动的步长(Move)均为8象素,以实现身体为一格一格的效果 5.吃到食物后,蛇身(body)长度增加5个单位,复制出5个身体 6.履带式前进:从尾部开始,后一个跟随前一个的位置,最前面的跟随蛇头 图示: 1.整体思路 2.蛇头.蛇身.食物的大小均为 7 象素,步长 8 象素

[AS功能代码教程12] 填色游戏

在本次课程中我们将学习使用Color类来制作一个填色游戏 并通过本实例复习for...in及SharedObject的应用 思路: 1.使用脚本代码创建一个调色盘,鼠标点击色块后进行取色; 2.绘制作为填充的影片剪辑并把每一部都存为影片剪辑.例如: 填充对象是一个人物,那么要把他的头发,眼睛,脸等部分都保存成影片剪辑; 3.最后把各部分影片再统一保存到一个影片剪辑(mc)中; 4.为了保存和读取mc中各影片中的颜色,所以要加入两个按钮 save_btn 和 load_btn . 步骤1: 绘制作

[AS功能代码教程09] 点阵字效果

第一次在fanflash上看到这个实例,感觉很不可思议 仔细研究一下发现,作者的构思还是很巧妙的,今天拿来与大家分享一下 这个实例可以说结合了BitmapData类的技术与Tween类的动感. 思路: 1.用AS创建一个空文本框,存储欲显示的字; 2.把这个文本框看成一个位图,并存储其位图数据; 3.逐行扫描这个位图数据,把有文字信息的像素点都存储到数组中; 4.最后根据数组复制出"点",并使每个"点"移动到相应的位置. 步骤1: 绘制10*10的圆点,保存为影片剪

[AS功能代码教程07] 百变图

思路:1.createEmptyMovieClip(MC),位于舞台中央,使之不断旋转; 2.用MC作载体,复制出num(150)个(p0~p149)影片,全部都依附于MC上; 3.AS中共有2个函数(function),分别为Change()和getShape(): Change():首先,获得一个随机图形编号(shape),然后为所有MC["p"+i]点设置大小及透明度,再调用getShape()获得该点的目标坐标; getShape():根据shape编号,返回组成该图形的目标坐

[AS功能代码教程05] 打字机效果

思路:1.首先用AS创造出动态文本框,用于输出文字: 2.用计时器,每隔一段时间累加输出下一个字符. AS代码层: _root.createTextField("output", 1, 0, 0, 500, 400); var txt_f:TextFormat = new TextFormat(); txt_f.font = "宋体"; //设置字体 txt_f.color = 0x333333; //设置文字颜色 txt_f.size = 22; //设置文字大小

[AS功能代码教程01] 通用延迟代码

使用方法: 将下列代码写入fla的第一帧:在任意帧中写入delay();命令就可以实现3秒钟延时功效: 思路: 1.使用FPS和onEnterFrame配合完成. 2.Flash动画默认1秒钟播放12帧,即FPS为12. 3.执行一次onEnterFrame(进入帧),counter++自加1,那么一秒钟要加多少次呢?1秒钟要进入12次帧,所以自加了12次.那么2秒钟,3秒钟呢-于是我们得出公式 总延迟时间 = 延迟秒数 * FPS 原理就是用帧数做延时. AS代码: var fps:Numbe