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

互联网 | 编辑: 2003-08-21 00:00:00

Flash除了设计传统的动画外,还可以帮助我们完成许多事。例如用Flash制作简易的图片浏览器。

Flash除了设计传统的动画外,还可以帮助我们完成许多事。今天,笔者就教大家如何用Flash制作简易的图片浏览器。首先打开Flash MX,设置场景大小为650px*450px,背景为白色,帧频为30fps。实例具体的设置步骤如下。

1.按快捷键Ctrl+R打开“导入”面板导入三张图片(如图1)。图片的大小为640px×480px。图片imageblu.jpg是由图片image.jpg经过模糊处理得到的。

图1

2.按快捷键Ctrl+F8,创建一个“blur”影片剪辑元件,然后按快捷键Ctrl+L打开“库”面板把imageblur.jpg拖入到“blur”影片的场景中。

小提示:图片的中心点应该和场景的中心重叠。

3.按快捷键Ctrl+F8,创建一个“image_view”影片剪辑元件。选择“矩形”工具,绘制一个宽、高都为136px的矩形框(如图2)。

图2

4.按快捷键Ctrl+F8,创建一个“image_view2”影片剪辑元件。选择“矩形”工具,绘制一个宽、高都为61px的矩形框。

5.按快捷键Ctrl+F8,创建一个“view”影片剪辑元件。打开“库”面板把image.jpg拖入到“view”影片的场景中。在“属性”面板中设置图片的大小为400px×300px。

小提示:图片的中心点应该和场景的中心重叠。

6.创建一个“view2”影片剪辑元件,其层的结构如图3所示。在“blur实例”层里是“blur”元件。“image2”层层中是图片image2。

图3

7.回到主场景,创建如图4所示的五层。从库中把元件拖入到对应的层中,位置如图4。“遮罩“层中是一个与“view2”元件一样大小的矩形块。

小提示:图4中场景的比例是25%。

图4

分别单击各层中的影片元件,在“属性”为元件起实例名。元件image_view的实例名是viewFinder(如图5)。元件view1的实例名是image,大小为200px×150px;元件imageview的实例名是window;元件view2的实例名是image2,大小为2400px×1800px。

图5

8.元件和场景设置的工作做好了,现在点选实例“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测试一下。

作者:柳叶吹风

相关阅读

每日精选

点击查看更多

首页 手机 数码相机 笔记本 游戏 DIY硬件 硬件外设 办公中心 数字家电 平板电脑