经常在淘宝上闲逛,每打开一个实物的页面,都有一张主实物图,当用户把鼠标移上鼠标的时候,在图片的右边会出现一张局部放大的图片,可以让买家更加细致的查看实物的局部,就好像我们凑近了看一样。我想淘宝的这个功能是使用Javascript代码实现的,今天我们就是使用ActionScript代码来实现同样的功能。
首先我们需要一张大图和一张大图的缩略图,如果没有缩略图也可以,我的这个实例就是一张大图。将这张大图导入到库中,将图片转化为影片剪辑元件,调整图片在影片剪辑中的位置为0,0.并为ActionScript导出为Girl类。
其次我们需要小长方形的影片剪辑元件作为“镜头”,由它来给我们选择局部内容。使用绘图工具绘制一个长方形,设置注册点为中心位置,并导出为Amplifier类。
还需要一个大长方形作为大图的遮罩层,让大图始终显示在遮罩层范围内,不至于到处显示。这个大长方形我是使用绘图API绘制的。
代码详解:
1.首先设置了一个Girl类实例,并将实例缩小至原来的20%,作为小图。
2.设置另一个Girl类实例,作为大图,大图保持原来的大小。
3.制作遮罩层,命名为m,并把m设置为大图的遮罩层。
4.创建Enter_Frame事件,重点在于大图显示位置和”镜头“位置关系的算法。
var s_girl:Girl=new Girl();
addChild(s_girl);
s_girl.scaleX=.2;
s_girl.scaleY=.2;
var b_girl:Girl=new Girl();
addChild(b_girl);
var m:Sprite=new Sprite();
addChild(m);
m.graphics.lineStyle(1);
m.graphics.beginFill(0xff0000);
m.graphics.drawRect(s_girl.width+5, 0, stage.stageWidth-s_girl.width,s_girl.height);
m.graphics.endFill();
b_girl.mask=m;
var am:Amplifier=new Amplifier();
am.alpha=.5;
addChild(am);
addEvent<a href=http://www.flashabc.net/catalog.asp?tags=List>List</a>ener(Event.ENTER_FRAME,onframe);
function onframe(e:Event):void {
am.x=mouseX;
am.y=mouseY;
b_girl.x=-((mouseX-am.width/2)*5-s_girl.width);
b_girl.y=-(mouseY-am.height/2)*5;
}