用Flash制作简易的图片浏览器/动画设计

通过脚本控制，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，图片的几何中心和场景的中心重叠。

　　7．创建一个名为view2的影片剪辑元件，其层的结构如图4所示。在“blur实例”层里是“blur”元件。“image2”层场景中是image2图片。

图4

　　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测试一下。