通过实例学习Flash AS3.0——案例六_Flash教程-查字典教程网

相关文章: Flash/actionscript/20071128/actionscript_1418.html">通过实例学习Flash AS3.0——案例五

首先声明：本人大菜鸟一个，刚接触AS3不久，许多理念还没来得及灌输，这些case都是从网上down的，但因为解说是英文的，不利我们学习，我就充当一个translater，顺便可以让自己巩固一下知识。

水平有限，错误难免，欢迎大虾小虾，大鸟小鸟指正。

下面进入正题：

案例6：通过类来实现一个gallery

说明：一个比较简单的相册，通过类来实现。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_class/

准备工作：打开源文件class_final.fla，点击属性里的发布设置，点击Actionscript3旁边的设置，在最下面的classpath里，引入classes_final的文件夹的路径，然后点击确定，前期工作就准备完了。

代码：

唯一的一个类文件：ImageGallery.as

package interactive.gallery

{

import flash.display.*;

import flash.events.*;

import fl.transitions.*;

import fl.transitions.easing.*;

import flash.filters.*;

import flash.net.*;

public class ImageGallery extends MovieClip

{

var xml:XML;

var xmlList:XMLList;

var xmlLoader:URLLoader = new URLLoader();

var container:MovieClip = new MovieClip();

var imageLoader:Loader;

var segments:Number;

var currentSegment:int;

var fullLoader:Loader = new Loader();

var xmlPath:String;

var thumbAtt:String;

var fullAtt:String

public function ImageGallery(path:String,thumb:String, full:String)

{

section1

}

function xmlLoaded(event:Event):void

{

section2

}

function changeThumb(event:MouseEvent):void

{

section3

}

function showPicture(event:MouseEvent):void

{

section4

}

section1代码：

xmlPath = path;

thumbAtt = thumb;

fullAtt = full;

container.x = 25;

container.y = 25;

fullLoader.x = 200;

fullLoader.y = 25;

container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);

container.addEventListener(MouseEvent.CLICK, showPicture);

xmlLoader.load(new URLRequest(xmlPath));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

container.filters = [new DropShadowFilter()];

addChild(container);

addChild(fullLoader);

这段代码的功能就是在初始化类时，给一些以后会用到的变量赋值，因为这些变量是全局变量，所以后面的function都能用。

对container添加了监听事件，监听鼠标移动和点击。

然后载入xml文件，当xml载入完成后，执行xmlLoaded函数

然后对container应用了阴影滤镜，这个container就是将来我们要载入图片的mc。

然后将container和fullLaoder放到舞台上，fullLoader将来会载入大图。

section2

xml = XML(event.target.data);

xmlList = xml.children();

for (var i:int = 0; i < xmlList.length(); i )

{

imageLoader = new Loader();

imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));

container.addChild(imageLoader);

}

当xml载入完成后就会执行这个函数，先是获取xml对象列表，然后获取xml的子元素。这个在前面的教程提及过。

遍历子元素，然后通过Loader载入图片，并将imageLoader添加到container里。

section3

segments = container.width / container.numChildren;

currentSegment = Math.floor(container.mouseX / segments);

if (currentSegment <= container.numChildren - 1)

{

for (var j:int = 0; j < container.numChildren; j )

{

container.getChildAt(j).visible = false;

}

container.getChildAt(currentSegment).visible = true;

}

这个函数是响应鼠标在缩略图上移动的事件，有一个算法在里面。

将mc的宽除以载入的缩略图的数量，得到一个平均数。

然后将当前鼠标的x位移除以刚刚得到的平均数就得到了当前鼠标所在的图片（听着有点别扭）

然后先将所有container里的child隐藏起来，再显示当前的图片。