用Flash制作简易的图片浏览器

作者佚名技术来源服务器技术浏览发布时间 2012-07-10

　　通过脚本控制，Flash可以完成许多事。本例将教大家如何使用Flash制作简易的图片浏览器。

　　1．新建一个Flash文档，单击“属性”面板中的“尺寸”按钮，打开“文档属性”面板设置场景大小为650px x 450px，背景为白色，帧频为30fps。

　　2．按快捷键Ctrl+R打开“导入”面板导入三张图片。如图1所示，图片image的宽、高为640px、480px。把图片image的宽、高放大为2400px、1600px，并命名为image2。图片imageblu.jpg是由图片image.jpg经过模糊处理得到的。

图1 　　3．按快捷键Ctrl+F8，创建一个名为“blur”影片剪辑元件，按快捷键Ctrl+L打开“库”面板，将图片imageblur拖入到blur元件的场景中。点选场景中的blur元件，按快捷键Ctrl+K打开“对齐”面板，点选“相对与舞台”按钮，再点击“水平对齐”和“垂直对齐”两个按钮，如图2所示，使“影片”元件在居中于场景内。

图2 　　4．按快捷键Ctrl+F8，创建一个image_view影片剪辑元件。点选“矩形”工具，绘制一个宽、高都为136px的黑色矩形框，矩形框的中心和场景中心重叠，如图3所示。

图3 　　5．按快捷键Ctrl+F8，创建一个名为image_view2影片剪辑元件。同样点选“矩形”工具，绘制一个宽、高都为61px的矩形框。

　　6．按快捷键Ctrl+F8，创建一个view影片剪辑元件。打开“库”面板，将图片image拖拽到view元件的场景中。点选image图片，在“属性”面板中将其宽、高设为400px、300px，图片的几何中心和场景的中心重叠。?

图4 　　7．创建一个名为view2的影片剪辑元件，其层的结构如图4所示。在“blur实例”层里是“blur”元件。“image2”层场景中是image2图片。
[1]?[2]?[3]?下一页??
　　8．回到“场景 1”。创建五个图层，如图5所示。从“库”面板中把所有的元件拖拽到相对应的层中。“遮罩”层中是一个与view2元件一样大小的矩形块。注意：图5中白色区域为整个场景。

图5 　　分别点选各层中的影片剪辑元件，在“属性”面板中为元件起实例名。元件image_view的实例名是viewFinder，如图6所示。元件view1的实例名是image，宽、高为200px、150px；元件imageview的实例名是window；元件view2的实例名是image2，宽、高为2400px、1800px。

图6 　　9．元件和场景设置的工作做好了，现在点选实例image_view2，按F9打开“动作”面板，输入如下代码。

onClipEvent (load) {
?// 初始化变量
?danX = _root.image._x-(_root.image._width/2);
?danY = _root.image._y-(_root.image._height/2);
?ratio = (_root.image2._width/_root.image._width)*(-1);
?// 定义图片移动速度
?speedRatio = 15;
?// 创建函数
?function myClick (myX, myY) {
??xDis = ((myX-this._x)/speedRatio);
??yDis = ((myY-this._y)/speedRatio);
??// 制造图片的透明效果
??_root.image2.blur._alpha = ((Math.abs(xDis)+Math.abs(yDis))*5);
??// 制造图片的移动效果
??_root.viewFinder._x = _root.viewFinder._x+xDis;
??_root.viewFinder._y = _root.viewFinder._y+yDis;
??_root.image2._x = ((_root.viewFinder._x-_root.image._x)*ratio)+(_root.window._x);
??_root.image2._y = ((_root.viewFinder._y-_root.image._y)*ratio)+(_root.window._y);
?}
}
onClipEvent (mouseUp) {
??if (_root.image.hitTest(_root._xmouse, _root._ymouse, true)) {
??danX = _root._xmouse;
??danY = _root._ymouse;
?}
}
onClipEvent (enterFrame) {
?// 调用函数
?myClick(danX, danY);
}

　　好了，整个效果到这里就做好了。大家可以按快捷键Ctrl+Enter测试一下。
　　该效果源件下载(333K) 　　点击最后一页预览效果上一页??[1]?[2]?[3]?下一页??

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: Flash制作水纹三维字下一篇: 金鹰flash视频教程合集

关于用Flash制作简易的图片浏览器的所有评论

随机推荐