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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有