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测试一下。
作者:柳叶吹风
网友评论