本页面由 Flash 保存计划 从 Internet Archive 存档还原 · 快照 2004-12-09 · 原址 http://www2.flash8.net/teach/1465.htm ← Flash 保存计划
 
放大镜效果
作者:生活还要继续  来源:闪吧
时间: 2004年6月1  类型: 原创  
收藏 发送 评论 <%=votevote%>打印 字体选择:   

点击浏览该文件

点击浏览该文件





制作思路:导入一张图片作为背景,再在这张图片上面放一张放大了的图片,用一个圆形填充遮罩这张放大了的图片,就可以在圆形填充的位置看到放大了的部分图片。但这样制作的效果是,在圆形填充(也就是放大镜的镜片)看到的被放大的图片的比例是唯一的,可实际放大镜看到的效果应该是中间部分比例最大,越接近边缘比例越小,图像好像是拱起来的样子。为了实现这种效果,我用了多个遮罩,实例中是25个。原理是,最下面同样导入一张比例为100的图片作为背景,这张就是我们在影片里看到的完整的那个图片,然后复制这张图片,比例为200,这个比例就是镜片边缘放大的比例,你也可以自己定,接着用圆形填充遮罩图片(这时圆形填充的比例是100),这就做好了一个遮罩,此时镜片内显示的图片都是被放大了一倍的。然后我们再复制图片,让比例比刚才复制的那个大一点(实例中是204),同时也复制一个圆形填充(其实这个圆形填充是事先存在库里的一个mc),让新复制的圆形填充比刚才那个小一点,接着同样用圆形填充遮罩图片,这样,两张圆形填充遮罩出来的图片叠加在一起的效果就是中间大部分图片的比例是204,边缘一小圈的比例是200。以此类推,当25个逐渐缩小的圆形填充遮罩25个逐渐放大的图片叠加起来,就成了中间部分比例最大,向边缘比例逐渐缩小的效果。最后再加上鼠标跟随就可以用鼠标控制放大镜的位置了。下面说说具体制作过程。
1、导入一张图片,并转换成mc,命名为tp,最好导入一张比较大的图片,然后在编辑tp时将它缩小,缩小到背景图片的尺寸,也就是影片的尺寸。这样,你在把用于遮罩的图片放大后,不至于产生失真。在编辑tp时还要注意让图片的中心点位于mc局部坐标的(0,0)点,不然后面的坐标计算就不对了。
2、画一个圆形,直径100,填充色无所谓,去掉边框,转换为mc,命名为vv,圆心也要处于mc局部坐标的(0,0)点,如图。这个圆形用来做遮罩的。

按此在新窗口浏览图片

3、如图,画一个放大镜,转换为mc,命名为fdj,圆心也要处于mc局部坐标的(0,0)点,注意中间白色部分使用径向渐变填充,白色透明度5--白色透明度50,用于产生玻璃的效果。

按此在新窗口浏览图片
4、给以上3个mc设置连接名,用于脚本导出。方法是:在库里选中tp,点右建,选“连接”,如图,

按此在新窗口浏览图片

在弹出的对话框里勾选“导出为动作脚本”,在上面输入名字为tp,如图。其他两个mc(fdj,vv)一样。

按此在新窗口浏览图片
5、在主场景里第一帧加如下代码:
attachMovie("tp", "tp", -1);//从库里导入tp,这是做背景用的,
attachmovie("fdj", "fdj", 1000);//从库里导入fdj,
for (i=1; i<=25; i++) {//设置循环,25为我设置的遮罩的个数
tp.duplicateMovieClip("tp"+i, 2*i-1);//复制tp
setProperty("tp"+i, _xscale, 200+i*4);
setProperty("tp"+i, _yscale, 200+i*4);
//设置tp+i的放大比例,随着i的增加,tp的放大比例也增加
attachmovie("vv", "vv"+i, 2*i);//从库里导入vv,
setProperty("vv"+i, _xscale, 104-i*4);
setProperty("vv"+i, _yscale, 104-i*4);
//设置vv+i的缩放比例,随着i的增加,vv的比例逐渐缩小
eval("tp"+i).setmask("vv"+i);
//指定vv+i为tp+i的遮罩,i每次加1,都会设置一个遮罩,最后为25个遮罩
}
onEnterFrame = function () {//每帧执行
Mouse.hide();//隐藏鼠标
x1 = _root._xmouse;
y1 = _root._ymouse;
//获取当前鼠标坐标
setProperty(fdj, _x, x1);
setProperty(fdj, _y, y1);
//设置fdj的坐标
for (i=1; i<=25; i++) {//设置循环,为每张图片和遮罩设定坐标
setProperty("tp"+i, _x, x1-x1*(200+i*4)/100);
setProperty("tp"+i, _y, y1-y1*(200+i*4)/100);
//设置tp+i的坐标
setProperty("vv"+i, _x, x1);
setProperty("vv"+i, _y, y1);
//设置vv+i的坐标
}
};

updateAfterEvent(mousemove);//鼠标移动时刷新动画(注:此语句参考jgw6447的教程)

6、Ctrl+Enter测试,ok!

在上面源文件的基础上稍加修改,得到下面这个效果。只是运动起来太慢,比放大镜还慢,这是为何?按说去掉了图片,改用矢量图,应该很快呀!请高手看看那错啦!下面是源文件,谢谢!




















点击浏览该文件

点击浏览该文件

责任编辑:uufeng
上一篇: 商业flash设计经验谈 下一篇: 图片消失的效果
 
AE6.5的放大镜效果
FLASH MX 2004制作放大镜效果
用Flash MX制作放大镜效果