通过类来实现一个gallery
说明：一个比较简单的相册，通过类来实现。
演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_class/
准备工作：打开源文件class_final.fla，点击属性里的发布设置，点击Actionscript3旁边的设置，在最下面的classpath里，引入classes_final的文件夹的路径，然后点击确定，前期工作就准备完了。
代码：
唯一的一个类文件：ImageGallery.as
复制代码 代码如下:
packageinteractive.gallery
{
importflash.display.*;
importflash.events.*;
importfl.transitions.*;
importfl.transitions.easing.*;
importflash.filters.*;
importflash.net.*;
publicclassImageGalleryextendsMovieClip
{
varxml:XML;
varxmlList:XMLList;
varxmlLoader:URLLoader=newURLLoader();
varcontainer:MovieClip=newMovieClip();
varimageLoader:Loader;
varsegments:Number;
varcurrentSegment:int;
varfullLoader:Loader=newLoader();
varxmlPath:String;
varthumbAtt:String;
varfullAtt:String
publicfunctionImageGallery(path:String,thumb:String,full:String)
{
section1
}
functionxmlLoaded(event:Event):void
{
section2
}
functionchangeThumb(event:MouseEvent):void
{
section3
}
functionshowPicture(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(newURLRequest(xmlPath));
xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded);
container.filters=[newDropShadowFilter()];
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(vari:int=0;i<xmlList.length();i++)
{
imageLoader=newLoader();
imageLoader.load(newURLRequest(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(varj:int=0;j<container.numChildren;j++)
{
container.getChildAt(j).visible=false;
}
container.getChildAt(currentSegment).visible=true;
}
这个函数是响应鼠标在缩略图上移动的事件，有一个算法在里面。
将mc的宽除以载入的缩略图的数量，得到一个平均数。
然后将当前鼠标的x位移除以刚刚得到的平均数就得到了当前鼠标所在的图片（听着有点别扭）
然后先将所有container里的child隐藏起来，再显示当前的图片。
section4
fullLoader.unload();
fullLoader.load(newURLRequest(xmlList[currentSegment].attribute(fullAtt)));
这个是响应缩略图点击事件，当点击后先去掉先前载入的大图，然后再去载入缩略图对应的大图。
其实也不难，不是吗？
再拉看一下完整的代码
复制代码 代码如下:
packageinteractive.gallery
{
importflash.display.*;
importflash.events.*;
importfl.transitions.*;
importfl.transitions.easing.*;
importflash.filters.*;
importflash.net.*;
publicclassImageGalleryextendsMovieClip
{
varxml:XML;
varxmlList:XMLList;
varxmlLoader:URLLoader=newURLLoader();
varcontainer:MovieClip=newMovieClip();
varimageLoader:Loader;
varsegments:Number;
varcurrentSegment:int;
varfullLoader:Loader=newLoader();
varxmlPath:String;
varthumbAtt:String;
varfullAtt:String
publicfunctionImageGallery(path:String,thumb:String,full:String)
{
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(newURLRequest(xmlPath));
xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded);
container.filters=[newDropShadowFilter()];
addChild(container);
addChild(fullLoader);
}
functionxmlLoaded(event:Event):void
{
xml=XML(event.target.data);
xmlList=xml.children();
for(vari:int=0;i<xmlList.length();i++)
{
imageLoader=newLoader();
imageLoader.load(newURLRequest(xmlList[i].attribute(thumbAtt)));
container.addChild(imageLoader);
}
}
functionchangeThumb(event:MouseEvent):void
{
segments=container.width/container.numChildren;
currentSegment=Math.floor(container.mouseX/segments);
if(currentSegment<=container.numChildren-1)
{
for(varj:int=0;j<container.numChildren;j++)
{
container.getChildAt(j).visible=false;
}
container.getChildAt(currentSegment).visible=true;
}
}
functionshowPicture(event:MouseEvent):void
{
fullLoader.unload();
fullLoader.load(newURLRequest(xmlList[currentSegment].attribute(fullAtt)));
}
}
}
类说完了，接下来就来看看fla里面都是怎么写的。
这个就简单多了
importinteractive.gallery.ImageGallery;
vargallery:ImageGallery=newImageGallery("data/images.xml","thumb","full");
addChild(gallery);
我不说了，聪明的你一看就明白了。
案例分析到此结束。
打包下载
【AS3.0 通过类来实现一个gallery】相关文章：