AS3.0 通过类来实现一个gallery
AS3.0 通过类来实现一个gallery
发布时间:2016-12-28 来源:查字典编辑
摘要:通过类来实现一个gallery说明:一个比较简单的相册,通过类来实现。演示:http://www.live-my-life-with-yuy...

通过类来实现一个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);

我不说了,聪明的你一看就明白了。

案例分析到此结束。

打包下载

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Flash教程学习
热门Flash教程学习
网页设计子分类