通过实例学习Flash AS3.0——案例六

相关文章: 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隐藏起来，再显示当前的图片。
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);
我不说了，聪明的你一看就明白了。
案例分析到此结束。
源文件下载