一个放大效果
作者:筑长城 类型:转载 来源:闪吧
在书上看到的一个放大效果,结合自己的理解,写出来。看一下效果先:
点击浏览该文件
思路:通过_xscale和_yscale来实现放大效果;
1. 创建位图的影片剪辑
把一张图片导入到库,大小设为300×450,把这个元件名为image;回到场景中,拖入image实例。把image元件的实例名命为image_mc。好了,这个影片剪辑完毕。
2. 创建放大基本形状影片剪辑
ctrl+F8创建一个新影片剪辑,命为magnifier。进入它的编辑状态,画一个圆,用放射状渐变填充它,但注意颜色透明度应小于100,这样才能让下面的图片看得到。好了,这个影片剪辑完毕。
3. 创建放大效果影片剪辑
ctrl+F8,新建影片剪辑,命名zoom;进入zoom的编辑状态。将第一层名为image;选择第一帧,从库中拖入一个image实例。
在image层上新建一层,名为mask,选择第一帧,拖入magnifier实例,水平垂直居中。
在mask层上新建一层,名为zoom,选择第一帧,拖入magnifier实例,水平垂直居中。
选择mask层,将其设为遮罩层。在image实例上写入以下代码:
OK,这个影片剪辑完毕。
4. 主场中的帧脚本
(1) 回到主场中,在第一层上创建一个新层,命为zoom,拖入zoom实例,将其实例名为ZoomTool(2) 创建一个新层,名为as,在该层的第一帧写以下代码:
点击浏览该文件思路:通过_xscale和_yscale来实现放大效果;
1. 创建位图的影片剪辑
把一张图片导入到库,大小设为300×450,把这个元件名为image;回到场景中,拖入image实例。把image元件的实例名命为image_mc。好了,这个影片剪辑完毕。
2. 创建放大基本形状影片剪辑
ctrl+F8创建一个新影片剪辑,命为magnifier。进入它的编辑状态,画一个圆,用放射状渐变填充它,但注意颜色透明度应小于100,这样才能让下面的图片看得到。好了,这个影片剪辑完毕。
3. 创建放大效果影片剪辑
ctrl+F8,新建影片剪辑,命名zoom;进入zoom的编辑状态。将第一层名为image;选择第一帧,从库中拖入一个image实例。
在image层上新建一层,名为mask,选择第一帧,拖入magnifier实例,水平垂直居中。
在mask层上新建一层,名为zoom,选择第一帧,拖入magnifier实例,水平垂直居中。
选择mask层,将其设为遮罩层。在image实例上写入以下代码:
onClipEvent(load){ //放大图片
_xscale=_root.Slider*100;
_yscale=_root.Slider*100;
}
onClipEvent(enterFrame){ //修正放大图片后的坐标,下面解释。
_x=(_root.image_mc._x-_root.ZoomTool._x)*_root.Slider;
_y=(_root.image_mc._y-_root.ZoomTool._y)*_root.Slider;
}
_xscale=_root.Slider*100;
_yscale=_root.Slider*100;
}
onClipEvent(enterFrame){ //修正放大图片后的坐标,下面解释。
_x=(_root.image_mc._x-_root.ZoomTool._x)*_root.Slider;
_y=(_root.image_mc._y-_root.ZoomTool._y)*_root.Slider;
}
OK,这个影片剪辑完毕。
4. 主场中的帧脚本
(1) 回到主场中,在第一层上创建一个新层,命为zoom,拖入zoom实例,将其实例名为ZoomTool(2) 创建一个新层,名为as,在该层的第一帧写以下代码:
Slider=1.5; //确定放大倍数。
ZoomTool.startDrag(true); //让放大镜的影片剪辑可以拖动。
ZoomTool.startDrag(true); //让放大镜的影片剪辑可以拖动。
测试效果。对修正放大图片后的坐标的解释:
下图蓝色框代表放大后的图片(也就是ZoomTool中的被遮罩的image.),红色框代表原始图片(也就是主场景中的image);放大后,它们的位置关系如图所示,虽然有放大,但是你会发现放大镜中的图像和背后的原始图片对不上(你可以试着把这段代码删掉试一下),我们要改成右图所示的位置关系。图画出来就很好理解了。计算关系就是下面这个式子。
下图蓝色框代表放大后的图片(也就是ZoomTool中的被遮罩的image.),红色框代表原始图片(也就是主场景中的image);放大后,它们的位置关系如图所示,虽然有放大,但是你会发现放大镜中的图像和背后的原始图片对不上(你可以试着把这段代码删掉试一下),我们要改成右图所示的位置关系。图画出来就很好理解了。计算关系就是下面这个式子。

责任编辑:uufeng 时间:2004年7月3日
- 最近更新
