快速业务通道

用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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号