听雨轩

前些时候有个朋友问我放大镜怎么做,当时忙,只给他说了个大概,今在这详细说说方法,先看效果.

制作步骤:
1.往舞台上导入一幅图片,并将其转换成电影剪辑元件(注意注册点在其正中心),其实例名为small.

2.拷贝small电影剪辑实例至剪贴板.

3.主场景中新建一层,选中该层第1帧,用"ctrl+shift+v"命令将剪贴板中所拷贝的small电影剪辑实例粘帖至舞台,实例名改为large.

4.这样舞台上有两个大小一模一样,且位置完全重合的电影剪辑,large电影剪辑覆盖着small电影剪辑.

5.再新建一层,选中该层第1帧,用画圆工具在舞台上画一带有填充的圆,全选该圆及其内部填充,按F8将其转换为电影剪辑(注册点在正中心),其实例名为circle.

6.在主场景中双击circle,进入circle电影剪辑内,选中圆内填充,按F8将其转换为电影剪辑(注册点在正中心),其实例名为myMask.

7.再新建一层,在该层第1帧的舞台上用文本工具制作出"放大倍数"、"增加"和"减小"字样，分别将"增加"和"减小"文字转换为按钮,实例名分别为increase和decrease.

8.再新建一层(一共5层,从下而上,第1层放small,第2层放large,第3层放circle,第4层放文字及按钮，第5层放AS),选中该层第1帧,按F9打开动作脚本编辑窗口,输入以下代码:

this.onLoad=function(){
n=1.5; //初始放大倍数为1.5
    
this.large._x=Stage.width/2-50; //以下四行代码用于定位large和small的位置
this.large._y=Stage.height/2;
this.small._x=Stage.width/2-50;
this.small._y=Stage.height/2;

/*将large原始比例数值赋给变量largeScale_x和largeScale_y，以便用在放大倍数发生变化时的程序中*/
largeScale_x = this.large._xscale;
largeScale_y = this.large._yscale;
    
this.large._xscale = n*largeScale_x; //将large放大n倍,初始n=1.5
this.large._yscale = n*largeScale_y;
    
/*将large的原始x坐标和y坐标赋值给变量largeOld_x和largeOld_y，以便用在当放大镜移动时,large跟随移动的程序中*/
largeOld_x = this.large._x;
largeOld_y = this.large._y;

this.large.setMask(this.magnifier.myMask); //将magnifier下myMask设置为large的遮罩
}
this.onload();//保证上述程序得以执行

this.magnifier.onPress=function(){ //当鼠标在放大镜上按下左键时,放大镜能够被拖动
this.startDrag(false);
}
this.magnifier.onRelease=function(){ //当鼠标在放大镜上松开左键时,放大镜停止拖动
this.stopDrag();
}
this.magnifier.onReleaseOutside=function(){ //当鼠标在放大镜外松开左键时,放大镜停止拖动
this.stopDrag();
}

this.increase.onRelease=function(){ //设置"增加"按钮上的程序代码
n += 0.2;
large._xscale = n*largeScale_x; //large前不用加this,因按钮与图片元件在同一时间轴上
large._yscale = n*largeScale_y;
}
this.decrease.onRelease=function(){ //设置"减小"按钮上的程序代码
n -= 0.2;
if(n<=1){ //当放大倍数为1时停止缩小
n=1;
}
large._xscale = n*largeScale_x;
large._yscale = n*largeScale_y;
}

this.onEnterFrame=function(){ //当播放头每次进入此帧时执行以下程序
disX = this.magnifier._x - this.small._x; //放大镜与small横坐标(x坐标)之间距离
disY = this.magnifier._y - this.small._y; //放大镜与small纵坐标(y坐标)之间距离
    
this.large._x = largeOld_x-(n-1)*disX; //设置large新的横坐标
this.large._y = largeOld_y-(n-1)*disY; //设置large新的纵坐标,为何要这样设置,请看下面讲解
}


按Ctrl+Enter测试.

放大镜算法详解:

图片如下：