本页面由 Flash 保存计划 从 Internet Archive 存档还原 · 快照 2004-12-09 · 原址 http://www2.flash8.net/teach/816.htm ← Flash 保存计划
 
动态放大镜示例
作者:yzw7494  来源:闪吧
时间: 2004年4月7  类型: 原创  
收藏 发送 评论 <%=votevote%>打印 字体选择:   

以前在Flash中实现的放大镜效果多半是使用蒙板,例如,用户在舞台上输入一行文字,复制出两个对象,其中一个对象的文字字号较大,另外一个对象的字号较小。使用蒙板可以将较大的对象蒙住大部分,只留下放大镜显示的内容,放大镜同时遮住了它下面的较小对象的文字。这样就产生了放大镜效果。
这种放大镜简单易行,但是交互性差。用户不能通过鼠标移动观察细节,所以它并非实际意义上的放大镜。动态放大镜就不一样,它允许用户移动鼠标,对于兴趣的图形细节进行观察。如以下例子:

动态放大镜虽然也使用两个对象(一个较大,一个较小),但是它的实现需要使用以下脚本元素:
使用starDrag动作允许拖动某个电影剪辑。
使用Mouse(鼠标)对象的hide方法将默认鼠标指针替换为自定义的光标——放大镜。
使用电影剪辑对象的setMask方法动态设置蒙板。
使用new Object工作区函数新建一个通用对象,该对象为顶点对象,它将取得并保存较小对象的水平和纵向位置(_x和_y属性)
 使用电影剪辑对象的globalTocal方法将顶点对象的水平和纵向位置(一般写作point.xr和point.y)转换为本地坐标.
 依据本地坐标的顶点对象的水平和纵向位置指定较大对象的水平和纵向位置

 请按以下步骤操作:
(1) 按Cftl+R键导入一幅图像,然按F8键将该图像转换为电影剪辑,并且在属性检查器中将其命名为small,如图1所示。
按此在新窗口浏览图片
(2) 按住Ctrl键拖动舞台上的电影剪辑,此时将产生一个副本,在属性对话框将其实例名修改为large,然后单击Windows(窗口)>Transform(变形).在出现的变形面板中输入150%的变形值,按Enter键使large实例增大,注意选中Constrain(锁定纵横比)复选框,如图2所示
按此在新窗口浏览图片
(3) 使用FlashMX绘图工具箱中的椭圆工具在舞台上绘制一个圆形,注意该圆形需同时包括外框轮廓和填充实心,按F8键将圆形转换为电影剪辑,并且命名为zooms,如图3所示。
按此在新窗口浏览图片
(4) 双击zoom电影剪辑实例,进入放大镜电影剪辑的编辑模式,选中圆形的填充部分 ,按F8键将其转换为电影剪辑,并且命名为zoom,. 如图4所示
按此在新窗口浏览图片
(5) 选中圆形的外框轮廓部分,单击Modify(修改)>Shape(形状)>Convert Linest to Fills(将外框转换为填充对象)。
(6) 使用Color Mixer(混色器)面板调节转换后填充形状的颜色,使放大镜内圈有透明效果。
(7) 单击标题栏上的Scenel切换回场景编辑模式,此时舞台上有3个电影剪辑对象,small、large和zooms中还包含一个zoom电影剪辑实例。
(8) 选中时间轴中的帧,给它附加以下动作:
startDrag(“_root.zooms”,true);
Mouse.hide();
root.large.setMask(_root.zooms.zoom);
如图5所示
按此在新窗口浏览图片
代码解释和输入方法:
startDrag(“_root.zooms”,true);
该语句将允许用户使用鼠标拖动zooms电影剪辑实例,该实例包括一个zoom电影剪辑实例和一个放大镜的图形外框,glass电影剪辑实例将在第3行代码中被设置为蒙板,所以它是看不到的,用户实际上可以看到的拖动对象只有放大镜的图形外框。
FlashMX动作面板的Actions(动作) >Movie Clip Control(电影剪辑控制)分类中包含了startDrag动作。在设置该动作的参数时要注意选中Lock Mouse to Center(锁定在鼠标中央)。如果要限制鼠标的移动范围,使之只能在图象边界内移动,则可以选中Constrain to Rectanglw(限定在矩形内)复选框,然后根据small电影剪辑实例的位置输入L(左)、T(上)、R(右)和B(下)的位置。
Mouse.hide0;
该语句可以使光标隐藏,取面代之的是被拖动的对象,在本示例中,放大镜将作为用户拖动的自定义光标。
root.large.setMask(_root.zoom..zoom);
电影剪辑对象的setMask方法可以动态设置蒙板效果,setMask前面的电影剪辑实例名是将被遮挡显示的对象,而括号中的参数则是蒙板对象。所以在本示例中,调用setMask方法的电影剪辑示例是较大的图象电影剪辑_root.large,而参数则是放大镜图形中的圆形填充对象_root.zooms.zoom。注意,不要直接使用_root.zooms作为蒙板,否则将无法显示放大镜的外框图形。
SetMask方法可以通过obiect(对象)>Movie(电影)>Movie Clip(电影剪辑)>Methods(方法)分类访问,如图6所示。



按此在新窗口浏览图片
现在如果按Ctrl+Enter预览电影就可以看到蒙板效果。但是,蒙板所显示的图象不会反应small电影剪辑实例的位置变化,因此,接下来要做的就是通过编写脚本,使large电影剪辑实例响应放大镜的移动,并根据small电影剪辑的显示内容调整自己的位置。
请按以下步骤操作:
(1) 选中舞台上的zooms电影剪辑实例,单击Flash MX动作面板的Actions(动作) >Varibles(变量)>setVariable(设置)变量,在Variable(变量)框中输入point,然后将光标定位到Value(值)框中,选择动作面板Object(对象)>Core(核心对象)>Object(普通对象)>new Object构造器械,如图7所示。





按此在新窗口浏览图片
(2) 选中Value(值)框右面的Expression(表达式)复选框。该语句将产生新的普通对象point。选择onClipEvent语句,将电影剪辑事件修改为EnterFrame,因为以下语句需要不断执行,如图8所示。
按此在新窗口浏览图片
(3) 继续单击Flash MX动作面板的Actions(动作)>Variable(变量)>setVariable(设置)变量,添加以下语句:
point.x=_root.small._x
point.y=_root.small._y
如图9所示
按此在新窗口浏览图片

(4) 单击Flash MX动作面板Object(对象)>Movie(电影)>Movie Clip(电影剪辑)>Method(方法)>globalToLocal方法,在Object(对象)框中输入this,在Parament(参数)框中输入point.
如图10所示
按此在新窗口浏览图片
(5) 单击Flash MX动作面板的Axtion(动作)>Variablesa(变量)>setVariable(设置)变量,添加以下语句:
_root.large.x=(point.x)/3+275;
_root.large.y=(point.y)/3+200;
如图11所示
按此在新窗口浏览图片
代码解释:
为什么要除以3呢?
如果large对象相比small对象的放大比例为150%,则除以3比较合适;如果large对象相比small对象的放大比例为200%,则除以1.2 比较合适;其他比例值的对应关系,用户可以通过电影预览效果进行调节。
为什么要加275和200?
这两个值也是有规律可循的,它们是电影文档大小值的1/2,例如,如果当前文档的大小为x:550 y:400,则x:值加275,y值加200;如果当前文档大小为x:320 y:240,则x 值加160,y 值加120。
要测试电影结果,可以按F12键在浏览器中预览。Large电影剪辑实例的位置将随着放大镜的移动而移动。
提示以上脚本可以使用户在打开Flsah MX电影时看到效果。
如果要在用户将鼠标移动到图象上时才出现动态放大镜,而鼠标离开图象时,一切还原如初,则可以删除附加给帧的动作,保留附加给zoom电影剪辑实例的动作,然后给small电影剪辑实例附加以下动作:
onClipEvent(enterFrame){
if(hitTest(_root._xmouse,_root.ymouse,false)){
starDrag(“_root.zooms”,true,160,50,340,340);
Mouse.hide();
_root.large.visible=1;
_root.zoom.visible=1;
root.large.setMask(_root.zooms.zoom);
} else {
Mouse.show();
StopDrag();
_root.large._visible = 0;
_root.zooms._visible = 0;
}
}
如图12所示
按此在新窗口浏览图片
代码解释:
onClipEvent(entetFrame){
使脚本不断被执行。
If (hitTest(_root._xmouse,_root._ymouse,false)){ 该语句可以检测舞台上的鼠标是否移动到电影剪辑实例small上。
StartDrag(“_root.zooms”,true,160,50,340,340); 允许拖动放大镜电影剪辑实例(包括glass蒙板和放大镜外框图形)。后面的参数是隐藏具体的限制鼠标移动的位置,用户需要根据自身文档的情况修改。
Mouse.hide( );
隐藏光标
root.large._visible = 1;
root.lzooms._visible = 1;

这两句可以使large电影剪辑实例和zoom电影剪辑实例显示。之所经添加这两句,是因为下面设置了它们隐藏的语句。
root.large.setMask(_root.zooms.glass);
通过elseMask方法动态设置 zoom内的glass作large实例的蒙板。
}else{
指定在if 条件为false(鼠标没有移动到small图象上)时要执行的语句。
Mouse.show();
显示光标。
StopDrap()
禁止对象被拖动。
_root.large._visible = 0;
_root.zooms._visible = 0;

默认使放大镜和large电影剪辑实例均隐藏,,这样,当用户将鼠标移动到small图象上时,会有一个意外的“惊喜”。
源文件:

点击浏览该文件
责任编辑:uufeng
上一篇: 用渐变做慢镜头旋转 下一篇: Flash MX组件扩展组件
 
AE6.5的放大镜效果
FLASH MX 2004制作放大镜效果
放大镜效果
用Flash MX制作放大镜效果
手工具及放大镜
在DW中插入Flash的参数详解