<b>通过实例学习AS3.0——案例六</b>[Flash设计]

首先声明:本人大菜鸟一个,刚接触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);

我不说了,聪明的你一看就懂得了.

案例解析到此完毕.

源文件下载

来自:蓝色抱负