首先声明:本人大菜鸟一个,刚接触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隐藏起来,再显示当前的图片。
section4
fullLoader.unload(); fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt))); 这个是响应缩略图点击事件,当点击后先去掉先前载入的大图,然后再去载入缩略图对应的大图。 其实也不难,不是吗?
再拉看一下完整的代码
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) { 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 xmlLoaded(event:Event):void { 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); } } function changeThumb(event:MouseEvent):void { 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; } } function showPicture(event:MouseEvent):void { fullLoader.unload(); fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt))); } } }
类说完了,接下来就来看看fla里面都是怎么写的。 这个就简单多了
import interactive.gallery.ImageGallery; var gallery:ImageGallery = new ImageGallery("data/images.xml","thumb","full"); addChild(gallery);
我不说了,聪明的你一看就明白了。
案例分析到此结束。
源文件下载
经典论坛讨论: http://bbs.blueidea.com/thread-2807809-1-1.html
本文链接:http://www.blueidea.com/tech/multimedia/2007/5175.asp
出处:蓝色理想
责任编辑:moby
◎进入论坛RIA设计与应用版块参加讨论
|